@mario_hahn/jumpy-ui 0.5.0

package/dist/index.js

@@ -0,0 +1,3747 @@
+"use client";
+import {
+  JumpyAnimation,
+  JumpyAnimationDelay,
+  JumpyAnimationDuration,
+  JumpyBorderWidth,
+  JumpyOpacity,
+  JumpyRadius,
+  JumpyShadowStyle,
+  JumpySize,
+  JumpySpacing,
+  JumpyTextStyle,
+  JumpyThemeProvider,
+  animationDelayValue,
+  animationDurationValue,
+  animationEasingValue,
+  borderWidthValue,
+  createJumpyTheme,
+  createJumpyThemeFromPreset,
+  defaultJumpyTheme,
+  jumpyThemePresets,
+  opacityValue,
+  radiusValue,
+  shadowValue,
+  sizeValue,
+  spacingValue,
+  textStyleValue,
+  themeToCSSVariables,
+  useJumpyTheme
+} from "./chunk-5QINBZIU.js";
+import {
+  cn
+} from "./chunk-3DBKYKP2.js";
+import {
+  jumpyThemeInventory
+} from "./chunk-XDTVYUWG.js";
+
+// index.js
+import { autoUpdate, flip, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useFloating } from "@floating-ui/react";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var JumpyFieldContext = createContext(null);
+var JumpyTableContext = createContext(null);
+var JumpyExpandableContext = createContext(null);
+var JumpySideMenuContext = createContext(null);
+var JumpyToggleButtonGroupContext = createContext(null);
+var JumpySnackbarContext = createContext({ addSnackbar: () => "", removeSnackbar: () => {
+}, clearAll: () => {
+} });
+var KeyboardKeys = {
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  ARROW_UP: "ArrowUp",
+  END: "End",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  HOME: "Home",
+  SPACE: " ",
+  TAB: "Tab"
+};
+function ChevronDownIcon(props) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, style: { display: "block", fontSize: sizeValue(theme, JumpySize.small), ...props.style || {} }, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M7.41 8.295 6 9.705l6 6 6-6-1.41-1.41-4.59 4.58z", clipRule: "evenodd", fill: "currentColor" }) });
+}
+function ChevronUpIcon(props) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, style: { display: "block", fontSize: sizeValue(theme, JumpySize.small), ...props.style || {} }, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "m16.59 15.705 1.41-1.41-6-6-6 6 1.41 1.41 4.59-4.58z", clipRule: "evenodd", fill: "currentColor" }) });
+}
+function CircleConfirmIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M10 1.667a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm3.775 6.441-4.167 4.167a.833.833 0 0 1-1.178 0l-2.083-2.083a.833.833 0 1 1 1.178-1.179l1.494 1.494 3.577-3.577a.833.833 0 0 1 1.179 1.178Z" }) });
+}
+function CircleErrorIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M10 1.667a8.333 8.333 0 1 0 0 16.666A8.333 8.333 0 0 0 10 1.667Zm0 4.166c.46 0 .833.373.833.834v3.75a.833.833 0 0 1-1.666 0v-3.75c0-.46.373-.834.833-.834Zm0 8.75a1.042 1.042 0 1 1 0-2.083 1.042 1.042 0 0 1 0 2.083Z" }) });
+}
+function CircleClearIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "data-jumpy-stroke-icon": "true", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, style: { display: "block", fill: "none", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m7.5 7.5 5 5M12.5 7.5l-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function supportsDisabledAttribute(tag) {
+  return ["button", "input", "select", "textarea", "option", "optgroup", "fieldset"].includes(tag);
+}
+function responsiveValue(value, defaults) {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return {
+      small: value.small ?? defaults.small,
+      medium: value.medium ?? value.small ?? defaults.medium,
+      large: value.large ?? value.medium ?? value.small ?? defaults.large,
+      xLarge: value.xLarge ?? value.large ?? value.medium ?? value.small ?? defaults.xLarge
+    };
+  }
+  return { small: value, medium: value, large: value, xLarge: value };
+}
+function gridSpacingValue(spacing, fallback = "1rem") {
+  if (Array.isArray(spacing)) return [spacing[0] ?? fallback, spacing[1] ?? fallback];
+  return [spacing ?? fallback, spacing ?? fallback];
+}
+function responsiveGridSpacing(spacing) {
+  const defaults = { small: ["1rem", "1rem"], medium: ["1rem", "1rem"], large: ["1.5rem", "1.5rem"], xLarge: ["1.5rem", "1.5rem"] };
+  if (spacing == null || typeof spacing !== "object" || Array.isArray(spacing)) {
+    return {
+      small: gridSpacingValue(spacing ?? defaults.small, defaults.small[0]),
+      medium: gridSpacingValue(spacing ?? defaults.medium, defaults.medium[0]),
+      large: gridSpacingValue(spacing ?? defaults.large, defaults.large[0]),
+      xLarge: gridSpacingValue(spacing ?? defaults.xLarge, defaults.xLarge[0])
+    };
+  }
+  return {
+    small: gridSpacingValue(spacing.small ?? defaults.small, defaults.small[0]),
+    medium: gridSpacingValue(spacing.medium ?? spacing.small ?? defaults.medium, defaults.medium[0]),
+    large: gridSpacingValue(spacing.large ?? spacing.medium ?? spacing.small ?? defaults.large, defaults.large[0]),
+    xLarge: gridSpacingValue(spacing.xLarge ?? spacing.large ?? spacing.medium ?? spacing.small ?? defaults.xLarge, defaults.xLarge[0])
+  };
+}
+function isValueSelected(selectedValues, value) {
+  return value !== void 0 && Array.isArray(selectedValues) && selectedValues.includes(value);
+}
+function hasSelectedNestedItem(node, selectedValues) {
+  if (!Array.isArray(selectedValues) || !node) return false;
+  let found = false;
+  Children.forEach(node, (child) => {
+    if (found || !isValidElement(child)) return;
+    if (isValueSelected(selectedValues, child.props.value)) {
+      found = true;
+      return;
+    }
+    const nestedMenu = child.props.slots?.nestedMenu ?? child.props.nestedMenu;
+    if (hasSelectedNestedItem(nestedMenu ?? child.props.children, selectedValues)) found = true;
+  });
+  return found;
+}
+function focusSideMenuItem(itemRefs, direction) {
+  const items = itemRefs.map((ref) => ref?.current).filter((item) => item && item.dataset.disabled !== "true");
+  if (!items.length) return;
+  const currentIndex = Math.max(0, items.findIndex((item) => item === document.activeElement || item.contains(document.activeElement)));
+  const nextIndex = direction === "first" ? 0 : direction === "last" ? items.length - 1 : (currentIndex + direction + items.length) % items.length;
+  items[nextIndex]?.focus();
+}
+function transitionTimeToMs(value) {
+  return value.split(",").map((part) => part.trim()).reduce((max, part) => {
+    if (!part) return max;
+    const ms = part.endsWith("ms") ? Number.parseFloat(part) : Number.parseFloat(part) * 1e3;
+    return Number.isFinite(ms) ? Math.max(max, ms) : max;
+  }, 0);
+}
+function getWidthTransitionMs(element) {
+  const styles = window.getComputedStyle(element);
+  const properties = styles.transitionProperty.split(",").map((part) => part.trim());
+  const widthIndex = properties.findIndex((property) => property === "width" || property === "all");
+  if (widthIndex === -1) return 0;
+  return transitionTimeToMs(styles.transitionDuration) + transitionTimeToMs(styles.transitionDelay);
+}
+function splitNavigationItemProps(props) {
+  const linkKeys = /* @__PURE__ */ new Set(["href", "target", "rel", "download", "hrefLang", "ping", "referrerPolicy", "aria-current", "aria-disabled"]);
+  const wrapperProps = {};
+  const linkProps = {};
+  Object.entries(props).forEach(([key, value]) => {
+    if (linkKeys.has(key)) {
+      linkProps[key] = value;
+      return;
+    }
+    wrapperProps[key] = value;
+  });
+  return { wrapperProps, linkProps };
+}
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getButtonVariantStyles(theme, variant, status = "regular") {
+  const variantTokens = theme.actions[variant] || theme.actions.primary;
+  const tokens = variantTokens[status] || variantTokens.regular;
+  const elevated = variant === "primary";
+  return {
+    "--jumpy-action-default-surface": tokens.default.surface,
+    "--jumpy-action-default-text": tokens.default.text,
+    "--jumpy-action-default-border": tokens.default.border,
+    "--jumpy-action-default-icon": tokens.default.icon,
+    "--jumpy-action-hover-surface": tokens.hover.surface,
+    "--jumpy-action-hover-text": tokens.hover.text,
+    "--jumpy-action-hover-icon": tokens.hover.icon,
+    "--jumpy-action-hover-border": tokens.hover.border,
+    "--jumpy-action-pressed-surface": tokens.pressed.surface,
+    "--jumpy-action-pressed-text": tokens.pressed.text,
+    "--jumpy-action-pressed-icon": tokens.pressed.icon,
+    "--jumpy-action-pressed-border": tokens.pressed.border,
+    "--jumpy-action-focus-surface": tokens.focus.surface,
+    "--jumpy-action-focus-text": tokens.focus.text,
+    "--jumpy-action-focus-icon": tokens.focus.icon,
+    "--jumpy-action-focus-border": tokens.focus.border,
+    "--jumpy-action-focus-ring": tokens.focus.focusRing,
+    "--jumpy-action-disabled-surface": tokens.disabled.surface,
+    "--jumpy-action-disabled-text": tokens.disabled.text,
+    "--jumpy-action-disabled-icon": tokens.disabled.icon,
+    "--jumpy-action-disabled-border": tokens.disabled.border,
+    "--jumpy-action-hover-shadow": "none",
+    "--jumpy-action-focus-shadow": elevated ? shadowValue(theme, JumpyShadowStyle.positiveSmall) : "none",
+    "--jumpy-action-pressed-shadow": "none",
+    "--jumpy-action-default-shadow": elevated ? shadowValue(theme, JumpyShadowStyle.positiveMedium) : "none"
+  };
+}
+function getNoticeToneStyles(theme, tone) {
+  switch (tone) {
+    case "success":
+      return {
+        backgroundColor: theme.color.successSurface,
+        borderColor: theme.color.successBorder,
+        color: theme.color.successText
+      };
+    case "warning":
+      return {
+        backgroundColor: theme.color.warningSurface,
+        borderColor: theme.color.warningBorder,
+        color: theme.color.warningText
+      };
+    case "danger":
+      return {
+        backgroundColor: theme.color.dangerSurface,
+        borderColor: theme.color.dangerBorder,
+        color: theme.color.dangerText
+      };
+    default:
+      return {
+        backgroundColor: theme.color.infoSurface,
+        borderColor: theme.color.infoBorder,
+        color: theme.color.textPrimary
+      };
+  }
+}
+function getBannerStatusStyles(theme, status) {
+  switch (status) {
+    case "positive":
+      return { indicator: theme.color.positiveBase, indicatorSurface: theme.color.positiveUltralight, inlineSurface: theme.color.positiveExtralight };
+    case "warning":
+      return { indicator: theme.color.warningBase, indicatorSurface: theme.color.warningUltralight, inlineSurface: theme.color.warningExtralight };
+    case "alarm":
+      return { indicator: theme.color.alarmBase, indicatorSurface: theme.color.alarmUltralight, inlineSurface: theme.color.alarmExtralight };
+    case "info":
+      return { indicator: theme.color.neutralBase, indicatorSurface: theme.color.neutralMegalight, inlineSurface: `rgba(244, 247, 245, ${opacityValue(theme, JumpyOpacity.medium)})` };
+    default:
+      return { indicator: theme.color.neutralBase, indicatorSurface: "transparent", inlineSurface: "transparent" };
+  }
+}
+function JumpSeverityIcon({ status = "other", icon, style }) {
+  if (status === "other" && icon) return icon;
+  const common = {
+    viewBox: "0 0 24 24",
+    width: "100%",
+    height: "100%",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true,
+    focusable: false,
+    style
+  };
+  switch (status) {
+    case "positive":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.3 7.8-5 5a1 1 0 0 1-1.4 0l-2.2-2.2a1 1 0 1 1 1.4-1.4l1.5 1.5 4.3-4.3a1 1 0 1 1 1.4 1.4Z" }) });
+    case "warning":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { d: "M11.1 3.5a1 1 0 0 1 1.8 0l8.2 15A1 1 0 0 1 20.2 20H3.8a1 1 0 0 1-.9-1.5l8.2-15ZM12 8a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V9a1 1 0 0 0-1-1Zm0 9.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" }) });
+    case "alarm":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 13a1 1 0 1 1-2 0V7a1 1 0 1 1 2 0v8Zm-1 4a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" }) });
+    case "info":
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15a1 1 0 1 1-2 0v-6a1 1 0 1 1 2 0v6Zm-1-8.5A1.25 1.25 0 1 1 12 6a1.25 1.25 0 0 1 0 2.5Z" }) });
+    default:
+      return /* @__PURE__ */ jsx("svg", { ...common, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }) });
+  }
+}
+function renderBannerSlot(slot, fallbackTag = "span", className, style) {
+  if (!slot) return null;
+  if (typeof slot === "string" || typeof slot === "number") {
+    const Tag = fallbackTag;
+    return /* @__PURE__ */ jsx(Tag, { className, style, children: slot });
+  }
+  if (isValidElement(slot)) {
+    return cloneElement(slot, {
+      className: cn(className, slot.props.className),
+      style: slot.props.style || style ? { ...style, ...slot.props.style } : void 0
+    });
+  }
+  return slot;
+}
+function getBadgeStatusStyles(theme, status) {
+  switch (status) {
+    case "positive":
+      return { backgroundColor: theme.color.positiveBase, color: theme.color.nonColorContrastUltralight };
+    case "warning":
+      return { backgroundColor: theme.color.warningBase, color: theme.color.nonColorAlwaysUltradark };
+    case "alarm":
+      return { backgroundColor: theme.color.alarmBase, color: theme.color.nonColorContrastUltralight };
+    case "active":
+      return { backgroundColor: "var(--jumpy-color-primary-base)", color: theme.color.nonColorContrastUltralight };
+    default:
+      return { backgroundColor: theme.color.neutralBase, color: theme.color.nonColorContrastUltralight };
+  }
+}
+function getBadgeSizeStyles(theme, size2) {
+  const labelSmall = textStyleValue(theme, JumpyTextStyle.labelSmallEmphasized);
+  const labelMedium = textStyleValue(theme, JumpyTextStyle.labelMediumEmphasized);
+  switch (size2) {
+    case "xSmall":
+      return {
+        width: sizeValue(theme, JumpySize.small3XS),
+        height: sizeValue(theme, JumpySize.small3XS),
+        minWidth: sizeValue(theme, JumpySize.small3XS),
+        padding: spacingValue(theme, JumpySpacing.zero),
+        fontSize: 0,
+        lineHeight: 0
+      };
+    case "medium":
+      return {
+        minWidth: sizeValue(theme, JumpySize.small),
+        height: sizeValue(theme, JumpySize.small),
+        padding: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px`,
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelMedium.fontSize,
+        lineHeight: labelMedium.lineHeight,
+        fontWeight: labelMedium.fontWeight
+      };
+    default:
+      return {
+        minWidth: sizeValue(theme, JumpySize.small2XS),
+        height: sizeValue(theme, JumpySize.small2XS),
+        padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`,
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelSmall.fontSize,
+        lineHeight: labelSmall.lineHeight,
+        fontWeight: labelSmall.fontWeight
+      };
+  }
+}
+function getTagStatusStyles(theme, status) {
+  switch (status) {
+    case "positive":
+      return { backgroundColor: theme.color.successSurface, color: theme.color.successText, borderColor: theme.color.successBorder };
+    case "warning":
+      return { backgroundColor: theme.color.warningSurface, color: theme.color.warningText, borderColor: theme.color.warningBorder };
+    case "alarm":
+      return { backgroundColor: theme.color.dangerSurface, color: theme.color.dangerText, borderColor: theme.color.dangerBorder };
+    default:
+      return { backgroundColor: theme.color.surfaceField, color: theme.color.textPrimary, borderColor: theme.color.borderSubtle };
+  }
+}
+function getTypographyStyle(theme, variant = "bodyMedium") {
+  const style = textStyleValue(theme, JumpyTextStyle[variant] || JumpyTextStyle.bodyMedium);
+  return {
+    fontFamily: theme.fontFamily.familyBase,
+    fontSize: style.fontSize,
+    lineHeight: style.lineHeight,
+    fontWeight: style.fontWeight,
+    letterSpacing: style.letterSpacing
+  };
+}
+function getCardStateStyles(theme, selected = false) {
+  const inactive = theme.card.inactive;
+  const active = theme.card.active;
+  const tokens = selected ? active : inactive;
+  const state = selected ? "active" : "inactive";
+  const cardToken = (interaction, slot, fallback) => `var(--jumpy-card-${state}-${interaction}-${slot}, ${fallback})`;
+  return {
+    "--jumpy-card-default-surface": cardToken("default", "surface", tokens.default.surface),
+    "--jumpy-card-default-border": cardToken("default", "border", tokens.default.border),
+    "--jumpy-card-default-text": cardToken("default", "text", tokens.default.text),
+    "--jumpy-card-default-icon": cardToken("default", "icon", tokens.default.icon),
+    "--jumpy-card-hover-surface": cardToken("hover", "surface", tokens.hover.surface),
+    "--jumpy-card-hover-border": cardToken("hover", "border", tokens.hover.border),
+    "--jumpy-card-hover-text": cardToken("hover", "text", tokens.hover.text),
+    "--jumpy-card-hover-icon": cardToken("hover", "icon", tokens.hover.icon),
+    "--jumpy-card-pressed-surface": cardToken("pressed", "surface", tokens.pressed.surface),
+    "--jumpy-card-pressed-border": cardToken("pressed", "border", tokens.pressed.border),
+    "--jumpy-card-pressed-text": cardToken("pressed", "text", tokens.pressed.text),
+    "--jumpy-card-pressed-icon": cardToken("pressed", "icon", tokens.pressed.icon),
+    "--jumpy-card-focus-surface": cardToken("focus", "surface", tokens.focus.surface),
+    "--jumpy-card-focus-border": cardToken("focus", "border", tokens.focus.border),
+    "--jumpy-card-focus-ring": cardToken("focus-focus", "ring", tokens.focus.focusRing),
+    "--jumpy-card-focus-text": cardToken("focus", "text", tokens.focus.text),
+    "--jumpy-card-focus-icon": cardToken("focus", "icon", tokens.focus.icon),
+    "--jumpy-card-disabled-surface": cardToken("disabled", "surface", tokens.disabled.surface),
+    "--jumpy-card-disabled-border": cardToken("disabled", "border", tokens.disabled.border),
+    "--jumpy-card-disabled-text": cardToken("disabled", "text", tokens.disabled.text),
+    "--jumpy-card-disabled-icon": cardToken("disabled", "icon", tokens.disabled.icon)
+  };
+}
+function getListItemStateStyles(theme, selected = false) {
+  const tokens = selected ? theme.listItem.active : theme.listItem.inactive;
+  return {
+    "--jumpy-list-item-default-surface": tokens.default.surface,
+    "--jumpy-list-item-default-text": tokens.default.text,
+    "--jumpy-list-item-default-subtext": tokens.default.subtext,
+    "--jumpy-list-item-default-icon": tokens.default.icon,
+    "--jumpy-list-item-hover-surface": tokens.hover.surface,
+    "--jumpy-list-item-hover-text": tokens.hover.text,
+    "--jumpy-list-item-hover-subtext": tokens.hover.subtext,
+    "--jumpy-list-item-hover-icon": tokens.hover.icon,
+    "--jumpy-list-item-pressed-surface": tokens.pressed.surface,
+    "--jumpy-list-item-pressed-text": tokens.pressed.text,
+    "--jumpy-list-item-pressed-subtext": tokens.pressed.subtext,
+    "--jumpy-list-item-pressed-icon": tokens.pressed.icon,
+    "--jumpy-list-item-focus-surface": tokens.focus.surface,
+    "--jumpy-list-item-focus-text": tokens.focus.text,
+    "--jumpy-list-item-focus-subtext": tokens.focus.subtext,
+    "--jumpy-list-item-focus-icon": tokens.focus.icon,
+    "--jumpy-list-item-focus-ring": tokens.focus.focusRing,
+    "--jumpy-list-item-disabled-surface": tokens.disabled.surface,
+    "--jumpy-list-item-disabled-text": tokens.disabled.text,
+    "--jumpy-list-item-disabled-subtext": tokens.disabled.subtext,
+    "--jumpy-list-item-disabled-icon": tokens.disabled.icon
+  };
+}
+function getButtonSpacing(theme, variant, hasLeading, hasTrailing) {
+  const gap = spacingValue(theme, JumpySpacing.smallXS);
+  const verticalPadding = spacingValue(theme, JumpySpacing.small2XS);
+  if (variant === "borderless") {
+    return {
+      gap,
+      paddingLeft: spacingValue(theme, JumpySpacing.zero),
+      paddingRight: spacingValue(theme, JumpySpacing.zero),
+      paddingTop: verticalPadding,
+      paddingBottom: verticalPadding
+    };
+  }
+  return {
+    gap,
+    paddingLeft: hasLeading ? spacingValue(theme, JumpySpacing.medium) : spacingValue(theme, JumpySpacing.medium) + spacingValue(theme, JumpySpacing.small3XS),
+    paddingRight: hasTrailing ? spacingValue(theme, JumpySpacing.medium) : spacingValue(theme, JumpySpacing.medium) + spacingValue(theme, JumpySpacing.small3XS),
+    paddingTop: verticalPadding,
+    paddingBottom: verticalPadding
+  };
+}
+function getFieldInputStyles(theme, disabled) {
+  const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  return {
+    display: "block",
+    width: "100%",
+    boxSizing: "border-box",
+    color: "var(--jumpy-cmp-base-input-value-color)",
+    padding: 0,
+    margin: 0,
+    border: 0,
+    outline: 0,
+    background: "transparent",
+    opacity: disabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid),
+    fontFamily: theme.fontFamily.familyBase,
+    fontSize: bodyMedium.fontSize,
+    lineHeight: `${bodyMedium.fontSize * bodyMedium.lineHeight}px`,
+    transition: `color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}`
+  };
+}
+function getFieldShellStyles(theme, disabled, status = "regular", focused = false, readOnly = false) {
+  const outlineWidth = borderWidthValue(theme, focused && !readOnly ? JumpyBorderWidth.medium : JumpyBorderWidth.small);
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    minHeight: sizeValue(theme, JumpySize.largeXL),
+    height: sizeValue(theme, JumpySize.largeXL),
+    boxSizing: "border-box",
+    borderRadius: radiusValue(theme, JumpyRadius.small),
+    border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid transparent`,
+    outline: readOnly ? "none" : `${outlineWidth}px solid var(--jumpy-cmp-base-input-border-color)`,
+    outlineOffset: readOnly ? void 0 : -outlineWidth,
+    backgroundColor: "var(--jumpy-cmp-base-input-surface-color)",
+    paddingLeft: spacingValue(theme, JumpySpacing.large),
+    paddingRight: spacingValue(theme, JumpySpacing.small3XS),
+    paddingTop: spacingValue(theme, JumpySpacing.small3XS),
+    paddingBottom: spacingValue(theme, JumpySpacing.small3XS),
+    opacity: disabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid),
+    gap: spacingValue(theme, JumpySpacing.medium),
+    cursor: disabled || readOnly ? "default" : "text",
+    pointerEvents: disabled ? "none" : void 0,
+    transition: `background-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}, outline-color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}, outline-width ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingRelease}`
+  };
+}
+function renderStandaloneField(theme, disabled, className, style, inputElement, status = "regular", readOnly = false) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-jumpy-component": "field-control",
+      "data-disabled": disabled ? "true" : "false",
+      "data-readonly": readOnly ? "true" : "false",
+      "data-status": status,
+      className: cn(className),
+      style: {
+        ...getFieldShellStyles(theme, disabled, status, false, readOnly),
+        ...style || {}
+      },
+      children: inputElement
+    }
+  );
+}
+function JumpBackground({ snow = true }) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-none fixed inset-0 z-0 overflow-hidden", style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-[-18rem] h-[34rem] w-[34rem] -translate-x-1/2 rounded-full blur-[120px]", style: { backgroundColor: theme.color.infoSurface } }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-24 right-[-10rem] h-[28rem] w-[28rem] rounded-full blur-[110px]", style: { backgroundColor: theme.color.borderSubtle } }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(rgba(26,28,31,0.16)_1px,transparent_1px)] bg-[size:22px_22px]", style: { opacity: theme.opacity.subtle } }),
+    snow && /* @__PURE__ */ jsx("div", { className: "snowfall", "aria-hidden": "true" })
+  ] });
+}
+function JumpBadge({ as, size: size2 = "medium", status = "regular", hidden = false, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const visible = !hidden;
+  const Root = as || "div";
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ...props,
+      "data-jumpy-component": "badge",
+      "data-size": size2,
+      "data-status": status,
+      "data-visible": visible ? "true" : "false",
+      role: props.role || "status",
+      "aria-live": props["aria-live"] || "polite",
+      "aria-hidden": hidden || void 0,
+      className: cn("inline-flex items-center justify-center box-border", className),
+      style: {
+        ...getBadgeSizeStyles(theme, size2),
+        ...getBadgeStatusStyles(theme, status),
+        borderRadius: radiusValue(theme, JumpyRadius.full),
+        letterSpacing: "normal",
+        opacity: visible ? opacityValue(theme, JumpyOpacity.solid) : opacityValue(theme, JumpyOpacity.transparent),
+        scale: visible ? 1 : 0.25,
+        width: size2 === "xSmall" ? sizeValue(theme, JumpySize.small3XS) : "fit-content",
+        transition: `width ${animationDurationValue(theme, JumpyAnimationDuration.medium)}s ${theme.animation.timeEasingDrift}, opacity ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${visible ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}, scale ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${visible ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`,
+        ...props.style || {}
+      },
+      children: size2 === "xSmall" ? null : /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "badge-content", style: { display: "inline-block", lineHeight: "inherit", transform: "translateY(1px)", fontVariantNumeric: "tabular-nums" }, children })
+    }
+  );
+}
+function BrandMark({ compact = false, label = "Jumpy UI" }) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", !compact && "justify-center"), children: [
+    /* @__PURE__ */ jsx("div", { className: "grid h-10 w-10 place-items-center rounded-xl text-xl font-black", style: { backgroundColor: theme.color.surfaceCard, color: theme.color.surfacePrimary, borderRadius: theme.radius.medium }, children: "J" }),
+    /* @__PURE__ */ jsx("span", { className: "block text-lg font-extrabold tracking-tight", style: { color: theme.color.textPrimary, fontFamily: theme.typography.fontFamily }, children: label })
+  ] });
+}
+function JumpCard({ as, children, className = "", variant = "filled", interactive = false, selected = false, disabled = false, dragged = false, innerClasses = {}, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  const isButton = Component === "button";
+  const activity = selected ? "active" : "inactive";
+  const draggedStyles = dragged && !disabled ? {
+    borderColor: `var(--jumpy-card-${activity}-dragged-border)`,
+    backgroundColor: `var(--jumpy-card-${activity}-dragged-surface)`
+  } : {};
+  const hasPaddingUtility = /(?:^|\s)(?:[a-z]+:)*p(?:[trblxy])?-/.test(className);
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      type: isButton ? props.type || "button" : props.type,
+      disabled: isButton ? disabled : void 0,
+      "data-jumpy-component": "card",
+      "data-variant": variant,
+      "data-interactive": interactive ? "true" : "false",
+      "data-selected": selected ? "true" : "false",
+      "data-dragged": dragged ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      tabIndex: interactive && !disabled ? props.tabIndex ?? 0 : props.tabIndex,
+      "aria-disabled": disabled || void 0,
+      className: cn(className),
+      style: {
+        ...getCardStateStyles(theme, selected),
+        display: "block",
+        position: "relative",
+        boxSizing: "border-box",
+        overflow: "hidden",
+        appearance: isButton ? "none" : void 0,
+        WebkitAppearance: isButton ? "none" : void 0,
+        outline: "none",
+        border: 0,
+        borderRadius: theme.sizing.cardRadius,
+        padding: props.style?.padding === void 0 && !hasPaddingUtility ? spacingValue(theme, JumpySpacing.large) : void 0,
+        backgroundColor: "var(--jumpy-card-default-surface)",
+        boxShadow: variant === "filled" ? theme.shadow.card : "none",
+        color: "var(--jumpy-card-default-text, var(--jumpy-color-text-primary))",
+        ...draggedStyles,
+        ...props.style || {}
+      },
+      children: [
+        interactive && selected ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "checkmark", className: innerClasses.checkmark?.className, style: { position: "absolute", right: "var(--jumpy-cmp-card-checkmark-right)", top: "var(--jumpy-cmp-card-checkmark-top)", display: "flex", color: "var(--jumpy-card-default-icon)", ...innerClasses.checkmark?.style || {} }, children: /* @__PURE__ */ jsx(CircleConfirmIcon, { "data-jumpy-slot": "checkmark-icon", className: innerClasses.checkmarkIcon?.className, style: { width: sizeValue(theme, JumpySize.small), height: sizeValue(theme, JumpySize.small), ...innerClasses.checkmarkIcon?.style || {} } }) }) : null,
+        children
+      ]
+    }
+  );
+}
+function JumpGrid({ as, columns = { small: 8, medium: 12, large: 12, xLarge: 12 }, spacing = { small: ["1rem", "1rem"], medium: ["1rem", "1rem"], large: ["1.5rem", "1.5rem"], xLarge: ["1.5rem", "1.5rem"] }, children, className = "", ...props }) {
+  const Component = as || "div";
+  const resolvedColumns = responsiveValue(columns, { small: 8, medium: 12, large: 12, xLarge: 12 });
+  const resolvedSpacing = responsiveGridSpacing(spacing);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "grid",
+      className: cn(className),
+      style: {
+        "--jumpy-cmp-grid-columns-small": resolvedColumns.small,
+        "--jumpy-cmp-grid-columns-medium": resolvedColumns.medium,
+        "--jumpy-cmp-grid-columns-large": resolvedColumns.large,
+        "--jumpy-cmp-grid-columns-xLarge": resolvedColumns.xLarge,
+        "--jumpy-cmp-grid-spacing-row-small": resolvedSpacing.small[0],
+        "--jumpy-cmp-grid-spacing-column-small": resolvedSpacing.small[1],
+        "--jumpy-cmp-grid-spacing-row-medium": resolvedSpacing.medium[0],
+        "--jumpy-cmp-grid-spacing-column-medium": resolvedSpacing.medium[1],
+        "--jumpy-cmp-grid-spacing-row-large": resolvedSpacing.large[0],
+        "--jumpy-cmp-grid-spacing-column-large": resolvedSpacing.large[1],
+        "--jumpy-cmp-grid-spacing-row-xLarge": resolvedSpacing.xLarge[0],
+        "--jumpy-cmp-grid-spacing-column-xLarge": resolvedSpacing.xLarge[1],
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpGridItem({ as, span = 1, horizontalPlacement = "stretch", verticalPlacement = "stretch", children, className = "", ...props }) {
+  const Component = as || "div";
+  const resolvedSpan = responsiveValue(span, { small: 1, medium: 1, large: 1, xLarge: 1 });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "grid-item",
+      "data-horizontal-placement": horizontalPlacement,
+      "data-vertical-placement": verticalPlacement,
+      className: cn(className),
+      style: {
+        "--jumpy-cmp-grid-item-span-small": resolvedSpan.small,
+        "--jumpy-cmp-grid-item-span-medium": resolvedSpan.medium,
+        "--jumpy-cmp-grid-item-span-large": resolvedSpan.large,
+        "--jumpy-cmp-grid-item-span-xLarge": resolvedSpan.xLarge,
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpList({ as, children, className = "", ...props }) {
+  const Component = as || "div";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "list",
+      role: props.role || "list",
+      className: cn(className),
+      style: {
+        display: "block",
+        width: "100%",
+        height: "fit-content",
+        overflowX: "hidden",
+        overflowY: "auto",
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpListItem({ as, children, className = "", selected = false, disabled = false, readOnly = false, focusedView = false, leading, trailing, metadata, description, slots = {}, nestedCollapsed, defaultNestedCollapsed = true, onNestedCollapsedChange, truncateTexts = false, innerClasses = {}, ref, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const componentName = props["data-jumpy-component"] || "list-item";
+  const resolvedLeading = slots.leading ?? leading;
+  const resolvedTrailing = slots.trailing ?? trailing;
+  const resolvedMetadata = slots.metadata ?? metadata;
+  const resolvedDescription = slots.description ?? description;
+  const resolvedSelector = slots.selector;
+  const resolvedNestedList = slots.nestedList;
+  const [internalNestedCollapsed, setInternalNestedCollapsed] = useState(defaultNestedCollapsed);
+  const isNestedCollapsed = nestedCollapsed ?? internalNestedCollapsed;
+  const hasNestedList = Boolean(resolvedNestedList);
+  const isDisabled = disabled || readOnly;
+  const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  const bodySmall = textStyleValue(theme, JumpyTextStyle.bodySmall);
+  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
+  const iconSize = sizeValue(theme, JumpySize.small2XS);
+  const handleExpandedChange = () => {
+    const nextCollapsed = !isNestedCollapsed;
+    if (nestedCollapsed === void 0) setInternalNestedCollapsed(nextCollapsed);
+    onNestedCollapsedChange?.(nextCollapsed);
+  };
+  const handleClick = (event) => {
+    if (isDisabled) return;
+    if (hasNestedList) handleExpandedChange();
+    props.onClick?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if ((event.key === KeyboardKeys.ENTER || event.key === KeyboardKeys.SPACE) && hasNestedList && !isDisabled) {
+      event.preventDefault();
+      handleExpandedChange();
+    }
+    props.onKeyDown?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      ref,
+      type: isButton ? props.type || "button" : props.type,
+      disabled: isButton ? disabled : void 0,
+      "aria-disabled": !isButton && isDisabled ? true : void 0,
+      "aria-current": selected ? props["aria-current"] || "true" : props["aria-current"],
+      "aria-selected": props.role === "option" || props.role === "treeitem" ? selected : props["aria-selected"],
+      "aria-expanded": hasNestedList ? !isNestedCollapsed : props["aria-expanded"],
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "data-jumpy-component": componentName,
+      "data-selected": selected ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-readonly": readOnly ? "true" : "false",
+      "data-focused-view": focusedView ? "true" : void 0,
+      role: props.role || "listitem",
+      className: cn("text-left", className),
+      style: {
+        ...getListItemStateStyles(theme, selected),
+        display: "grid",
+        gridTemplateColumns: `${resolvedSelector ? "min-content " : ""}${resolvedLeading ? "min-content " : ""}minmax(0, 1fr) ${resolvedMetadata ? "minmax(0, min-content) " : ""}${resolvedTrailing || hasNestedList ? "min-content" : ""}`,
+        gridTemplateRows: resolvedDescription ? "auto auto" : "auto",
+        alignItems: "center",
+        gap: spacingValue(theme, JumpySpacing.large),
+        width: "100%",
+        minHeight: sizeValue(theme, JumpySize.large) + spacingValue(theme, JumpySpacing.large),
+        boxSizing: "border-box",
+        padding: `${spacingValue(theme, JumpySpacing.medium)}px ${spacingValue(theme, JumpySpacing.large)}px`,
+        border: 0,
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        backgroundColor: componentName === "side-menu-item" ? "var(--jumpy-list-item-surface, var(--jumpy-list-item-default-surface))" : "transparent",
+        color: "var(--jumpy-list-item-color, var(--jumpy-list-item-default-text))",
+        cursor: disabled ? "not-allowed" : readOnly ? "default" : "pointer",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: bodyMedium.fontSize,
+        lineHeight: bodyMedium.lineHeight,
+        fontWeight: bodyMedium.fontWeight,
+        opacity: disabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid),
+        pointerEvents: readOnly ? "none" : void 0,
+        position: "relative",
+        zIndex: 1,
+        ...props.style || {}
+      },
+      children: [
+        resolvedSelector ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "selector", "aria-hidden": props.role === "option" || props.role === "treeitem" ? "true" : void 0, className: innerClasses.selector?.className, style: { display: "inline-flex", pointerEvents: "none", color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.selector?.style || {} }, children: resolvedSelector }) : null,
+        resolvedLeading ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "leading", "aria-hidden": "true", className: innerClasses.leading?.className, style: { display: "inline-flex", width: iconSize, height: iconSize, color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.leading?.style || {} }, children: resolvedLeading }) : null,
+        /* @__PURE__ */ jsxs("span", { style: { display: "grid", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "label", "data-truncate": truncateTexts ? "true" : void 0, "data-text": typeof children === "string" ? children : void 0, className: innerClasses.label?.className, style: { minWidth: 0, maxWidth: "100%", overflowWrap: "anywhere", wordBreak: "break-word", fontWeight: selected ? bodyMediumEmphasized.fontWeight : bodyMedium.fontWeight, ...innerClasses.label?.style || {} }, children }),
+          resolvedDescription ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "description", className: innerClasses.description?.className, style: { color: selected ? theme.listItem.active.default.subtext : theme.listItem.inactive.default.subtext, fontSize: bodySmall.fontSize, lineHeight: bodySmall.lineHeight, ...innerClasses.description?.style || {} }, children: resolvedDescription }) : null
+        ] }),
+        resolvedMetadata ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "metadata", className: innerClasses.metadata?.className, style: { color: selected ? theme.listItem.active.default.subtext : theme.listItem.inactive.default.subtext, whiteSpace: "nowrap", fontSize: bodySmall.fontSize, lineHeight: bodySmall.lineHeight, ...innerClasses.metadata?.style || {} }, children: resolvedMetadata }) : null,
+        resolvedTrailing || hasNestedList ? /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "trailing", "aria-hidden": "true", className: innerClasses.trailing?.className, style: { display: "inline-flex", color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.trailing?.style || {} }, children: [
+          resolvedTrailing,
+          hasNestedList ? /* @__PURE__ */ jsx(JumpIconButton, { as: "span", variant: "secondary", alternateHover: true, tabIndex: -1, "aria-hidden": "true", children: isNestedCollapsed ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}) }) : null
+        ] }) : null,
+        hasNestedList ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "nested-list", "aria-hidden": isNestedCollapsed ? "true" : void 0, style: { gridColumn: "1 / -1", display: isNestedCollapsed ? "none" : "block" }, children: resolvedNestedList }) : null
+      ]
+    }
+  );
+}
+function JumpSideMenu({ as, children, className = "", collapsed = false, selected, disabled = false, disableKeyboardNavigation = false, renderMode, getItemProps, onChange, onKeyDown, onTransitionEnd, ...props }) {
+  const Component = as || "ul";
+  const theme = useJumpyTheme();
+  const elementRef = useRef(null);
+  const itemRefs = useRef([]);
+  const previousCollapsed = useRef(collapsed);
+  const releaseTimer = useRef(void 0);
+  const [isResizing, setIsResizing] = useState(false);
+  useLayoutEffect(() => {
+    if (previousCollapsed.current === collapsed) return void 0;
+    previousCollapsed.current = collapsed;
+    const element = elementRef.current;
+    if (!element) return void 0;
+    const transitionMs = getWidthTransitionMs(element);
+    if (!transitionMs) return void 0;
+    setIsResizing(true);
+    window.clearTimeout(releaseTimer.current);
+    releaseTimer.current = window.setTimeout(() => setIsResizing(false), transitionMs + 100);
+    return void 0;
+  }, [collapsed]);
+  useEffect(() => () => window.clearTimeout(releaseTimer.current), []);
+  const selectItem = (value) => {
+    if (disabled || value === void 0) return;
+    onChange?.([value]);
+  };
+  const handleKeyDown = (event) => {
+    if (!disableKeyboardNavigation) {
+      if (event.key === KeyboardKeys.ARROW_DOWN || event.key === KeyboardKeys.ARROW_RIGHT) {
+        event.preventDefault();
+        focusSideMenuItem(itemRefs.current, 1);
+      } else if (event.key === KeyboardKeys.ARROW_UP || event.key === KeyboardKeys.ARROW_LEFT) {
+        event.preventDefault();
+        focusSideMenuItem(itemRefs.current, -1);
+      } else if (event.key === KeyboardKeys.HOME) {
+        event.preventDefault();
+        focusSideMenuItem(itemRefs.current, "first");
+      } else if (event.key === KeyboardKeys.END) {
+        event.preventDefault();
+        focusSideMenuItem(itemRefs.current, "last");
+      }
+    }
+    onKeyDown?.(event);
+  };
+  const handleTransitionEnd = (event) => {
+    onTransitionEnd?.(event);
+    if (event.target === event.currentTarget && event.propertyName === "width") {
+      window.clearTimeout(releaseTimer.current);
+      setIsResizing(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(JumpySideMenuContext.Provider, { value: { collapsed, disabled, selected, onSelect: selectItem, containerExpanded: isResizing || !collapsed, renderMode, getItemProps, disableKeyboardNavigation, itemRefs }, children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      ref: elementRef,
+      "data-jumpy-component": "side-menu",
+      "data-menu-collapsed": collapsed ? "true" : void 0,
+      "data-menu-resizing": isResizing || props["data-menu-resizing"] === "true" ? "true" : void 0,
+      "aria-disabled": disabled || void 0,
+      onKeyDown: handleKeyDown,
+      onTransitionEnd: handleTransitionEnd,
+      className: cn(className),
+      style: {
+        display: "block",
+        width: "fit-content",
+        height: "fit-content",
+        overflowX: "hidden",
+        overflowY: "auto",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        transition: `width ${animationDurationValue(theme, collapsed ? JumpyAnimationDuration.small2XS : JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingDrift}`,
+        ...collapsed && !isResizing ? { minWidth: "min-content" } : {},
+        ...props.style || {}
+      },
+      children
+    }
+  ) });
+}
+function JumpSideMenuItem({ as, children, value, selected = false, disabled = false, className = "", icon, badge, collapsed, slots, metadata, description, nestedMenu, nestedCollapsed, defaultNestedCollapsed = false, onNestedCollapsedChange, renderMode, focusedView, truncateTexts = false, tooltipProps, innerClasses = {}, wrapperProps = {}, expanderIconProps = {}, onClick, onKeyDown, ...props }) {
+  const theme = useJumpyTheme();
+  const sideMenu = useContext(JumpySideMenuContext);
+  const itemRef = useRef(null);
+  const wrapperItemRef = useRef(null);
+  const isCollapsed = sideMenu ? !sideMenu.containerExpanded : collapsed ?? false;
+  const resolvedRenderMode = sideMenu?.renderMode ?? renderMode ?? "navigation";
+  const selectedValues = sideMenu?.selected;
+  const resolvedNestedMenu = slots?.nestedMenu ?? nestedMenu;
+  const resolvedMetadata = slots?.metadata ?? metadata;
+  const isSelected = isValueSelected(selectedValues, value) || selected;
+  const isDisabled = disabled || sideMenu?.disabled;
+  const resolvedTabIndex = focusedView ? 0 : sideMenu && !sideMenu.disableKeyboardNavigation && Array.isArray(selectedValues) ? isSelected ? 0 : -1 : props.tabIndex;
+  const hasNested = Boolean(resolvedNestedMenu);
+  const hasSelectedChildren = hasSelectedNestedItem(resolvedNestedMenu, selectedValues);
+  const [internalNestedCollapsed, setInternalNestedCollapsed] = useState(defaultNestedCollapsed);
+  const isNestedCollapsed = nestedCollapsed ?? internalNestedCollapsed;
+  const iconNode = typeof icon === "function" ? icon({ selected: isSelected }) : icon;
+  const badgeNode = typeof badge === "function" ? badge({ selected: isSelected, collapsed: isCollapsed }) : badge;
+  const handleItemClick = (event) => {
+    if (isDisabled) return;
+    if (hasNested) {
+      const nextCollapsed = !isNestedCollapsed;
+      onNestedCollapsedChange?.(nextCollapsed);
+      if (nestedCollapsed === void 0) setInternalNestedCollapsed(nextCollapsed);
+    } else {
+      sideMenu?.onSelect?.(value);
+    }
+    onClick?.(event);
+  };
+  const handleItemKeyDown = (event) => {
+    if ((event.key === KeyboardKeys.ENTER || event.key === KeyboardKeys.SPACE) && !isDisabled) {
+      event.preventDefault();
+      handleItemClick(event);
+    }
+    onKeyDown?.(event);
+  };
+  const itemInteractionProps = sideMenu?.getItemProps?.({ onClick: handleItemClick, onKeyDown: handleItemKeyDown }) ?? {};
+  const { onClick: interactionOnClick, onKeyDown: interactionOnKeyDown, ...restItemInteractionProps } = itemInteractionProps;
+  const { wrapperProps: splitWrapperProps, linkProps } = resolvedRenderMode === "navigation" ? splitNavigationItemProps(props) : { wrapperProps: {}, linkProps: props };
+  useEffect(() => {
+    if (!sideMenu?.itemRefs) return void 0;
+    const registryItem = isCollapsed && resolvedRenderMode === "navigation" ? wrapperItemRef : itemRef;
+    sideMenu.itemRefs.current.push(registryItem);
+    return () => {
+      sideMenu.itemRefs.current = sideMenu.itemRefs.current.filter((item) => item !== registryItem);
+    };
+  }, [isCollapsed, resolvedRenderMode, sideMenu?.itemRefs]);
+  const withTooltip = (node) => {
+    if (!tooltipProps?.content) return node;
+    const { content, ...restTooltipProps } = tooltipProps;
+    return /* @__PURE__ */ jsx(JumpTooltip, { ...restTooltipProps, content, children: node });
+  };
+  const trailingNode = hasNested ? /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "expander", "aria-hidden": "true", className: innerClasses.expander?.className, style: { display: "inline-flex", alignItems: "center", gap: spacingValue(theme, JumpySpacing.small), ...innerClasses.expander?.style || {} }, children: [
+    badgeNode,
+    /* @__PURE__ */ jsx("span", { ...expanderIconProps, "data-jumpy-slot": "expander-icon", className: cn(innerClasses.expanderIcon?.className, expanderIconProps.className), style: { display: "inline-flex", transform: isNestedCollapsed ? "rotate(0deg)" : "rotate(180deg)", transition: `transform ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${theme.animation.timeEasingDrift}`, ...innerClasses.expanderIcon?.style || {}, ...expanderIconProps.style || {} }, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+  ] }) : badgeNode;
+  if (isCollapsed) {
+    const Component = as || (resolvedRenderMode === "navigation" ? "a" : "button");
+    const isButton = Component === "button";
+    const tokens = isSelected ? theme.listItem.active.default : theme.listItem.inactive.default;
+    const labelStyle = textStyleValue(theme, isSelected ? JumpyTextStyle.labelMediumEmphasized : JumpyTextStyle.labelMedium);
+    const collapsedWrapperInteractiveProps = resolvedRenderMode === "navigation" ? {
+      ref: wrapperItemRef,
+      tabIndex: resolvedTabIndex,
+      onClick: (event) => {
+        splitWrapperProps.onClick?.(event);
+        wrapperProps.onClick?.(event);
+        if (!event.defaultPrevented && event.target === event.currentTarget) itemRef.current?.click();
+      },
+      onKeyDown: (event) => {
+        splitWrapperProps.onKeyDown?.(event);
+        wrapperProps.onKeyDown?.(event);
+        if (!event.defaultPrevented && (event.key === KeyboardKeys.ENTER || event.key === KeyboardKeys.SPACE)) {
+          event.preventDefault();
+          itemRef.current?.click();
+        }
+      }
+    } : {};
+    return /* @__PURE__ */ jsxs("li", { ...splitWrapperProps, ...wrapperProps, ...collapsedWrapperInteractiveProps, "data-jumpy-component": "side-menu-item-wrapper", "aria-expanded": hasNested ? !isNestedCollapsed : void 0, className: cn(innerClasses.selector?.className, splitWrapperProps.className, wrapperProps.className), style: { display: "block", margin: 0, padding: 0, ...splitWrapperProps.style || {}, ...innerClasses.selector?.style || {}, ...wrapperProps.style || {} }, children: [
+      withTooltip(
+        /* @__PURE__ */ jsxs(
+          Component,
+          {
+            ...linkProps,
+            ref: itemRef,
+            ...restItemInteractionProps,
+            onClick: interactionOnClick ?? handleItemClick,
+            onKeyDown: interactionOnKeyDown ?? handleItemKeyDown,
+            type: isButton ? linkProps.type || "button" : linkProps.type,
+            disabled: isButton ? isDisabled : void 0,
+            "aria-disabled": !isButton && isDisabled ? true : void 0,
+            "aria-current": isSelected ? linkProps["aria-current"] || "page" : linkProps["aria-current"],
+            role: !isButton && !linkProps.href ? linkProps.role || "link" : linkProps.role,
+            tabIndex: resolvedRenderMode === "navigation" ? -1 : resolvedTabIndex,
+            "data-jumpy-component": "side-menu-item",
+            "data-collapsed": "true",
+            "data-selected": isSelected ? "true" : "false",
+            "data-disabled": isDisabled ? "true" : "false",
+            "data-value": !hasNested ? value : void 0,
+            "data-has-selected-children": hasSelectedChildren ? "true" : void 0,
+            "data-focused-view": focusedView ? "true" : void 0,
+            className: cn(className, innerClasses.collapsedLabel?.className),
+            style: {
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "100%",
+              minWidth: sizeValue(theme, JumpySize.large8XL) - spacingValue(theme, JumpySpacing.large3XL),
+              boxSizing: "border-box",
+              border: 0,
+              borderRadius: 0,
+              backgroundColor: "transparent",
+              color: tokens.text,
+              cursor: isDisabled ? "not-allowed" : "pointer",
+              padding: `${spacingValue(theme, JumpySpacing.smallXS)}px 0`,
+              opacity: isDisabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid),
+              ...linkProps.style || {}
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "side-menu-decorator", className: innerClasses.decoratorContainer?.className, style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.large2XL)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`, color: tokens.icon, ...innerClasses.decoratorContainer?.style || {} }, children: [
+                iconNode,
+                badgeNode ? /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 0, right: spacingValue(theme, JumpySpacing.large), display: "inline-flex" }, children: badgeNode }) : null
+              ] }),
+              children ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "label", "data-text": typeof children === "string" ? children : void 0, className: innerClasses.label?.className, style: { boxSizing: "border-box", paddingInline: spacingValue(theme, JumpySpacing.large), overflowWrap: "anywhere", textAlign: "center", fontFamily: theme.fontFamily.familyBase, fontSize: labelStyle.fontSize, lineHeight: labelStyle.lineHeight, fontWeight: labelStyle.fontWeight, ...truncateTexts ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" } : {}, ...innerClasses.label?.style || {} }, children }) : null
+            ]
+          }
+        )
+      ),
+      hasNested && !isNestedCollapsed ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "nested-menu", children: resolvedNestedMenu }) : null
+    ] });
+  }
+  const expandedItem = /* @__PURE__ */ jsx(
+    JumpListItem,
+    {
+      ...linkProps,
+      ref: itemRef,
+      ...restItemInteractionProps,
+      as: as || (resolvedRenderMode === "navigation" ? "a" : "li"),
+      onClick: interactionOnClick ?? handleItemClick,
+      onKeyDown: interactionOnKeyDown ?? handleItemKeyDown,
+      selected: isSelected,
+      disabled: isDisabled,
+      leading: iconNode,
+      trailing: trailingNode,
+      metadata: resolvedMetadata,
+      description,
+      truncateTexts,
+      innerClasses,
+      "aria-expanded": hasNested ? !isNestedCollapsed : void 0,
+      role: linkProps.role || (resolvedRenderMode === "navigation" ? "link" : void 0),
+      tabIndex: resolvedTabIndex,
+      "data-jumpy-component": "side-menu-item",
+      "data-value": !hasNested ? value : void 0,
+      "data-has-selected-children": hasSelectedChildren ? "true" : void 0,
+      "data-focused-view": focusedView ? "true" : void 0,
+      className: cn(className, innerClasses.selector?.className),
+      style: {
+        "--jumpy-side-menu-item-indicator-scale": isSelected ? 1 : 0.5,
+        paddingLeft: spacingValue(theme, JumpySpacing.large2XL),
+        paddingRight: spacingValue(theme, JumpySpacing.large2XL),
+        paddingTop: spacingValue(theme, JumpySpacing.large),
+        paddingBottom: spacingValue(theme, JumpySpacing.large),
+        ...truncateTexts ? { overflow: "hidden" } : {},
+        ...innerClasses.selector?.style || {},
+        ...linkProps.style || {}
+      },
+      children
+    }
+  );
+  const expandedNestedMenu = hasNested && !isNestedCollapsed ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "nested-menu", children: resolvedNestedMenu }) : null;
+  if (resolvedRenderMode === "navigation") {
+    return withTooltip(
+      /* @__PURE__ */ jsxs("li", { ...splitWrapperProps, ...wrapperProps, "data-jumpy-component": "side-menu-item-wrapper", "aria-expanded": hasNested ? !isNestedCollapsed : void 0, className: cn(splitWrapperProps.className, wrapperProps.className), style: { display: "block", margin: 0, padding: 0, ...splitWrapperProps.style || {}, ...wrapperProps.style || {} }, children: [
+        withTooltip(expandedItem),
+        expandedNestedMenu
+      ] })
+    );
+  }
+  return withTooltip(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      expandedItem,
+      expandedNestedMenu
+    ] })
+  );
+}
+function JumpTypography({ as, variant = "bodyMedium", color = "primary", className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "p";
+  const colorValue = color === "secondary" ? theme.color.textSecondary : color === "primary" ? theme.color.textPrimary : color;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "typography",
+      className: cn(className),
+      style: {
+        ...getTypographyStyle(theme, variant),
+        color: colorValue,
+        margin: 0,
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpHyperlink({ as, variant = "inline", disabled = false, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "a";
+  if (variant !== "inline") {
+    return /* @__PURE__ */ jsx(JumpLinkButton, { ...props, href: props.href || "#", variant: "borderless", className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "hyperlink",
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : props.tabIndex,
+      className: cn(className),
+      style: {
+        display: "inline",
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        backgroundColor: "transparent",
+        color: disabled ? theme.actions.tertiary.regular.disabled.text : theme.actions.tertiary.regular.default.text,
+        font: "inherit",
+        textDecoration: "none",
+        cursor: disabled ? "default" : "pointer",
+        pointerEvents: disabled ? "none" : void 0,
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpDivider({ as, direction = "horizontal", captionPosition = "center", className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  const isVertical = direction === "vertical";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "divider",
+      role: "separator",
+      "aria-orientation": direction,
+      "aria-label": children ? String(children) : props["aria-label"],
+      className: cn(className),
+      style: {
+        display: isVertical ? "inline-flex" : "flex",
+        alignItems: "center",
+        justifyContent: captionPosition === "start" ? "flex-start" : captionPosition === "end" ? "flex-end" : "center",
+        alignSelf: isVertical ? "stretch" : void 0,
+        width: isVertical ? borderWidthValue(theme, JumpyBorderWidth.small) : "100%",
+        minHeight: isVertical ? sizeValue(theme, JumpySize.large) : void 0,
+        border: 0,
+        borderTop: isVertical ? 0 : `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}`,
+        borderLeft: isVertical ? `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` : 0,
+        color: theme.color.textSecondary,
+        ...props.style || {}
+      },
+      children: children ? /* @__PURE__ */ jsx("span", { style: { backgroundColor: theme.color.surfaceCard, padding: `0 ${spacingValue(theme, JumpySpacing.smallXS)}px`, transform: isVertical ? "rotate(-90deg)" : void 0 }, children }) : null
+    }
+  );
+}
+function JumpAvatar({ as, size: size2 = "medium", disableInteraction = false, disabled = false, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || (disableInteraction ? "span" : "button");
+  const isButton = Component === "button";
+  const sizes = { small: JumpySize.large, medium: JumpySize.large2XL, large: JumpySize.large4XL };
+  const avatarSize = sizeValue(theme, sizes[size2] || JumpySize.large2XL);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      type: isButton ? props.type || "button" : props.type,
+      disabled: isButton ? disabled : void 0,
+      "aria-disabled": !isButton && disabled ? true : void 0,
+      "data-jumpy-component": "avatar",
+      className: cn(className),
+      style: {
+        display: "inline-grid",
+        placeItems: "center",
+        width: avatarSize,
+        height: avatarSize,
+        borderRadius: radiusValue(theme, JumpyRadius.full),
+        border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}`,
+        backgroundColor: theme.color.infoSurface,
+        color: theme.color.surfacePrimary,
+        fontFamily: theme.fontFamily.familyBase,
+        fontWeight: theme.fontFamily.bodyMediumEmphasized.fontWeight,
+        opacity: disabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
+        cursor: disableInteraction || disabled ? "default" : "pointer",
+        overflow: "hidden",
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpBanner({ as, status: statusProp = "other", variant = "default", direction = "horizontal", hideStatus = false, floating = false, title, actions, slots, innerClasses = {}, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  const status = variant === "inline" && statusProp === "other" ? "info" : statusProp;
+  const statusTone = getBannerStatusStyles(theme, status);
+  const urgent = status === "alarm";
+  const bannerTitle = slots?.title ?? title;
+  const bannerActions = slots?.actions ?? actions;
+  const bannerIcon = slots?.icon;
+  const contentContainerVertical = direction === "vertical";
+  const contentTitle = textStyleValue(theme, JumpyTextStyle.titleMediumEmphasized);
+  const contentDescription = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "banner",
+      "data-variant": variant,
+      "data-status": status,
+      "data-floating": floating ? "true" : "false",
+      role: urgent ? "alert" : "status",
+      "aria-live": urgent ? "assertive" : "polite",
+      className: cn(className),
+      style: {
+        "--jumpy-banner-status-icon": statusTone.indicator,
+        "--jumpy-banner-status-surface": statusTone.indicatorSurface,
+        "--jumpy-banner-inline-surface": statusTone.inlineSurface,
+        ...props.style || {}
+      },
+      children: [
+        !hideStatus ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-jumpy-slot": "banner-status",
+            className: innerClasses.status?.className,
+            "aria-hidden": "true",
+            style: {
+              ...innerClasses.status?.style || {}
+            },
+            children: /* @__PURE__ */ jsx(JumpSeverityIcon, { status, icon: bannerIcon })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-jumpy-slot": "banner-content-container",
+            "data-direction": direction,
+            className: innerClasses.contentContainer?.className,
+            style: {
+              ...innerClasses.contentContainer?.style || {}
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-jumpy-slot": "banner-content",
+                  className: innerClasses.content?.className,
+                  style: {
+                    ...innerClasses.content?.style || {}
+                  },
+                  children: [
+                    renderBannerSlot(bannerTitle, "span", innerClasses.contentTitle?.className, {
+                      margin: 0,
+                      fontFamily: theme.fontFamily.familyBase,
+                      fontSize: contentTitle.fontSize,
+                      lineHeight: contentTitle.lineHeight,
+                      fontWeight: contentTitle.fontWeight,
+                      letterSpacing: contentTitle.letterSpacing,
+                      color: "inherit",
+                      ...innerClasses.contentTitle?.style || {}
+                    }),
+                    renderBannerSlot(children, "p", innerClasses.contentDescription?.className, {
+                      margin: 0,
+                      fontFamily: theme.fontFamily.familyBase,
+                      fontSize: contentDescription.fontSize,
+                      lineHeight: contentDescription.lineHeight,
+                      fontWeight: contentDescription.fontWeight,
+                      letterSpacing: contentDescription.letterSpacing,
+                      color: "inherit",
+                      ...innerClasses.contentDescription?.style || {}
+                    })
+                  ]
+                }
+              ),
+              contentContainerVertical && bannerActions ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-jumpy-slot": "banner-actions-container",
+                  className: innerClasses.actionsContainer?.className,
+                  style: {
+                    ...innerClasses.actionsContainer?.style || {}
+                  },
+                  children: bannerActions
+                }
+              ) : bannerActions
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function JumpSkeletonLoader({ as, variant = "text", lines = 1, width, height, disableAnimation = false, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  if (children) return children;
+  const defaultHeight = variant === "text" ? theme.fontFamily.bodyMedium.fontSize * theme.fontFamily.bodyMedium.lineHeight : variant === "icon" || variant === "avatar" ? sizeValue(theme, JumpySize.large) : sizeValue(theme, JumpySize.large2XL);
+  const radius = variant === "avatar" ? radiusValue(theme, JumpyRadius.full) : radiusValue(theme, JumpyRadius.small);
+  const items = Array.from({ length: variant === "text" ? lines : 1 });
+  return /* @__PURE__ */ jsx("div", { "data-jumpy-component": "skeleton-loader-group", className: cn(className), style: { display: "grid", gap: spacingValue(theme, JumpySpacing.smallXS), width: width || "100%", ...props.style || {} }, children: items.map((_, index) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      "aria-hidden": "true",
+      "data-jumpy-component": "skeleton-loader",
+      style: {
+        width: index === items.length - 1 && items.length > 1 ? "72%" : width || "100%",
+        height: height || defaultHeight,
+        borderRadius: radius,
+        backgroundColor: theme.color.borderSubtle,
+        opacity: disableAnimation ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.medium)
+      }
+    },
+    `skeleton-${lines}-${index}`
+  )) });
+}
+var JumpSearchField = forwardRef(function JumpSearchField2({ label = "Search", placeholder = "Search", className = "", ...props }, ref) {
+  const ariaLabelledBy = props["aria-labelledby"];
+  const ariaLabel = ariaLabelledBy ? void 0 : props["aria-label"] || label || placeholder;
+  return /* @__PURE__ */ jsx(JumpBaseInput, { className: cn("jumpy-search-field", className), leading: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M16.071 14.5q1.509-1.95 1.508-4.5c0-4.1-3.418-7.5-7.54-7.5C5.919 2.5 2.5 5.9 2.5 10s3.418 7.5 7.54 7.5c1.709 0 3.317-.6 4.524-1.5l5.529 5.5 1.407-1.4zm-6.031 1c-3.016 0-5.53-2.5-5.53-5.5s2.515-5.5 5.53-5.5S15.569 7 15.569 10s-2.513 5.5-5.53 5.5z" }) }), children: /* @__PURE__ */ jsx(JumpInput, { ...props, ref, type: "search", placeholder, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) });
+});
+function JumpTooltip({ content, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsxs("span", { ...props, "data-jumpy-component": "tooltip", className: cn(className), style: { position: "relative", display: "inline-flex", ...props.style || {} }, onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), onFocus: () => setVisible(true), onBlur: () => setVisible(false), children: [
+    children,
+    visible ? /* @__PURE__ */ jsx("span", { role: "tooltip", style: { position: "absolute", left: "50%", bottom: `calc(100% + ${spacingValue(theme, JumpySpacing.smallXS)}px)`, transform: "translateX(-50%)", zIndex: 30, width: "max-content", maxWidth: 240, borderRadius: radiusValue(theme, JumpyRadius.small), backgroundColor: theme.color.textPrimary, color: theme.color.surfaceCard, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px`, boxShadow: theme.shadow.positiveSmall, fontSize: theme.fontFamily.bodySmall.fontSize, lineHeight: theme.fontFamily.bodySmall.lineHeight }, children: content }) : null
+  ] });
+}
+function JumpPopover({ open, defaultOpen = false, onOpenChange, trigger, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const visible = open ?? internalOpen;
+  const setVisible = (next) => {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-component": "popover-root", className: cn(className), style: { position: "relative", display: "inline-flex", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setVisible(!visible), children: trigger }),
+    visible ? /* @__PURE__ */ jsx("div", { role: "dialog", "data-jumpy-component": "popover", style: { position: "absolute", top: `calc(100% + ${spacingValue(theme, JumpySpacing.smallXS)}px)`, left: 0, zIndex: 30, minWidth: 220, borderRadius: radiusValue(theme, JumpyRadius.large), border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}`, backgroundColor: theme.color.surfaceCard, color: theme.color.textPrimary, boxShadow: theme.shadow.positiveMedium, padding: spacingValue(theme, JumpySpacing.large) }, children }) : null
+  ] });
+}
+function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, footer, children, className = "", placement = "bottom-start", ...props }) {
+  const theme = useJumpyTheme();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const menuRef = useRef(null);
+  const menuOffset = spacingValue(theme, JumpySpacing.small3XS);
+  const menuPadding = spacingValue(theme, JumpySpacing.medium);
+  const menuMinWidth = sizeValue(theme, JumpySize.large8XL);
+  const { refs, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setOpen,
+    placement,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(menuOffset),
+      flip({ padding: menuPadding }),
+      size({
+        padding: menuPadding,
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${Math.max(menuMinWidth, rects.reference.width)}px`,
+            maxHeight: `${Math.max(sizeValue(theme, JumpySize.large2XL), availableHeight)}px`
+          });
+        }
+      })
+    ]
+  });
+  function setOpen(next) {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+  function getMenuItems() {
+    return Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') || []).filter((item) => item.getAttribute("aria-disabled") !== "true" && !item.disabled);
+  }
+  function focusMenuItem(direction) {
+    const menuItems = getMenuItems();
+    if (menuItems.length === 0) return;
+    const activeIndex = menuItems.indexOf(document.activeElement);
+    const nextIndex = direction === "first" ? 0 : direction === "last" ? menuItems.length - 1 : (activeIndex + direction + menuItems.length) % menuItems.length;
+    menuItems[nextIndex]?.focus();
+  }
+  function openAndFocusFirst() {
+    setOpen(true);
+    window.requestAnimationFrame(() => focusMenuItem("first"));
+  }
+  function handleTriggerKeyDown(event) {
+    if (event.key === KeyboardKeys.ARROW_DOWN || event.key === KeyboardKeys.ENTER || event.key === KeyboardKeys.SPACE) {
+      event.preventDefault();
+      openAndFocusFirst();
+    }
+    if (event.key === KeyboardKeys.ARROW_UP) {
+      event.preventDefault();
+      setOpen(true);
+      window.requestAnimationFrame(() => focusMenuItem("last"));
+    }
+  }
+  function handleMenuKeyDown(event) {
+    if (event.key === KeyboardKeys.ESCAPE) {
+      event.preventDefault();
+      setOpen(false);
+      refs.reference.current?.focus?.();
+    }
+    if (event.key === KeyboardKeys.ARROW_DOWN) {
+      event.preventDefault();
+      focusMenuItem(1);
+    }
+    if (event.key === KeyboardKeys.ARROW_UP) {
+      event.preventDefault();
+      focusMenuItem(-1);
+    }
+    if (event.key === KeyboardKeys.HOME) {
+      event.preventDefault();
+      focusMenuItem("first");
+    }
+    if (event.key === KeyboardKeys.END) {
+      event.preventDefault();
+      focusMenuItem("last");
+    }
+    props.onKeyDown?.(event);
+  }
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-component": "menu-root", className: cn(className), style: { display: "inline-flex", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx("span", { ref: refs.setReference, "aria-haspopup": "menu", "aria-expanded": isOpen, tabIndex: 0, onClick: () => setOpen(!isOpen), onKeyDown: handleTriggerKeyDown, children: trigger }),
+    isOpen ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: (node) => {
+          refs.setFloating(node);
+          menuRef.current = node;
+        },
+        "data-jumpy-theme": "true",
+        "data-jumpy-component": "menu",
+        role: "menu",
+        onKeyDown: handleMenuKeyDown,
+        style: {
+          ...themeToCSSVariables(theme),
+          ...floatingStyles,
+          zIndex: 1e3,
+          maxWidth: "min(420px, calc(100vw - 32px))",
+          overflowY: "auto",
+          ...props.style || {}
+        },
+        children: [
+          header ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "menu-header", children: header }) : null,
+          children,
+          footer ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "menu-footer", children: footer }) : null
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function JumpMenuItem({ as, children, selected = false, disabled = false, readOnly = false, focusedView = false, leading, trailing, metadata, description, slots = {}, nestedMenu, onClick, ...props }) {
+  const Component = as || "button";
+  const resolvedSlots = {
+    ...slots,
+    leading: slots.leading ?? leading,
+    trailing: nestedMenu ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u203A" }) : slots.trailing ?? trailing,
+    metadata: slots.metadata ?? metadata,
+    description: slots.description ?? description
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      JumpListItem,
+      {
+        ...props,
+        as: Component,
+        role: props.role || "menuitem",
+        selected,
+        disabled,
+        readOnly,
+        focusedView,
+        slots: resolvedSlots,
+        "data-jumpy-component": "menu-item",
+        onClick: (event) => {
+          if (disabled || readOnly) return;
+          onClick?.(event);
+        },
+        children
+      }
+    ),
+    nestedMenu || null
+  ] });
+}
+function JumpToggleButton({ as, selected, value, disabled = false, onChange, leading, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const group = useContext(JumpyToggleButtonGroupContext);
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const isDisabled = disabled || group?.disabled || false;
+  const isSelected = group && value !== void 0 ? group.value.includes(value) : Boolean(selected);
+  const textStyle = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
+  function handleClick(event) {
+    if (isDisabled) return;
+    if (group && value !== void 0) group.onChange(value);
+    onChange?.(!isSelected);
+    props.onClick?.(event);
+  }
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      type: isButton ? props.type || "button" : props.type,
+      disabled: isButton ? isDisabled : void 0,
+      "aria-disabled": !isButton && isDisabled ? true : void 0,
+      "aria-pressed": isSelected,
+      "data-jumpy-component": "toggle-button",
+      "data-selected": isSelected ? "true" : "false",
+      "data-disabled": isDisabled ? "true" : "false",
+      className: cn(className),
+      onClick: handleClick,
+      style: {
+        boxSizing: "border-box",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "fit-content",
+        height: sizeValue(theme, JumpySize.large),
+        gap: spacingValue(theme, JumpySpacing.small3XS),
+        padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.large)}px`,
+        outline: "none",
+        border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-cmp-toggle-button-border-color)`,
+        borderRadius: "var(--jumpy-cmp-toggle-button-border-radius)",
+        backgroundColor: "var(--jumpy-cmp-toggle-button-surface)",
+        color: "var(--jumpy-cmp-toggle-button-text)",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: textStyle.fontSize,
+        lineHeight: textStyle.lineHeight,
+        fontWeight: textStyle.fontWeight,
+        opacity: isDisabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid),
+        ...props.style || {}
+      },
+      children: [
+        leading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex", color: "var(--jumpy-cmp-toggle-button-icon-fill)" }, children: typeof leading === "function" ? leading({ selected: isSelected }) : leading }) : null,
+        children ? /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", margin: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px`, whiteSpace: "nowrap" }, children }) : null
+      ]
+    }
+  );
+}
+function JumpToggleButtonGroup({ as, selected, defaultSelected = [], onChange, exclusive = false, disabled = false, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  const [internalSelected, setInternalSelected] = useState(defaultSelected);
+  const currentSelected = selected ?? internalSelected;
+  function handleToggle(toggledValue) {
+    const nextSelected = currentSelected.includes(toggledValue) ? currentSelected.filter((item) => item !== toggledValue) : exclusive ? [toggledValue] : [...currentSelected, toggledValue];
+    setInternalSelected(nextSelected);
+    onChange?.(nextSelected);
+  }
+  return /* @__PURE__ */ jsx(JumpyToggleButtonGroupContext.Provider, { value: { value: currentSelected, onChange: handleToggle, exclusive, disabled }, children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "toggle-button-group",
+      role: props.role || "toolbar",
+      className: cn(className),
+      style: { display: "inline-flex", flexDirection: "row", alignItems: "center", width: "fit-content", gap: spacingValue(theme, JumpySpacing.small3XS), flexWrap: "wrap", userSelect: "none", ...props.style || {} },
+      children
+    }
+  ) });
+}
+function JumpPinInput({ length = 6, value, defaultValue = "", onChange, onComplete, name, mask = false, type = "numeric", error = false, disabled = false, helperText, ariaLabels = {}, className = "", innerClasses = {}, ...props }) {
+  const theme = useJumpyTheme();
+  const normalizedLength = clampNumber(length, 4, 8);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = String(value ?? internalValue).slice(0, normalizedLength);
+  const refs = useRef([]);
+  const pattern = type === "alphanumeric" ? /^[a-z0-9]$/i : /^\d$/;
+  const helperId = helperText ? `${name || props.id || "jumpy-pin-input"}-helper` : void 0;
+  function commit(nextValue, focusIndex) {
+    const compact = nextValue.slice(0, normalizedLength);
+    setInternalValue(compact);
+    onChange?.(compact);
+    if (compact.length === normalizedLength) onComplete?.(compact);
+    if (focusIndex !== void 0) refs.current[clampNumber(focusIndex, 0, normalizedLength - 1)]?.focus();
+  }
+  function replaceAt(index, char) {
+    const cells = Array.from({ length: normalizedLength }, (_, cellIndex) => currentValue[cellIndex] || "");
+    cells[index] = char;
+    return cells.join("");
+  }
+  const supportingColor = disabled ? theme.color["jumpy-input-regular-disabled-supporting"] : error ? theme.color["jumpy-input-alarm-default-supporting"] : theme.color["jumpy-input-regular-default-supporting"];
+  const textStyle = textStyleValue(theme, JumpyTextStyle.bodyLarge);
+  return /* @__PURE__ */ jsxs("fieldset", { ...props, disabled, "data-jumpy-component": "pin-input", className: cn(className), style: { display: "inline-flex", flexDirection: "column", alignItems: "flex-start", border: 0, margin: 0, padding: 0, ...props.style || {} }, children: [
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }) : null,
+    /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "pin-input-cells", className: cn(innerClasses.cells?.className), style: { display: "flex", gap: spacingValue(theme, JumpySpacing.small2XS), cursor: disabled ? "not-allowed" : "text", ...innerClasses.cells?.style || {} }, onClick: (event) => {
+      if (event.target === event.currentTarget) refs.current[Math.min(currentValue.length, normalizedLength - 1)]?.focus();
+    }, children: Array.from({ length: normalizedLength }, (_, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (node) => {
+          refs.current[index] = node;
+        },
+        type: mask ? "password" : "text",
+        inputMode: type === "alphanumeric" ? "text" : "numeric",
+        autoComplete: index === 0 ? "one-time-code" : "off",
+        autoCapitalize: "characters",
+        "aria-label": ariaLabels.cell ? ariaLabels.cell(index + 1, normalizedLength) : `PIN digit ${index + 1} of ${normalizedLength}`,
+        "aria-invalid": error || void 0,
+        "aria-describedby": helperId,
+        disabled,
+        "data-jumpy-slot": "pin-input-cell",
+        "data-status": error ? "alarm" : "regular",
+        "data-disabled": disabled ? "true" : "false",
+        maxLength: 1,
+        value: currentValue[index] || "",
+        onChange: (event) => {
+          const nextRaw = event.target.value.slice(-1);
+          if (!nextRaw) return;
+          if (!pattern.test(nextRaw)) return;
+          commit(replaceAt(index, nextRaw.toUpperCase()), index + 1);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Backspace") {
+            event.preventDefault();
+            if (currentValue[index]) commit(replaceAt(index, ""), index);
+            else commit(replaceAt(Math.max(index - 1, 0), ""), index - 1);
+          }
+          if (event.key === "ArrowLeft") refs.current[Math.max(index - 1, 0)]?.focus();
+          if (event.key === "ArrowRight") refs.current[Math.min(index + 1, normalizedLength - 1)]?.focus();
+        },
+        onPaste: (event) => {
+          event.preventDefault();
+          const pasted = event.clipboardData.getData("text").split("").filter((char) => pattern.test(char)).join("").slice(0, normalizedLength).toUpperCase();
+          if (pasted) commit(pasted, pasted.length - 1);
+        },
+        className: cn(innerClasses.cell?.className),
+        style: { width: sizeValue(theme, JumpySize.largeXL), height: sizeValue(theme, JumpySize.largeXL), boxSizing: "border-box", appearance: "none", WebkitAppearance: "none", border: 0, outlineWidth: "var(--jumpy-cmp-pin-input-cell-outline-width)", outlineStyle: "solid", outlineColor: "var(--jumpy-cmp-pin-input-cell-border)", outlineOffset: `calc(var(--jumpy-cmp-pin-input-cell-outline-width) * -1)`, borderRadius: radiusValue(theme, JumpyRadius.small), backgroundColor: "var(--jumpy-cmp-pin-input-cell-surface)", color: "var(--jumpy-cmp-pin-input-cell-value)", textAlign: "center", overflow: "hidden", fontFamily: theme.fontFamily.familyBase, fontSize: textStyle.fontSize, lineHeight: textStyle.lineHeight, fontWeight: textStyle.fontWeight, ...innerClasses.cell?.style || {} }
+      },
+      index
+    )) }),
+    helperText ? /* @__PURE__ */ jsx("div", { id: helperId, "data-jumpy-slot": "pin-input-helper", className: cn(innerClasses.supportingText?.className), style: { paddingTop: spacingValue(theme, JumpySpacing.small3XS), color: supportingColor, fontFamily: theme.fontFamily.familyBase, fontSize: textStyleValue(theme, JumpyTextStyle.labelSmall).fontSize, ...innerClasses.supportingText?.style || {} }, children: helperText }) : null
+  ] });
+}
+function JumpPageControl({ totalPages = 1, currentPage, defaultPage = 0, maxVisibleDots = 7, disabled = false, disabledPages = [], disableInteraction = false, onPageChange, pageAriaLabels = [], className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [internalPage, setInternalPage] = useState(defaultPage);
+  const selectedPage = clampNumber(currentPage ?? internalPage, 0, Math.max(totalPages - 1, 0));
+  const visibleCount = clampNumber(maxVisibleDots, 3, Math.max(totalPages, 3));
+  const half = Math.floor(visibleCount / 2);
+  const start = clampNumber(selectedPage - half, 0, Math.max(totalPages - visibleCount, 0));
+  const pages = Array.from({ length: Math.min(totalPages, visibleCount) }, (_, index) => start + index);
+  const showLeft = start > 0;
+  const showRight = start + visibleCount < totalPages;
+  function selectPage(page, pageDisabled) {
+    if (disabled || disableInteraction || pageDisabled) return;
+    setInternalPage(page);
+    onPageChange?.(page);
+  }
+  function renderDot(page, truncation = false) {
+    const selected = page === selectedPage;
+    const pageDisabled = disabledPages.includes(page);
+    const dotSize = truncation ? sizeValue(theme, JumpySize.small5XS) : sizeValue(theme, JumpySize.small4XS);
+    return /* @__PURE__ */ jsx("button", { type: "button", disabled: disabled || pageDisabled || truncation || disableInteraction, "aria-label": truncation ? "More pages" : pageAriaLabels[page] || `Page ${page + 1}`, "aria-current": selected ? "page" : void 0, "data-jumpy-component": "page-control-dot", "data-selected": selected ? "true" : "false", "data-truncation": truncation ? "true" : "false", onClick: () => selectPage(page, pageDisabled), style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: truncation ? sizeValue(theme, JumpySize.small3XS) : sizeValue(theme, JumpySize.small), height: truncation ? sizeValue(theme, JumpySize.small3XS) : sizeValue(theme, JumpySize.small), border: `${borderWidthValue(theme, JumpyBorderWidth.medium)}px solid transparent`, borderRadius: radiusValue(theme, JumpyRadius.small), background: "transparent", cursor: disabled || pageDisabled || truncation || disableInteraction ? "default" : "pointer", opacity: disabled || pageDisabled ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid) }, children: /* @__PURE__ */ jsx("span", { style: { display: "block", width: dotSize, height: dotSize, boxSizing: "border-box", borderRadius: selected || truncation ? radiusValue(theme, JumpyRadius.full) : radiusValue(theme, JumpyRadius.small), border: truncation ? 0 : `${borderWidthValue(theme, JumpyBorderWidth.medium)}px solid ${selected ? theme.listItem.active.default.icon : theme.color.borderStrong}`, backgroundColor: selected ? theme.listItem.active.default.icon : truncation ? theme.color.borderStrong : "transparent" } }) }, truncation ? `truncate-${page}` : page);
+  }
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-jumpy-component": "page-control", className: cn(className), style: { position: "relative", overflow: "clip", width: "100%", height: sizeValue(theme, JumpySize.small), display: "flex", justifyContent: "center", alignItems: "center", boxSizing: "border-box", ...props.style || {} }, children: [
+    showLeft ? renderDot(start - 1, true) : null,
+    pages.map((page) => renderDot(page)),
+    showRight ? renderDot(start + visibleCount, true) : null
+  ] });
+}
+function textFromNode(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textFromNode).filter(Boolean).join(" ");
+  if (isValidElement(node)) return textFromNode(node.props.children);
+  return "";
+}
+function useJumpSnackbar() {
+  return useContext(JumpySnackbarContext);
+}
+function JumpSnackbarProvider({ children, position = "bottom-center", maxSnackbars = 3, offset: offset2 = {}, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [snackbars, setSnackbars] = useState([]);
+  const top = position.startsWith("top");
+  const align = position.endsWith("start") ? "flex-start" : position.endsWith("end") ? "flex-end" : "center";
+  const horizontalOffset = offset2.left ?? offset2.right ?? spacingValue(theme, JumpySpacing.large);
+  const verticalOffset = top ? offset2.top ?? spacingValue(theme, JumpySpacing.smallXS) : offset2.bottom ?? spacingValue(theme, JumpySpacing.smallXS);
+  function removeSnackbar(id) {
+    setSnackbars((items) => items.filter((item) => item.id !== id));
+  }
+  function addSnackbar(contentOrData, options = {}) {
+    const id = options.id || `jumpy-snackbar-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const isData = contentOrData && typeof contentOrData === "object" && !isValidElement(contentOrData) && ("title" in contentOrData || "description" in contentOrData || "status" in contentOrData);
+    const duration = options.persistent || contentOrData?.persistent ? null : options.duration ?? contentOrData?.duration ?? 4e3;
+    const snackbar = { id, content: contentOrData, isData, createdAt: Date.now() };
+    setSnackbars((items) => [snackbar, ...items.filter((item) => item.id !== id)].slice(0, maxSnackbars));
+    if (duration) window.setTimeout(() => removeSnackbar(id), duration);
+    return id;
+  }
+  const contextValue = { addSnackbar, removeSnackbar, clearAll: () => setSnackbars([]), snackbars };
+  return /* @__PURE__ */ jsxs(JumpySnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx("output", { "aria-live": "assertive", "aria-atomic": "true", style: { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", border: 0 }, children: snackbars[0] ? textFromNode(snackbars[0].content?.title || snackbars[0].content?.description || snackbars[0].content) : "" }),
+    /* @__PURE__ */ jsx("div", { ...props, "data-jumpy-component": "snackbar-provider", className: cn(className), style: { position: "fixed", zIndex: 1100, left: position.endsWith("start") ? horizontalOffset : position.endsWith("end") ? "auto" : "50%", right: position.endsWith("end") ? horizontalOffset : "auto", top: top ? verticalOffset : "auto", bottom: top ? "auto" : verticalOffset, transform: position.endsWith("center") ? "translateX(-50%)" : void 0, display: "flex", flexDirection: "column", alignItems: align, gap: spacingValue(theme, JumpySpacing.smallXS), width: "min(487px, calc(100vw - 32px))", maxWidth: "50vw", pointerEvents: "none", ...props.style || {} }, children: snackbars.map((snackbar) => snackbar.isData ? /* @__PURE__ */ jsx(JumpBanner, { floating: true, status: snackbar.content.status || "info", title: snackbar.content.title, actions: snackbar.content.slots?.actions, style: { width: "100%", pointerEvents: "auto", boxShadow: theme.shadow.positiveLarge }, children: snackbar.content.description }, snackbar.id) : /* @__PURE__ */ jsx("div", { "data-jumpy-component": "snackbar", style: { width: "100%", pointerEvents: "auto", borderRadius: radiusValue(theme, JumpyRadius.small), boxShadow: theme.shadow.positiveLarge }, children: snackbar.content }, snackbar.id)) })
+  ] });
+}
+function JumpTable({ children, showHorizontalBorders = false, disabled = false, stickyHeader = false, density = "regular", containerProps, innerClasses = {}, className = "", ...props }) {
+  const { className: containerClassName, style: containerStyle, ...restContainerProps } = containerProps || {};
+  const contextValue = { showHorizontalBorders, disabled };
+  return /* @__PURE__ */ jsx(JumpyTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "table-wrapper", className: innerClasses.wrapper?.className, style: innerClasses.wrapper?.style, children: /* @__PURE__ */ jsx("div", { ...restContainerProps, "data-jumpy-slot": "table-container", "data-sticky-header": stickyHeader ? "true" : "false", className: cn(containerClassName), style: containerStyle, children: /* @__PURE__ */ jsx("table", { ...props, "data-jumpy-component": "table", "data-horizontal-borders": showHorizontalBorders ? "true" : "false", "data-density": density === "condensed" ? "condensed" : void 0, "data-disabled": disabled ? "true" : void 0, role: props.role || "grid", className: cn(className), children }) }) }) });
+}
+function JumpTableHead({ as, children, className = "", ...props }) {
+  const Component = as || "thead";
+  return /* @__PURE__ */ jsx(Component, { ...props, "data-jumpy-component": "table-head", role: props.role || "rowgroup", className: cn(className), children });
+}
+function JumpTableBody({ as, children, className = "", ...props }) {
+  const Component = as || "tbody";
+  return /* @__PURE__ */ jsx(Component, { ...props, "data-jumpy-component": "table-body", role: props.role || "rowgroup", className: cn(className), children });
+}
+function JumpTableFooter({ as, children, className = "", ...props }) {
+  const Component = as || "tfoot";
+  return /* @__PURE__ */ jsx(Component, { ...props, "data-jumpy-component": "table-footer", role: props.role || "rowgroup", className: cn(className), children });
+}
+function JumpTableRow({ as, children, selected = false, disabled = false, disableHover = false, verticalAlign = "middle", dragging = false, className = "", onClick, ...props }) {
+  const Component = as || "tr";
+  const tableContext = useContext(JumpyTableContext);
+  const isDisabled = disabled || tableContext?.disabled;
+  const isInteractive = !disableHover && !isDisabled && Boolean(onClick);
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "table-row",
+      "data-selectable": isInteractive ? "true" : void 0,
+      "data-disable-hover": disableHover ? "true" : void 0,
+      "data-disabled": isDisabled ? "true" : void 0,
+      "data-state": selected ? "selected" : void 0,
+      "data-vertical-align": verticalAlign === "top" ? "top" : void 0,
+      "data-dragging": dragging ? "true" : void 0,
+      role: props.role || "row",
+      "aria-selected": selected || void 0,
+      "aria-disabled": isDisabled || void 0,
+      tabIndex: isInteractive ? props.tabIndex ?? 0 : props.tabIndex,
+      className: cn(className),
+      onClick: isDisabled ? void 0 : onClick,
+      children
+    }
+  );
+}
+function getTableCellTypography(theme, emphasized = false) {
+  return textStyleValue(theme, emphasized ? JumpyTextStyle.bodyMediumEmphasized : JumpyTextStyle.bodyMedium);
+}
+function tableCellTextStyle(theme, emphasized = false, style) {
+  const textStyle = getTableCellTypography(theme, emphasized);
+  return {
+    fontFamily: theme.fontFamily.familyBase,
+    fontSize: textStyle.fontSize,
+    lineHeight: textStyle.lineHeight,
+    fontWeight: textStyle.fontWeight,
+    letterSpacing: textStyle.letterSpacing,
+    ...style
+  };
+}
+function JumpTableCell({ as, children, selected = false, disabled = false, align, variant = "default", padding = "default", showHorizontalBorder, pinned, pinnedEdge = false, leading, trailing, description, slots, innerClasses = {}, className = "", onClick, ...props }) {
+  const theme = useJumpyTheme();
+  const tableContext = useContext(JumpyTableContext);
+  const Component = as || "td";
+  const isControl = variant === "control" || padding === "checkbox";
+  const resolvedAlign = align || (isControl ? "center" : "start");
+  const cellLeading = slots?.leading ?? leading;
+  const cellTrailing = slots?.trailing ?? trailing;
+  const cellDescription = slots?.description ?? description;
+  const isDisabled = disabled || tableContext?.disabled;
+  const resolvedHorizontalBorder = showHorizontalBorder ?? tableContext?.showHorizontalBorders ?? false;
+  const isInteractive = !isDisabled && Boolean(onClick);
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "table-cell",
+      "data-pinned": pinned || void 0,
+      "data-pinned-edge": pinnedEdge ? "true" : void 0,
+      "data-horizontal-border": resolvedHorizontalBorder ? "true" : "false",
+      "data-state": selected ? "selected" : "default",
+      "data-disabled": isDisabled ? "true" : void 0,
+      "data-align": resolvedAlign,
+      "data-padding": padding,
+      "data-variant": isControl ? "control" : void 0,
+      "data-interactive": isInteractive ? "true" : void 0,
+      role: props.role || "gridcell",
+      "aria-disabled": isDisabled || void 0,
+      "aria-selected": selected || void 0,
+      tabIndex: props.tabIndex ?? (isInteractive ? 0 : void 0),
+      className: cn(className),
+      onClick: isDisabled ? void 0 : onClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-jumpy-slot": "table-cell-surface" }),
+        /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-inner", "data-align": resolvedAlign, className: innerClasses.inner?.className, style: innerClasses.inner?.style, children: [
+          cellLeading ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-leading", className: innerClasses.leading?.className, style: innerClasses.leading?.style, children: cellLeading }) : null,
+          /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-content", className: innerClasses.content?.className, style: innerClasses.content?.style, children: [
+            /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.text?.className, style: tableCellTextStyle(theme, selected, innerClasses.text?.style), children }),
+            cellDescription ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-description", className: innerClasses.description?.className, style: tableCellTextStyle(theme, false, innerClasses.description?.style), children: cellDescription }) : null
+          ] }),
+          cellTrailing ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-trailing", className: innerClasses.trailing?.className, style: innerClasses.trailing?.style, children: cellTrailing }) : null
+        ] })
+      ]
+    }
+  );
+}
+function getSortMapping(currentOrder, ascValue, descValue, defaultValue) {
+  if (currentOrder === "ascending" || currentOrder === "asc") return ascValue;
+  if (currentOrder === "descending" || currentOrder === "desc") return descValue;
+  return defaultValue;
+}
+function getNextSortOrder(order) {
+  if (order === "ascending" || order === "asc") return "desc";
+  if (order === "descending" || order === "desc") return "default";
+  return "asc";
+}
+function getSortOrder(sortDirection) {
+  return getSortMapping(sortDirection, "asc", "desc", "default");
+}
+function getSortActionLabel(currentOrder, columnName) {
+  if (columnName) {
+    return getSortMapping(currentOrder, `Sort ${columnName} descending`, `Clear sort on ${columnName}`, `Sort ${columnName} ascending`);
+  }
+  return getSortMapping(currentOrder, "Sort descending", "Clear sort", "Sort ascending");
+}
+function participatesInSelection(row) {
+  return row.getCanSelect() || (row.subRows?.some(participatesInSelection) ?? false);
+}
+function getSelectionChildren(row) {
+  const children = row.subRows?.filter(participatesInSelection);
+  return children?.length ? children : void 0;
+}
+function isRowFullySelected(row) {
+  const children = getSelectionChildren(row);
+  if (children) return children.every(isRowFullySelected);
+  return row.getCanSelect() && row.getIsSelected();
+}
+function applySubtreeSelection(row, selected) {
+  if (row.getCanSelect() && row.getIsSelected() !== selected) {
+    row.toggleSelected(selected, { selectChildren: false });
+  }
+  row.subRows?.forEach((subRow) => applySubtreeSelection(subRow, selected));
+}
+function getRowCheckboxProps(row, disabled) {
+  const checked = isRowFullySelected(row);
+  return {
+    checked,
+    indeterminate: !checked && row.getIsSomeSelected(),
+    disabled: disabled || !row.getCanSelect(),
+    "aria-label": `Select row ${row.id}`,
+    onChange: () => applySubtreeSelection(row, !isRowFullySelected(row))
+  };
+}
+function getHeaderCheckboxProps(table, disabled) {
+  const topRows = table.getRowModel?.().rows.filter((row) => (row.depth ?? 0) === 0 && participatesInSelection(row));
+  const isTree = topRows?.some((row) => getSelectionChildren(row)) ?? false;
+  const checked = isTree && topRows ? topRows.every(isRowFullySelected) : table.getIsAllRowsSelected();
+  return {
+    checked,
+    indeterminate: !checked && table.getIsSomeRowsSelected(),
+    disabled,
+    "aria-label": "Select all rows",
+    onChange: table.getToggleAllRowsSelectedHandler()
+  };
+}
+function sortSymbol(order) {
+  if (order === "ascending" || order === "asc") return "\u2191";
+  if (order === "descending" || order === "desc") return "\u2193";
+  return "\u2195";
+}
+function ariaSortOrder(order) {
+  if (order === "ascending" || order === "asc") return "ascending";
+  if (order === "descending" || order === "desc") return "descending";
+  if (order === "default" || order === "none" || order === false) return "none";
+  return void 0;
+}
+function JumpTableHeaderCell({ as, children, selected = false, disabled = false, align, variant = "default", padding = "default", showHorizontalBorder, pinned, pinnedEdge = false, sortable = false, sortOrder = "default", onSortChange, ariaLabels, leading, trailing, slots, innerClasses = {}, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const tableContext = useContext(JumpyTableContext);
+  const Component = as || "th";
+  const isControl = variant === "control" || padding === "checkbox";
+  const resolvedAlign = align || (isControl ? "center" : "start");
+  const cellLeading = slots?.leading ?? leading;
+  const cellTrailing = slots?.trailing ?? trailing;
+  const isDisabled = disabled || tableContext?.disabled;
+  const resolvedHorizontalBorder = showHorizontalBorder ?? tableContext?.showHorizontalBorders ?? false;
+  const participatesInSort = sortable || sortOrder !== "default" && sortOrder !== "none";
+  const ariaSort = participatesInSort ? ariaSortOrder(sortOrder) : void 0;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ...props,
+      "data-jumpy-component": "table-header-cell",
+      "data-pinned": pinned || void 0,
+      "data-pinned-edge": pinnedEdge ? "true" : void 0,
+      "data-horizontal-border": resolvedHorizontalBorder ? "true" : "false",
+      "data-sortable": sortable ? "true" : "false",
+      "data-sort-order": sortOrder,
+      "data-disabled": isDisabled ? "true" : void 0,
+      "data-state": selected ? "selected" : "default",
+      "data-align": resolvedAlign,
+      "data-padding": padding,
+      "data-variant": isControl ? "control" : void 0,
+      role: props.role || "columnheader",
+      "aria-sort": ariaSort,
+      className: cn(className),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-jumpy-slot": "table-cell-surface" }),
+        /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-inner", "data-align": resolvedAlign, className: innerClasses.inner?.className, style: innerClasses.inner?.style, children: [
+          cellLeading ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-leading", className: innerClasses.leading?.className, style: innerClasses.leading?.style, children: cellLeading }) : null,
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-content", className: innerClasses.label?.className, style: innerClasses.label?.style, children: /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.labelText?.className, style: tableCellTextStyle(theme, true, innerClasses.labelText?.style), children }) }),
+          cellTrailing || sortable ? /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "table-cell-trailing", className: innerClasses.trailing?.className, style: innerClasses.trailing?.style, children: [
+            sortable ? /* @__PURE__ */ jsx(JumpIconButton, { variant: "secondary", disabled: isDisabled, "aria-label": typeof ariaLabels?.sort === "function" ? ariaLabels.sort(sortOrder) : ariaLabels?.sort || getSortActionLabel(sortOrder, typeof children === "string" ? children : void 0), onClick: () => onSortChange?.(getNextSortOrder(sortOrder)), children: sortSymbol(sortOrder) }) : null,
+            cellTrailing
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+function ChevronIcon({ expanded }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: expanded ? "M7.4 15.4 12 10.8l4.6 4.6 1.4-1.4-6-6-6 6 1.4 1.4Z" : "M7.4 8.6 12 13.2l4.6-4.6 1.4 1.4-6 6-6-6 1.4-1.4Z" }) });
+}
+function JumpExpandable({ as, variant = "filled", disabled = false, expanded, defaultExpanded = false, onChange, slots, innerClasses = {}, className = "", children, ...props }) {
+  const Component = as || "div";
+  const context = useContext(JumpyExpandableContext);
+  const panelId = useId();
+  const isDisabled = disabled || context?.disabled;
+  const isControlled = expanded !== void 0 || context?.expanded !== void 0;
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const isExpanded = isControlled ? Boolean(expanded ?? context?.expanded) : uncontrolledExpanded;
+  const label = slots?.label;
+  const description = slots?.description;
+  const leading = slots?.leading;
+  const trailing = slots?.trailing;
+  function handleToggle() {
+    if (isDisabled) return;
+    const nextExpanded = !isExpanded;
+    context?.onExpandedChange?.(nextExpanded);
+    if (!isControlled) setUncontrolledExpanded(nextExpanded);
+    onChange?.(nextExpanded);
+  }
+  const header = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: context?.buttonRef,
+      type: "button",
+      "data-jumpy-slot": "expandable-header",
+      className: innerClasses.header?.className,
+      style: innerClasses.header?.style,
+      onClick: handleToggle,
+      disabled: isDisabled,
+      "aria-controls": panelId,
+      "aria-expanded": isExpanded,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "expandable-slots-container", children: [
+          leading,
+          label || description ? /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "expandable-header-content", className: innerClasses.headerContent?.className, style: innerClasses.headerContent?.style, children: [
+            label ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "expandable-label", className: innerClasses.label?.className, style: innerClasses.label?.style, children: label }) : null,
+            description ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "expandable-description", className: innerClasses.description?.className, style: innerClasses.description?.style, children: description }) : null
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "expandable-slots-container", children: [
+          trailing,
+          !isDisabled ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "expandable-icon", className: innerClasses.icon?.className, style: innerClasses.icon?.style, children: /* @__PURE__ */ jsx(ChevronIcon, { expanded: isExpanded }) }) : null
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Component, { ...props, "data-jumpy-component": "expandable", "data-variant": variant, className: cn(className), children: [
+    context?.headingLevel ? /* @__PURE__ */ jsx(context.headingLevel, { "data-jumpy-slot": "expandable-header-wrapper", children: header }) : header,
+    /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "expandable-content-wrapper", "data-expanded": isExpanded ? "true" : "false", children: /* @__PURE__ */ jsx("div", { id: panelId, "data-jumpy-slot": "expandable-panel", className: innerClasses.panel?.className, style: innerClasses.panel?.style, children }) })
+  ] });
+}
+function headingTag(level) {
+  if (!level) return void 0;
+  return `h${Math.min(6, Math.max(1, Number(level)))}`;
+}
+function focusExpandableButton(buttonRefs, index) {
+  const nextButton = buttonRefs.current[index];
+  nextButton?.focus();
+}
+function JumpExpandableGroup({ as, multiple = false, disabled = false, headingLevel, onChange, innerClasses = {}, className = "", children, ...props }) {
+  const Component = as || "div";
+  const buttonRefs = useRef([]);
+  const childArray = Children.toArray(children);
+  const [expandedIndices, setExpandedIndices] = useState(() => {
+    const initial = /* @__PURE__ */ new Set();
+    childArray.forEach((child, index) => {
+      if (isValidElement(child) && (child.props.expanded || child.props.defaultExpanded)) initial.add(index);
+    });
+    return initial;
+  });
+  function updateExpanded(index, nextExpanded) {
+    setExpandedIndices((current) => {
+      const next = new Set(current);
+      if (nextExpanded) {
+        if (!multiple) next.clear();
+        next.add(index);
+      } else {
+        next.delete(index);
+      }
+      onChange?.(Array.from(next).sort((a, b) => a - b));
+      return next;
+    });
+  }
+  function handleKeyDown(event) {
+    const currentIndex = buttonRefs.current.findIndex((button) => button === event.target);
+    if (currentIndex === -1) {
+      props.onKeyDown?.(event);
+      return;
+    }
+    if (event.key === KeyboardKeys.ARROW_DOWN) {
+      event.preventDefault();
+      focusExpandableButton(buttonRefs, (currentIndex + 1) % buttonRefs.current.length);
+    } else if (event.key === KeyboardKeys.ARROW_UP) {
+      event.preventDefault();
+      focusExpandableButton(buttonRefs, (currentIndex - 1 + buttonRefs.current.length) % buttonRefs.current.length);
+    } else if (event.key === KeyboardKeys.HOME) {
+      event.preventDefault();
+      focusExpandableButton(buttonRefs, 0);
+    } else if (event.key === KeyboardKeys.END) {
+      event.preventDefault();
+      focusExpandableButton(buttonRefs, buttonRefs.current.length - 1);
+    }
+    props.onKeyDown?.(event);
+  }
+  return /* @__PURE__ */ jsx(Component, { ...props, "data-jumpy-component": "expandable-group", "aria-disabled": disabled || void 0, className: cn(className), onKeyDown: handleKeyDown, children: childArray.map((child, index) => {
+    const contextValue = {
+      headingLevel: headingTag(headingLevel),
+      disabled,
+      expanded: expandedIndices.has(index),
+      onExpandedChange: (nextExpanded) => updateExpanded(index, nextExpanded),
+      buttonRef: (element) => {
+        buttonRefs.current[index] = element;
+      }
+    };
+    return /* @__PURE__ */ jsxs(JumpyExpandableContext.Provider, { value: contextValue, children: [
+      child,
+      index < childArray.length - 1 ? /* @__PURE__ */ jsx(JumpDivider, { direction: "horizontal", "data-jumpy-slot": "expandable-group-divider", className: innerClasses.divider?.className, style: innerClasses.divider?.style }) : null
+    ] }, child.key || index);
+  }) });
+}
+function JumpyModalLayer({ children, onVisibleChange, style, onPointerDown, ...props }) {
+  const theme = useJumpyTheme();
+  const { refs, context } = useFloating({ open: true, onOpenChange: onVisibleChange });
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingOverlay, { ...props, lockScroll: true, "data-jumpy-theme": "true", onPointerDown: (event) => {
+    onPointerDown?.(event);
+    if (event.target === event.currentTarget) event.preventDefault();
+  }, style: { ...themeToCSSVariables(theme), ...style }, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, outsideElementsInert: true, restoreFocus: true, children: cloneElement(children, {
+    ref: refs.setFloating,
+    tabIndex: -1,
+    onKeyDown(event) {
+      children.props.onKeyDown?.(event);
+      const nestedPopup = !event.currentTarget.contains(event.target) || event.target.closest('[aria-haspopup][aria-expanded="true"]');
+      if (event.key === KeyboardKeys.ESCAPE && !event.defaultPrevented && !nestedPopup) {
+        event.preventDefault();
+        event.stopPropagation();
+        onVisibleChange?.(false);
+      }
+    }
+  }) }) }) });
+}
+function JumpSheet({ visible = false, onVisibleChange, position = "right", title, subtitle, footer, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const vertical = position === "left" || position === "right";
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(JumpyModalLayer, { onVisibleChange, "data-jumpy-component": "sheet-overlay", role: "presentation", onClick: (event) => {
+    if (event.target === event.currentTarget) onVisibleChange?.(false);
+  }, style: { position: "fixed", inset: 0, zIndex: 50, backgroundColor: theme.color.surfaceOverlay }, children: /* @__PURE__ */ jsxs("aside", { ...props, "data-jumpy-component": "sheet", className: cn(className), role: "dialog", "aria-modal": "true", "aria-label": title || props["aria-label"], tabIndex: -1, onClick: (event) => {
+    event.stopPropagation();
+    props.onClick?.(event);
+  }, style: { position: "fixed", top: position === "bottom" ? "auto" : 0, bottom: position === "top" ? "auto" : 0, left: position === "right" ? "auto" : 0, right: position === "left" ? "auto" : 0, width: vertical ? "min(420px, 100vw)" : "100vw", height: vertical ? "100dvh" : "min(420px, 100dvh)", backgroundColor: theme.color.surfaceCard, color: theme.color.textPrimary, boxShadow: theme.shadow.positiveMedium, display: "flex", flexDirection: "column", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: [
+      title ? /* @__PURE__ */ jsx(JumpTypography, { variant: "titleMediumEmphasized", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx(JumpTypography, { variant: "bodySmall", color: "secondary", children: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { padding: spacingValue(theme, JumpySpacing.large), flex: 1, overflow: "auto" }, children }),
+    footer ? /* @__PURE__ */ jsx("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: footer }) : null
+  ] }) });
+}
+function JumpSectionHeader({ as, variant = "regular", description, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "li";
+  return /* @__PURE__ */ jsxs(Component, { ...props, "data-jumpy-component": "section-header", className: cn(className), style: { display: "grid", gap: variant === "prominent" ? spacingValue(theme, JumpySpacing.small3XS) : 0, padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.large)}px`, color: theme.color.textSecondary, ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx(JumpTypography, { variant: variant === "prominent" ? "bodyMediumEmphasized" : "labelSmallEmphasized", color: "secondary", children }),
+    variant === "prominent" && description ? /* @__PURE__ */ jsx(JumpTypography, { variant: "bodySmall", color: "secondary", children: description }) : null
+  ] });
+}
+function JumpSectionFooter({ as, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "li";
+  return /* @__PURE__ */ jsx(Component, { ...props, "data-jumpy-component": "section-footer", className: cn(className), style: { padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.large)}px`, color: theme.color.textSecondary, ...props.style || {} }, children: /* @__PURE__ */ jsx(JumpTypography, { variant: "bodySmall", color: "secondary", children }) });
+}
+function JumpTag({ size: size2 = "small", status = "regular", disabled = false, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const labelStyle = textStyleValue(theme, size2 === "medium" ? JumpyTextStyle.labelMediumEmphasized : JumpyTextStyle.labelSmallEmphasized);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "data-jumpy-component": "tag",
+      "data-size": size2,
+      "data-status": status,
+      "data-disabled": disabled ? "true" : "false",
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        width: "fit-content",
+        minHeight: size2 === "medium" ? sizeValue(theme, JumpySize.small) : sizeValue(theme, JumpySize.small2XS),
+        padding: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px`,
+        borderRadius: radiusValue(theme, JumpyRadius.full),
+        borderWidth: borderWidthValue(theme, JumpyBorderWidth.small),
+        borderStyle: "solid",
+        opacity: disabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelStyle.fontSize,
+        lineHeight: labelStyle.lineHeight,
+        fontWeight: labelStyle.fontWeight,
+        letterSpacing: labelStyle.letterSpacing,
+        ...getTagStatusStyles(theme, status),
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpChip({ selected = false, disabled = false, className = "", children, ...props }) {
+  const theme = useJumpyTheme();
+  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      type: props.type || "button",
+      "data-jumpy-component": "chip",
+      "data-selected": selected ? "true" : "false",
+      disabled,
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: sizeValue(theme, JumpySize.large),
+        padding: `${spacingValue(theme, JumpySpacing.small2XS)}px ${spacingValue(theme, JumpySpacing.large)}px`,
+        borderRadius: radiusValue(theme, JumpyRadius.full),
+        borderWidth: borderWidthValue(theme, JumpyBorderWidth.small),
+        borderStyle: "solid",
+        borderColor: selected ? theme.color.surfacePrimary : theme.color.borderStrong,
+        backgroundColor: selected ? theme.color.infoSurface : theme.color.surfaceField,
+        color: selected ? theme.color.surfacePrimary : theme.color.textPrimary,
+        opacity: disabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: bodyMediumEmphasized.fontSize,
+        lineHeight: bodyMediumEmphasized.lineHeight,
+        fontWeight: bodyMediumEmphasized.fontWeight,
+        letterSpacing: bodyMediumEmphasized.letterSpacing,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...props.style || {}
+      },
+      children
+    }
+  );
+}
+function JumpCheckbox({ label, children, checked, defaultChecked = false, indeterminate = false, onCheckedChange, onIndeterminateChange, labelPlacement = "end", innerClasses = {}, className = "", disabled = false, readOnly = false, style, ...props }) {
+  const theme = useJumpyTheme();
+  const labelLarge = textStyleValue(theme, JumpyTextStyle.labelLarge);
+  const inputRef = useRef(null);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
+  const isControlled = checked !== void 0;
+  const isChecked = Boolean(isControlled ? checked : uncontrolledChecked);
+  const isReadonly = readOnly && !disabled;
+  const activeDefault = theme.selectors.active.default;
+  const activeDisabled = theme.selectors.active.disabled;
+  const activeReadOnly = theme.selectors.active.readOnly;
+  const inactiveDefault = theme.selectors.inactive.default;
+  const inactiveDisabled = theme.selectors.inactive.disabled;
+  const inactiveReadOnly = theme.selectors.inactive.readOnly;
+  const labelContent = children ?? label;
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  const stateTokens = isChecked || indeterminate ? disabled ? activeDisabled : isReadonly ? activeReadOnly : activeDefault : disabled ? inactiveDisabled : isReadonly ? inactiveReadOnly : inactiveDefault;
+  function handleChange(event) {
+    if (isReadonly) {
+      if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+      return;
+    }
+    if (indeterminate) onIndeterminateChange?.(false);
+    if (!isControlled) setUncontrolledChecked(event.target.checked);
+    onCheckedChange?.(event.target.checked);
+    props.onChange?.(event);
+  }
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-jumpy-component": "checkbox",
+      "data-checked": isChecked || indeterminate ? "true" : "false",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-readonly": isReadonly ? "true" : void 0,
+      "data-label-placement": labelPlacement,
+      className: cn(className),
+      style: {
+        "--jumpy-cmp-checkbox-container-size": `${sizeValue(theme, JumpySize.large)}px`,
+        "--jumpy-cmp-checkbox-container-radius": `${radiusValue(theme, JumpyRadius.medium)}px`,
+        "--jumpy-cmp-checkbox-input-size": `${sizeValue(theme, JumpySize.smallXS)}px`,
+        "--jumpy-cmp-checkbox-input-radius": `${radiusValue(theme, JumpyRadius.small2XS)}px`,
+        "--jumpy-cmp-checkbox-label-gap-size": `${spacingValue(theme, JumpySpacing.smallXS)}px`,
+        "--jumpy-cmp-checkbox-label-color": stateTokens.text,
+        "--jumpy-cmp-checkbox-container-color": stateTokens.surface || activeDefault.surface,
+        "--jumpy-cmp-checkbox-container-bg": "transparent",
+        "--jumpy-cmp-checkbox-icon-fill": stateTokens.icon || activeDefault.icon || theme.color.textOnPrimary,
+        "--jumpy-cmp-checkbox-input-border-color": stateTokens.border || inactiveDefault.border,
+        "--jumpy-cmp-checkbox-hover-ring-color": "var(--jumpy-selectors-inactive-hover-hover-ring, var(--jumpy-color-feedback-info-surface))",
+        "--jumpy-cmp-checkbox-hover-border-color": "var(--jumpy-selectors-inactive-hover-border, var(--jumpy-color-focus-border))",
+        "--jumpy-cmp-checkbox-hover-surface-color": "var(--jumpy-selectors-active-hover-surface, var(--jumpy-color-surface-primary))",
+        "--jumpy-cmp-checkbox-focus-border-color": "var(--jumpy-selectors-inactive-focus-border, var(--jumpy-color-focus-border))",
+        "--jumpy-cmp-checkbox-focus-ring-color": "var(--jumpy-selectors-inactive-focus-focus-ring, var(--jumpy-color-focus-ring))",
+        "--jumpy-cmp-checkbox-active-focus-ring-color": "var(--jumpy-selectors-active-focus-focus-ring, var(--jumpy-color-focus-ring))",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelLarge.fontSize,
+        lineHeight: labelLarge.lineHeight,
+        fontWeight: labelLarge.fontWeight,
+        letterSpacing: labelLarge.letterSpacing,
+        ...style || {}
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "checkbox-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              ref: (node) => {
+                inputRef.current = node;
+                if (typeof props.ref === "function") props.ref(node);
+                else if (props.ref) props.ref.current = node;
+              },
+              type: "checkbox",
+              "data-jumpy-slot": "checkbox-input",
+              className: innerClasses.input?.className,
+              checked: isChecked,
+              disabled,
+              readOnly: isReadonly,
+              "aria-readonly": isReadonly || void 0,
+              onChange: handleChange
+            }
+          ),
+          isChecked || indeterminate ? /* @__PURE__ */ jsx("svg", { "data-jumpy-slot": "checkbox-icon", className: innerClasses.icons?.className, style: innerClasses.icons?.style, viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M6 11h12v2H6z" }) : /* @__PURE__ */ jsx("path", { d: "M9.4 16.6 4.8 12l1.4-1.4 3.2 3.2 8.4-8.4L19.2 6.8z" }) }) : null
+        ] }),
+        labelContent ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "checkbox-label", children: labelContent }) : null
+      ]
+    }
+  );
+}
+function JumpSwitch({ label, children, checked, defaultChecked = false, onCheckedChange, labelPlacement = "end", innerClasses = {}, className = "", disabled = false, readOnly = false, style, ...props }) {
+  const theme = useJumpyTheme();
+  const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
+  const isControlled = checked !== void 0;
+  const isChecked = Boolean(isControlled ? checked : uncontrolledChecked);
+  const isReadonly = readOnly && !disabled;
+  const selectorState = disabled ? "disabled" : isReadonly ? "readOnly" : "default";
+  const selectorTokens = isChecked ? theme.selectors.active[selectorState] : theme.selectors.inactive[selectorState];
+  const labelContent = children ?? label;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-jumpy-component": "switch",
+      "data-checked": isChecked ? "true" : "false",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-readonly": isReadonly ? "true" : void 0,
+      "data-label-placement": labelPlacement,
+      className: cn(className),
+      style: {
+        "--jumpy-cmp-switch-thumb-size": `${sizeValue(theme, JumpySize.small2XS)}px`,
+        "--jumpy-cmp-switch-thumb-size-checked": `${sizeValue(theme, JumpySize.small)}px`,
+        "--jumpy-cmp-switch-track-width": `${sizeValue(theme, JumpySize.large2XL)}px`,
+        "--jumpy-cmp-switch-track-bg": selectorTokens.surface,
+        "--jumpy-cmp-switch-track-border": selectorTokens.border,
+        "--jumpy-cmp-switch-thumb-bg": selectorTokens.handle || selectorTokens.icon || theme.color.textOnPrimary,
+        "--jumpy-cmp-switch-icon-fill": selectorTokens.surface,
+        "--jumpy-cmp-switch-label-color": selectorTokens.text,
+        "--jumpy-cmp-switch-hover-track-bg": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-hover-surface)`,
+        "--jumpy-cmp-switch-hover-track-border": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-hover-border)`,
+        "--jumpy-cmp-switch-hover-thumb-bg": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-hover-handle)`,
+        "--jumpy-cmp-switch-focus-ring": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-focus-focus-ring)`,
+        "--jumpy-cmp-switch-focus-track-bg": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-focus-surface)`,
+        "--jumpy-cmp-switch-focus-track-border": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-focus-border)`,
+        "--jumpy-cmp-switch-focus-thumb-bg": `var(--jumpy-selectors-${isChecked ? "active" : "inactive"}-focus-handle)`,
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: bodyMedium.fontSize,
+        lineHeight: bodyMedium.lineHeight,
+        fontWeight: bodyMedium.fontWeight,
+        ...style || {}
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "switch-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              type: "checkbox",
+              role: "switch",
+              checked: isChecked,
+              disabled,
+              readOnly: isReadonly,
+              "aria-checked": isChecked,
+              "aria-readonly": isReadonly || void 0,
+              "data-jumpy-slot": "switch-input",
+              className: innerClasses.input?.className,
+              onChange: (event) => {
+                if (isReadonly) return;
+                if (!isControlled) setUncontrolledChecked(event.target.checked);
+                onCheckedChange?.(event.target.checked);
+                props.onChange?.(event);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "switch-track", className: innerClasses.track?.className, style: innerClasses.track?.style, children: /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "switch-thumb", className: innerClasses.thumb?.className, style: innerClasses.thumb?.style, children: /* @__PURE__ */ jsx("svg", { "data-jumpy-slot": "switch-icon", className: innerClasses.icon?.className, style: innerClasses.icon?.style, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6 10.25 8.6 12.85 14 7.45", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })
+        ] }),
+        labelContent ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "switch-label", children: labelContent }) : null
+      ]
+    }
+  );
+}
+function JumpRadioGroup({ name, value, defaultValue, onValueChange, options, className = "", disabled = false, readOnly = false, direction = "vertical", innerClasses = {}, ...props }) {
+  const theme = useJumpyTheme();
+  const labelLarge = textStyleValue(theme, JumpyTextStyle.labelLarge);
+  const isReadonly = readOnly && !disabled;
+  const generatedName = useId();
+  const validName = name || generatedName;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value : uncontrolledValue;
+  return /* @__PURE__ */ jsx("div", { ...props, role: "radiogroup", "aria-readonly": isReadonly || void 0, "aria-orientation": direction === "horizontal" ? "horizontal" : "vertical", "data-jumpy-component": "radio-group", "data-direction": direction, className: cn(className), style: { display: "flex", flexDirection: direction === "horizontal" ? "row" : "column", gap: spacingValue(theme, JumpySpacing.medium), ...props.style || {} }, onChange: (event) => {
+    if (isReadonly || event.defaultPrevented) return;
+    const target = event.target;
+    if (target?.type === "radio" && target.name === validName) {
+      if (!isControlled) setUncontrolledValue(target.value);
+      onValueChange?.(target.value);
+    }
+    props.onChange?.(event);
+  }, children: options.map((option) => {
+    const optionDisabled = disabled || option.disabled;
+    const optionSelected = selectedValue === option.value;
+    const selectorState = optionDisabled ? "disabled" : isReadonly ? "readOnly" : "default";
+    const selectorTokens = optionSelected ? theme.selectors.active[selectorState] : theme.selectors.inactive[selectorState];
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        "data-jumpy-component": "radio",
+        "data-checked": optionSelected ? "true" : "false",
+        "data-disabled": optionDisabled ? "true" : void 0,
+        "data-readonly": isReadonly ? "true" : void 0,
+        style: {
+          "--jumpy-cmp-radio-label-color": selectorTokens.text,
+          "--jumpy-cmp-radio-input-border-color": selectorTokens.border,
+          "--jumpy-cmp-radio-dot-color": optionSelected ? selectorTokens.surface : "transparent",
+          "--jumpy-cmp-radio-container-bg": "transparent",
+          "--jumpy-cmp-radio-hover-ring-color": `var(--jumpy-selectors-${optionSelected ? "active" : "inactive"}-hover-hover-ring)`,
+          "--jumpy-cmp-radio-hover-border-color": `var(--jumpy-selectors-${optionSelected ? "active" : "inactive"}-hover-border)`,
+          "--jumpy-cmp-radio-hover-dot-color": `var(--jumpy-selectors-${optionSelected ? "active" : "inactive"}-hover-surface)`,
+          "--jumpy-cmp-radio-focus-ring-color": `var(--jumpy-selectors-${optionSelected ? "active" : "inactive"}-focus-focus-ring)`,
+          "--jumpy-cmp-radio-focus-border-color": `var(--jumpy-selectors-${optionSelected ? "active" : "inactive"}-focus-border)`,
+          fontFamily: theme.fontFamily.familyBase,
+          fontSize: labelLarge.fontSize,
+          lineHeight: labelLarge.lineHeight,
+          fontWeight: labelLarge.fontWeight,
+          letterSpacing: labelLarge.letterSpacing
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "radio-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: /* @__PURE__ */ jsx("input", { type: "radio", name: validName, value: option.value, checked: optionSelected, disabled: optionDisabled, "aria-readonly": isReadonly || void 0, readOnly: isReadonly || void 0, "data-jumpy-slot": "radio-input", className: innerClasses.input?.className, style: innerClasses.input?.style, onChange: () => {
+          } }) }),
+          /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "radio-label", className: innerClasses.label?.className, style: innerClasses.label?.style, children: option.label })
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function toDateValue(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function sameDay(a, b) {
+  if (!a || !b) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function formatDateValue(value, format = "MM/dd/yyyy") {
+  const date = toDateValue(value);
+  if (!date) return "";
+  const parts = {
+    dd: String(date.getDate()).padStart(2, "0"),
+    MM: String(date.getMonth() + 1).padStart(2, "0"),
+    yyyy: String(date.getFullYear())
+  };
+  return format.replace(/yyyy|MM|dd/g, (token) => parts[token]);
+}
+function formatTimeValue(value, format = "HH:mm") {
+  const date = toDateValue(value);
+  if (!date) return "";
+  const hours24 = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const period = hours24 >= 12 ? "PM" : "AM";
+  const hours12 = hours24 % 12 || 12;
+  return format.includes("aa") ? format.replace("hh", String(hours12).padStart(2, "0")).replace("mm", minutes).replace("aa", period) : format.replace("HH", String(hours24).padStart(2, "0")).replace("mm", minutes);
+}
+function parseDateValue(text, format = "MM/dd/yyyy") {
+  const value = text.trim();
+  if (!value) return null;
+  const activeFormat = Array.isArray(format) ? format[0] : format;
+  const escaped = activeFormat.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = escaped.replace("dd", "(?<dd>\\d{1,2})").replace("MM", "(?<MM>\\d{1,2})").replace("yyyy", "(?<yyyy>\\d{4})");
+  const match = value.match(new RegExp(`^${pattern}$`));
+  if (!match?.groups) return null;
+  const day = Number(match.groups.dd);
+  const month = Number(match.groups.MM) - 1;
+  const year = Number(match.groups.yyyy);
+  const date = new Date(year, month, day);
+  return date.getFullYear() === year && date.getMonth() === month && date.getDate() === day ? date : null;
+}
+function parseTimeValue(text, format = "HH:mm") {
+  const value = text.trim();
+  if (!value) return null;
+  const usesPeriod = format.includes("aa");
+  const match = usesPeriod ? value.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i) : value.match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return null;
+  let hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (usesPeriod) {
+    if (hour < 1 || hour > 12) return null;
+    const period = match[3].toUpperCase();
+    hour = period === "PM" ? hour % 12 + 12 : hour % 12;
+  }
+  if (hour > 23 || minute > 59) return null;
+  const date = /* @__PURE__ */ new Date();
+  date.setHours(hour, minute, 0, 0);
+  return date;
+}
+function coerceDateOutput(date, sample) {
+  return typeof sample === "number" ? date?.getTime() ?? null : date;
+}
+function PickerTrailingIcon({ type, open }) {
+  if (type === "time") {
+    return /* @__PURE__ */ jsxs("svg", { "data-jumpy-stroke-icon": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", style: { display: "block", fill: "none" }, children: [
+      /* @__PURE__ */ jsx("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 4.75V8l2.25 1.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.25 2.5v2M11.75 2.5v2M3.25 6.25h9.5M3.75 3.75h8.5c.69 0 1.25.56 1.25 1.25v7.25c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25V5c0-.69.56-1.25 1.25-1.25Z", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    open ? /* @__PURE__ */ jsx("path", { d: "M6 10.5 7.25 11.75 10.25 8.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) : null
+  ] });
+}
+function getMonthDays(viewDate) {
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const leading = (firstDay.getDay() + 6) % 7;
+  const start = new Date(year, month, 1 - leading);
+  return Array.from({ length: 42 }, (_, index) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + index));
+}
+function dateIsUnavailable(date, { minDate, maxDate, disabledDates = [], isDateDisabled }) {
+  const min = toDateValue(minDate);
+  const max = toDateValue(maxDate);
+  if (min && date < new Date(min.getFullYear(), min.getMonth(), min.getDate())) return true;
+  if (max && date > new Date(max.getFullYear(), max.getMonth(), max.getDate())) return true;
+  if (disabledDates.some((disabledDate) => sameDay(date, toDateValue(disabledDate)))) return true;
+  return Boolean(isDateDisabled?.(date));
+}
+function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onChange, open, onOpenChange, format = "MM/dd/yyyy", minDate, maxDate, disabledDates = [], isDateDisabled, labels = {}, disabled = false, readOnly = false, className = "", status = "regular", error = false, hideClearIcon = false, onClear, ...props }) {
+  const theme = useJumpyTheme();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = value !== void 0;
+  const selectedDate = toDateValue(isControlled ? value : internalValue);
+  const selectedTime = selectedDate?.getTime() ?? null;
+  const [viewDate, setViewDate] = useState(selectedDate || /* @__PURE__ */ new Date());
+  const isOpen = open ?? internalOpen;
+  const resolvedFormat = Array.isArray(format) ? format[0] : format;
+  const inputValue = formatDateValue(selectedDate, resolvedFormat);
+  const [draft, setDraft] = useState(inputValue);
+  const typedValue = useRef(void 0);
+  useEffect(() => {
+    if (typedValue.current !== selectedTime) setDraft(inputValue);
+    typedValue.current = void 0;
+    if (selectedTime !== null) setViewDate(new Date(selectedTime));
+  }, [selectedTime, inputValue, resolvedFormat]);
+  const weekdays = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  const dayCells = getMonthDays(viewDate);
+  const { refs, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(spacingValue(theme, JumpySpacing.smallXS)), flip({ padding: spacingValue(theme, JumpySpacing.medium) })]
+  });
+  function setOpen(next) {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+  function commit(date) {
+    if (date && dateIsUnavailable(date, { minDate, maxDate, disabledDates, isDateDisabled })) return;
+    const next = coerceDateOutput(date, value ?? defaultValue);
+    typedValue.current = void 0;
+    if (!isControlled) setInternalValue(next);
+    setDraft(isControlled ? inputValue : formatDateValue(date, resolvedFormat));
+    onChange?.(next);
+    setOpen(false);
+  }
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx(PickerTrailingIcon, { type: "date", open: isOpen });
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "date-picker", style: { position: "relative", width: 312, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
+      JumpInput,
+      {
+        ...props,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        readOnly,
+        disabled,
+        value: draft,
+        placeholder: props.placeholder || (Array.isArray(format) ? format[0] : format),
+        autoComplete: "off",
+        inputMode: "numeric",
+        onChange: (event) => {
+          const text = event.target.value;
+          setDraft(text);
+          const parsedDate = parseDateValue(text, format);
+          typedValue.current = void 0;
+          if (!text.trim() || parsedDate && !dateIsUnavailable(parsedDate, { minDate, maxDate, disabledDates, isDateDisabled })) {
+            const next = coerceDateOutput(parsedDate, value ?? defaultValue);
+            const nextTime = parsedDate?.getTime() ?? null;
+            if (nextTime !== selectedTime) typedValue.current = nextTime;
+            if (!isControlled) setInternalValue(next);
+            onChange?.(next);
+          }
+        },
+        onBlur: (event) => {
+          typedValue.current = void 0;
+          setDraft(inputValue);
+          props.onBlur?.(event);
+        },
+        onClick: (event) => {
+          if (!readOnly) setOpen(!isOpen);
+          props.onClick?.(event);
+        },
+        onKeyDown: (event) => {
+          if ((event.key === "ArrowDown" || event.key === "Enter") && !readOnly) {
+            event.preventDefault();
+            setOpen(true);
+          }
+          if (event.key === "Escape") setOpen(false);
+          props.onKeyDown?.(event);
+        }
+      }
+    ) }),
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, "data-jumpy-theme": "true", style: { ...themeToCSSVariables(theme), ...floatingStyles, zIndex: 1e3, width: sizeValue(theme, JumpySize.large8XL) * 2.5, maxWidth: "calc(100vw - 32px)", overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: "var(--jumpy-card-inactive-default-surface, var(--jumpy-color-surface-card))", color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0` }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.medium), padding: spacingValue(theme, JumpySpacing.small3XS) }, children: [
+        /* @__PURE__ */ jsx(JumpIconButton, { variant: "borderless", "aria-label": "Previous", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ jsx("strong", { style: { fontFamily: theme.fontFamily.familyBase, color: "inherit" }, children: viewDate.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ jsx(JumpIconButton, { variant: "borderless", "aria-label": "Next", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)), children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: spacingValue(theme, JumpySpacing.small3XS), padding: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px` }, children: [
+        weekdays.map((weekday) => /* @__PURE__ */ jsx("span", { style: { color: theme.color.textSecondary, textAlign: "center", fontSize: textStyleValue(theme, JumpyTextStyle.labelSmall).fontSize, fontWeight: theme.fontFamily.labelSmall.fontWeight }, children: weekday }, weekday)),
+        dayCells.map((date) => {
+          const outside = date.getMonth() !== viewDate.getMonth();
+          const selected = sameDay(date, selectedDate);
+          const unavailable = dateIsUnavailable(date, { minDate, maxDate, disabledDates, isDateDisabled });
+          return /* @__PURE__ */ jsx("button", { type: "button", disabled: unavailable, onClick: () => commit(date), style: { minHeight: sizeValue(theme, JumpySize.large), border: 0, borderRadius: radiusValue(theme, JumpyRadius.small), backgroundColor: selected ? "var(--jumpy-interactive-active-regular-default-surface, var(--jumpy-color-surface-primary))" : "transparent", color: selected ? "var(--jumpy-interactive-active-regular-default-text, var(--jumpy-color-text-on-primary))" : outside ? "var(--jumpy-card-inactive-default-subtext, var(--jumpy-color-text-secondary))" : "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", opacity: unavailable ? opacityValue(theme, JumpyOpacity.medium) : outside ? opacityValue(theme, JumpyOpacity.strong) : opacityValue(theme, JumpyOpacity.solid), cursor: unavailable ? "not-allowed" : "pointer", fontFamily: theme.fontFamily.familyBase }, children: date.getDate() }, date.toISOString());
+        })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: spacingValue(theme, JumpySpacing.smallXS), padding: spacingValue(theme, JumpySpacing.large) }, children: [
+        /* @__PURE__ */ jsx(JumpButton, { variant: "tertiary", onClick: () => setOpen(false), children: labels.cancelButton || "Cancel" }),
+        /* @__PURE__ */ jsx(JumpButton, { variant: "borderless", onClick: () => commit(/* @__PURE__ */ new Date()), children: "Today" })
+      ] })
+    ] }) }) : null
+  ] });
+}
+function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onChange, open, onOpenChange, format, twentyFourHours = true, labels = {}, disabled = false, readOnly = false, className = "", status = "regular", error = false, hideClearIcon = false, onClear, ...props }) {
+  const theme = useJumpyTheme();
+  const resolvedFormat = format || (twentyFourHours ? "HH:mm" : "hh:mm aa");
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = value !== void 0;
+  const selectedDate = toDateValue(isControlled ? value : internalValue);
+  const selectedTime = selectedDate?.getTime() ?? null;
+  const inputValue = formatTimeValue(selectedDate, resolvedFormat);
+  const [draft, setDraft] = useState(inputValue);
+  const typedValue = useRef(void 0);
+  useEffect(() => {
+    if (typedValue.current !== selectedTime) setDraft(inputValue);
+    typedValue.current = void 0;
+  }, [selectedTime, inputValue, resolvedFormat]);
+  const isOpen = open ?? internalOpen;
+  const hours = Array.from({ length: twentyFourHours ? 24 : 12 }, (_, index) => String(twentyFourHours ? index : index + 1).padStart(2, "0"));
+  const minutes = Array.from({ length: 60 }, (_, index) => String(index).padStart(2, "0"));
+  const currentHour = selectedDate ? selectedDate.getHours() : 0;
+  const currentMinute = selectedDate ? selectedDate.getMinutes() : 0;
+  const displayHour = twentyFourHours ? currentHour : currentHour % 12 || 12;
+  const currentPeriod = currentHour >= 12 ? "PM" : "AM";
+  const { refs, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(spacingValue(theme, JumpySpacing.smallXS)), flip({ padding: spacingValue(theme, JumpySpacing.medium) })]
+  });
+  function setOpen(next) {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+  function commit(part, rawValue) {
+    const next = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+    if (part === "hour") {
+      const hour = Number(rawValue);
+      next.setHours(twentyFourHours ? hour : currentPeriod === "PM" ? hour % 12 + 12 : hour % 12);
+    }
+    if (part === "minute") next.setMinutes(Number(rawValue));
+    if (part === "period") {
+      const base = next.getHours() % 12;
+      next.setHours(rawValue === "PM" ? base + 12 : base);
+    }
+    next.setSeconds(0, 0);
+    const output = coerceDateOutput(next, value ?? defaultValue);
+    typedValue.current = void 0;
+    if (!isControlled) setInternalValue(output);
+    setDraft(isControlled ? inputValue : formatTimeValue(next, resolvedFormat));
+    onChange?.(output);
+  }
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx(PickerTrailingIcon, { type: "time", open: isOpen });
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, "data-jumpy-component": "time-picker", style: { position: "relative", width: 340, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
+      JumpInput,
+      {
+        ...props,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        readOnly,
+        disabled,
+        value: draft,
+        placeholder: props.placeholder || resolvedFormat,
+        autoComplete: "off",
+        inputMode: resolvedFormat.includes("aa") ? "text" : "numeric",
+        onChange: (event) => {
+          const text = event.target.value;
+          setDraft(text);
+          const parsedDate = parseTimeValue(text, resolvedFormat);
+          typedValue.current = void 0;
+          if (!text.trim() || parsedDate) {
+            const output = coerceDateOutput(parsedDate, value ?? defaultValue);
+            const nextTime = parsedDate?.getTime() ?? null;
+            if (nextTime !== selectedTime) typedValue.current = nextTime;
+            if (!isControlled) setInternalValue(output);
+            onChange?.(output);
+          }
+        },
+        onBlur: (event) => {
+          typedValue.current = void 0;
+          setDraft(inputValue);
+          props.onBlur?.(event);
+        },
+        onClick: (event) => {
+          if (!readOnly) setOpen(!isOpen);
+          props.onClick?.(event);
+        },
+        onKeyDown: (event) => {
+          if ((event.key === "ArrowDown" || event.key === "Enter") && !readOnly) {
+            event.preventDefault();
+            setOpen(true);
+          }
+          if (event.key === "Escape") setOpen(false);
+          props.onKeyDown?.(event);
+        }
+      }
+    ) }),
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, "data-jumpy-theme": "true", style: { ...themeToCSSVariables(theme), ...floatingStyles, zIndex: 1e3, overflow: "visible", borderRadius: radiusValue(theme, JumpyRadius.smallXS), backgroundColor: `var(--jumpy-non-interactive-background-alternative, var(--jumpy-color-non-interactive-background-alternative, ${theme.color.surfaceCard}))`, color: "var(--jumpy-card-inactive-default-text, var(--jumpy-color-text-primary))", boxShadow: theme.shadow.positiveMedium, padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, minWidth: 260 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", justifyContent: "center", alignItems: "center", gap: spacingValue(theme, JumpySpacing.small), padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.zero)}px`, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", left: 0, right: 0, top: "50%", height: sizeValue(theme, JumpySize.medium), transform: "translateY(-50%)", backgroundColor: "var(--jumpy-interactive-active-regular-default-surface)", pointerEvents: "none" } }),
+        /* @__PURE__ */ jsx(TimeColumn, { label: "Hour", values: hours, selected: String(displayHour).padStart(2, "0"), onSelect: (next) => commit("hour", next), theme }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", width: sizeValue(theme, JumpySize.smallXS), height: sizeValue(theme, JumpySize.large), padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, color: "var(--jumpy-interactive-active-regular-default-text)", fontFamily: theme.fontFamily.familyBase, fontSize: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontSize, fontWeight: textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized).fontWeight }, children: ":" }),
+        /* @__PURE__ */ jsx(TimeColumn, { label: "Minute", values: minutes, selected: String(currentMinute).padStart(2, "0"), onSelect: (next) => commit("minute", next), theme }),
+        !twentyFourHours ? /* @__PURE__ */ jsx(TimeColumn, { label: "Period", values: ["AM", "PM"], selected: currentPeriod, onSelect: (next) => commit("period", next), theme }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.smallXS), padding: spacingValue(theme, JumpySpacing.large) }, children: [
+        /* @__PURE__ */ jsx(JumpButton, { variant: "tertiary", onClick: () => setOpen(false), children: labels.cancelButton || "Cancel" }),
+        /* @__PURE__ */ jsx(JumpButton, { onClick: () => setOpen(false), children: labels.applyButton || "Apply" })
+      ] })
+    ] }) }) : null
+  ] });
+}
+function TimeColumn({ label, values, selected, onSelect, theme }) {
+  const selectedIndex = Math.max(0, values.indexOf(selected));
+  const visibleValues = Array.from({ length: Math.min(5, values.length) }, (_, offsetIndex) => {
+    const centeredOffset = offsetIndex - 2;
+    return values[(selectedIndex + centeredOffset + values.length) % values.length];
+  });
+  const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  const bodyLargeEmphasized = textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized);
+  return /* @__PURE__ */ jsx("div", { "aria-label": label, style: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", overflow: "hidden", padding: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px`, margin: `0 ${-spacingValue(theme, JumpySpacing.small3XS)}px`, height: (sizeValue(theme, JumpySize.large) + spacingValue(theme, JumpySpacing.small3XS) * 2) * 5 }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleValues.map((value) => {
+    const active = value === selected;
+    return /* @__PURE__ */ jsx("button", { type: "button", "data-jumpy-component": "time-picker-wheel-button", onClick: () => onSelect(value), "data-selected": active ? "true" : "false", style: { border: 0, width: sizeValue(theme, JumpySize.large), height: sizeValue(theme, JumpySize.large), flex: `0 0 ${sizeValue(theme, JumpySize.large)}px`, backgroundColor: "transparent", color: active ? "var(--jumpy-interactive-active-regular-default-text, var(--jumpy-color-text-on-primary))" : "var(--jumpy-interactive-inactive-regular-default-text, var(--jumpy-color-text-primary))", padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`, cursor: "pointer", fontFamily: theme.fontFamily.familyBase, fontSize: active ? bodyLargeEmphasized.fontSize : bodyMedium.fontSize, lineHeight: active ? bodyLargeEmphasized.lineHeight : bodyMedium.lineHeight, fontWeight: active ? bodyLargeEmphasized.fontWeight : bodyMedium.fontWeight }, children: value }, `${label}-${value}`);
+  }) }) });
+}
+function flattenDropdownItems(items) {
+  return items.flatMap((item) => [item, ...flattenDropdownItems(item.children || [])]);
+}
+function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, onOpenChange, items = [], placeholder, disabled = false, readOnly = false, multiple = false, searchable = false, renderTrigger, renderItem, inputRef, className = "", status = "regular", error = false, hideClearIcon = false, onClear, ...props }) {
+  const theme = useJumpyTheme();
+  const fieldContext = useContext(JumpyFieldContext);
+  const generatedId = useId();
+  const triggerId = props.id || `jumpy-dropdown-${generatedId}`;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const selectedValues = value ?? internalValue;
+  const isOpen = open ?? internalOpen;
+  const flattenedItems = flattenDropdownItems(items);
+  const visibleItems = searchValue ? flattenedItems.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase())) : flattenedItems;
+  const enabledVisibleItems = visibleItems.filter((item) => !item.disabled);
+  const selectedItems = flattenedItems.filter((item) => selectedValues.includes(item.value));
+  const displayText = selectedItems.map((item) => item.label).join(", ");
+  const dropdownOffset = spacingValue(theme, JumpySpacing.small3XS);
+  const dropdownPadding = spacingValue(theme, JumpySpacing.medium);
+  const dropdownMinHeight = sizeValue(theme, JumpySize.large2XL);
+  const dropdownMaxHeight = sizeValue(theme, JumpySize.large8XL) * 2;
+  const { refs, floatingStyles } = useFloating({
+    open: isOpen,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(dropdownOffset),
+      flip({ padding: dropdownPadding }),
+      size({
+        padding: dropdownPadding,
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            maxHeight: `${Math.max(dropdownMinHeight, Math.min(dropdownMaxHeight, availableHeight))}px`
+          });
+        }
+      })
+    ]
+  });
+  const triggerStyle = fieldContext && !label && !hint ? {
+    paddingRight: sizeValue(theme, JumpySize.small2XS) + spacingValue(theme, JumpySpacing.medium),
+    ...props.style || {}
+  } : props.style;
+  const triggerInputStyle = {
+    ...triggerStyle || {},
+    caretColor: "transparent"
+  };
+  function setOpen(next) {
+    setInternalOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setSearchValue("");
+      setFocusedIndex(-1);
+    } else if (enabledVisibleItems.length > 0 && focusedIndex < 0) {
+      setFocusedIndex(visibleItems.findIndex((item) => !item.disabled));
+    }
+  }
+  function commit(nextValues) {
+    setInternalValue(nextValues);
+    onChange?.(nextValues);
+    if (!multiple) {
+      setOpen(false);
+      refs.domReference.current?.focus();
+    }
+  }
+  useEffect(() => {
+    if (!isOpen) return void 0;
+    function dismissOutside(event) {
+      if (!dropdownRef.current?.contains(event.target) && !refs.floating.current?.contains(event.target)) setOpen(false);
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("focusin", dismissOutside);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("focusin", dismissOutside);
+    };
+  });
+  function selectItem(item) {
+    if (!item || item.disabled) return;
+    if (multiple) {
+      commit(selectedValues.includes(item.value) ? selectedValues.filter((v) => v !== item.value) : [...selectedValues, item.value]);
+      return;
+    }
+    commit([item.value]);
+  }
+  function moveFocus(direction) {
+    if (enabledVisibleItems.length === 0) return;
+    const currentEnabledIndex = enabledVisibleItems.findIndex((item) => item.value === visibleItems[focusedIndex]?.value);
+    const nextEnabledIndex = direction === "start" ? 0 : direction === "end" ? enabledVisibleItems.length - 1 : (currentEnabledIndex + direction + enabledVisibleItems.length) % enabledVisibleItems.length;
+    setFocusedIndex(visibleItems.findIndex((item) => item.value === enabledVisibleItems[nextEnabledIndex].value));
+  }
+  const triggerInput = /* @__PURE__ */ jsx(
+    JumpInput,
+    {
+      ...props,
+      ref: (node) => {
+        refs.setReference(node);
+        if (typeof inputRef === "function") inputRef(node);
+        else if (inputRef) inputRef.current = node;
+      },
+      id: triggerId,
+      style: triggerInputStyle,
+      "data-jumpy-dropdown-trigger": "true",
+      "data-has-value": Boolean(displayText),
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-controls": isOpen ? `${triggerId}-listbox` : void 0,
+      "aria-activedescendant": isOpen && focusedIndex >= 0 ? `${triggerId}-option-${focusedIndex}` : void 0,
+      readOnly,
+      disabled,
+      value: displayText,
+      placeholder: displayText ? void 0 : placeholder,
+      autoComplete: "off",
+      spellCheck: false,
+      inputMode: "none",
+      onClick: (event) => {
+        if (!readOnly) setOpen(!isOpen);
+        props.onClick?.(event);
+      },
+      onBlur: (event) => {
+        props.onBlur?.(event);
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Tab" && event.key !== "Escape") event.preventDefault();
+        if (readOnly) {
+          props.onKeyDown?.(event);
+          return;
+        }
+        if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+          setOpen(true);
+        }
+        if (event.key === "ArrowDown") moveFocus(1);
+        if (event.key === "ArrowUp") moveFocus(-1);
+        if (event.key === "Home") moveFocus("start");
+        if (event.key === "End") moveFocus("end");
+        if ((event.key === "Enter" || event.key === " ") && isOpen) selectItem(visibleItems[focusedIndex]);
+        props.onKeyDown?.(event);
+      },
+      onPaste: (event) => event.preventDefault()
+    }
+  );
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", style: { display: "block", fontSize: sizeValue(theme, JumpySize.small) }, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: isOpen ? "m16.59 15.705 1.41-1.41-6-6-6 6 1.41 1.41 4.59-4.58z" : "M7.41 8.295 6 9.705l6 6 6-6-1.41-1.41-4.59 4.58z", clipRule: "evenodd", fill: "currentColor" }) });
+  const trigger = renderTrigger ? renderTrigger(selectedValues, isOpen) : fieldContext && !label && !hint ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerInput,
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { pointerEvents: "none", position: "absolute", right: spacingValue(theme, JumpySpacing.medium), top: "50%", transform: "translateY(-50%)", color: theme.color.textSecondary, display: "inline-flex", alignItems: "center", justifyContent: "center", lineHeight: 1 }, children: trailing })
+  ] }) : /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear: () => {
+    commit([]);
+    setSearchValue("");
+    onClear?.();
+  }, className, trailing, children: triggerInput });
+  const listbox = isOpen && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: refs.setFloating,
+      id: `${triggerId}-listbox`,
+      role: "listbox",
+      "aria-multiselectable": multiple || void 0,
+      "data-jumpy-theme": "true",
+      "data-jumpy-component": "dropdown-popover",
+      style: {
+        ...themeToCSSVariables(theme),
+        ...floatingStyles,
+        zIndex: 1e3,
+        overflowX: "hidden",
+        overflowY: "auto",
+        borderRadius: radiusValue(theme, JumpyRadius.large),
+        backgroundColor: `var(--jumpy-non-interactive-background-alternative, var(--jumpy-color-non-interactive-background-alternative, ${theme.color.surfaceCard}))`,
+        boxShadow: theme.shadow.positiveMedium,
+        padding: `${spacingValue(theme, JumpySpacing.small3XS)}px 0`
+      },
+      children: [
+        searchable ? /* @__PURE__ */ jsx("div", { style: { margin: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px` }, children: /* @__PURE__ */ jsx(JumpSearchField, { label: "Search", placeholder: "Search", value: searchValue, onChange: (event) => {
+          setSearchValue(event.target.value);
+          setFocusedIndex(-1);
+        } }) }) : null,
+        visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "dropdown-empty-state", style: { padding: `${spacingValue(theme, JumpySpacing.medium)}px ${spacingValue(theme, JumpySpacing.large)}px`, color: "var(--jumpy-interactive-inactive-regular-default-text)", fontFamily: theme.fontFamily.familyBase, fontSize: textStyleValue(theme, JumpyTextStyle.bodyMedium).fontSize }, children: "No options available" }) : null,
+        visibleItems.map((item, index) => {
+          const selected = selectedValues.includes(item.value);
+          const listItemProps = {
+            id: `${triggerId}-option-${index}`,
+            role: "option",
+            "aria-selected": selected,
+            disabled: item.disabled,
+            onMouseDown: (event) => event.preventDefault(),
+            onMouseEnter: () => setFocusedIndex(index),
+            onClick: () => {
+              selectItem(item);
+            }
+          };
+          return renderItem ? renderItem(item, selected, listItemProps) : /* @__PURE__ */ jsx(JumpListItem, { selected, ...listItemProps, children: item.label }, String(item.value));
+        })
+      ]
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, "data-jumpy-component": "dropdown", onKeyDown: (event) => {
+    if (event.key === KeyboardKeys.ESCAPE && isOpen && !event.defaultPrevented) {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      refs.domReference.current?.focus();
+    }
+  }, style: { position: "relative", width: "100%" }, children: [
+    trigger,
+    listbox
+  ] });
+}
+function JumpSpinner({ size: size2 = "medium", mode = "indeterminate", value = 0, showTrack = true, inverse = false, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const sizeMap = {
+    xSmall: { diameter: 20, strokeWidth: 2 },
+    small: { diameter: 24, strokeWidth: 2 },
+    medium: { diameter: 32, strokeWidth: 2 },
+    large: { diameter: 48, strokeWidth: 4 },
+    xLarge: { diameter: 56, strokeWidth: 4 },
+    xxLarge: { diameter: 72, strokeWidth: 4 }
+  };
+  const { diameter, strokeWidth } = sizeMap[size2] || sizeMap.medium;
+  const radius = (diameter - strokeWidth) / 2;
+  const center = diameter / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clampedValue = Math.min(Math.max(value, 0), 100);
+  const dash = mode === "determinate" ? clampedValue / 100 * circumference : circumference * 0.72;
+  const gap = circumference - dash;
+  return /* @__PURE__ */ jsxs("svg", { ...props, "data-jumpy-component": "spinner", className: cn(className), width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, role: "progressbar", "aria-valuemin": mode === "determinate" ? 0 : void 0, "aria-valuemax": mode === "determinate" ? 100 : void 0, "aria-valuenow": mode === "determinate" ? clampedValue : void 0, "aria-label": props["aria-label"] || (mode === "determinate" ? `Loading progress: ${clampedValue}%` : "Loading in progress"), style: { color: inverse ? theme.color.textOnPrimary : theme.color.surfacePrimary, ...props.style || {} }, children: [
+    showTrack ? /* @__PURE__ */ jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: theme.color.borderSubtle, strokeWidth }) : null,
+    /* @__PURE__ */ jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth, strokeLinecap: "round", strokeDasharray: `${dash} ${gap}`, transform: `rotate(-90 ${center} ${center})`, children: mode === "indeterminate" ? /* @__PURE__ */ jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${center} ${center}`, to: `360 ${center} ${center}`, dur: "1s", repeatCount: "indefinite" }) : null })
+  ] });
+}
+function JumpDialog({ as, visible = false, onVisibleChange, title, description, footer, children, className = "", disableBackdropClick = false, disableContentScroll = false, fullScreen = false, overlayProps, slots, innerClasses = {}, ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || "div";
+  const labelId = useId();
+  const descriptionId = useId();
+  const dialogTitle = slots?.title ?? title;
+  const dialogDescription = slots?.description ?? description;
+  const dialogFooter = slots?.footer ?? footer;
+  const dialogIcon = slots?.icon;
+  const dialogIllustration = slots?.illustration;
+  const titleStyle = textStyleValue(theme, JumpyTextStyle.titleLarge);
+  const descriptionStyle = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  const { className: overlayClassName, style: overlayStyle, onClick: overlayOnClick, ...restOverlayProps } = overlayProps || {};
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(
+    JumpyModalLayer,
+    {
+      ...restOverlayProps,
+      onVisibleChange,
+      "data-jumpy-component": "dialog-overlay",
+      "data-disable-content-scroll": disableContentScroll ? "true" : "false",
+      role: "presentation",
+      className: cn(overlayClassName),
+      onClick: (event) => {
+        overlayOnClick?.(event);
+        if (event.target === event.currentTarget && !event.defaultPrevented && !disableBackdropClick) onVisibleChange?.(false);
+      },
+      style: overlayStyle,
+      children: /* @__PURE__ */ jsxs(
+        Component,
+        {
+          ...props,
+          "data-jumpy-component": "dialog",
+          "data-full-screen": fullScreen ? "true" : "false",
+          "data-no-footer": dialogFooter ? "false" : "true",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": dialogTitle ? labelId : void 0,
+          "aria-describedby": dialogDescription ? descriptionId : void 0,
+          "aria-label": !dialogTitle ? props["aria-label"] || title : props["aria-label"],
+          className: cn(className),
+          onClick: (event) => {
+            event.stopPropagation();
+            props.onClick?.(event);
+          },
+          style: {
+            "--jumpy-dialog-width": props.style?.width || "472px",
+            ...props.style || {}
+          },
+          children: [
+            dialogIllustration ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "dialog-illustration", className: innerClasses.illustration?.className, style: innerClasses.illustration?.style, children: dialogIllustration }) : null,
+            /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "dialog-body", className: innerClasses.body?.className, style: innerClasses.body?.style, children: [
+              dialogIcon ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "dialog-icon", className: innerClasses.icon?.className, style: innerClasses.icon?.style, children: dialogIcon }) : null,
+              dialogTitle ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: labelId,
+                  "data-jumpy-slot": "dialog-title",
+                  className: innerClasses.title?.className,
+                  style: {
+                    margin: 0,
+                    fontFamily: theme.fontFamily.familyBase,
+                    fontSize: titleStyle.fontSize,
+                    lineHeight: titleStyle.lineHeight,
+                    fontWeight: titleStyle.fontWeight,
+                    letterSpacing: titleStyle.letterSpacing,
+                    ...innerClasses.title?.style || {}
+                  },
+                  children: dialogTitle
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "dialog-scrollable-content", className: innerClasses.scrollableContent?.className, style: innerClasses.scrollableContent?.style, children: [
+                dialogDescription ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: descriptionId,
+                    "data-jumpy-slot": "dialog-description",
+                    className: innerClasses.description?.className,
+                    style: {
+                      margin: 0,
+                      fontFamily: theme.fontFamily.familyBase,
+                      fontSize: descriptionStyle.fontSize,
+                      lineHeight: descriptionStyle.lineHeight,
+                      fontWeight: descriptionStyle.fontWeight,
+                      letterSpacing: descriptionStyle.letterSpacing,
+                      ...innerClasses.description?.style || {}
+                    },
+                    children: dialogDescription
+                  }
+                ) : null,
+                children
+              ] })
+            ] }),
+            dialogFooter ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "dialog-footer", className: innerClasses.footer?.className, style: innerClasses.footer?.style, children: dialogFooter }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function JumpLoader({ label = "Jumpy UI wird geladen", fullScreen = false, className = "", decorativeBackground = false }) {
+  const theme = useJumpyTheme();
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center text-center", className), role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", style: { height: theme.sizing.loaderSize, width: theme.sizing.loaderSize }, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { borderRadius: theme.radius.large2XL, backgroundColor: theme.color.infoSurface } }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-2", style: { borderRadius: theme.radius.largeXL, border: `1px solid ${theme.color.infoBorder}`, backgroundColor: theme.color.surfaceCard, boxShadow: theme.shadow.loader } }),
+      /* @__PURE__ */ jsx("span", { className: "relative grid place-items-center", style: { color: theme.color.surfacePrimary }, children: /* @__PURE__ */ jsx(JumpSpinner, { size: "large", "aria-label": label }) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-5 text-[11px] font-bold uppercase tracking-[0.18em]", style: { color: theme.color.surfacePrimary }, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-1.5", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.2s]", style: { backgroundColor: theme.color.surfacePrimary } }),
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.1s]", style: { backgroundColor: theme.color.successBorder } }),
+      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full", style: { backgroundColor: theme.color.infoBorder } })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Laden" })
+  ] });
+  if (!fullScreen) return content;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-screen items-center justify-center overflow-hidden p-6", style: { backgroundColor: theme.color.surfaceCanvas, color: theme.color.textPrimary }, children: [
+    decorativeBackground && /* @__PURE__ */ jsx(JumpBackground, { snow: false }),
+    /* @__PURE__ */ jsx(JumpCard, { className: cn("px-10 py-9", decorativeBackground && "relative z-10"), children: content })
+  ] });
+}
+function JumpButton({ as, variant = "primary", status = "regular", className = "", isLoading = false, disabled, elevated = false, slots, leadingIcon, trailingIcon, children, ...props }) {
+  const theme = useJumpyTheme();
+  const variantStyles = getButtonVariantStyles(theme, variant, status);
+  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
+  const iconSize = sizeValue(theme, JumpySize.small2XS);
+  const [pressed, setPressed] = useState(false);
+  const leading = slots?.leading ?? leadingIcon;
+  const trailing = slots?.trailing ?? trailingIcon;
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const isDisabled = disabled || isLoading;
+  const spacing = getButtonSpacing(theme, variant, Boolean(leading), Boolean(trailing));
+  const hasBorder = variant === "secondary" || variant === "tertiary";
+  const content = /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
+    leading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: leading }) : null,
+    /* @__PURE__ */ jsx("span", { children }),
+    trailing ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: trailing }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      type: isButton ? props.type || "button" : props.type,
+      "data-jumpy-component": "icon-button",
+      "data-variant": variant,
+      "data-status": status,
+      "data-elevated": elevated ? "true" : "false",
+      "data-loading": isLoading ? "true" : "false",
+      "data-pressed": pressed ? "true" : "false",
+      "aria-busy": isLoading || void 0,
+      "aria-disabled": !isButton && isDisabled ? true : props["aria-disabled"],
+      tabIndex: !isButton && isDisabled ? -1 : props.tabIndex,
+      disabled: isButton ? isDisabled : void 0,
+      onPointerDown: (event) => {
+        setPressed(true);
+        props.onPointerDown?.(event);
+      },
+      onPointerUp: (event) => {
+        setPressed(false);
+        props.onPointerUp?.(event);
+      },
+      onPointerLeave: (event) => {
+        setPressed(false);
+        props.onPointerLeave?.(event);
+      },
+      onBlur: (event) => {
+        setPressed(false);
+        props.onBlur?.(event);
+      },
+      className: cn("disabled:cursor-not-allowed", className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: sizeValue(theme, JumpySize.large),
+        appearance: "none",
+        WebkitAppearance: "none",
+        boxSizing: "border-box",
+        paddingLeft: spacing.paddingLeft,
+        paddingRight: spacing.paddingRight,
+        paddingTop: spacing.paddingTop,
+        paddingBottom: spacing.paddingBottom,
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        letterSpacing: bodyMediumEmphasized.letterSpacing,
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: bodyMediumEmphasized.fontSize,
+        lineHeight: bodyMediumEmphasized.lineHeight,
+        fontWeight: bodyMediumEmphasized.fontWeight,
+        opacity: isDisabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
+        borderWidth: hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0,
+        borderStyle: hasBorder ? "solid" : "none",
+        ...variantStyles,
+        ...elevated && !isDisabled ? { "--jumpy-action-default-shadow": shadowValue(theme, JumpyShadowStyle.positiveMedium) } : {},
+        ...props.style || {}
+      },
+      children: /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", whiteSpace: "nowrap" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", whiteSpace: "nowrap", opacity: isLoading ? 0 : 1 }, children: content }),
+        isLoading ? /* @__PURE__ */ jsxs("span", { className: "absolute inset-0 inline-flex items-center justify-center gap-2 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "opacity-90", children: "Loading" })
+        ] }) : null
+      ] })
+    }
+  );
+}
+function JumpIconButton({ as, variant = "primary", status = "regular", alternateHover = false, elevated = false, className = "", disabled, children, "aria-label": ariaLabel, ...props }) {
+  const theme = useJumpyTheme();
+  const actionVariant = variant === "primary" ? "secondary" : variant === "secondary" ? "tertiary" : variant;
+  const variantStyles = getButtonVariantStyles(theme, actionVariant, status);
+  const actionTokenPrefix = `--jumpy-actions-${actionVariant}-${status}`;
+  const [pressed, setPressed] = useState(false);
+  const Component = as || "button";
+  const isButton = Component === "button";
+  const supportsDisabled = typeof Component === "string" && supportsDisabledAttribute(Component);
+  const hasBorder = variant === "primary";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      type: isButton ? props.type || "button" : props.type,
+      "aria-label": ariaLabel,
+      "data-jumpy-component": "button",
+      "data-variant": variant,
+      "data-status": status,
+      "data-elevated": elevated ? "true" : "false",
+      "data-pressed": pressed ? "true" : "false",
+      "aria-disabled": !supportsDisabled && disabled ? true : props["aria-disabled"],
+      tabIndex: !supportsDisabled && disabled ? -1 : props.tabIndex,
+      disabled: supportsDisabled ? disabled : void 0,
+      onPointerDown: (event) => {
+        setPressed(true);
+        props.onPointerDown?.(event);
+      },
+      onPointerUp: (event) => {
+        setPressed(false);
+        props.onPointerUp?.(event);
+      },
+      onPointerLeave: (event) => {
+        setPressed(false);
+        props.onPointerLeave?.(event);
+      },
+      onBlur: (event) => {
+        setPressed(false);
+        props.onBlur?.(event);
+      },
+      className: cn("disabled:cursor-not-allowed", className),
+      style: {
+        display: "inline-grid",
+        placeItems: "center",
+        width: sizeValue(theme, JumpySize.large),
+        height: sizeValue(theme, JumpySize.large),
+        minWidth: sizeValue(theme, JumpySize.large),
+        minHeight: sizeValue(theme, JumpySize.large),
+        appearance: "none",
+        WebkitAppearance: "none",
+        boxSizing: "border-box",
+        padding: spacingValue(theme, JumpySpacing.small2XS),
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        borderWidth: hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0,
+        borderStyle: hasBorder ? "solid" : "none",
+        opacity: disabled ? opacityValue(theme, JumpyOpacity.medium) : opacityValue(theme, JumpyOpacity.solid),
+        ...variantStyles,
+        "--jumpy-action-default-icon": `var(${actionTokenPrefix}-default-action, ${variantStyles["--jumpy-action-default-icon"]})`,
+        "--jumpy-action-hover-icon": `var(${actionTokenPrefix}-hover-action, ${variantStyles["--jumpy-action-hover-icon"]})`,
+        "--jumpy-action-focus-icon": `var(${actionTokenPrefix}-focus-action, ${variantStyles["--jumpy-action-focus-icon"]})`,
+        "--jumpy-action-pressed-icon": `var(${actionTokenPrefix}-pressed-action, ${variantStyles["--jumpy-action-pressed-icon"]})`,
+        "--jumpy-action-disabled-icon": `var(${actionTokenPrefix}-disabled-action, ${variantStyles["--jumpy-action-disabled-icon"]})`,
+        ...elevated && !disabled ? { "--jumpy-action-default-shadow": shadowValue(theme, JumpyShadowStyle.positiveMedium) } : {},
+        ...alternateHover ? {
+          "--jumpy-action-hover-surface": `var(--jumpy-interactive-inactive-${status}-hover-surface-alternate, ${variantStyles["--jumpy-action-hover-surface"]})`,
+          "--jumpy-action-pressed-surface": `var(--jumpy-interactive-inactive-${status}-pressed-surface-alternate, ${variantStyles["--jumpy-action-pressed-surface"]})`
+        } : {},
+        ...props.style || {}
+      },
+      children: /* @__PURE__ */ jsx("span", { style: { display: "grid", placeItems: "center", width: sizeValue(theme, JumpySize.small), height: sizeValue(theme, JumpySize.small), lineHeight: 0, fontSize: sizeValue(theme, JumpySize.small) }, "aria-hidden": "true", children })
+    }
+  );
+}
+function JumpLinkButton({ href, variant = "borderless", status = "regular", className = "", leadingIcon, trailingIcon, children, ...props }) {
+  const theme = useJumpyTheme();
+  const variantStyles = getButtonVariantStyles(theme, variant, status);
+  const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
+  const iconSize = sizeValue(theme, JumpySize.small2XS);
+  const [pressed, setPressed] = useState(false);
+  const spacing = getButtonSpacing(theme, variant, Boolean(leadingIcon), Boolean(trailingIcon));
+  const hasBorder = variant === "secondary" || variant === "tertiary";
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      ...props,
+      "data-jumpy-component": "link-button",
+      "data-variant": variant,
+      "data-status": status,
+      "data-pressed": pressed ? "true" : "false",
+      onPointerDown: (event) => {
+        setPressed(true);
+        props.onPointerDown?.(event);
+      },
+      onPointerUp: (event) => {
+        setPressed(false);
+        props.onPointerUp?.(event);
+      },
+      onPointerLeave: (event) => {
+        setPressed(false);
+        props.onPointerLeave?.(event);
+      },
+      onBlur: (event) => {
+        setPressed(false);
+        props.onBlur?.(event);
+      },
+      className: cn(className),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: sizeValue(theme, JumpySize.large),
+        appearance: "none",
+        WebkitAppearance: "none",
+        boxSizing: "border-box",
+        paddingLeft: spacing.paddingLeft,
+        paddingRight: spacing.paddingRight,
+        paddingTop: spacing.paddingTop,
+        paddingBottom: spacing.paddingBottom,
+        borderRadius: radiusValue(theme, JumpyRadius.small),
+        letterSpacing: bodyMediumEmphasized.letterSpacing,
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: bodyMediumEmphasized.fontSize,
+        lineHeight: bodyMediumEmphasized.lineHeight,
+        fontWeight: bodyMediumEmphasized.fontWeight,
+        borderWidth: hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0,
+        borderStyle: hasBorder ? "solid" : "none",
+        ...variantStyles,
+        ...props.style || {}
+      },
+      children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
+        leadingIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: leadingIcon }) : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        trailingIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center justify-center", style: { width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: trailingIcon }) : null
+      ] })
+    }
+  );
+}
+var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref) {
+  const theme = useJumpyTheme();
+  const fieldContext = useContext(JumpyFieldContext);
+  const inputOffset = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : spacingValue(theme, JumpySpacing.zero);
+  const inputMinHeight = fieldContext ? void 0 : sizeValue(theme, JumpySize.largeXL) - spacingValue(theme, JumpySpacing.small3XS) * 2;
+  const inputElement = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref,
+      "data-jumpy-component": "input",
+      className: cn("w-full text-sm disabled:cursor-not-allowed", className),
+      style: {
+        ...getFieldInputStyles(theme, props.disabled),
+        minHeight: inputMinHeight,
+        marginTop: inputOffset,
+        ...props.style || {}
+      }
+    }
+  );
+  if (fieldContext) {
+    return inputElement;
+  }
+  return renderStandaloneField(theme, props.disabled, "", null, inputElement, props.status || "regular", props.readOnly);
+});
+function JumpTextarea({ className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const fieldContext = useContext(JumpyFieldContext);
+  const inputOffset = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : spacingValue(theme, JumpySpacing.zero);
+  const textareaElement = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...props,
+      "data-jumpy-component": "textarea",
+      className: cn("w-full text-sm disabled:cursor-not-allowed", className),
+      style: {
+        ...getFieldInputStyles(theme, props.disabled),
+        minHeight: props.rows ? Number(props.rows) * 24 : sizeValue(theme, JumpySize.large2XL),
+        marginTop: inputOffset,
+        resize: "none",
+        ...props.style || {}
+      }
+    }
+  );
+  if (fieldContext) {
+    return textareaElement;
+  }
+  return renderStandaloneField(theme, props.disabled, "", { alignItems: "flex-start", height: "auto", maxHeight: "none", paddingRight: spacingValue(theme, JumpySpacing.small3XS) }, textareaElement, props.status || "regular", props.readOnly);
+}
+function JumpBaseInput({ label, hint, children, className = "", error = false, hideClearIcon = false, showCharCount = false, onClear, ...props }) {
+  const theme = useJumpyTheme();
+  const fieldId = useId();
+  const labelId = useId();
+  const helperId = useId();
+  const counterId = useId();
+  const child = Children.only(children);
+  const childValue = isValidElement(child) ? child.props.value ?? child.props.defaultValue ?? "" : "";
+  const childHasValue = isValidElement(child) && (child.props["data-has-value"] === true || child.props["data-has-value"] === "true");
+  const [focused, setFocused] = useState(false);
+  const [hasValue, setHasValue] = useState(childHasValue || Boolean(String(childValue).length));
+  const [inputValue, setInputValue] = useState(String(childValue ?? ""));
+  const bodySmall = textStyleValue(theme, JumpyTextStyle.bodySmall);
+  const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
+  const labelSmall = textStyleValue(theme, JumpyTextStyle.labelSmall);
+  useEffect(() => {
+    setHasValue(childHasValue || Boolean(String(childValue).length));
+    setInputValue(String(childValue ?? ""));
+  }, [childHasValue, childValue]);
+  if (!isValidElement(child)) {
+    return /* @__PURE__ */ jsx("div", { className: cn("block w-full", className), children });
+  }
+  const originalOnFocus = child.props.onFocus;
+  const originalOnBlur = child.props.onBlur;
+  const originalOnChange = child.props.onChange;
+  const disabled = Boolean(child.props.disabled);
+  const isDropdownTrigger = child.props["data-jumpy-dropdown-trigger"] === true || child.props["data-jumpy-dropdown-trigger"] === "true";
+  const readOnly = Boolean(child.props.readOnly) && !isDropdownTrigger;
+  const floating = focused && !readOnly || hasValue || Boolean(props.slots?.content);
+  const isTextarea = child.type === JumpTextarea;
+  const isDropdown = isDropdownTrigger || child.props["data-jumpy-component"] === "dropdown";
+  const status = error ? "alarm" : props.status || "regular";
+  const leading = props.slots?.leading ?? props.leading;
+  const trailing = props.slots?.trailing ?? props.trailing;
+  const content = props.slots?.content;
+  const helperText = props.slots?.helperText ?? hint;
+  const hasHelperText = Boolean(helperText);
+  const maxLength = child.props.maxLength;
+  const hasCounter = showCharCount && maxLength !== void 0 && maxLength !== null;
+  const showClearButton = hasValue && !hideClearIcon && !disabled && !readOnly;
+  const showErrorIcon = Boolean(error) && !disabled && !readOnly;
+  const showTrailing = showClearButton || trailing || showErrorIcon;
+  const describedBy = [child.props["aria-describedby"], hasHelperText ? helperId : void 0, hasCounter ? counterId : void 0].filter(Boolean).join(" ") || void 0;
+  const labelScale = labelSmall.fontSize / bodyMedium.fontSize;
+  const fieldInnerHeight = sizeValue(theme, JumpySize.largeXL) - spacingValue(theme, JumpySpacing.small3XS) * 2;
+  const labelRestingY = fieldInnerHeight / 2;
+  const labelFloatingY = (labelSmall.fontSize * labelSmall.lineHeight - labelSmall.fontSize) / 2;
+  const labelTiming = focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease;
+  const enhancedChild = cloneElement(child, {
+    id: child.props.id || fieldId,
+    "aria-labelledby": child.props["aria-labelledby"] || (!child.props["aria-label"] && label ? labelId : void 0),
+    "aria-invalid": error ? true : child.props["aria-invalid"],
+    "aria-describedby": describedBy,
+    placeholder: !label || isDropdown || floating ? child.props.placeholder : " ",
+    style: content ? {
+      ...child.props.style || {},
+      position: "absolute",
+      inset: 0,
+      zIndex: 2,
+      width: "100%",
+      height: "100%",
+      margin: 0,
+      opacity: 0,
+      cursor: disabled || readOnly ? "default" : "pointer"
+    } : child.props.style,
+    onFocus: (event) => {
+      setFocused(true);
+      originalOnFocus?.(event);
+    },
+    onBlur: (event) => {
+      setFocused(false);
+      setHasValue(isDropdown || Boolean(String(event.target?.value ?? "").length));
+      originalOnBlur?.(event);
+    },
+    onChange: (event) => {
+      setHasValue(isDropdown || Boolean(String(event.target?.value ?? "").length));
+      setInputValue(String(event.target?.value ?? ""));
+      originalOnChange?.(event);
+    }
+  });
+  const Container = label ? "label" : "div";
+  const containerProps = label ? { htmlFor: child.props.id || fieldId } : {
+    onClick: () => {
+      if (!disabled) document.getElementById(child.props.id || fieldId)?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-jumpy-component": "base-input-root", className: cn("inline-flex w-full max-w-full flex-col", className), style: { color: "var(--jumpy-cmp-base-input-helper-color)" }, children: [
+    /* @__PURE__ */ jsx(
+      Container,
+      {
+        ...containerProps,
+        "data-jumpy-component": "base-input",
+        "data-disabled": disabled ? "true" : "false",
+        "data-readonly": readOnly ? "true" : "false",
+        "data-status": status,
+        style: { color: "var(--jumpy-cmp-base-input-helper-color)" },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-jumpy-component": "field-control",
+            "data-disabled": disabled ? "true" : "false",
+            "data-readonly": readOnly ? "true" : "false",
+            "data-status": status,
+            "data-testid": props["data-testid"],
+            style: {
+              ...getFieldShellStyles(theme, disabled, status, focused, readOnly),
+              alignItems: isTextarea ? "flex-start" : "center",
+              position: "relative",
+              height: isTextarea ? "auto" : sizeValue(theme, JumpySize.largeXL),
+              minHeight: isTextarea ? sizeValue(theme, JumpySize.large2XL) : sizeValue(theme, JumpySize.largeXL)
+            },
+            children: [
+              leading ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "inline-flex shrink-0 items-center justify-center",
+                  style: {
+                    width: sizeValue(theme, JumpySize.small),
+                    height: sizeValue(theme, JumpySize.small),
+                    color: "var(--jumpy-cmp-base-input-icon-fill)",
+                    transition: `color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`
+                  },
+                  children: leading
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "relative",
+                    display: "flex",
+                    alignItems: isTextarea ? "initial" : "center",
+                    alignSelf: "stretch",
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden"
+                  },
+                  children: [
+                    label && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        id: labelId,
+                        "data-testid": props.labelTestId,
+                        style: {
+                          position: "absolute",
+                          left: spacingValue(theme, JumpySpacing.zero),
+                          top: spacingValue(theme, JumpySpacing.zero),
+                          transform: floating ? `translateY(${labelFloatingY}px) scale(${labelScale})` : `translateY(calc(${labelRestingY}px - 50%)) scale(1)`,
+                          transformOrigin: "left top",
+                          color: "var(--jumpy-cmp-base-input-label-color)",
+                          fontFamily: theme.fontFamily.familyBase,
+                          fontSize: bodyMedium.fontSize,
+                          lineHeight: floating ? labelSmall.lineHeight : bodyMedium.lineHeight,
+                          fontWeight: floating ? labelSmall.fontWeight : bodyMedium.fontWeight,
+                          letterSpacing: floating ? labelSmall.letterSpacing : bodyMedium.letterSpacing,
+                          pointerEvents: "none",
+                          transition: `transform ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${labelTiming}, color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${labelTiming}`,
+                          maxWidth: "100%",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(JumpyFieldContext.Provider, { value: { fieldId, hasLabel: Boolean(label), floating }, children: enhancedChild }),
+                    content ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-jumpy-slot": "content",
+                        style: {
+                          width: "100%",
+                          minWidth: 0,
+                          paddingTop: label ? spacingValue(theme, JumpySpacing.large) : spacingValue(theme, JumpySpacing.zero),
+                          color: "var(--jumpy-cmp-base-input-value-color)",
+                          fontFamily: theme.fontFamily.familyBase,
+                          fontSize: bodyMedium.fontSize,
+                          lineHeight: `${bodyMedium.fontSize * bodyMedium.lineHeight}px`,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: content
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              showTrailing ? /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "data-jumpy-slot": "trailing-container",
+                  className: "inline-flex shrink-0 items-center justify-center",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: isTextarea ? "flex-start" : "center",
+                    justifyContent: "center",
+                    alignSelf: isTextarea ? "flex-start" : void 0,
+                    minHeight: isTextarea ? sizeValue(theme, JumpySize.large) : void 0,
+                    flexShrink: 0,
+                    gap: spacingValue(theme, JumpySpacing.smallXS),
+                    color: "var(--jumpy-cmp-base-input-trailing-color)",
+                    transition: `color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`
+                  },
+                  children: [
+                    showClearButton ? /* @__PURE__ */ jsx(
+                      JumpIconButton,
+                      {
+                        variant: "secondary",
+                        "aria-label": "Clear",
+                        "data-jumpy-slot": "clear-button",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          const input = document.getElementById(child.props.id || fieldId);
+                          if (input && child.props.value === void 0) input.value = "";
+                          setHasValue(false);
+                          setInputValue("");
+                          originalOnChange?.({ target: { value: "" }, currentTarget: { value: "" } });
+                          onClear?.();
+                          input?.focus();
+                        },
+                        style: {
+                          width: sizeValue(theme, JumpySize.large),
+                          height: sizeValue(theme, JumpySize.large),
+                          minWidth: sizeValue(theme, JumpySize.large),
+                          minHeight: sizeValue(theme, JumpySize.large),
+                          padding: spacingValue(theme, JumpySpacing.small2XS),
+                          borderRadius: radiusValue(theme, JumpyRadius.small)
+                        },
+                        children: /* @__PURE__ */ jsx(CircleClearIcon, {})
+                      }
+                    ) : null,
+                    showErrorIcon || trailing ? /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "trailing", "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: spacingValue(theme, JumpySpacing.smallXS), paddingRight: spacingValue(theme, JumpySpacing.medium), color: "var(--jumpy-cmp-base-input-trailing-color)", fontSize: bodyMedium.fontSize, lineHeight: bodyMedium.lineHeight }, children: [
+                      showErrorIcon ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "trailing-error", style: { display: "inline-flex", alignItems: "center", color: "var(--jumpy-cmp-base-input-trailing-error-fill, var(--jumpy-cmp-base-input-icon-fill))", lineHeight: 1 }, children: /* @__PURE__ */ jsx(CircleErrorIcon, { style: { width: sizeValue(theme, JumpySize.small2XS), height: sizeValue(theme, JumpySize.small2XS) } }) }) : null,
+                      trailing ? /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "trailing-text", style: { display: "inline-flex", alignItems: "center", maxWidth: `calc(30 * ${spacingValue(theme, JumpySpacing.smallXS)}px)`, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", lineHeight: 1 }, children: trailing }) : null
+                    ] }) : null
+                  ]
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ),
+    (hasHelperText || hasCounter) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex justify-end",
+        style: {
+          gap: spacingValue(theme, JumpySpacing.smallXS),
+          paddingTop: spacingValue(theme, JumpySpacing.small3XS),
+          paddingLeft: spacingValue(theme, JumpySpacing.large),
+          paddingRight: spacingValue(theme, JumpySpacing.large),
+          color: "var(--jumpy-cmp-base-input-helper-color)",
+          fontSize: bodySmall.fontSize,
+          lineHeight: `${bodySmall.fontSize * bodySmall.lineHeight}px`,
+          transition: `color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`
+        },
+        children: [
+          hasHelperText ? /* @__PURE__ */ jsx("span", { id: helperId, style: { flex: 1 }, children: helperText }) : null,
+          hasCounter ? /* @__PURE__ */ jsxs("span", { id: counterId, style: { flex: 0, whiteSpace: "nowrap" }, children: [
+            inputValue.length,
+            "/",
+            maxLength
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function JumpField(props) {
+  return /* @__PURE__ */ jsx(JumpBaseInput, { ...props });
+}
+function JumpChoice({ selected = false, title, description, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...props,
+      "data-jumpy-component": "choice",
+      className: cn("w-full p-4 text-left transition active:scale-[0.99] disabled:cursor-not-allowed", className),
+      style: {
+        borderRadius: theme.sizing.choiceRadius,
+        border: `1px solid ${selected ? theme.color.surfacePrimary : theme.color.borderSubtle}`,
+        backgroundColor: selected ? theme.color.infoSurface : theme.color.surfaceCard,
+        color: theme.color.textPrimary,
+        opacity: props.disabled ? theme.opacity.disabled : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "block text-sm font-bold", children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs leading-5", style: { color: theme.color.textSecondary }, children: description })
+      ]
+    }
+  );
+}
+function JumpNotice({ tone = "info", title, children, className = "" }) {
+  const theme = useJumpyTheme();
+  const toneStyles = getNoticeToneStyles(theme, tone);
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4", className), style: { borderRadius: theme.sizing.choiceRadius, border: `1px solid ${toneStyles.borderColor}`, backgroundColor: toneStyles.backgroundColor, color: toneStyles.color }, children: [
+    title && /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: title }),
+    /* @__PURE__ */ jsx("div", { className: cn("text-xs leading-5", title && "mt-1"), children })
+  ] });
+}
+function JumpTabs({ items, value, onChange, className = "" }) {
+  const scrollRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const selectedTab = tabRefs.current.get(value);
+    const scrollContainer = scrollRef.current;
+    const indicator = indicatorRef.current;
+    if (!selectedTab || !scrollContainer || !indicator) return;
+    const tabBounds = selectedTab.getBoundingClientRect();
+    const containerBounds = scrollContainer.getBoundingClientRect();
+    const tabStyles = getComputedStyle(selectedTab);
+    const content = selectedTab.firstElementChild;
+    const contentStyles = content ? getComputedStyle(content) : null;
+    const insetLeft = Number.parseFloat(tabStyles.paddingLeft) + (contentStyles ? Number.parseFloat(contentStyles.paddingLeft) : 0);
+    const insetRight = Number.parseFloat(tabStyles.paddingRight) + (contentStyles ? Number.parseFloat(contentStyles.paddingRight) : 0);
+    const x = tabBounds.left - containerBounds.left + scrollContainer.scrollLeft + insetLeft;
+    const width = tabBounds.width - insetLeft - insetRight;
+    indicator.style.setProperty("--jumpy-cmp-tabs-indicator-x", `${x}px`);
+    indicator.style.setProperty("--jumpy-cmp-tabs-indicator-width", `${width}px`);
+    indicator.style.setProperty("--jumpy-cmp-tabs-indicator-opacity", "1");
+  }, [items, value]);
+  return /* @__PURE__ */ jsx("div", { className, "data-jumpy-component": "tabs", children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, "data-jumpy-slot": "tabs-scroll-container", role: "tablist", "aria-orientation": "horizontal", tabIndex: -1, children: [
+    items.map((item) => {
+      const active = item.key === value;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (node) => {
+            if (node) tabRefs.current.set(item.key, node);
+            else tabRefs.current.delete(item.key);
+          },
+          type: "button",
+          role: "tab",
+          "aria-selected": active,
+          onClick: (event) => {
+            onChange(item.key);
+            event.currentTarget.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+          },
+          "data-jumpy-component": "tab",
+          children: /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "tab-content", children: /* @__PURE__ */ jsx("span", { "data-jumpy-slot": "tab-label", "data-text": item.label, children: item.label }) })
+        },
+        item.key
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: indicatorRef,
+        "aria-hidden": "true",
+        "data-jumpy-slot": "tabs-indicator"
+      }
+    )
+  ] }) });
+}
+function JumpModal({ children }) {
+  return /* @__PURE__ */ jsx(JumpDialog, { visible: true, children });
+}
+export {
+  BrandMark,
+  JumpAvatar,
+  JumpBackground,
+  JumpBadge,
+  JumpBanner,
+  JumpBaseInput,
+  JumpButton,
+  JumpCard,
+  JumpCheckbox,
+  JumpChip,
+  JumpChoice,
+  JumpDatePicker,
+  JumpDialog,
+  JumpDivider,
+  JumpDropdown,
+  JumpExpandable,
+  JumpExpandableGroup,
+  JumpField,
+  JumpGrid,
+  JumpGridItem,
+  JumpHyperlink,
+  JumpIconButton,
+  JumpInput,
+  JumpLinkButton,
+  JumpList,
+  JumpListItem,
+  JumpLoader,
+  JumpMenu,
+  JumpMenuItem,
+  JumpModal,
+  JumpNotice,
+  JumpPageControl,
+  JumpPinInput,
+  JumpPopover,
+  JumpRadioGroup,
+  JumpSearchField,
+  JumpSectionFooter,
+  JumpSectionHeader,
+  JumpSheet,
+  JumpSideMenu,
+  JumpSideMenuItem,
+  JumpSkeletonLoader,
+  JumpSnackbarProvider,
+  JumpSpinner,
+  JumpSwitch,
+  JumpTable,
+  JumpTableBody,
+  JumpTableCell,
+  JumpTableFooter,
+  JumpTableHead,
+  JumpTableHeaderCell,
+  JumpTableRow,
+  JumpTabs,
+  JumpTag,
+  JumpTextarea,
+  JumpTimePicker,
+  JumpToggleButton,
+  JumpToggleButtonGroup,
+  JumpTooltip,
+  JumpTypography,
+  JumpyAnimation,
+  JumpyAnimationDelay,
+  JumpyAnimationDuration,
+  JumpyBorderWidth,
+  JumpyOpacity,
+  JumpyRadius,
+  JumpyShadowStyle,
+  JumpySize,
+  JumpySpacing,
+  JumpyTextStyle,
+  JumpyThemeProvider,
+  KeyboardKeys,
+  animationDelayValue,
+  animationDurationValue,
+  animationEasingValue,
+  applySubtreeSelection,
+  borderWidthValue,
+  createJumpyTheme,
+  createJumpyThemeFromPreset,
+  defaultJumpyTheme,
+  getHeaderCheckboxProps,
+  getNextSortOrder,
+  getRowCheckboxProps,
+  getSortActionLabel,
+  getSortMapping,
+  getSortOrder,
+  isRowFullySelected,
+  jumpyThemeInventory,
+  jumpyThemePresets,
+  opacityValue,
+  radiusValue,
+  shadowValue,
+  sizeValue,
+  spacingValue,
+  textStyleValue,
+  themeToCSSVariables,
+  useJumpSnackbar,
+  useJumpyTheme
+};