@mario_hahn/jumpy-ui 0.8.1 → 0.10.0

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   textStyleValue,
   themeToCSSVariables,
   useJumpyTheme
-} from "./chunk-B7QIDGY7.js";
+} from "./chunk-LORNGSIB.js";
 import {
   cn
 } from "./chunk-3DBKYKP2.js";
@@ -37,9 +37,331 @@ import {
 } 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";
+import { autoUpdate, flip, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, shift, size, useFloating } from "@floating-ui/react";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect as useEffect2, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// token-input.js
+import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { $addUpdateTag, $createLineBreakNode, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isTextNode, $setSelection, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_HIGH, COPY_COMMAND, CUT_COMMAND, DELETE_CHARACTER_COMMAND, DecoratorNode, HISTORY_PUSH_TAG, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, PASTE_COMMAND } from "lexical";
+import { $generateJSONFromSelectedNodes } from "@lexical/clipboard";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clipboardType = "application/x-jumpy-token-input";
+function normalizeTokenInputValue(value, multiline = false) {
+  const result = [];
+  const ids = /* @__PURE__ */ new Set();
+  for (const part of value) {
+    if (part.type === "text") {
+      const text = multiline ? part.text.replace(/\r\n?/g, "\n") : part.text.replace(/[\r\n]+/g, " ");
+      if (!text) continue;
+      const previous = result[result.length - 1];
+      if (previous?.type === "text") previous.text += text;
+      else result.push({ type: "text", text });
+    } else if (part.type === "token") {
+      if (typeof part.id !== "string" || !part.id || ids.has(part.id) || typeof part.value !== "string" || typeof part.label !== "string" || !part.label) throw new Error("JumpTokenInput tokens require unique ids, string values and non-empty labels");
+      ids.add(part.id);
+      result.push({ type: "token", id: part.id, value: part.value, label: part.label });
+    } else throw new Error("Unknown JumpTokenInput value part");
+  }
+  return result;
+}
+function tokenInputText(value) {
+  return value.map((part) => part.type === "text" ? part.text : part.label).join("");
+}
+var JumpyTokenNode = class _JumpyTokenNode extends DecoratorNode {
+  static getType() {
+    return "jumpy-token";
+  }
+  static clone(node) {
+    return new _JumpyTokenNode(node.__token, node.__key);
+  }
+  static importJSON(json) {
+    return new _JumpyTokenNode(json.token);
+  }
+  constructor(token, key) {
+    super(key);
+    this.__token = { ...token };
+  }
+  exportJSON() {
+    return { ...super.exportJSON(), type: "jumpy-token", version: 1, token: { ...this.__token } };
+  }
+  getTextContent() {
+    return this.__token.label;
+  }
+  isInline() {
+    return true;
+  }
+  isKeyboardSelectable() {
+    return false;
+  }
+  createDOM() {
+    const element = document.createElement("span");
+    element.contentEditable = "false";
+    element.dataset.jumpyTokenId = this.__token.id;
+    element.style.display = "inline-block";
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ jsx(TokenChip, { editor, nodeKey: this.__key, token: this.__token });
+  }
+};
+function TokenChip({ editor, nodeKey, token }) {
+  const theme = useJumpyTheme();
+  const [editable, setEditable] = useState(editor.isEditable());
+  useEffect(() => editor.registerEditableListener(setEditable), [editor]);
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "input-token", style: { display: "inline-flex", maxWidth: "100%", boxSizing: "border-box", alignItems: "center", verticalAlign: "baseline", borderRadius: theme.radius.small, border: `${theme.borderWidth.small}px solid var(--jumpy-color-feedback-info-border)`, paddingInline: theme.spacing.small3XS, gap: theme.spacing.small3XS, background: "var(--jumpy-color-feedback-info-surface)", color: "var(--jumpy-color-text-primary)", fontSize: theme.fontFamily.bodySmall.fontSize, lineHeight: "inherit", whiteSpace: "inherit" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { minWidth: 0 }, children: token.label }),
+    editable && /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${token.label}`, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!editor.isEditable()) return;
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node) {
+          node.selectPrevious();
+          node.remove();
+        }
+      }, { tag: HISTORY_PUSH_TAG });
+      editor.focus();
+    }, style: { display: "inline-flex", alignItems: "center", appearance: "none", border: 0, padding: 0, background: "transparent", color: "inherit", font: "inherit", cursor: "pointer" }, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", width: theme.fontFamily.bodySmall.fontSize, height: theme.fontFamily.bodySmall.fontSize, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5" }) }) })
+  ] });
+}
+function $readValue(multiline = false) {
+  const parts = [];
+  function visit(node) {
+    if (node instanceof JumpyTokenNode) parts.push({ ...node.__token });
+    else if ($isTextNode(node)) parts.push({ type: "text", text: node.getTextContent() });
+    else if ($isLineBreakNode(node)) parts.push({ type: "text", text: "\n" });
+    else if ($isElementNode(node)) node.getChildren().forEach(visit);
+  }
+  $getRoot().getChildren().forEach((node, index) => {
+    if (index > 0) parts.push({ type: "text", text: "\n" });
+    visit(node);
+  });
+  return normalizeTokenInputValue(parts, multiline);
+}
+function $nodes(parts) {
+  return parts.flatMap((part) => part.type === "token" ? [new JumpyTokenNode(part)] : part.text.split("\n").flatMap((text, index) => [
+    ...index > 0 ? [$createLineBreakNode()] : [],
+    ...text ? [$createTextNode(text)] : []
+  ]));
+}
+function $replaceValue(parts) {
+  $getRoot().clear().append($createParagraphNode().append(...$nodes(parts)));
+}
+function $adjacentToken(backward) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return null;
+  const { offset: offset2, type } = selection.anchor;
+  const node = selection.anchor.getNode();
+  if (type === "element" && $isElementNode(node)) return node.getChildAtIndex(offset2 - (backward ? 1 : 0));
+  if ($isTextNode(node) && (backward ? offset2 === 0 : offset2 === node.getTextContentSize())) return backward ? node.getPreviousSibling() : node.getNextSibling();
+  return null;
+}
+function EditorBehavior({ model, multiline, editable, editorRef, onValueChange, onChange, onClear }) {
+  const [editor] = useLexicalComposerContext();
+  const savedSelection = useRef(null);
+  const callbacks = useRef({ onValueChange, onChange, onClear });
+  callbacks.current = { onValueChange, onChange, onClear };
+  const previousMode = useRef(multiline);
+  useLayoutEffect(() => {
+    editor.setEditable(editable);
+  }, [editor, editable]);
+  useLayoutEffect(() => {
+    const current = editor.getEditorState().read(() => $readValue(multiline));
+    if (previousMode.current !== multiline || JSON.stringify(current) !== JSON.stringify(model)) {
+      savedSelection.current = null;
+      editor.update(() => {
+        $replaceValue(model);
+        $setSelection(null);
+      }, { tag: "jumpy-external-value" });
+      editor.dispatchCommand(CLEAR_HISTORY_COMMAND, void 0);
+    }
+    previousMode.current = multiline;
+  }, [editor, model, multiline]);
+  function insert(parts) {
+    if (!editor.isEditable()) return;
+    editor.update(() => {
+      const selection = savedSelection.current?.clone() || $getSelection();
+      if (selection) $setSelection(selection);
+      else $getRoot().selectEnd();
+      $getSelection()?.insertNodes($nodes(parts));
+    }, { tag: HISTORY_PUSH_TAG });
+    editor.focus();
+  }
+  useImperativeHandle(editorRef, () => ({
+    focus: () => editor.focus(),
+    insertText: (text) => insert(normalizeTokenInputValue([{ type: "text", text }], multiline)),
+    insertToken: (token) => {
+      const part = { ...token, type: "token", id: token.id || crypto.randomUUID() };
+      const current = editor.getEditorState().read(() => $readValue(multiline));
+      normalizeTokenInputValue([...current, part], multiline);
+      insert([part]);
+    },
+    removeToken: (id) => {
+      if (!editor.isEditable()) return;
+      editor.update(() => {
+        function remove(node) {
+          if (node instanceof JumpyTokenNode && node.__token.id === id) {
+            node.selectPrevious();
+            node.remove();
+          } else if ($isElementNode(node)) node.getChildren().forEach(remove);
+        }
+        remove($getRoot());
+      }, { tag: HISTORY_PUSH_TAG });
+    },
+    clear: () => {
+      if (!editor.isEditable()) return;
+      if (editor.getEditorState().read(() => $readValue(multiline).length) === 0) return;
+      editor.update(() => {
+        if (!$getSelection()) $getRoot().selectEnd();
+      }, { discrete: true });
+      editor.update(() => {
+        $replaceValue([]);
+        $getRoot().selectStart();
+      }, { tag: [HISTORY_PUSH_TAG, "jumpy-clear"] });
+      editor.focus();
+    }
+  }));
+  useEffect(() => {
+    let previous = JSON.stringify(editor.getEditorState().read(() => $readValue(multiline)));
+    const unregisterUpdate = editor.registerUpdateListener(({ editorState, tags }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (selection) savedSelection.current = selection.clone();
+        const next = $readValue(multiline);
+        const json = JSON.stringify(next);
+        if (json === previous) return;
+        previous = json;
+        if (tags.has("jumpy-external-value")) return;
+        callbacks.current.onChange?.({ target: { value: tokenInputText(next) }, currentTarget: { value: tokenInputText(next) } });
+        callbacks.current.onValueChange(next);
+        if (tags.has("jumpy-clear")) callbacks.current.onClear?.();
+      });
+    });
+    const deleteToken = (event, backward) => {
+      if (!editor.isEditable() || editor.isComposing()) return false;
+      const selection = $getSelection();
+      if ($isNodeSelection(selection)) {
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        event?.preventDefault();
+        for (const node2 of selection.getNodes()) {
+          node2.selectPrevious();
+          node2.remove();
+        }
+        return true;
+      }
+      const node = $adjacentToken(backward);
+      if (!(node instanceof JumpyTokenNode)) return false;
+      $addUpdateTag(HISTORY_PUSH_TAG);
+      event?.preventDefault();
+      node.selectPrevious();
+      node.remove();
+      return true;
+    };
+    const copy = (event, cut) => {
+      if (!event?.clipboardData || cut && !editor.isEditable()) return false;
+      const selection = $getSelection();
+      if (!selection || $isRangeSelection(selection) && selection.isCollapsed()) return false;
+      const { nodes } = $generateJSONFromSelectedNodes(editor, selection);
+      const parts = [];
+      const visit = (node) => {
+        if (node.type === "jumpy-token") parts.push(node.token);
+        else if (node.type === "text") parts.push({ type: "text", text: node.text });
+        else if (node.type === "linebreak") parts.push({ type: "text", text: "\n" });
+        else node.children?.forEach(visit);
+      };
+      nodes.forEach((node, index) => {
+        if (index > 0 && node.type === "paragraph") parts.push({ type: "text", text: "\n" });
+        visit(node);
+      });
+      event.preventDefault();
+      event.clipboardData.setData("text/plain", tokenInputText(parts));
+      event.clipboardData.setData(clipboardType, JSON.stringify(parts));
+      if (cut) {
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        if ($isNodeSelection(selection)) for (const node of selection.getNodes()) node.remove();
+        else if ($isRangeSelection(selection)) selection.removeText();
+      }
+      return true;
+    };
+    const commands = [
+      editor.registerCommand(DELETE_CHARACTER_COMMAND, (backward) => deleteToken(null, backward), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => deleteToken(event, true), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_DELETE_COMMAND, (event) => deleteToken(event, false), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+        if (editor.isComposing()) return false;
+        event?.preventDefault();
+        if (editable && multiline && !event?.metaKey && !event?.ctrlKey) {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $addUpdateTag(HISTORY_PUSH_TAG);
+            selection.insertLineBreak();
+          }
+        }
+        return true;
+      }, COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(COPY_COMMAND, (event) => copy(event, false), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(CUT_COMMAND, (event) => copy(event, true), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(PASTE_COMMAND, (event) => {
+        if (!event?.clipboardData || !editor.isEditable()) return false;
+        event.preventDefault();
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        let parts;
+        try {
+          parts = normalizeTokenInputValue(JSON.parse(event.clipboardData.getData(clipboardType)).map((part) => part.type === "token" ? { ...part, id: crypto.randomUUID() } : part), multiline);
+        } catch {
+          parts = normalizeTokenInputValue([{ type: "text", text: event.clipboardData.getData("text/plain") }], multiline);
+        }
+        $getSelection()?.insertNodes($nodes(parts));
+        return true;
+      }, COMMAND_PRIORITY_HIGH)
+    ];
+    return () => {
+      unregisterUpdate();
+      commands.forEach((unregister) => unregister());
+    };
+  }, [editor, multiline, editable]);
+  return null;
+}
+function TokenEditor({ model, multiline = false, minRows = 3, maxRows, editorRef, onValueChange, onChange, onClear, onFocus, onBlur, fieldContext, value: _value, placeholder, disabled, readOnly, style, ...props }) {
+  const theme = useJumpyTheme();
+  const initialConfig = useMemo(() => ({ namespace: "JumpyTokenInput", nodes: [JumpyTokenNode], editable: !disabled && !readOnly, onError: (error) => {
+    throw error;
+  }, editorState: () => $replaceValue(model) }), []);
+  const offset2 = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : 0;
+  const lineHeight = theme.fontFamily.bodyMedium.fontSize * theme.fontFamily.bodyMedium.lineHeight;
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", minWidth: 0, marginTop: offset2 }, children: [
+    /* @__PURE__ */ jsx(
+      PlainTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(ContentEditable, { ...props, onFocusCapture: (event) => {
+          props.onFocusCapture?.(event);
+          onFocus?.(event);
+        }, onBlurCapture: (event) => {
+          props.onBlurCapture?.(event);
+          onBlur?.(event);
+        }, "data-jumpy-component": "token-input", role: "textbox", "aria-multiline": multiline, "aria-readonly": readOnly || void 0, "aria-disabled": disabled || void 0, tabIndex: disabled ? -1 : 0, style: { width: "100%", minHeight: lineHeight * (multiline ? minRows : 1), maxHeight: multiline && maxRows !== void 0 ? lineHeight * maxRows : void 0, padding: 0, outline: 0, overflowX: "auto", overflowY: multiline ? "auto" : void 0, whiteSpace: multiline ? "pre-wrap" : "pre", overflowWrap: multiline ? "anywhere" : void 0, color: "var(--jumpy-cmp-base-input-value-color)", fontFamily: theme.fontFamily.familyBase, fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight, ...style } }),
+        placeholder: null,
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    model.length === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", top: 0, left: 0, pointerEvents: "none", color: "var(--jumpy-cmp-base-input-placeholder-color)", fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight }, children: placeholder }),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(EditorBehavior, { model, multiline, editable: !disabled && !readOnly, editorRef, onValueChange, onChange, onClear })
+  ] }) });
+}
+
+// index.js
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var JumpyFieldContext = createContext(null);
 var JumpyTableContext = createContext(null);
 var JumpyExpandableContext = createContext(null);
@@ -62,22 +384,22 @@ var KeyboardKeys = {
 };
 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" }) });
+  return /* @__PURE__ */ jsx2("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__ */ jsx2("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" }) });
+  return /* @__PURE__ */ jsx2("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__ */ jsx2("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" }) });
+  return /* @__PURE__ */ jsx2("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__ */ jsx2("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" }) });
+  return /* @__PURE__ */ jsx2("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__ */ jsx2("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" })
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("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__ */ jsx2("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) {
@@ -260,22 +582,22 @@ function JumpSeverityIcon({ status = "other", icon, 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" }) });
+      return /* @__PURE__ */ jsx2("svg", { ...common, children: /* @__PURE__ */ jsx2("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" }) });
+      return /* @__PURE__ */ jsx2("svg", { ...common, children: /* @__PURE__ */ jsx2("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" }) });
+      return /* @__PURE__ */ jsx2("svg", { ...common, children: /* @__PURE__ */ jsx2("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" }) });
+      return /* @__PURE__ */ jsx2("svg", { ...common, children: /* @__PURE__ */ jsx2("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" }) });
+      return /* @__PURE__ */ jsx2("svg", { ...common, children: /* @__PURE__ */ jsx2("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 });
+    return /* @__PURE__ */ jsx2(Tag, { className, style, children: slot });
   }
   if (isValidElement(slot)) {
     return cloneElement(slot, {
@@ -286,17 +608,18 @@ function renderBannerSlot(slot, fallbackTag = "span", className, style) {
   return slot;
 }
 function getBadgeStatusStyles(theme, status) {
+  const alwaysLight = "var(--jumpy-color-non-color-always-ultralight, #FFFFFF)";
   switch (status) {
     case "positive":
-      return { backgroundColor: theme.color.positiveBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.positiveBase, color: alwaysLight };
     case "warning":
       return { backgroundColor: theme.color.warningBase, color: theme.color.nonColorAlwaysUltradark };
     case "alarm":
-      return { backgroundColor: theme.color.alarmBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.alarmBase, color: alwaysLight };
     case "active":
-      return { backgroundColor: "var(--jumpy-color-primary-base)", color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: "var(--jumpy-color-primary-base)", color: theme.color.textOnPrimary };
     default:
-      return { backgroundColor: theme.color.neutralBase, color: theme.color.nonColorContrastUltralight };
+      return { backgroundColor: theme.color.neutralBase, color: alwaysLight };
   }
 }
 function getBadgeSizeStyles(theme, size2) {
@@ -319,7 +642,8 @@ function getBadgeSizeStyles(theme, size2) {
         padding: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px`,
         fontFamily: theme.fontFamily.familyBase,
         fontSize: labelMedium.fontSize,
-        lineHeight: labelMedium.lineHeight,
+        // A line box filling the whole-pixel content height keeps the baseline from rounding the digits upward.
+        lineHeight: `${sizeValue(theme, JumpySize.small) - spacingValue(theme, JumpySpacing.small3XS) * 2}px`,
         fontWeight: labelMedium.fontWeight
       };
     default:
@@ -329,7 +653,7 @@ function getBadgeSizeStyles(theme, size2) {
         padding: `${spacingValue(theme, JumpySpacing.zero)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`,
         fontFamily: theme.fontFamily.familyBase,
         fontSize: labelSmall.fontSize,
-        lineHeight: labelSmall.lineHeight,
+        lineHeight: `${sizeValue(theme, JumpySize.small2XS)}px`,
         fontWeight: labelSmall.fontWeight
       };
   }
@@ -478,7 +802,7 @@ function getFieldShellStyles(theme, disabled, status = "regular", focused = fals
   };
 }
 function renderStandaloneField(theme, disabled, className, style, inputElement, status = "regular", readOnly = false) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-jumpy-component": "field-control",
@@ -496,18 +820,18 @@ function renderStandaloneField(theme, disabled, className, style, 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" })
+  return /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none fixed inset-0 z-0 overflow-hidden", style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: "absolute bottom-24 right-[-10rem] h-[28rem] w-[28rem] rounded-full blur-[110px]", style: { backgroundColor: theme.color.borderSubtle } }),
+    /* @__PURE__ */ jsx2("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__ */ jsx2("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(
+  return /* @__PURE__ */ jsx2(
     Root,
     {
       ...props,
@@ -520,6 +844,10 @@ function JumpBadge({ as, size: size2 = "medium", status = "regular", hidden = fa
       "aria-hidden": hidden || void 0,
       className: cn("inline-flex items-center justify-center box-border", className),
       style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
         ...getBadgeSizeStyles(theme, size2),
         ...getBadgeStatusStyles(theme, status),
         borderRadius: radiusValue(theme, JumpyRadius.full),
@@ -530,20 +858,35 @@ function JumpBadge({ as, size: size2 = "medium", status = "regular", hidden = fa
         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 })
+      children: size2 === "xSmall" ? null : /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "badge-content", style: { display: "inline-block", lineHeight: "inherit", 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 })
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center gap-3", !compact && "justify-center"), children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("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 }) {
+function JumpCard({ as, ref, children, className = "", variant = "filled", interactive = false, selected = false, disabled = false, dragged = false, innerClasses = {}, ...props }) {
   const theme = useJumpyTheme();
   const Component = as || "div";
+  const cardRef = useRef2(null);
+  const [pressScaleLimit, setPressScaleLimit] = useState2(1);
+  const pressDistance = spacingValue(theme, JumpySpacing.small3XS);
+  useLayoutEffect2(() => {
+    const element = cardRef.current;
+    if (!element || !interactive || disabled) return;
+    const measure = () => {
+      const longestSide = Math.max(element.offsetWidth, element.offsetHeight);
+      setPressScaleLimit(longestSide > 0 ? Math.max(0, 1 - pressDistance / longestSide) : 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [Component, interactive, disabled, pressDistance]);
   const isButton = Component === "button";
   const activity = selected ? "active" : "inactive";
   const draggedStyles = dragged && !disabled ? {
@@ -551,10 +894,15 @@ function JumpCard({ as, children, className = "", variant = "filled", interactiv
     backgroundColor: `var(--jumpy-card-${activity}-dragged-surface)`
   } : {};
   const hasPaddingUtility = /(?:^|\s)(?:[a-z]+:)*p(?:[trblxy])?-/.test(className);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
+      ref: (node) => {
+        cardRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
       type: isButton ? props.type || "button" : props.type,
       disabled: isButton ? disabled : void 0,
       "data-jumpy-component": "card",
@@ -568,6 +916,7 @@ function JumpCard({ as, children, className = "", variant = "filled", interactiv
       className: cn(className),
       style: {
         ...getCardStateStyles(theme, selected),
+        "--jumpy-card-press-scale-limit": pressScaleLimit,
         display: "block",
         position: "relative",
         boxSizing: "border-box",
@@ -585,7 +934,7 @@ function JumpCard({ as, children, className = "", variant = "filled", interactiv
         ...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,
+        interactive && selected ? /* @__PURE__ */ jsx2("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__ */ jsx2(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
       ]
     }
@@ -595,7 +944,7 @@ function JumpGrid({ as, columns = { small: 8, medium: 12, large: 12, xLarge: 12
   const Component = as || "div";
   const resolvedColumns = responsiveValue(columns, { small: 8, medium: 12, large: 12, xLarge: 12 });
   const resolvedSpacing = responsiveGridSpacing(spacing);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -623,7 +972,7 @@ function JumpGrid({ as, columns = { small: 8, medium: 12, large: 12, xLarge: 12
 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(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -644,7 +993,7 @@ function JumpGridItem({ as, span = 1, horizontalPlacement = "stretch", verticalP
 }
 function JumpList({ as, children, className = "", ...props }) {
   const Component = as || "div";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -674,7 +1023,7 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
   const resolvedDescription = slots.description ?? description;
   const resolvedSelector = slots.selector;
   const resolvedNestedList = slots.nestedList;
-  const [internalNestedCollapsed, setInternalNestedCollapsed] = useState(defaultNestedCollapsed);
+  const [internalNestedCollapsed, setInternalNestedCollapsed] = useState2(defaultNestedCollapsed);
   const isNestedCollapsed = nestedCollapsed ?? internalNestedCollapsed;
   const hasNestedList = Boolean(resolvedNestedList);
   const isDisabled = disabled || readOnly;
@@ -698,7 +1047,7 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
     }
     props.onKeyDown?.(event);
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
@@ -746,18 +1095,18 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
         ...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: 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
+        resolvedSelector ? /* @__PURE__ */ jsx2("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__ */ jsx2("span", { "data-jumpy-slot": "leading", "aria-hidden": "true", className: innerClasses.leading?.className, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, color: "var(--jumpy-list-item-icon-color, var(--jumpy-list-item-default-icon))", ...innerClasses.leading?.style || {} }, children: resolvedLeading }) : null,
+        /* @__PURE__ */ jsxs2("span", { style: { display: "grid", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx2("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: bodyMedium.fontWeight, ...innerClasses.label?.style || {} }, children }),
+          resolvedDescription ? /* @__PURE__ */ jsx2("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: [
+        resolvedMetadata ? /* @__PURE__ */ jsx2("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__ */ jsxs2("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
+          hasNestedList ? /* @__PURE__ */ jsx2(JumpIconButton, { as: "span", variant: "secondary", alternateHover: true, tabIndex: -1, "aria-hidden": "true", children: isNestedCollapsed ? /* @__PURE__ */ jsx2(ChevronDownIcon, {}) : /* @__PURE__ */ jsx2(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
+        hasNestedList ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "nested-list", "aria-hidden": isNestedCollapsed ? "true" : void 0, style: { gridColumn: "1 / -1", display: isNestedCollapsed ? "none" : "block" }, children: resolvedNestedList }) : null
       ]
     }
   );
@@ -765,12 +1114,12 @@ function JumpListItem({ as, children, className = "", selected = false, disabled
 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(() => {
+  const elementRef = useRef2(null);
+  const itemRefs = useRef2([]);
+  const previousCollapsed = useRef2(collapsed);
+  const releaseTimer = useRef2(void 0);
+  const [isResizing, setIsResizing] = useState2(false);
+  useLayoutEffect2(() => {
     if (previousCollapsed.current === collapsed) return void 0;
     previousCollapsed.current = collapsed;
     const element = elementRef.current;
@@ -782,7 +1131,7 @@ function JumpSideMenu({ as, children, className = "", collapsed = false, selecte
     releaseTimer.current = window.setTimeout(() => setIsResizing(false), transitionMs + 100);
     return void 0;
   }, [collapsed]);
-  useEffect(() => () => window.clearTimeout(releaseTimer.current), []);
+  useEffect2(() => () => window.clearTimeout(releaseTimer.current), []);
   const selectItem = (value) => {
     if (disabled || value === void 0) return;
     onChange?.([value]);
@@ -812,7 +1161,7 @@ function JumpSideMenu({ as, children, className = "", collapsed = false, selecte
       setIsResizing(false);
     }
   };
-  return /* @__PURE__ */ jsx(JumpySideMenuContext.Provider, { value: { collapsed, disabled, selected, onSelect: selectItem, containerExpanded: isResizing || !collapsed, renderMode, getItemProps, disableKeyboardNavigation, itemRefs }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(JumpySideMenuContext.Provider, { value: { collapsed, disabled, selected, onSelect: selectItem, containerExpanded: isResizing || !collapsed, renderMode, getItemProps, disableKeyboardNavigation, itemRefs }, children: /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -844,8 +1193,8 @@ function JumpSideMenu({ as, children, className = "", collapsed = false, selecte
 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 itemRef = useRef2(null);
+  const wrapperItemRef = useRef2(null);
   const isCollapsed = sideMenu ? !sideMenu.containerExpanded : collapsed ?? false;
   const resolvedRenderMode = sideMenu?.renderMode ?? renderMode ?? "navigation";
   const selectedValues = sideMenu?.selected;
@@ -856,7 +1205,7 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
   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 [internalNestedCollapsed, setInternalNestedCollapsed] = useState2(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;
@@ -881,7 +1230,7 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
   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(() => {
+  useEffect2(() => {
     if (!sideMenu?.itemRefs) return void 0;
     const registryItem = isCollapsed && resolvedRenderMode === "navigation" ? wrapperItemRef : itemRef;
     sideMenu.itemRefs.current.push(registryItem);
@@ -892,11 +1241,11 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
   const withTooltip = (node) => {
     if (!tooltipProps?.content) return node;
     const { content, ...restTooltipProps } = tooltipProps;
-    return /* @__PURE__ */ jsx(JumpTooltip, { ...restTooltipProps, content, children: node });
+    return /* @__PURE__ */ jsx2(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: [
+  const trailingNode = hasNested ? /* @__PURE__ */ jsxs2("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, {}) })
+    /* @__PURE__ */ jsx2("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__ */ jsx2(ChevronDownIcon, {}) })
   ] }) : badgeNode;
   if (isCollapsed) {
     const Component = as || (resolvedRenderMode === "navigation" ? "a" : "button");
@@ -920,9 +1269,9 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
         }
       }
     } : {};
-    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: [
+    return /* @__PURE__ */ jsxs2("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(
+        /* @__PURE__ */ jsxs2(
           Component,
           {
             ...linkProps,
@@ -962,19 +1311,19 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
               ...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: [
+              /* @__PURE__ */ jsxs2("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
+                badgeNode ? /* @__PURE__ */ jsx2("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
+              children ? /* @__PURE__ */ jsx2("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
+      hasNested && !isNestedCollapsed ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "nested-menu", children: resolvedNestedMenu }) : null
     ] });
   }
-  const expandedItem = /* @__PURE__ */ jsx(
+  const expandedItem = /* @__PURE__ */ jsx2(
     JumpListItem,
     {
       ...linkProps,
@@ -1012,17 +1361,17 @@ function JumpSideMenuItem({ as, children, value, selected = false, disabled = fa
       children
     }
   );
-  const expandedNestedMenu = hasNested && !isNestedCollapsed ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "nested-menu", children: resolvedNestedMenu }) : null;
+  const expandedNestedMenu = hasNested && !isNestedCollapsed ? /* @__PURE__ */ jsx2("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: [
+      /* @__PURE__ */ jsxs2("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: [
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
       expandedItem,
       expandedNestedMenu
     ] })
@@ -1032,7 +1381,7 @@ function JumpTypography({ as, variant = "bodyMedium", color = "primary", classNa
   const theme = useJumpyTheme();
   const Component = as || "p";
   const colorValue = color === "secondary" ? theme.color.textSecondary : color === "primary" ? theme.color.textPrimary : color;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1052,9 +1401,9 @@ function JumpHyperlink({ as, variant = "inline", disabled = false, className = "
   const theme = useJumpyTheme();
   const Component = as || "a";
   if (variant !== "inline") {
-    return /* @__PURE__ */ jsx(JumpLinkButton, { ...props, href: props.href || "#", variant: "borderless", className, children });
+    return /* @__PURE__ */ jsx2(JumpLinkButton, { ...props, href: props.href || "#", variant: "borderless", className, children });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1081,7 +1430,7 @@ function JumpDivider({ as, direction = "horizontal", captionPosition = "center",
   const theme = useJumpyTheme();
   const Component = as || "div";
   const isVertical = direction === "vertical";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1103,7 +1452,7 @@ function JumpDivider({ as, direction = "horizontal", captionPosition = "center",
         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
+      children: children ? /* @__PURE__ */ jsx2("span", { style: { backgroundColor: theme.color.surfaceCard, padding: `0 ${spacingValue(theme, JumpySpacing.smallXS)}px`, transform: isVertical ? "rotate(-90deg)" : void 0 }, children }) : null
     }
   );
 }
@@ -1113,7 +1462,7 @@ function JumpAvatar({ as, size: size2 = "medium", disableInteraction = false, di
   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(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1154,7 +1503,7 @@ function JumpBanner({ as, status: statusProp = "other", variant = "default", dir
   const contentContainerVertical = direction === "vertical";
   const contentTitle = textStyleValue(theme, JumpyTextStyle.titleMediumEmphasized);
   const contentDescription = textStyleValue(theme, JumpyTextStyle.bodyMedium);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
@@ -1172,7 +1521,7 @@ function JumpBanner({ as, status: statusProp = "other", variant = "default", dir
         ...props.style || {}
       },
       children: [
-        !hideStatus ? /* @__PURE__ */ jsx(
+        !hideStatus ? /* @__PURE__ */ jsx2(
           "span",
           {
             "data-jumpy-slot": "banner-status",
@@ -1181,10 +1530,10 @@ function JumpBanner({ as, status: statusProp = "other", variant = "default", dir
             style: {
               ...innerClasses.status?.style || {}
             },
-            children: /* @__PURE__ */ jsx(JumpSeverityIcon, { status, icon: bannerIcon })
+            children: /* @__PURE__ */ jsx2(JumpSeverityIcon, { status, icon: bannerIcon })
           }
         ) : null,
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             "data-jumpy-slot": "banner-content-container",
@@ -1194,7 +1543,7 @@ function JumpBanner({ as, status: statusProp = "other", variant = "default", dir
               ...innerClasses.contentContainer?.style || {}
             },
             children: [
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs2(
                 "div",
                 {
                   "data-jumpy-slot": "banner-content",
@@ -1226,7 +1575,7 @@ function JumpBanner({ as, status: statusProp = "other", variant = "default", dir
                   ]
                 }
               ),
-              contentContainerVertical && bannerActions ? /* @__PURE__ */ jsx(
+              contentContainerVertical && bannerActions ? /* @__PURE__ */ jsx2(
                 "div",
                 {
                   "data-jumpy-slot": "banner-actions-container",
@@ -1251,7 +1600,7 @@ function JumpSkeletonLoader({ as, variant = "text", lines = 1, width, height, di
   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(
+  return /* @__PURE__ */ jsx2("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__ */ jsx2(
     Component,
     {
       "aria-hidden": "true",
@@ -1270,35 +1619,35 @@ function JumpSkeletonLoader({ as, variant = "text", lines = 1, width, height, di
 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 }) });
+  return /* @__PURE__ */ jsx2(JumpBaseInput, { className: cn("jumpy-search-field", className), leading: /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("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__ */ jsx2(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: [
+  const [visible, setVisible] = useState2(false);
+  return /* @__PURE__ */ jsxs2("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
+    visible ? /* @__PURE__ */ jsx2("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 [internalOpen, setInternalOpen] = useState2(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
+  return /* @__PURE__ */ jsxs2("span", { "data-jumpy-component": "popover-root", className: cn(className), style: { position: "relative", display: "inline-flex", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx2("span", { onClick: () => setVisible(!visible), children: trigger }),
+    visible ? /* @__PURE__ */ jsx2("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", closeOnSelect = true, ...props }) {
   const theme = useJumpyTheme();
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
   const isOpen = open ?? internalOpen;
-  const menuRef = useRef(null);
-  const insideEventRef = useRef(null);
+  const menuRef = useRef2(null);
+  const insideEventRef = useRef2(null);
   const menuOffset = spacingValue(theme, JumpySpacing.small3XS);
   const menuPadding = spacingValue(theme, JumpySpacing.medium);
   const menuMinWidth = sizeValue(theme, JumpySize.large8XL);
@@ -1375,7 +1724,7 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
     }
     props.onKeyDown?.(event);
   }
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen) return void 0;
     function dismissOutside(event) {
       if (insideEventRef.current !== event) setOpen(false);
@@ -1398,9 +1747,9 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
     setOpen(false);
     refs.domReference.current?.focus?.();
   }
-  return /* @__PURE__ */ jsxs("span", { "data-jumpy-component": "menu-root", className: cn(className), onPointerDown: markInteractionInside, onFocus: markInteractionInside, 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(JumpyPortal, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("span", { "data-jumpy-component": "menu-root", className: cn(className), onPointerDown: markInteractionInside, onFocus: markInteractionInside, style: { display: "inline-flex", ...props.style || {} }, children: [
+    /* @__PURE__ */ jsx2("span", { ref: refs.setReference, "aria-haspopup": "menu", "aria-expanded": isOpen, tabIndex: 0, onClick: () => setOpen(!isOpen), onKeyDown: handleTriggerKeyDown, children: trigger }),
+    isOpen ? /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsxs2(
       "div",
       {
         ...props,
@@ -1420,9 +1769,9 @@ function JumpMenu({ trigger, open, defaultOpen = false, onOpenChange, header, fo
           ...props.style || {}
         },
         children: [
-          header ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "menu-header", children: header }) : null,
+          header ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "menu-header", children: header }) : null,
           children,
-          footer ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "menu-footer", children: footer }) : null
+          footer ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "menu-footer", children: footer }) : null
         ]
       }
     ) }) : null
@@ -1433,12 +1782,12 @@ function JumpMenuItem({ as, children, selected = false, disabled = false, readOn
   const resolvedSlots = {
     ...slots,
     leading: slots.leading ?? leading,
-    trailing: nestedMenu ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u203A" }) : slots.trailing ?? trailing,
+    trailing: nestedMenu ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u203A" }) : slots.trailing ?? trailing,
     metadata: slots.metadata ?? metadata,
     description: slots.description ?? description
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
       JumpListItem,
       {
         ...props,
@@ -1474,7 +1823,7 @@ function JumpToggleButton({ as, selected, value, disabled = false, onChange, lea
     onChange?.(!isSelected);
     props.onClick?.(event);
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
@@ -1512,8 +1861,8 @@ function JumpToggleButton({ as, selected, value, disabled = false, onChange, lea
         ...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
+        leading ? /* @__PURE__ */ jsx2("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__ */ jsx2("span", { style: { display: "inline-flex", alignItems: "center", justifyContent: "center", margin: `0 ${spacingValue(theme, JumpySpacing.small3XS)}px`, whiteSpace: "nowrap" }, children }) : null
       ]
     }
   );
@@ -1521,14 +1870,14 @@ function JumpToggleButton({ as, selected, value, disabled = false, onChange, lea
 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 [internalSelected, setInternalSelected] = useState2(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(
+  return /* @__PURE__ */ jsx2(JumpyToggleButtonGroupContext.Provider, { value: { value: currentSelected, onChange: handleToggle, exclusive, disabled }, children: /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1543,9 +1892,9 @@ function JumpToggleButtonGroup({ as, selected, defaultSelected = [], onChange, e
 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 [internalValue, setInternalValue] = useState2(defaultValue);
   const currentValue = String(value ?? internalValue).slice(0, normalizedLength);
-  const refs = useRef([]);
+  const refs = useRef2([]);
   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) {
@@ -1562,11 +1911,11 @@ function JumpPinInput({ length = 6, value, defaultValue = "", onChange, onComple
   }
   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) => {
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("input", { type: "hidden", name, value: currentValue }) : null,
+    /* @__PURE__ */ jsx2("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(
+    }, children: Array.from({ length: normalizedLength }, (_, index) => /* @__PURE__ */ jsx2(
       "input",
       {
         ref: (node) => {
@@ -1610,12 +1959,12 @@ function JumpPinInput({ length = 6, value, defaultValue = "", onChange, onComple
       },
       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
+    helperText ? /* @__PURE__ */ jsx2("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 [internalPage, setInternalPage] = useState2(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);
@@ -1632,9 +1981,9 @@ function JumpPageControl({ totalPages = 1, currentPage, defaultPage = 0, maxVisi
     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__ */ jsx2("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__ */ jsx2("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: [
+  return /* @__PURE__ */ jsxs2("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
@@ -1651,7 +2000,7 @@ function useJumpSnackbar() {
 }
 function JumpSnackbarProvider({ children, position = "bottom-center", maxSnackbars = 3, offset: offset2 = {}, className = "", ...props }) {
   const theme = useJumpyTheme();
-  const [snackbars, setSnackbars] = useState([]);
+  const [snackbars, setSnackbars] = useState2([]);
   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);
@@ -1669,35 +2018,35 @@ function JumpSnackbarProvider({ children, position = "bottom-center", maxSnackba
     return id;
   }
   const contextValue = { addSnackbar, removeSnackbar, clearAll: () => setSnackbars([]), snackbars };
-  return /* @__PURE__ */ jsxs(JumpySnackbarContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs2(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)) })
+    /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2(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__ */ jsx2("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 }) }) }) });
+  return /* @__PURE__ */ jsx2(JumpyTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "table-wrapper", className: innerClasses.wrapper?.className, style: innerClasses.wrapper?.style, children: /* @__PURE__ */ jsx2("div", { ...restContainerProps, "data-jumpy-slot": "table-container", "data-sticky-header": stickyHeader ? "true" : "false", className: cn(containerClassName), style: containerStyle, children: /* @__PURE__ */ jsx2("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 });
+  return /* @__PURE__ */ jsx2(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 });
+  return /* @__PURE__ */ jsx2(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 });
+  return /* @__PURE__ */ jsx2(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(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -1744,7 +2093,7 @@ function JumpTableCell({ as, children, selected = false, disabled = false, align
   const isDisabled = disabled || tableContext?.disabled;
   const resolvedHorizontalBorder = showHorizontalBorder ?? tableContext?.showHorizontalBorders ?? false;
   const isInteractive = !isDisabled && Boolean(onClick);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
@@ -1765,14 +2114,14 @@ function JumpTableCell({ as, children, selected = false, disabled = false, align
       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, false, 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
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", "data-jumpy-slot": "table-cell-surface" }),
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "table-cell-inner", "data-align": resolvedAlign, className: innerClasses.inner?.className, style: innerClasses.inner?.style, children: [
+          cellLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-leading", className: innerClasses.leading?.className, style: innerClasses.leading?.style, children: cellLeading }) : null,
+          /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "table-cell-content", className: innerClasses.content?.className, style: innerClasses.content?.style, children: [
+            /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.text?.className, style: tableCellTextStyle(theme, false, innerClasses.text?.style), children }),
+            cellDescription ? /* @__PURE__ */ jsx2("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
+          cellTrailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-trailing", className: innerClasses.trailing?.className, style: innerClasses.trailing?.style, children: cellTrailing }) : null
         ] })
       ]
     }
@@ -1860,7 +2209,7 @@ function JumpTableHeaderCell({ as, children, selected = false, disabled = false,
   const resolvedHorizontalBorder = showHorizontalBorder ?? tableContext?.showHorizontalBorders ?? false;
   const participatesInSort = sortable || sortOrder !== "default" && sortOrder !== "none";
   const ariaSort = participatesInSort ? ariaSortOrder(sortOrder) : void 0;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     Component,
     {
       ...props,
@@ -1879,12 +2228,12 @@ function JumpTableHeaderCell({ as, children, selected = false, disabled = false,
       "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,
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", "data-jumpy-slot": "table-cell-surface" }),
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "table-cell-inner", "data-align": resolvedAlign, className: innerClasses.inner?.className, style: innerClasses.inner?.style, children: [
+          cellLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-leading", className: innerClasses.leading?.className, style: innerClasses.leading?.style, children: cellLeading }) : null,
+          /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-content", className: innerClasses.label?.className, style: innerClasses.label?.style, children: /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "table-cell-text", className: innerClasses.labelText?.className, style: tableCellTextStyle(theme, true, innerClasses.labelText?.style), children }) }),
+          cellTrailing || sortable ? /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "table-cell-trailing", className: innerClasses.trailing?.className, style: innerClasses.trailing?.style, children: [
+            sortable ? /* @__PURE__ */ jsx2(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
         ] })
@@ -1893,7 +2242,7 @@ function JumpTableHeaderCell({ as, children, selected = false, disabled = false,
   );
 }
 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" }) });
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx2("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";
@@ -1901,7 +2250,7 @@ function JumpExpandable({ as, variant = "filled", disabled = false, expanded, de
   const panelId = useId();
   const isDisabled = disabled || context?.disabled;
   const isControlled = expanded !== void 0 || context?.expanded !== void 0;
-  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState2(defaultExpanded);
   const isExpanded = isControlled ? Boolean(expanded ?? context?.expanded) : uncontrolledExpanded;
   const label = slots?.label;
   const description = slots?.description;
@@ -1914,7 +2263,7 @@ function JumpExpandable({ as, variant = "filled", disabled = false, expanded, de
     if (!isControlled) setUncontrolledExpanded(nextExpanded);
     onChange?.(nextExpanded);
   }
-  const header = /* @__PURE__ */ jsxs(
+  const header = /* @__PURE__ */ jsxs2(
     "button",
     {
       ref: context?.buttonRef,
@@ -1927,23 +2276,23 @@ function JumpExpandable({ as, variant = "filled", disabled = false, expanded, de
       "aria-controls": panelId,
       "aria-expanded": isExpanded,
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "expandable-slots-container", children: [
+        /* @__PURE__ */ jsxs2("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
+          label || description ? /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "expandable-header-content", className: innerClasses.headerContent?.className, style: innerClasses.headerContent?.style, children: [
+            label ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "expandable-label", className: innerClasses.label?.className, style: innerClasses.label?.style, children: label }) : null,
+            description ? /* @__PURE__ */ jsx2("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: [
+        /* @__PURE__ */ jsxs2("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
+          !isDisabled ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "expandable-icon", className: innerClasses.icon?.className, style: innerClasses.icon?.style, children: /* @__PURE__ */ jsx2(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 }) })
+  return /* @__PURE__ */ jsxs2(Component, { ...props, "data-jumpy-component": "expandable", "data-variant": variant, className: cn(className), children: [
+    context?.headingLevel ? /* @__PURE__ */ jsx2(context.headingLevel, { "data-jumpy-slot": "expandable-header-wrapper", children: header }) : header,
+    /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "expandable-content-wrapper", "data-expanded": isExpanded ? "true" : "false", children: /* @__PURE__ */ jsx2("div", { id: panelId, "data-jumpy-slot": "expandable-panel", className: innerClasses.panel?.className, style: innerClasses.panel?.style, children }) })
   ] });
 }
 function headingTag(level) {
@@ -1956,9 +2305,9 @@ function focusExpandableButton(buttonRefs, index) {
 }
 function JumpExpandableGroup({ as, multiple = false, disabled = false, headingLevel, onChange, innerClasses = {}, className = "", children, ...props }) {
   const Component = as || "div";
-  const buttonRefs = useRef([]);
+  const buttonRefs = useRef2([]);
   const childArray = Children.toArray(children);
-  const [expandedIndices, setExpandedIndices] = useState(() => {
+  const [expandedIndices, setExpandedIndices] = useState2(() => {
     const initial = /* @__PURE__ */ new Set();
     childArray.forEach((child, index) => {
       if (isValidElement(child) && (child.props.expanded || child.props.defaultExpanded)) initial.add(index);
@@ -1999,7 +2348,7 @@ function JumpExpandableGroup({ as, multiple = false, disabled = false, headingLe
     }
     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) => {
+  return /* @__PURE__ */ jsx2(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,
@@ -2009,9 +2358,9 @@ function JumpExpandableGroup({ as, multiple = false, disabled = false, headingLe
         buttonRefs.current[index] = element;
       }
     };
-    return /* @__PURE__ */ jsxs(JumpyExpandableContext.Provider, { value: contextValue, children: [
+    return /* @__PURE__ */ jsxs2(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
+      index < childArray.length - 1 ? /* @__PURE__ */ jsx2(JumpDivider, { direction: "horizontal", "data-jumpy-slot": "expandable-group-divider", className: innerClasses.divider?.className, style: innerClasses.divider?.style }) : null
     ] }, child.key || index);
   }) });
 }
@@ -2019,15 +2368,15 @@ var JUMPY_POPUP_Z_INDEX = 1200;
 function JumpyPortal({ children }) {
   const theme = useJumpyTheme();
   const scope = useContext(JumpyThemeScopeContext);
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", { "data-jumpy-theme": "true", "data-jumpy-scope": scope || void 0, "data-jumpy-portal": "true", style: { ...!scope ? themeToCSSVariables(theme) : {}, fontFamily: theme.fontFamily.familyBase }, children }) });
+  return /* @__PURE__ */ jsx2(FloatingPortal, { children: /* @__PURE__ */ jsx2("div", { "data-jumpy-theme": "true", "data-jumpy-scope": scope || void 0, "data-jumpy-portal": "true", style: { ...!scope ? themeToCSSVariables(theme) : {}, fontFamily: theme.fontFamily.familyBase }, children }) });
 }
 function JumpyModalLayer({ children, onVisibleChange, style, onPointerDown, ...props }) {
   const theme = useJumpyTheme();
   const { refs, context } = useFloating({ open: true, onOpenChange: onVisibleChange });
-  return /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsx(FloatingOverlay, { ...props, lockScroll: true, onPointerDown: (event) => {
+  return /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsx2(FloatingOverlay, { ...props, lockScroll: true, onPointerDown: (event) => {
     onPointerDown?.(event);
     if (event.target === event.currentTarget) event.preventDefault();
-  }, style, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, outsideElementsInert: true, restoreFocus: true, children: cloneElement(children, {
+  }, style, children: /* @__PURE__ */ jsx2(FloatingFocusManager, { context, outsideElementsInert: true, restoreFocus: true, children: cloneElement(children, {
     ref: refs.setFloating,
     tabIndex: -1,
     onKeyDown(event) {
@@ -2045,37 +2394,336 @@ function JumpSheet({ visible = false, onVisibleChange, position = "right", title
   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) => {
+  return /* @__PURE__ */ jsx2(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) => {
+  }, style: { position: "fixed", inset: 0, zIndex: 50, backgroundColor: theme.color.surfaceOverlay }, children: /* @__PURE__ */ jsxs2("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__ */ jsxs2("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: [
+      title ? /* @__PURE__ */ jsx2(JumpTypography, { variant: "titleMediumEmphasized", children: title }) : null,
+      subtitle ? /* @__PURE__ */ jsx2(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
+    /* @__PURE__ */ jsx2("div", { style: { padding: spacingValue(theme, JumpySpacing.large), flex: 1, overflow: "auto" }, children }),
+    footer ? /* @__PURE__ */ jsx2("div", { style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid ${theme.color.borderSubtle}` }, children: footer }) : null
   ] }) });
 }
+function JumpyNavigationIcon({ type }) {
+  const paths = {
+    menu: "M4 6h16M4 12h16M4 18h16",
+    close: "M6 6l12 12M18 6 6 18",
+    back: "M15 18l-6-6 6-6"
+  };
+  return /* @__PURE__ */ jsx2("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", "data-jumpy-stroke-icon": "true", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: paths[type] }) });
+}
+function JumpTopBar({ leading, onMenu, onBack, menuOpen = false, title, subtitle, trailing, sticky = true, ariaLabels = {}, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const [scrolled, setScrolled] = useState2(false);
+  const titleStyle = textStyleValue(theme, JumpyTextStyle.bodyLargeEmphasized);
+  const subtitleStyle = textStyleValue(theme, JumpyTextStyle.bodySmall);
+  useEffect2(() => {
+    if (!sticky) return void 0;
+    const update = () => setScrolled(window.scrollY > 0);
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    return () => window.removeEventListener("scroll", update);
+  }, [sticky]);
+  const leadingType = leading === "menu" || leading === "back" ? leading : void 0;
+  const leadingNode = leading === "menu" ? /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.menu || "Open navigation", "aria-haspopup": "dialog", "aria-expanded": menuOpen, onClick: onMenu, children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "menu" }) }) : leading === "back" ? /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.back || "Back", onClick: onBack, children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "back" }) }) : leading;
+  return /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      ...props,
+      "data-jumpy-component": "top-bar",
+      "data-sticky": sticky ? "true" : "false",
+      "data-scrolled": scrolled ? "true" : "false",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        position: sticky ? "sticky" : "relative",
+        top: 0,
+        zIndex: 40,
+        alignItems: "center",
+        gap: spacingValue(theme, JumpySpacing.medium),
+        minHeight: `calc(${sizeValue(theme, JumpySize.large2XL)}px + env(safe-area-inset-top, 0px))`,
+        padding: `calc(${spacingValue(theme, JumpySpacing.smallXS)}px + env(safe-area-inset-top, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) ${spacingValue(theme, JumpySpacing.smallXS)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`,
+        color: "var(--jumpy-color-text-primary)",
+        fontFamily: theme.fontFamily.familyBase,
+        ...props.style || {}
+      },
+      children: [
+        leadingNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-leading", "data-leading": leadingType, style: { marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: leadingNode }) : null,
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "top-bar-title", style: { display: "flex", flexDirection: "column", flex: "1 1 auto", minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: titleStyle.fontSize, lineHeight: titleStyle.lineHeight, fontWeight: titleStyle.fontWeight }, children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--jumpy-color-text-secondary)", fontSize: subtitleStyle.fontSize, lineHeight: subtitleStyle.lineHeight }, children: subtitle }) : null
+        ] }),
+        trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "top-bar-trailing", style: { display: "inline-flex", flex: "0 0 auto", alignItems: "center", gap: spacingValue(theme, JumpySpacing.smallXS) }, children: trailing }) : null
+      ]
+    }
+  );
+}
+function JumpTabBar({ children, className = "", "aria-label": ariaLabel = "Main navigation", ...props }) {
+  const theme = useJumpyTheme();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-jumpy-component": "tab-bar",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        position: "sticky",
+        bottom: 0,
+        zIndex: 40,
+        padding: `0 calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-right, 0px)) calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-bottom, 0px)) calc(${spacingValue(theme, JumpySpacing.medium)}px + env(safe-area-inset-left, 0px))`,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsx2(
+        "nav",
+        {
+          ...props,
+          "aria-label": ariaLabel,
+          "data-jumpy-slot": "tab-bar-surface",
+          style: {
+            boxSizing: "border-box",
+            display: "flex",
+            gap: spacingValue(theme, JumpySpacing.small4XS),
+            padding: spacingValue(theme, JumpySpacing.small3XS),
+            borderRadius: radiusValue(theme, JumpyRadius.large2XL),
+            border: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`,
+            boxShadow: theme.shadow.positiveMedium,
+            pointerEvents: "auto",
+            fontFamily: theme.fontFamily.familyBase,
+            ...props.style || {}
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function JumpTabBarItem({ as, icon, badge, selected = false, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const Component = as || (props.href ? "a" : "button");
+  const labelStyle = textStyleValue(theme, JumpyTextStyle.labelSmallEmphasized);
+  const badgeNode = typeof badge === "number" ? badge > 0 ? /* @__PURE__ */ jsx2(JumpBadge, { size: "small", status: "active", "aria-label": void 0, role: "presentation", "aria-live": "off", children: badge > 99 ? "99+" : badge }) : null : badge;
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      ...props,
+      type: Component === "button" ? props.type || "button" : props.type,
+      "aria-current": selected ? props["aria-current"] || "page" : props["aria-current"],
+      "data-jumpy-component": "tab-bar-item",
+      "data-selected": selected ? "true" : "false",
+      className: cn(className),
+      style: {
+        boxSizing: "border-box",
+        flex: "1 1 0",
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacingValue(theme, JumpySpacing.small4XS),
+        minHeight: sizeValue(theme, JumpySize.large2XL),
+        padding: `${spacingValue(theme, JumpySpacing.smallXS)}px ${spacingValue(theme, JumpySpacing.small3XS)}px`,
+        border: 0,
+        borderRadius: radiusValue(theme, JumpyRadius.largeXL),
+        backgroundColor: selected ? "var(--jumpy-interactive-active-regular-default-surface)" : "transparent",
+        color: selected ? "var(--jumpy-interactive-active-regular-default-text)" : "var(--jumpy-color-text-secondary)",
+        textDecoration: "none",
+        cursor: "pointer",
+        fontFamily: theme.fontFamily.familyBase,
+        fontSize: labelStyle.fontSize,
+        lineHeight: labelStyle.lineHeight,
+        fontWeight: labelStyle.fontWeight,
+        ...props.style || {}
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "tab-bar-item-icon", "aria-hidden": "true", style: { position: "relative", display: "inline-flex", width: sizeValue(theme, JumpySize.small2XS), height: sizeValue(theme, JumpySize.small2XS) }, children: [
+          icon,
+          badgeNode ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-bar-item-badge", style: { position: "absolute", top: -spacingValue(theme, JumpySpacing.smallXS), left: "50%", marginLeft: spacingValue(theme, JumpySpacing.small3XS), display: "inline-flex" }, children: badgeNode }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-bar-item-label", style: { maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children })
+      ]
+    }
+  );
+}
+function JumpAppShell({ brand, navigation, sidebarFooter, topBar, tabBar, hideTabBar = false, breakpoint = 1024, sidebarWidth = 256, navigationOpen, defaultNavigationOpen = false, onNavigationOpenChange, ariaLabels = {}, children, className = "", ...props }) {
+  const theme = useJumpyTheme();
+  const shellId = useId();
+  const [internalOpen, setInternalOpen] = useState2(defaultNavigationOpen);
+  const isOpen = Boolean(navigation) && (navigationOpen ?? internalOpen);
+  const swipeStart = useRef2(null);
+  const rootRef = useRef2(null);
+  const wasOpen = useRef2(isOpen);
+  const { desktop: topBarOnDesktop = false, leading, ...topBarProps } = topBar || {};
+  const resolvedLeading = leading ?? (navigation ? "menu" : void 0);
+  const shell = `[data-jumpy-app-shell="${shellId}"]`;
+  const width = typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
+  function setOpen(next) {
+    if (navigationOpen === void 0) setInternalOpen(next);
+    onNavigationOpenChange?.(next);
+  }
+  useEffect2(() => {
+    if (!isOpen) return void 0;
+    const desktop = window.matchMedia(`(min-width: ${breakpoint}px)`);
+    const closeOnDesktop = () => {
+      if (desktop.matches) setOpen(false);
+    };
+    closeOnDesktop();
+    desktop.addEventListener("change", closeOnDesktop);
+    return () => desktop.removeEventListener("change", closeOnDesktop);
+  });
+  useEffect2(() => {
+    const closed = wasOpen.current && !isOpen;
+    wasOpen.current = isOpen;
+    if (!closed) return void 0;
+    const frame = window.requestAnimationFrame(() => {
+      if (document.activeElement && document.activeElement !== document.body) return;
+      rootRef.current?.querySelector(':scope > [data-jumpy-slot="app-shell-body"] > [data-jumpy-component="top-bar"] > [data-leading="menu"] button')?.focus();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen]);
+  function closeOnNavigate(event) {
+    const item = event.target.closest?.('a[href], [data-jumpy-component="side-menu-item"]');
+    if (!item || item.hasAttribute("aria-expanded") || item.getAttribute("aria-disabled") === "true" || item.disabled) return;
+    setOpen(false);
+  }
+  const shellStyles = `
+${shell} { grid-template-columns: minmax(0, 1fr); }
+${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: none; }
+@media (min-width: ${breakpoint}px) {
+  ${shell} { grid-template-columns: ${width} minmax(0, 1fr); }
+  ${shell} > [data-jumpy-slot='app-shell-sidebar'] { display: flex; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='tab-bar'] { display: none; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'][data-mobile-only='true'] { display: none; }
+  ${shell} > [data-jumpy-slot='app-shell-body'] > [data-jumpy-component='top-bar'] > [data-leading='menu'] { display: none; }
+}`;
+  const topBarNode = /* @__PURE__ */ jsx2(
+    JumpTopBar,
+    {
+      ...topBarProps,
+      "data-mobile-only": topBarOnDesktop ? "false" : "true",
+      leading: resolvedLeading,
+      menuOpen: isOpen,
+      onMenu: () => setOpen(true),
+      title: topBarProps.title ?? brand,
+      ariaLabels: { menu: ariaLabels.openNavigation, back: ariaLabels.back, ...topBarProps.ariaLabels || {} }
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...props,
+      ref: rootRef,
+      "data-jumpy-component": "app-shell",
+      "data-jumpy-app-shell": shellId,
+      "data-navigation-open": isOpen ? "true" : "false",
+      className: cn(className),
+      style: {
+        display: "grid",
+        minHeight: "100dvh",
+        backgroundColor: "var(--jumpy-color-surface-canvas)",
+        color: "var(--jumpy-color-text-primary)",
+        fontFamily: theme.fontFamily.familyBase,
+        ...props.style || {}
+      },
+      children: [
+        /* @__PURE__ */ jsx2("style", { children: shellStyles }),
+        /* @__PURE__ */ jsxs2(
+          "aside",
+          {
+            "data-jumpy-slot": "app-shell-sidebar",
+            "aria-label": ariaLabels.navigation || "Navigation",
+            style: {
+              boxSizing: "border-box",
+              position: "sticky",
+              top: 0,
+              height: "100dvh",
+              flexDirection: "column",
+              overflowY: "auto",
+              borderRight: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)`,
+              backgroundColor: "var(--jumpy-color-surface-card)"
+            },
+            children: [
+              brand ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-brand", style: { padding: spacingValue(theme, JumpySpacing.large2XL), borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: brand }) : null,
+              navigation ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }) : null,
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-sidebar-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-body", style: { display: "flex", flexDirection: "column", minWidth: 0, minHeight: "100dvh" }, children: [
+          topBar !== null ? topBarNode : null,
+          /* @__PURE__ */ jsx2("main", { "data-jumpy-slot": "app-shell-content", style: { flex: 1, minWidth: 0 }, children }),
+          tabBar && !hideTabBar ? tabBar : null
+        ] }),
+        isOpen ? /* @__PURE__ */ jsx2(JumpyModalLayer, { onVisibleChange: setOpen, "data-jumpy-component": "app-shell-drawer-overlay", style: { position: "fixed", inset: 0, zIndex: 60, backgroundColor: "var(--jumpy-color-surface-overlay)" }, children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabels.navigation || "Navigation",
+            "data-jumpy-component": "app-shell-drawer",
+            onClick: closeOnNavigate,
+            onTouchStart: (event) => {
+              const touch = event.touches[0];
+              swipeStart.current = touch ? { x: touch.clientX, y: touch.clientY } : null;
+            },
+            onTouchEnd: (event) => {
+              const start = swipeStart.current;
+              const touch = event.changedTouches[0];
+              swipeStart.current = null;
+              if (!start || !touch) return;
+              const dx = touch.clientX - start.x;
+              const dy = touch.clientY - start.y;
+              if (dx < -spacingValue(theme, JumpySpacing.large4XL) && Math.abs(dx) > Math.abs(dy) * 1.5) setOpen(false);
+            },
+            style: {
+              boxSizing: "border-box",
+              position: "fixed",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              width: "100vw",
+              height: "100dvh",
+              overflowY: "auto",
+              outline: "none",
+              backgroundColor: "var(--jumpy-color-surface-card)",
+              color: "var(--jumpy-color-text-primary)",
+              fontFamily: theme.fontFamily.familyBase,
+              paddingBottom: "env(safe-area-inset-bottom, 0px)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "app-shell-drawer-header", style: { boxSizing: "border-box", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", alignItems: "center", gap: spacingValue(theme, JumpySpacing.medium), minHeight: `calc(${sizeValue(theme, JumpySize.large2XL)}px + env(safe-area-inset-top, 0px))`, padding: `calc(${spacingValue(theme, JumpySpacing.smallXS)}px + env(safe-area-inset-top, 0px)) calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-right, 0px)) ${spacingValue(theme, JumpySpacing.smallXS)}px calc(${spacingValue(theme, JumpySpacing.large)}px + env(safe-area-inset-left, 0px))`, borderBottom: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: [
+                /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", marginLeft: -spacingValue(theme, JumpySpacing.smallXS) }, children: /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": ariaLabels.closeNavigation || "Close navigation", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx2(JumpyNavigationIcon, { type: "close" }) }) }),
+                /* @__PURE__ */ jsx2("span", { style: { minWidth: 0 }, children: brand })
+              ] }),
+              /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-navigation", style: { flex: 1, padding: spacingValue(theme, JumpySpacing.large) }, children: navigation }),
+              sidebarFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "app-shell-drawer-footer", style: { padding: spacingValue(theme, JumpySpacing.large), borderTop: `${borderWidthValue(theme, JumpyBorderWidth.small)}px solid var(--jumpy-color-border-subtle)` }, children: sidebarFooter }) : null
+            ]
+          }
+        ) }) : 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
+  return /* @__PURE__ */ jsxs2(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__ */ jsx2(JumpTypography, { variant: variant === "prominent" ? "bodyMediumEmphasized" : "labelSmallEmphasized", color: "secondary", children }),
+    variant === "prominent" && description ? /* @__PURE__ */ jsx2(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 }) });
+  return /* @__PURE__ */ jsx2(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__ */ jsx2(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(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       ...props,
@@ -2109,7 +2757,7 @@ function JumpTag({ size: size2 = "small", status = "regular", disabled = false,
 function JumpChip({ selected = false, disabled = false, className = "", children, ...props }) {
   const theme = useJumpyTheme();
   const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       ...props,
@@ -2146,8 +2794,8 @@ function JumpChip({ selected = false, disabled = false, className = "", 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 inputRef = useRef2(null);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState2(defaultChecked);
   const isControlled = checked !== void 0;
   const isChecked = Boolean(isControlled ? checked : uncontrolledChecked);
   const isReadonly = readOnly && !disabled;
@@ -2158,7 +2806,7 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
   const inactiveDisabled = theme.selectors.inactive.disabled;
   const inactiveReadOnly = theme.selectors.inactive.readOnly;
   const labelContent = children ?? label;
-  useEffect(() => {
+  useEffect2(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   const stateTokens = isChecked || indeterminate ? disabled ? activeDisabled : isReadonly ? activeReadOnly : activeDefault : disabled ? inactiveDisabled : isReadonly ? inactiveReadOnly : inactiveDefault;
@@ -2172,7 +2820,7 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
     onCheckedChange?.(event.target.checked);
     props.onChange?.(event);
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "label",
     {
       "data-jumpy-component": "checkbox",
@@ -2206,8 +2854,8 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
         ...style || {}
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "checkbox-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "checkbox-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
+          /* @__PURE__ */ jsx2(
             "input",
             {
               ...props,
@@ -2226,9 +2874,9 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
               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
+          isChecked || indeterminate ? /* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "M6 11h12v2H6z" }) : /* @__PURE__ */ jsx2("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
+        labelContent ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "checkbox-label", children: labelContent }) : null
       ]
     }
   );
@@ -2236,14 +2884,14 @@ function JumpCheckbox({ label, children, checked, defaultChecked = false, indete
 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 [uncontrolledChecked, setUncontrolledChecked] = useState2(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(
+  return /* @__PURE__ */ jsxs2(
     "label",
     {
       "data-jumpy-component": "switch",
@@ -2275,8 +2923,8 @@ function JumpSwitch({ label, children, checked, defaultChecked = false, onChecke
         ...style || {}
       },
       children: [
-        /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "switch-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("span", { "data-jumpy-slot": "switch-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: [
+          /* @__PURE__ */ jsx2(
             "input",
             {
               ...props,
@@ -2297,9 +2945,9 @@ function JumpSwitch({ label, children, checked, defaultChecked = false, onChecke
               }
             }
           ),
-          /* @__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" }) }) }) })
+          /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "switch-track", className: innerClasses.track?.className, style: innerClasses.track?.style, children: /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "switch-thumb", className: innerClasses.thumb?.className, style: innerClasses.thumb?.style, children: /* @__PURE__ */ jsx2("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__ */ jsx2("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
+        labelContent ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "switch-label", children: labelContent }) : null
       ]
     }
   );
@@ -2310,10 +2958,10 @@ function JumpRadioGroup({ name, value, defaultValue, onValueChange, options, cla
   const isReadonly = readOnly && !disabled;
   const generatedName = useId();
   const validName = name || generatedName;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const [uncontrolledValue, setUncontrolledValue] = useState2(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) => {
+  return /* @__PURE__ */ jsx2("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) {
@@ -2326,7 +2974,7 @@ function JumpRadioGroup({ name, value, defaultValue, onValueChange, options, cla
     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(
+    return /* @__PURE__ */ jsxs2(
       "label",
       {
         "data-jumpy-component": "radio",
@@ -2350,9 +2998,9 @@ function JumpRadioGroup({ name, value, defaultValue, onValueChange, options, cla
           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__ */ jsx2("span", { "data-jumpy-slot": "radio-container", className: innerClasses.container?.className, style: innerClasses.container?.style, children: /* @__PURE__ */ jsx2("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 })
+          /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "radio-label", className: innerClasses.label?.className, style: innerClasses.label?.style, children: option.label })
         ]
       },
       option.value
@@ -2424,14 +3072,14 @@ function coerceDateOutput(date, sample) {
 }
 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__ */ jsxs2("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__ */ jsx2("path", { d: "M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx2("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
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("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__ */ jsx2("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) {
@@ -2452,18 +3100,18 @@ function dateIsUnavailable(date, { minDate, maxDate, disabledDates = [], isDateD
 }
 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 [internalValue, setInternalValue] = useState2(defaultValue);
+  const [internalOpen, setInternalOpen] = useState2(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 [viewDate, setViewDate] = useState2(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(() => {
+  const [draft, setDraft] = useState2(inputValue);
+  const typedValue = useRef2(void 0);
+  useEffect2(() => {
     if (typedValue.current !== selectedTime) setDraft(inputValue);
     typedValue.current = void 0;
     if (selectedTime !== null) setViewDate(new Date(selectedTime));
@@ -2491,9 +3139,9 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
     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: "100%", maxWidth: "100%" }, children: [
-    /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx2(PickerTrailingIcon, { type: "date", open: isOpen });
+  return /* @__PURE__ */ jsxs2("div", { ref: refs.setReference, "data-jumpy-component": "date-picker", style: { position: "relative", width: "100%", maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx2(
       JumpInput,
       {
         ...props,
@@ -2539,24 +3187,24 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
         }
       }
     ) }),
-    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, 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" })
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsxs2("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, 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__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.medium), padding: spacingValue(theme, JumpySpacing.small3XS) }, children: [
+        /* @__PURE__ */ jsx2(JumpIconButton, { variant: "borderless", "aria-label": "Previous", onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ jsx2("strong", { style: { fontFamily: theme.fontFamily.familyBase, color: "inherit" }, children: viewDate.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ jsx2(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)),
+      /* @__PURE__ */ jsxs2("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__ */ jsx2("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());
+          return /* @__PURE__ */ jsx2("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" })
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: spacingValue(theme, JumpySpacing.smallXS), padding: spacingValue(theme, JumpySpacing.large) }, children: [
+        /* @__PURE__ */ jsx2(JumpButton, { variant: "tertiary", onClick: () => setOpen(false), children: labels.cancelButton || "Cancel" }),
+        /* @__PURE__ */ jsx2(JumpButton, { variant: "borderless", onClick: () => commit(/* @__PURE__ */ new Date()), children: "Today" })
       ] })
     ] }) }) : null
   ] });
@@ -2564,15 +3212,15 @@ function JumpDatePicker({ label = "Date", hint, value, defaultValue = null, onCh
 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 [internalValue, setInternalValue] = useState2(defaultValue);
+  const [internalOpen, setInternalOpen] = useState2(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(() => {
+  const [draft, setDraft] = useState2(inputValue);
+  const typedValue = useRef2(void 0);
+  useEffect2(() => {
     if (typedValue.current !== selectedTime) setDraft(inputValue);
     typedValue.current = void 0;
   }, [selectedTime, inputValue, resolvedFormat]);
@@ -2613,9 +3261,9 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
     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: "100%", maxWidth: "100%" }, children: [
-    /* @__PURE__ */ jsx(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx(
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx2(PickerTrailingIcon, { type: "time", open: isOpen });
+  return /* @__PURE__ */ jsxs2("div", { ref: refs.setReference, "data-jumpy-component": "time-picker", style: { position: "relative", width: "100%", maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear, className, trailing, children: /* @__PURE__ */ jsx2(
       JumpInput,
       {
         ...props,
@@ -2661,47 +3309,52 @@ function JumpTimePicker({ label = "Time", hint, value, defaultValue = null, onCh
         }
       }
     ) }),
-    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, 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
+    isOpen && !disabled && !readOnly ? /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsxs2("div", { ref: refs.setFloating, role: "dialog", "aria-label": label, style: { ...floatingStyles, zIndex: JUMPY_POPUP_Z_INDEX, 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__ */ jsxs2("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__ */ jsx2("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__ */ jsx2(TimeColumn, { label: "Hour", values: hours, selected: String(displayHour).padStart(2, "0"), onSelect: (next) => commit("hour", next), theme }),
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { zIndex: 1, display: "flex", alignItems: "center", justifyContent: "center", transform: "translateY(-0.1em)", 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__ */ jsx2(TimeColumn, { label: "Minute", values: minutes, selected: String(currentMinute).padStart(2, "0"), onSelect: (next) => commit("minute", next), theme }),
+        !twentyFourHours ? /* @__PURE__ */ jsx2(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" })
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", gap: spacingValue(theme, JumpySpacing.smallXS), padding: spacingValue(theme, JumpySpacing.large) }, children: [
+        /* @__PURE__ */ jsx2(JumpButton, { variant: "tertiary", onClick: () => setOpen(false), children: labels.cancelButton || "Cancel" }),
+        /* @__PURE__ */ jsx2(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 wraps = values.length >= 5;
+  const visibleValues = Array.from({ length: 5 }, (_, offsetIndex) => {
+    const index = selectedIndex + offsetIndex - 2;
+    if (wraps) return values[(index + values.length) % values.length];
+    return index >= 0 && index < values.length ? values[index] : null;
   });
+  const rowHeight = sizeValue(theme, JumpySize.large) + spacingValue(theme, JumpySpacing.small3XS) * 2;
   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) => {
+  return /* @__PURE__ */ jsx2("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: rowHeight * 5 }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column" }, children: visibleValues.map((value, offsetIndex) => {
+    if (value === null) return /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { flex: `0 0 ${rowHeight}px` } }, `${label}-empty-${offsetIndex}`);
     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}`);
+    return /* @__PURE__ */ jsx2("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: rowHeight, flex: `0 0 ${rowHeight}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 }) {
+function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, onOpenChange, items = [], placeholder, popupMinWidth = 0, 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 [internalValue, setInternalValue] = useState2(defaultValue);
+  const [internalOpen, setInternalOpen] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
+  const [focusedIndex, setFocusedIndex] = useState2(-1);
+  const dropdownRef = useRef2(null);
+  const triggerRef = useRef2(null);
   const selectedValues = value ?? internalValue;
   const isOpen = open ?? internalOpen;
   const flattenedItems = flattenDropdownItems(items);
@@ -2722,11 +3375,12 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
     middleware: [
       offset(dropdownOffset),
       flip({ padding: dropdownPadding }),
+      shift({ padding: dropdownPadding }),
       size({
         padding: dropdownPadding,
-        apply({ rects, availableHeight, elements }) {
+        apply({ rects, availableWidth, availableHeight, elements }) {
           Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
+            width: `${Math.max(0, Math.min(Math.max(rects.reference.width, popupMinWidth), availableWidth))}px`,
             maxHeight: `${Math.max(dropdownMinHeight, Math.min(dropdownMaxHeight, availableHeight))}px`
           });
         }
@@ -2756,10 +3410,10 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
     onChange?.(nextValues);
     if (!multiple) {
       setOpen(false);
-      refs.domReference.current?.focus();
+      triggerRef.current?.focus();
     }
   }
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen) return void 0;
     function dismissOutside(event) {
       if (!dropdownRef.current?.contains(event.target) && !refs.floating.current?.contains(event.target)) setOpen(false);
@@ -2785,18 +3439,21 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
     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(
+  const triggerInput = /* @__PURE__ */ jsx2(
     JumpInput,
     {
       ...props,
       ref: (node) => {
-        refs.setReference(node);
+        triggerRef.current = node;
+        refs.setReference(node?.closest('[data-jumpy-component="field-control"]') || node);
         if (typeof inputRef === "function") inputRef(node);
         else if (inputRef) inputRef.current = node;
       },
       id: triggerId,
       style: triggerInputStyle,
       "data-jumpy-dropdown-trigger": "true",
+      onChange: () => {
+      },
       "data-has-value": Boolean(displayText),
       role: "combobox",
       "aria-expanded": isOpen,
@@ -2836,16 +3493,16 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
       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: [
+  const trailing = readOnly ? void 0 : /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsxs2(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: () => {
+    /* @__PURE__ */ jsx2("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__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear: () => {
     commit([]);
     setSearchValue("");
     onClear?.();
   }, className, trailing, children: triggerInput });
-  const listbox = isOpen && !disabled ? /* @__PURE__ */ jsx(JumpyPortal, { children: /* @__PURE__ */ jsxs(
+  const listbox = isOpen && !disabled ? /* @__PURE__ */ jsx2(JumpyPortal, { children: /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: refs.setFloating,
@@ -2864,11 +3521,11 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
         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) => {
+        searchable ? /* @__PURE__ */ jsx2("div", { style: { margin: `${spacingValue(theme, JumpySpacing.small3XS)}px ${spacingValue(theme, JumpySpacing.smallXS)}px` }, children: /* @__PURE__ */ jsx2(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.length === 0 ? /* @__PURE__ */ jsx2("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 = {
@@ -2882,17 +3539,17 @@ function JumpDropdown({ label, hint, value, defaultValue = [], onChange, open, o
               selectItem(item);
             }
           };
-          return renderItem ? renderItem(item, selected, listItemProps) : /* @__PURE__ */ jsx(JumpListItem, { selected, ...listItemProps, children: item.label }, String(item.value));
+          return renderItem ? renderItem(item, selected, listItemProps) : /* @__PURE__ */ jsx2(JumpListItem, { selected, ...listItemProps, children: item.label }, String(item.value));
         })
       ]
     }
   ) }) : null;
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, "data-jumpy-component": "dropdown", onKeyDown: (event) => {
+  return /* @__PURE__ */ jsxs2("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();
+      triggerRef.current?.focus();
     }
   }, style: { position: "relative", width: "100%" }, children: [
     trigger,
@@ -2916,9 +3573,9 @@ function JumpSpinner({ size: size2 = "medium", mode = "indeterminate", value = 0
   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 })
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: theme.color.borderSubtle, strokeWidth }) : null,
+    /* @__PURE__ */ jsx2("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__ */ jsx2("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 }) {
@@ -2935,7 +3592,7 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
   const descriptionStyle = textStyleValue(theme, JumpyTextStyle.bodyMedium);
   const { className: overlayClassName, style: overlayStyle, onClick: overlayOnClick, ...restOverlayProps } = overlayProps || {};
   if (!visible) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     JumpyModalLayer,
     {
       ...restOverlayProps,
@@ -2949,7 +3606,7 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
         if (event.target === event.currentTarget && !event.defaultPrevented && !disableBackdropClick) onVisibleChange?.(false);
       },
       style: overlayStyle,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs2(
         Component,
         {
           ...props,
@@ -2971,10 +3628,10 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
             ...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(
+            dialogIllustration ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "dialog-illustration", className: innerClasses.illustration?.className, style: innerClasses.illustration?.style, children: dialogIllustration }) : null,
+            /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "dialog-body", className: innerClasses.body?.className, style: innerClasses.body?.style, children: [
+              dialogIcon ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "dialog-icon", className: innerClasses.icon?.className, style: innerClasses.icon?.style, children: dialogIcon }) : null,
+              dialogTitle ? /* @__PURE__ */ jsx2(
                 "div",
                 {
                   id: labelId,
@@ -2992,8 +3649,8 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
                   children: dialogTitle
                 }
               ) : null,
-              /* @__PURE__ */ jsxs("div", { "data-jumpy-slot": "dialog-scrollable-content", className: innerClasses.scrollableContent?.className, style: innerClasses.scrollableContent?.style, children: [
-                dialogDescription ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs2("div", { "data-jumpy-slot": "dialog-scrollable-content", className: innerClasses.scrollableContent?.className, style: innerClasses.scrollableContent?.style, children: [
+                dialogDescription ? /* @__PURE__ */ jsx2(
                   "div",
                   {
                     id: descriptionId,
@@ -3014,7 +3671,7 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
                 children
               ] })
             ] }),
-            dialogFooter ? /* @__PURE__ */ jsx("div", { "data-jumpy-slot": "dialog-footer", className: innerClasses.footer?.className, style: innerClasses.footer?.style, children: dialogFooter }) : null
+            dialogFooter ? /* @__PURE__ */ jsx2("div", { "data-jumpy-slot": "dialog-footer", className: innerClasses.footer?.className, style: innerClasses.footer?.style, children: dialogFooter }) : null
           ]
         }
       )
@@ -3023,24 +3680,24 @@ function JumpDialog({ as, visible = false, onVisibleChange, title, description,
 }
 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 }) })
+  const content = /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col items-center text-center", className), role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative flex items-center justify-center", style: { height: theme.sizing.loaderSize, width: theme.sizing.loaderSize }, children: [
+      /* @__PURE__ */ jsx2("div", { className: "absolute inset-0", style: { borderRadius: theme.radius.large2XL, backgroundColor: theme.color.infoSurface } }),
+      /* @__PURE__ */ jsx2("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__ */ jsx2("span", { className: "relative grid place-items-center", style: { color: theme.color.surfacePrimary }, children: /* @__PURE__ */ jsx2(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__ */ jsx2("p", { className: "mt-5 text-[11px] font-bold uppercase tracking-[0.18em]", style: { color: theme.color.surfacePrimary }, children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex items-center gap-1.5", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx2("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.2s]", style: { backgroundColor: theme.color.surfacePrimary } }),
+      /* @__PURE__ */ jsx2("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full [animation-delay:-0.1s]", style: { backgroundColor: theme.color.successBorder } }),
+      /* @__PURE__ */ jsx2("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" })
+    /* @__PURE__ */ jsx2("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 })
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2(JumpBackground, { snow: false }),
+    /* @__PURE__ */ jsx2(JumpCard, { className: cn("px-10 py-9", decorativeBackground && "relative z-10"), children: content })
   ] });
 }
 function JumpButton({ as, size: size2, variant = "primary", status = "regular", className = "", isLoading = false, disabled, elevated = false, slots, leadingIcon, trailingIcon, children, ...props }) {
@@ -3051,29 +3708,30 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
   const compact = height < sizeValue(theme, JumpySize.large);
   const textStyle = textStyleValue(theme, compact ? JumpyTextStyle.bodySmallEmphasized : JumpyTextStyle.bodyMediumEmphasized);
   const iconSize = sizeValue(theme, compact ? JumpySize.small3XS : JumpySize.small2XS);
-  const [pressed, setPressed] = useState(false);
+  const [pressed, setPressed] = useState2(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 displayedLeading = isLoading ? /* @__PURE__ */ jsx2(JumpSpinner, { size: "xSmall", showTrack: false, "aria-hidden": "true", style: { display: "block", width: iconSize, height: iconSize, color: "inherit" } }) : leading;
+  const spacing = getButtonSpacing(theme, variant, Boolean(displayedLeading), Boolean(trailing));
   const hasBorder = variant === "secondary" || variant === "tertiary";
   if (size2 !== void 0) {
     const border = hasBorder ? borderWidthValue(theme, JumpyBorderWidth.small) : 0;
-    const contentHeight = Math.max(textStyle.fontSize * textStyle.lineHeight, leading || trailing ? iconSize : 0);
+    const contentHeight = Math.max(textStyle.fontSize * textStyle.lineHeight, displayedLeading || trailing ? iconSize : 0);
     spacing.paddingTop = spacing.paddingBottom = Math.max(0, (height - contentHeight - border * 2) / 2);
     if (compact) {
       spacing.gap = spacingValue(theme, JumpySpacing.small3XS);
       spacing.paddingLeft = spacing.paddingRight = spacingValue(theme, variant === "borderless" ? JumpySpacing.zero : JumpySpacing.medium);
     }
   }
-  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
+  const content = /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
+    displayedLeading ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-leading", "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: displayedLeading }) : null,
+    /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-label", children }),
+    trailing ? /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "button-trailing", "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, width: iconSize, height: iconSize, lineHeight: 0, fontSize: iconSize }, children: trailing }) : null
   ] });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -3089,6 +3747,13 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
       "aria-disabled": !isButton && isDisabled ? true : props["aria-disabled"],
       tabIndex: !isButton && isDisabled ? -1 : props.tabIndex,
       disabled: isButton ? isDisabled : void 0,
+      onClick: (event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        props.onClick?.(event);
+      },
       onPointerDown: (event) => {
         setPressed(true);
         props.onPointerDown?.(event);
@@ -3131,13 +3796,7 @@ function JumpButton({ as, size: size2, variant = "primary", status = "regular",
         ...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
-      ] })
+      children: /* @__PURE__ */ jsx2("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", whiteSpace: "nowrap" }, children: content })
     }
   );
 }
@@ -3146,12 +3805,12 @@ function JumpIconButton({ as, variant = "primary", status = "regular", alternate
   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 [pressed, setPressed] = useState2(false);
   const Component = as || "button";
   const isButton = Component === "button";
   const supportsDisabled = typeof Component === "string" && supportsDisabledAttribute(Component);
   const hasBorder = variant === "primary";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       ...props,
@@ -3210,7 +3869,7 @@ function JumpIconButton({ as, variant = "primary", status = "regular", alternate
         } : {},
         ...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 })
+      children: /* @__PURE__ */ jsx2("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 })
     }
   );
 }
@@ -3219,10 +3878,10 @@ function JumpLinkButton({ href, variant = "borderless", status = "regular", clas
   const variantStyles = getButtonVariantStyles(theme, variant, status);
   const bodyMediumEmphasized = textStyleValue(theme, JumpyTextStyle.bodyMediumEmphasized);
   const iconSize = sizeValue(theme, JumpySize.small2XS);
-  const [pressed, setPressed] = useState(false);
+  const [pressed, setPressed] = useState2(false);
   const spacing = getButtonSpacing(theme, variant, Boolean(leadingIcon), Boolean(trailingIcon));
   const hasBorder = variant === "secondary" || variant === "tertiary";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "a",
     {
       href,
@@ -3271,10 +3930,10 @@ function JumpLinkButton({ href, variant = "borderless", status = "regular", clas
         ...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
+      children: /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: spacing.gap, whiteSpace: "nowrap" }, children: [
+        leadingIcon ? /* @__PURE__ */ jsx2("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__ */ jsx2("span", { children }),
+        trailingIcon ? /* @__PURE__ */ jsx2("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
       ] })
     }
   );
@@ -3284,7 +3943,7 @@ var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref
   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(
+  const inputElement = /* @__PURE__ */ jsx2(
     "input",
     {
       ...props,
@@ -3304,11 +3963,37 @@ var JumpInput = forwardRef(function JumpInput2({ className = "", ...props }, ref
   }
   return renderStandaloneField(theme, props.disabled, "", null, inputElement, props.status || "regular", props.readOnly);
 });
+function TokenEditorField(props) {
+  const fieldContext = useContext(JumpyFieldContext);
+  return /* @__PURE__ */ jsx2(TokenEditor, { ...props, fieldContext });
+}
+function JumpTokenInput({ ref, value, defaultValue = [], onChange, onTokenInsert, onTokenRemove, multiline = false, minRows = 3, maxRows, hideClearIcon = false, onClear, label, hint, status = "regular", error = false, disabled = false, readOnly = false, className = "", ...props }) {
+  const editorHandle = useRef2(null);
+  const [internalValue, setInternalValue] = useState2(() => normalizeTokenInputValue(defaultValue, multiline));
+  const [, refresh] = useState2(0);
+  if (multiline && (!Number.isInteger(minRows) || minRows < 1 || maxRows !== void 0 && (!Number.isInteger(maxRows) || maxRows < minRows))) throw new Error("JumpTokenInput requires minRows >= 1 and maxRows >= minRows");
+  const model = normalizeTokenInputValue(value === void 0 ? internalValue : value, multiline);
+  const change = (next) => {
+    if (disabled || readOnly) return;
+    if (value === void 0) setInternalValue(next);
+    else refresh((revision) => revision + 1);
+    onChange?.(next);
+    const previousTokens = model.filter((part) => part.type === "token");
+    const nextTokens = next.filter((part) => part.type === "token");
+    for (const token of nextTokens) if (!previousTokens.some((previous) => previous.id === token.id)) onTokenInsert?.(token);
+    for (const token of previousTokens) if (!nextTokens.some((current) => current.id === token.id)) onTokenRemove?.(token);
+  };
+  return /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear: () => editorHandle.current?.clear(), className, children: /* @__PURE__ */ jsx2(TokenEditorField, { ...props, editorRef: (handle) => {
+    editorHandle.current = handle;
+    if (typeof ref === "function") return ref(handle);
+    if (ref) ref.current = handle;
+  }, model, multiline, minRows, maxRows, value: tokenInputText(model), "data-has-value": model.length > 0, disabled, readOnly, onValueChange: change, onClear }) });
+}
 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(
+  const textareaElement = /* @__PURE__ */ jsx2(
     "textarea",
     {
       ...props,
@@ -3337,18 +4022,18 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
   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 [focused, setFocused] = useState2(false);
+  const [hasValue, setHasValue] = useState2(childHasValue || Boolean(String(childValue).length));
+  const [inputValue, setInputValue] = useState2(String(childValue ?? ""));
   const bodySmall = textStyleValue(theme, JumpyTextStyle.bodySmall);
   const bodyMedium = textStyleValue(theme, JumpyTextStyle.bodyMedium);
   const labelSmall = textStyleValue(theme, JumpyTextStyle.labelSmall);
-  useEffect(() => {
+  useEffect2(() => {
     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 });
+    return /* @__PURE__ */ jsx2("div", { className: cn("block w-full", className), children });
   }
   const originalOnFocus = child.props.onFocus;
   const originalOnBlur = child.props.onBlur;
@@ -3357,7 +4042,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
   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 isTextarea = child.type === JumpTextarea || child.type === TokenEditorField && child.props.multiline;
   const isDropdown = isDropdownTrigger || child.props["data-jumpy-component"] === "dropdown";
   const status = error ? "alarm" : props.status || "regular";
   const leading = props.slots?.leading ?? props.leading;
@@ -3414,8 +4099,8 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
       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(
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2(
       Container,
       {
         ...containerProps,
@@ -3424,7 +4109,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
         "data-readonly": readOnly ? "true" : "false",
         "data-status": status,
         style: { color: "var(--jumpy-cmp-base-input-helper-color)" },
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsxs2(
           "div",
           {
             "data-jumpy-component": "field-control",
@@ -3447,7 +4132,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
               minHeight: isTextarea ? sizeValue(theme, JumpySize.large2XL) : sizeValue(theme, JumpySize.largeXL)
             },
             children: [
-              leading ? /* @__PURE__ */ jsx(
+              leading ? /* @__PURE__ */ jsx2(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -3461,7 +4146,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                   children: leading
                 }
               ) : null,
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs2(
                 "div",
                 {
                   style: {
@@ -3474,7 +4159,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                     overflow: "hidden"
                   },
                   children: [
-                    label && /* @__PURE__ */ jsx(
+                    label && /* @__PURE__ */ jsx2(
                       "span",
                       {
                         id: labelId,
@@ -3501,8 +4186,8 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                         children: label
                       }
                     ),
-                    /* @__PURE__ */ jsx(JumpyFieldContext.Provider, { value: { fieldId, hasLabel: Boolean(label), floating }, children: enhancedChild }),
-                    content ? /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2(JumpyFieldContext.Provider, { value: { fieldId, hasLabel: Boolean(label), floating }, children: enhancedChild }),
+                    content ? /* @__PURE__ */ jsx2(
                       "div",
                       {
                         "data-jumpy-slot": "content",
@@ -3524,7 +4209,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                   ]
                 }
               ),
-              showTrailing ? /* @__PURE__ */ jsxs(
+              showTrailing ? /* @__PURE__ */ jsxs2(
                 "span",
                 {
                   "data-jumpy-slot": "trailing-container",
@@ -3541,7 +4226,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                     transition: `color ${animationDurationValue(theme, JumpyAnimationDuration.smallXS)}s ${focused && !readOnly ? theme.animation.timeEasingImpulse : theme.animation.timeEasingRelease}`
                   },
                   children: [
-                    showClearButton ? /* @__PURE__ */ jsx(
+                    showClearButton ? /* @__PURE__ */ jsx2(
                       JumpIconButton,
                       {
                         variant: "secondary",
@@ -3566,12 +4251,12 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
                           padding: spacingValue(theme, JumpySpacing.small2XS),
                           borderRadius: radiusValue(theme, JumpyRadius.small)
                         },
-                        children: /* @__PURE__ */ jsx(CircleClearIcon, {})
+                        children: /* @__PURE__ */ jsx2(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
+                    showErrorIcon || trailing ? /* @__PURE__ */ jsxs2("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__ */ jsx2("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__ */ jsx2(CircleErrorIcon, { style: { width: sizeValue(theme, JumpySize.small2XS), height: sizeValue(theme, JumpySize.small2XS) } }) }) : null,
+                      trailing ? /* @__PURE__ */ jsx2("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
                   ]
                 }
@@ -3581,7 +4266,7 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
         )
       }
     ),
-    (hasHelperText || hasCounter) && /* @__PURE__ */ jsxs(
+    (hasHelperText || hasCounter) && /* @__PURE__ */ jsxs2(
       "div",
       {
         className: "flex justify-end",
@@ -3596,8 +4281,8 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
           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: [
+          hasHelperText ? /* @__PURE__ */ jsx2("span", { id: helperId, style: { flex: 1 }, children: helperText }) : null,
+          hasCounter ? /* @__PURE__ */ jsxs2("span", { id: counterId, style: { flex: 0, whiteSpace: "nowrap" }, children: [
             inputValue.length,
             "/",
             maxLength
@@ -3608,11 +4293,11 @@ function JumpBaseInput({ label, hint, children, className = "", error = false, h
   ] });
 }
 function JumpField(props) {
-  return /* @__PURE__ */ jsx(JumpBaseInput, { ...props });
+  return /* @__PURE__ */ jsx2(JumpBaseInput, { ...props });
 }
 function JumpChoice({ selected = false, title, description, className = "", ...props }) {
   const theme = useJumpyTheme();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -3627,8 +4312,8 @@ function JumpChoice({ selected = false, title, description, className = "", ...p
         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 })
+        /* @__PURE__ */ jsx2("span", { className: "block text-sm font-bold", children: title }),
+        description && /* @__PURE__ */ jsx2("span", { className: "mt-1 block text-xs leading-5", style: { color: theme.color.textSecondary }, children: description })
       ]
     }
   );
@@ -3636,16 +4321,16 @@ function JumpChoice({ selected = false, title, description, className = "", ...p
 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 })
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("p", { className: "text-sm font-bold", children: title }),
+    /* @__PURE__ */ jsx2("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());
-  const placeIndicatorRef = useRef(null);
+  const scrollRef = useRef2(null);
+  const indicatorRef = useRef2(null);
+  const tabRefs = useRef2(/* @__PURE__ */ new Map());
+  const placeIndicatorRef = useRef2(null);
   placeIndicatorRef.current = (animate) => {
     const selectedTab = tabRefs.current.get(value);
     const scrollContainer = scrollRef.current;
@@ -3669,12 +4354,12 @@ function JumpTabs({ items, value, onChange, className = "" }) {
       indicator.style.transition = "";
     }
   };
-  const indicatorPlacedRef = useRef(false);
-  useLayoutEffect(() => {
+  const indicatorPlacedRef = useRef2(false);
+  useLayoutEffect2(() => {
     placeIndicatorRef.current(indicatorPlacedRef.current);
     indicatorPlacedRef.current = true;
   }, [items, value]);
-  useEffect(() => {
+  useEffect2(() => {
     const scrollContainer = scrollRef.current;
     if (!scrollContainer || typeof ResizeObserver === "undefined") return void 0;
     const sizes = /* @__PURE__ */ new WeakMap();
@@ -3691,10 +4376,10 @@ function JumpTabs({ items, value, onChange, className = "" }) {
     tabRefs.current.forEach((tab) => observer.observe(tab));
     return () => observer.disconnect();
   }, [items]);
-  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: [
+  return /* @__PURE__ */ jsx2("div", { className, "data-jumpy-component": "tabs", children: /* @__PURE__ */ jsxs2("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(
+      return /* @__PURE__ */ jsx2(
         "button",
         {
           ref: (node) => {
@@ -3709,12 +4394,12 @@ function JumpTabs({ items, value, onChange, className = "" }) {
             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 }) })
+          children: /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-content", children: /* @__PURE__ */ jsx2("span", { "data-jumpy-slot": "tab-label", "data-text": item.label, children: item.label }) })
         },
         item.key
       );
     }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         ref: indicatorRef,
@@ -3725,10 +4410,11 @@ function JumpTabs({ items, value, onChange, className = "" }) {
   ] }) });
 }
 function JumpModal({ children }) {
-  return /* @__PURE__ */ jsx(JumpDialog, { visible: true, children });
+  return /* @__PURE__ */ jsx2(JumpDialog, { visible: true, children });
 }
 export {
   BrandMark,
+  JumpAppShell,
   JumpAvatar,
   JumpBackground,
   JumpBadge,
@@ -3773,6 +4459,8 @@ export {
   JumpSnackbarProvider,
   JumpSpinner,
   JumpSwitch,
+  JumpTabBar,
+  JumpTabBarItem,
   JumpTable,
   JumpTableBody,
   JumpTableCell,
@@ -3786,7 +4474,9 @@ export {
   JumpTimePicker,
   JumpToggleButton,
   JumpToggleButtonGroup,
+  JumpTokenInput,
   JumpTooltip,
+  JumpTopBar,
   JumpTypography,
   JumpyAnimation,
   JumpyAnimationDelay,