@mirror-physics/fractal-ui 0.2.0-next.86 → 0.2.0-next.88

package/dist/index.cjs

@@ -765,13 +765,21 @@ PromptGrid.displayName = "PromptGrid";
 
 // src/components/Input/Input.tsx
 var React4 = __toESM(require("react"), 1);
+
+// src/utils/FloatingFieldBorder.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function FloatingFieldBorder({ label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "fractal-floating-field__border", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("legend", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }) }) });
+}
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Input = React4.forwardRef(
   ({ className, type, controlSize = "lg", fieldLabel, id, placeholder, ...props }, ref) => {
     const generatedId = React4.useId();
     const fieldId = id ?? generatedId;
     const floatingLabel = type === "search" ? void 0 : fieldLabel;
-    const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    const input = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type,
@@ -785,7 +793,7 @@ var Input = React4.forwardRef(
       }
     );
     if (!floatingLabel) return input;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: "fractal-floating-field",
@@ -793,7 +801,8 @@ var Input = React4.forwardRef(
         "data-always-float": ["date", "datetime-local", "time", "month", "week", "color", "file", "range"].includes(type ?? "") || void 0,
         children: [
           input,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingFieldBorder, { label: fieldLabel ?? "" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
         ]
       }
     );
@@ -804,7 +813,7 @@ Input.displayName = "Input";
 // src/components/TableSearch/TableSearch.tsx
 var React5 = __toESM(require("react"), 1);
 var import_fractal_icons4 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var TableSearch = React5.forwardRef(
   ({
     searchType = "text",
@@ -817,15 +826,15 @@ var TableSearch = React5.forwardRef(
   }, ref) => {
     const isGlob = searchType === "glob";
     const SearchIcon = isGlob ? import_fractal_icons4.MagnifyingGlassLines : import_fractal_icons4.MagnifyingGlass;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: cn("fractal-table-search", className),
         "data-search-type": searchType,
         "data-control-size": controlSize,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Input,
             {
               ...props,
@@ -847,7 +856,7 @@ TableSearch.displayName = "TableSearch";
 // src/components/NumberInput/NumberInput.tsx
 var React6 = __toESM(require("react"), 1);
 var import_fractal_icons5 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function NumberInput({
   unit,
   controlSize = "lg",
@@ -874,8 +883,8 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Input,
       {
         ref: inputRef,
@@ -890,7 +899,7 @@ function NumberInput({
         ...props
       }
     ),
-    unit && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    unit && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
         className: "fractal-number-input-unit",
@@ -899,8 +908,8 @@ function NumberInput({
         children: unit
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fractal-number-input-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fractal-number-input-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
@@ -908,10 +917,10 @@ function NumberInput({
           "aria-label": `Decrease ${controlLabel}`,
           disabled: decrementDisabled,
           onClick: () => changeByStep(-1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.Minus, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fractal_icons5.Minus, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
@@ -919,7 +928,7 @@ function NumberInput({
           "aria-label": `Increase ${controlLabel}`,
           disabled: incrementDisabled,
           onClick: () => changeByStep(1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_fractal_icons5.Plus, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_fractal_icons5.Plus, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -927,7 +936,7 @@ function NumberInput({
 }
 
 // src/components/Slider/Slider.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Slider(props) {
   const {
     min = 0,
@@ -973,18 +982,18 @@ function Slider(props) {
     if (!(event.key in adjustments)) return null;
     return value + adjustments[event.key];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: cn("fractal-slider", disabled && "fractal-slider--disabled", className),
       "data-disabled": disabled || void 0,
       "data-knobs": knobs,
       children: [
-        showValues && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { children: formatValue(firstValue) }),
-          knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("output", { children: formatValue(secondValue) })
+        showValues && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fractal-slider-values", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("output", { children: formatValue(firstValue) }),
+          knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("output", { children: formatValue(secondValue) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             className: "fractal-slider-control",
@@ -993,9 +1002,9 @@ function Slider(props) {
               "--fractal-slider-selection-end": `${selectionEndPercent}%`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-slider-track", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fractal-slider-selection", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "input",
                 {
                   "aria-label": knobs === 2 ? props.lowerAriaLabel ?? "Lower value" : props.ariaLabel ?? "Slider value",
@@ -1019,7 +1028,7 @@ function Slider(props) {
                   value: firstValue
                 }
               ),
-              knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              knobs === 2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "input",
                 {
                   "aria-label": props.upperAriaLabel ?? "Upper value",
@@ -1055,7 +1064,7 @@ function clamp(value, minimum, maximum) {
 // src/components/PasswordInput/PasswordInput.tsx
 var React7 = __toESM(require("react"), 1);
 var import_fractal_icons6 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PasswordInput = React7.forwardRef(
   ({
     className,
@@ -1067,14 +1076,14 @@ var PasswordInput = React7.forwardRef(
   }, ref) => {
     const [passwordVisible, setPasswordVisible] = React7.useState(false);
     const toggleLabel = passwordVisible ? hidePasswordLabel : showPasswordLabel;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         className: cn("fractal-password-input", className),
         "data-control-size": controlSize,
         "data-password-visible": passwordVisible ? "" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             Input,
             {
               ...props,
@@ -1085,7 +1094,7 @@ var PasswordInput = React7.forwardRef(
               type: passwordVisible ? "text" : "password"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -1095,7 +1104,7 @@ var PasswordInput = React7.forwardRef(
               disabled,
               title: toggleLabel,
               onClick: () => setPasswordVisible((visible) => !visible),
-              children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fractal_icons6.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_fractal_icons6.Eye, { "aria-hidden": "true", size: 18 })
+              children: passwordVisible ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_fractal_icons6.EyeSlash, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_fractal_icons6.Eye, { "aria-hidden": "true", size: 18 })
             }
           )
         ]
@@ -1107,9 +1116,9 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Label/Label.tsx
 var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Label = React8.forwardRef(
-  ({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  ({ className, controlSize = "lg", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "label",
     {
       ref,
@@ -1124,7 +1133,7 @@ Label.displayName = "Label";
 // src/components/Alert/Alert.tsx
 var React9 = __toESM(require("react"), 1);
 var import_fractal_icons7 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var defaultIcons = {
   default: import_fractal_icons7.CircleInfo,
   info: import_fractal_icons7.CircleInfo,
@@ -1135,7 +1144,7 @@ var defaultIcons = {
 var Alert = React9.forwardRef(
   ({ className, variant = "default", icon, children, ...props }, ref) => {
     const DefaultIcon = defaultIcons[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         ref,
@@ -1143,8 +1152,8 @@ var Alert = React9.forwardRef(
         className: cn("fractal-alert", `fractal-alert--${variant}`, className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultIcon, { size: 18 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fractal-alert-content", children })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fractal-alert-icon", "aria-hidden": true, children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { size: 18 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-alert-content", children })
         ]
       }
     );
@@ -1152,11 +1161,11 @@ var Alert = React9.forwardRef(
 );
 Alert.displayName = "Alert";
 var AlertTitle = React9.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h5", { ref, className: cn("fractal-alert-title", className), ...props })
 );
 AlertTitle.displayName = "AlertTitle";
 var AlertDescription = React9.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: cn("fractal-alert-description", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
 
@@ -1164,7 +1173,7 @@ AlertDescription.displayName = "AlertDescription";
 var React10 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_fractal_icons8 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultIcons2 = {
   default: import_fractal_icons8.CircleInfo,
   info: import_fractal_icons8.CircleInfo,
@@ -1201,7 +1210,7 @@ var Toast = React10.forwardRef(function Toast2({
     return () => window.clearTimeout(timeout);
   }, [paused, resolvedDuration]);
   const announcementRole = role ?? (variant === "error" ? "alert" : "status");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       ref,
@@ -1227,17 +1236,17 @@ var Toast = React10.forwardRef(function Toast2({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { size: 18 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-toast__content", children }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fractal-toast__action", children: action }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DefaultIcon, { size: 18 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-toast__content", children }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fractal-toast__action", children: action }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "button",
           {
             "aria-label": dismissLabel,
             className: "fractal-toast__dismiss",
             onClick: onDismiss,
             type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fractal_icons8.Close, { "aria-hidden": "true", size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_fractal_icons8.Close, { "aria-hidden": "true", size: 14 })
           }
         )
       ]
@@ -1245,7 +1254,7 @@ var Toast = React10.forwardRef(function Toast2({
   );
 });
 var ToastViewport = React10.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
-  const viewport = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const viewport = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -1260,9 +1269,9 @@ var ToastViewport = React10.forwardRef(function ToastViewport2({ children, class
 });
 
 // src/components/Toggle/Toggle.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Toggle({ checked, onChange, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "button",
     {
       type: "button",
@@ -1271,8 +1280,8 @@ function Toggle({ checked, onChange, label, className }) {
       className: cn("fractal-toggle", className),
       onClick: () => onChange(!checked),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fractal-toggle-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fractal-toggle-label", children: label })
       ]
     }
   );
@@ -1334,7 +1343,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
 
 // src/components/UILoader/UILoader.tsx
 var import_react3 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var LEFT = "M0 53C0 51 1.6 49.5 3.6 49.5h16.5c1 0 1.9.4 2.5 1L42.1 69.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H23.1c-1 0-1.9-.4-2.5-1L1.1 71.7C.4 71 0 70.1 0 69.2V53Z";
 var CENTER = "M0 3.5C0 1.6 1.6 0 3.6 0h16.5c1 0 1.9.4 2.5 1L92.5 69.6c.7.7 1 1.6 1 2.5v16.2c0 2-1.6 3.5-3.6 3.5H73.4c-1 0-1.9-.4-2.5-1L1.1 22.2C.4 21.6 0 20.7 0 19.7V3.5Z";
 var RIGHT = "M50.4 3.5C50.4 1.6 52 0 54 0h16.5c1 0 1.9.4 2.5 1l69.8 68.6c.7.7 1.1 1.6 1.1 2.5v16.2c0 2-1.6 3.5-3.6 3.5h-16.5c-1 0-1.9-.4-2.5-1L51.4 22.2c-.7-.6-1-1.5-1-2.5V3.5Z";
@@ -1343,7 +1352,7 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
   const clipId = `fractal-ui-loader-clip-${rawId}`;
   const gradientId = `fractal-ui-loader-gradient-${rawId}`;
   const height = typeof size === "number" ? `${size}px` : size;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       "aria-hidden": ariaHidden || void 0,
@@ -1351,35 +1360,35 @@ function UILoader({ size = 48, tone = "neutral", className, style, label = "Load
       className: cn("fractal-ui-loader", `fractal-ui-loader--${tone}`, className),
       role: ariaHidden ? void 0 : "status",
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("clipPath", { id: clipId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: LEFT }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: CENTER }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: RIGHT })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("clipPath", { id: clipId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: LEFT }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: CENTER }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: RIGHT })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: CENTER, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: RIGHT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: LEFT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
       ] })
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function Modal({ open, onClose, title, children, danger, warn, footer, noClose, closeDisabled = false, size = "sm", loading = false, loadingLabel = "Loading", scrollable = false, className }) {
   const [bodyScrolled, setBodyScrolled] = React11.useState(false);
   useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
@@ -1390,13 +1399,13 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
   return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "div",
             {
               className: cn(
@@ -1405,12 +1414,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
                 scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-                !noClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+                !noClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {}) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "div",
             {
               "aria-busy": loading || void 0,
@@ -1421,10 +1430,10 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
                 scrollable && "fractal-modal-body--scrollable"
               ),
               onScroll: scrollable ? (event) => setBodyScrolled(event.currentTarget.scrollTop > 0) : void 0,
-              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UILoader, { label: loadingLabel }) : children
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UILoader, { label: loadingLabel }) : children
             }
           ),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
+          footer && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
         ]
       }
     ) }),
@@ -1436,7 +1445,7 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
 var import_react4 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_fractal_icons9 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function TableOverflowMenu({ items, label, disabled, onSelect }) {
   const id = (0, import_react4.useId)();
   const trigger = (0, import_react4.useRef)(null);
@@ -1487,15 +1496,15 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
     if (disabled || items.length === 0) setOpen(false);
   }, [disabled, items.length]);
   if (items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fractal-table-overflow-trigger", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fractal-table-overflow-trigger", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Button,
       {
         ref: trigger,
         buttonType: "ghost",
         controlSize: "sm",
         hasIconOnly: true,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_fractal_icons9.Ellipsis, { "aria-hidden": true }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_fractal_icons9.Ellipsis, { "aria-hidden": true }),
         "aria-label": label,
         "aria-haspopup": "menu",
         "aria-expanded": open,
@@ -1514,7 +1523,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
         }
       }
     ),
-    open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    open && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref: panel,
@@ -1542,7 +1551,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
             ordered.find((button) => button.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
           }
         },
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "button",
           {
             type: "button",
@@ -1554,7 +1563,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
               close();
             },
             children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: item.icon }),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: item.icon }),
               item.label
             ]
           },
@@ -1567,7 +1576,7 @@ function TableOverflowMenu({ items, label, disabled, onSelect }) {
 
 // src/components/TableLayout/TableLayout.tsx
 var import_react5 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var length = (value) => typeof value === "number" ? `${value}px` : value;
 function columnStyle(column) {
   return {
@@ -1603,7 +1612,7 @@ function useOverflow() {
 }
 function TableViewport({ children, maxHeight, label }) {
   const { ref, overflow } = useOverflow();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: "fractal-table-viewport", style: { maxHeight }, tabIndex: overflow ? 0 : void 0, role: overflow ? "region" : void 0, "aria-label": overflow ? `${label}, scrollable table` : void 0, children });
 }
 function TableCellContent({ children, label }) {
   const { ref, overflow } = useOverflow();
@@ -1630,7 +1639,7 @@ function TableCellContent({ children, label }) {
     cell.addEventListener("wheel", wheel, { passive: false });
     return () => cell.removeEventListener("wheel", wheel);
   }, [ref]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       ref,
@@ -1649,28 +1658,28 @@ function TableCellContent({ children, label }) {
           else el.scrollLeft = event.key === "Home" ? 0 : el.scrollWidth * (getComputedStyle(el).direction === "rtl" ? -1 : 1);
         } else if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fractal-table-cell-content", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-table-cell-content", children })
     }
   );
 }
 
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DataTable({ columns, data, emptyMessage, header, size = "md", className, overflowMenu, layout = "fill", stickyHeader = false, stickyFirstColumn = false, maxHeight, "aria-label": ariaLabel = "Data table" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: "fractal-datatable-thead-row", children: [
-        columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
-        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("fractal-table-layout", "fractal-datatable", `fractal-datatable--${size}`, className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableViewport, { maxHeight, label: ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("tr", { className: "fractal-datatable-thead-row", children: [
+        columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("th", { scope: "col", className: "fractal-datatable-th", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header }) }, col.key)),
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-datatable-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "tr",
         {
           className: "fractal-datatable-row",
           children: [
-            columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
-            overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
+            columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "fractal-datatable-td", style: columnStyle(col), "data-pinned-column": columnIndex === 0 ? "data" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }) }, col.key)),
+            overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "fractal-datatable-td fractal-table-overflow-cell", "data-pinned-column": "overflow", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) }) })
           ]
         },
         rowIndex
@@ -1722,7 +1731,7 @@ function positionDropdown(trigger, panel, bounds, direction, align) {
 }
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Dropdown({
   items,
   selectedValue = "",
@@ -1897,8 +1906,8 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   if (renderableItems.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, "data-clearable": canClear || void 0, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, "data-clearable": canClear || void 0, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1934,23 +1943,24 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-            selected?.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
-            selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: fieldLabel ? "fractal-dropdown-field-value" : void 0, style: fieldLabel ? void 0 : { display: "contents" }, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            selected?.icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected?.icon }),
+            selected?.description != null && (typeof selected?.description !== "string" || selected?.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-selected-text", children: selected?.description })
           ] }) }),
-          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          !noChevron && !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    canClear && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
+    canClear && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
       if (multiple) onSelectionChange?.([]);
       else onSelect?.("");
       setOpen(false);
       setQuery("");
       triggerRef.current?.focus();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true" }) }),
-    fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
-    open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true" }) }),
+    fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FloatingFieldBorder, { label: fieldLabel }) : null,
+    fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
+    open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -1970,26 +1980,26 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          searchable && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-dropdown-search", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
+          searchable && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fractal-dropdown-search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.MagnifyingGlass, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
-            label != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-label", children: label }),
             visibleItems.map((item, index) => {
-              const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
-              const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              const topDivider = item.border === "top" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
+              const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fractal-dropdown-separator" }) : null;
               if (item.kind === "header") {
-                return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(React12.Fragment, { children: [
                   topDivider,
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                   bottomDivider
                 ] }, `header-${index}`);
               }
               const isSelected = multiple ? selectedValues.includes(item.value) : item.value === selectedValue;
-              return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(React12.Fragment, { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(React12.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -2005,17 +2015,17 @@ function Dropdown({
                     },
                     className: "fractal-dropdown-option",
                     children: [
-                      multiple && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Check, {}) }),
-                      item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                      item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                      item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                      multiple && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-checkbox", "data-checked": isSelected, "aria-hidden": "true", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_fractal_icons10.Check, {}) }),
+                      item.icon != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                      item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                      item.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fractal-dropdown-trailing", children: item.trailing })
                     ]
                   }
                 ),
                 bottomDivider
               ] }, item.value);
             }),
-            !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+            !selectableItems.length && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
           ] })
         ]
       }
@@ -2025,9 +2035,9 @@ function Dropdown({
 
 // src/components/Link/Link.tsx
 var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Link = React13.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "a",
     {
       ref,
@@ -2040,9 +2050,9 @@ Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
 var React14 = __toESM(require("react"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Chip = React14.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "span",
     {
       ref,
@@ -2055,7 +2065,7 @@ Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_fractal_icons11 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Checkbox({
   checked,
   indeterminate = false,
@@ -2066,7 +2076,7 @@ function Checkbox({
   onKeyDown,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "button",
     {
       ...props,
@@ -2088,16 +2098,16 @@ function Checkbox({
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { size: 18 }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
-      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_fractal_icons11.Checkbox, { "aria-hidden": "true", size: 18 })
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Checkbox, { size: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Minus, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_fractal_icons11.Checkbox, { "aria-hidden": "true", size: 18 })
     }
   );
 }
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Radio({
   checked,
   className,
@@ -2107,8 +2117,8 @@ function Radio({
   onCheckedChange,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: cn("fractal-radio", disabled && "fractal-radio--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "input",
       {
         ...props,
@@ -2119,10 +2129,10 @@ function Radio({
         type: "radio"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__dot" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fractal-radio__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__label", children: label }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fractal-radio__description", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { "aria-hidden": "true", className: "fractal-radio__control", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__dot" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fractal-radio__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__label", children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-radio__description", children: description })
     ] })
   ] });
 }
@@ -2130,7 +2140,7 @@ function Radio({
 // src/components/SortableTable/SortableTable.tsx
 var import_react6 = require("react");
 var import_fractal_icons12 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SortableTable({
   columns,
   data,
@@ -2230,17 +2240,17 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
-        selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("fractal-table-layout", "fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), "data-overflow-menu": Boolean(overflowMenu), "data-table-layout": layout, "data-sticky-first": stickyFirstColumn, "data-sticky-header": stickyHeader, "data-table-selection": Boolean(selection), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
+    visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableViewport, { maxHeight, label: ariaLabel || "Data table", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
             "data-pinned-column": "selection",
             scope: "col",
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               Checkbox,
               {
                 "aria-label": selection.selectAllLabel ?? "Select all rows",
@@ -2266,26 +2276,26 @@ function SortableTable({
         columns.map((col, columnIndex) => {
           const isActive = activeKey === col.key && activeDirection !== null;
           if (!col.sortable) {
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "th",
               {
                 className: "fractal-sortable-table-th",
                 scope: "col",
                 style: columnStyle(col),
                 "data-pinned-column": columnIndex === 0 ? "data" : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header })
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header} column`, children: col.header })
               },
               col.key
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
               scope: "col",
               style: columnStyle(col),
               "data-pinned-column": columnIndex === 0 ? "data" : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header} column`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -2296,8 +2306,8 @@ function SortableTable({
                   onClick: () => handleSortClick(col.key),
                   "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: col.header }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_fractal_icons12.ArrowsUpDown, { size: 14 }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: col.header }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_fractal_icons12.ArrowsUpDown, { size: 14 }) })
                   ]
                 }
               ) })
@@ -2305,9 +2315,9 @@ function SortableTable({
             col.key
           );
         }),
-        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
+        overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", { scope: "col", "aria-label": "Row actions", className: "fractal-sortable-table-th fractal-table-overflow-cell", "data-pinned-column": "overflow" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
         const disabled = isRowDisabled?.(row) ?? false;
         const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
@@ -2316,7 +2326,7 @@ function SortableTable({
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "tr",
           {
             className: cn(
@@ -2340,7 +2350,7 @@ function SortableTable({
             role: interactive ? "button" : void 0,
             tabIndex: interactive ? 0 : void 0,
             children: [
-              selection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", "data-pinned-column": "selection", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Checkbox,
                 {
                   "aria-label": selection.getRowLabel(row),
@@ -2352,7 +2362,7 @@ function SortableTable({
                   }
                 }
               ) }),
-              columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              columns.map((col, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                 "td",
                 {
                   className: cn(
@@ -2363,13 +2373,13 @@ function SortableTable({
                   "data-column-align": col.align,
                   "data-pinned-column": columnIndex === 0 ? "data" : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
-                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableCellContent, { label: `${col.header || "Value"}, row ${rowIndex + 1}`, children: col.render(row, rowIndex) }),
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
                   ]
                 },
                 col.key
               )),
-              overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              overflowMenu && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "td",
                 {
                   className: "fractal-sortable-table-td fractal-table-overflow-cell",
@@ -2377,7 +2387,7 @@ function SortableTable({
                   onClick: (event) => event.stopPropagation(),
                   onDoubleClick: (event) => event.stopPropagation(),
                   onKeyDown: (event) => event.stopPropagation(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableOverflowMenu, { items: overflowMenu.items(row, rowIndex), label: overflowMenu.getLabel?.(row, rowIndex) ?? `Actions for row ${rowIndex + 1}`, disabled: disabled || overflowMenu.isDisabled?.(row, rowIndex), onSelect: (value) => overflowMenu.onSelect(value, row, rowIndex) })
                 }
               )
             ]
@@ -2391,7 +2401,7 @@ function SortableTable({
 
 // src/components/Tabs/Tabs.tsx
 var import_react7 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Tabs({
   items,
   defaultValue,
@@ -2462,8 +2472,8 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref: tabListRef,
@@ -2476,7 +2486,7 @@ function Tabs({
           const isActive = item.id === activeId;
           const tabId = `${reactId}-tab-${item.id}`;
           const panelId = `${reactId}-panel-${item.id}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               ref: (el) => {
@@ -2507,7 +2517,7 @@ function Tabs({
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           id: panelId,
@@ -2525,7 +2535,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React15.useRef(null);
   const buttonRefs = React15.useRef([]);
@@ -2583,7 +2593,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -2591,10 +2601,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       "aria-label": ariaLabel,
       ref: switcherRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
         items.map((item, index) => {
           const active = item.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "button",
             {
               className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
@@ -2628,7 +2638,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 // src/components/Disclosure/Disclosure.tsx
 var import_react8 = require("react");
 var import_fractal_icons13 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Disclosure({
   title,
   meta,
@@ -2656,7 +2666,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn(
@@ -2667,7 +2677,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "button",
           {
             type: "button",
@@ -2678,13 +2688,13 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_fractal_icons13.ChevronRight, { size: 16 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons13.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_fractal_icons13.ChevronRight, { size: 16 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             id: panelId,
@@ -2692,7 +2702,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -2701,18 +2711,18 @@ function Disclosure({
 }
 
 // src/components/LatticeLoader/LatticeLoader.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var LATTICE_COUNT = 160;
 var WAVE_PERIOD = 80;
 function LatticeLoader({ className, label = "Loading", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       "aria-label": label,
       className: cn("fractal-lattice-loader", className),
       role: "progressbar",
       ...props,
-      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -2726,10 +2736,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -2745,15 +2755,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
   );
 }
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
 function ButtonGhost({ className, size = "lg", controlSize, iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
 }
 function DataTableGhost({
@@ -2767,81 +2777,81 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: "fractal-ghost-table__table", children: [
-    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
 }
 function InputGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FormFieldGhost, { className, labelWidth, ...props });
 }
 function TextareaGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
 }
 function LabelGhost({ className, width = "26%", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
 function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "lg", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LabelGhost, { width: labelWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "30%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "78%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 var ToggleGhost = CheckboxGhost;
 function ChipGhost({ className, width = 74, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
 }
 function LinkGhost({ className, width = 96, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
 function DropdownGhost({ className, controlSize = "lg", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
 }
 function ContentSwitcherGhost({ className, options = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}, index)) });
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" })
   ] });
 }
 function PaginationGhost({ className, pages = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "26%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { size: "sm", width: "46%" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { size: "sm", width: "46%" })
   ] });
 }
 function PromptCardGhost({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
 }
 function ConversationGhost({
   className,
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       "aria-busy": "true",
@@ -2850,54 +2860,54 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "100%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "86%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "64%" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "92%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "78%" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "58%" })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "58%" })
         ] })
       ]
     }
   );
 }
 function SortableTableGhost(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DataTableGhost, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
   ] });
 }
 function ModalGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
 }
 function SidePanelGhost({ className, title, lines = 5, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: "42%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
   ] });
 }
 
 // src/components/Sidebar/Sidebar.tsx
 var React16 = __toESM(require("react"), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Sidebar = React16.forwardRef(
-  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "aside",
     {
       ref,
@@ -2910,11 +2920,11 @@ var Sidebar = React16.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarBrand = React16.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarAccountMenu({
@@ -2925,7 +2935,7 @@ function SidebarAccountMenu({
   icon,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Dropdown,
     {
       align: "left",
@@ -2935,9 +2945,9 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
+      triggerContent: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
       triggerLabel,
       triggerVariant: "tertiary"
@@ -2945,15 +2955,15 @@ function SidebarAccountMenu({
   );
 }
 var SidebarNav = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
 var SidebarSection = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React16.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "button",
     {
       ref,
@@ -2963,16 +2973,16 @@ var SidebarNavItem = React16.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
 var SidebarFooter = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
@@ -2980,7 +2990,7 @@ SidebarFooter.displayName = "SidebarFooter";
 var React17 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 var import_fractal_icons14 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
   const bodyRef = React17.useRef(null);
@@ -3016,7 +3026,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
   }, [open, loading]);
   if (!open) return null;
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -3025,15 +3035,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "fractal-side-panel__heading", children: [
-              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_fractal_icons14.Close, { size: 18 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_fractal_icons14.Close, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -3043,12 +3053,12 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 
 // src/components/Textarea/Textarea.tsx
 var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Textarea = React18.forwardRef(
   ({ className, fieldLabel, textStyle = "source", id, placeholder, ...props }, ref) => {
     const generatedId = React18.useId();
     const fieldId = id ?? generatedId;
-    const input = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    const input = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "textarea",
       {
         ref,
@@ -3059,9 +3069,10 @@ var Textarea = React18.forwardRef(
         ...props
       }
     );
-    return fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
+    return fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fractal-floating-field fractal-floating-field--textarea", "data-control-size": "md", children: [
       input,
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FloatingFieldBorder, { label: fieldLabel ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "fractal-floating-field__label", htmlFor: fieldId, children: fieldLabel })
     ] }) : input;
   }
 );
@@ -3069,9 +3080,9 @@ Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 var React19 = __toESM(require("react"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TextButton = React19.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       ref,
@@ -3079,9 +3090,9 @@ var TextButton = React19.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -3091,7 +3102,7 @@ TextButton.displayName = "TextButton";
 // src/components/FileDropzone/FileDropzone.tsx
 var React20 = __toESM(require("react"), 1);
 var import_fractal_icons15 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FileDropzone({
   files,
   onFilesChange,
@@ -3111,8 +3122,8 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "input",
       {
         ref: inputRef,
@@ -3128,7 +3139,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -3151,18 +3162,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons15.FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -3170,7 +3181,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fractal_icons15.Close, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons15.Close, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -3184,7 +3195,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 var import_fractal_icons16 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Pagination({
   page,
   pageSize,
@@ -3200,10 +3211,10 @@ function Pagination({
   const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
   const end = Math.min(currentPage * pageSize, totalItems);
   const canChangePageSize = pageSizeOptions != null && pageSizeOptions.length > 0 && onPageSizeChange != null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Dropdown,
         {
           align: "right",
@@ -3220,7 +3231,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -3229,15 +3240,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons16.ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
           className: "fractal-pagination__button",
@@ -3246,7 +3257,7 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_fractal_icons16.ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons16.ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -3256,7 +3267,7 @@ function Pagination({
 // src/components/ColumnEditor/ColumnEditor.tsx
 var React21 = __toESM(require("react"), 1);
 var import_fractal_icons17 = require("@mirror-physics/fractal-icons");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var equal = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
 function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLabel = "Hidden columns", className }) {
   const [open, setOpen] = React21.useState(false);
@@ -3396,7 +3407,7 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
   }
   function row(key, isHidden, index) {
     const item = items.find((item2) => item2.id === key);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "li",
       {
         className: "fractal-column-editor__row",
@@ -3405,40 +3416,40 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
         "data-dragging": preview?.active === key || void 0,
         onPointerDown: (event) => start(event, key),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.DotsSixVertical, { className: "fractal-column-editor__grip", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__name", children: item.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__actions", onPointerDown: (event) => event.stopPropagation(), children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Eye, { "aria-hidden": "true" }), "aria-label": `Show ${item.label} column`, onClick: () => commit([...committed, key], `${item.label} shown`) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowUp, { "aria-hidden": "true" }), "aria-label": `Move ${item.label} up`, disabled: index === 0, onClick: () => move(key, -1) }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: index === visible.length - 1 && !item.required ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.ArrowDown, { "aria-hidden": "true" }), "aria-label": index === visible.length - 1 && !item.required ? `Hide ${item.label} column` : `Move ${item.label} down`, disabled: index === visible.length - 1 && item.required, onClick: () => move(key, 1) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.DotsSixVertical, { className: "fractal-column-editor__grip", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fractal-column-editor__name", children: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fractal-column-editor__actions", onPointerDown: (event) => event.stopPropagation(), children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.Eye, { "aria-hidden": "true" }), "aria-label": `Show ${item.label} column`, onClick: () => commit([...committed, key], `${item.label} shown`) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.ArrowUp, { "aria-hidden": "true" }), "aria-label": `Move ${item.label} up`, disabled: index === 0, onClick: () => move(key, -1) }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { buttonType: "ghost", controlSize: "sm", hasIconOnly: true, icon: index === visible.length - 1 && !item.required ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.ArrowDown, { "aria-hidden": "true" }), "aria-label": index === visible.length - 1 && !item.required ? `Hide ${item.label} column` : `Move ${item.label} down`, disabled: index === visible.length - 1 && item.required, onClick: () => move(key, 1) })
           ] }) })
         ]
       },
       key
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("fractal-column-editor", className), ref: root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { ref: trigger, controlSize: "lg", buttonType: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.Gear, { "aria-hidden": "true" }), iconPosition: "right", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("fractal-column-editor", className), ref: root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { ref: trigger, controlSize: "lg", buttonType: "secondary", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.Gear, { "aria-hidden": "true" }), iconPosition: "right", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => {
       cancel();
       setOpen((current) => !current);
     }, children: label }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { id, className: "fractal-column-editor__panel", ref: panel, role: "dialog", "data-dragging": Boolean(preview) || void 0, "aria-label": label, tabIndex: -1, onPointerMove: update, onPointerUp: finish, onPointerCancel: cancel, onLostPointerCapture: cancel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", "data-column-editor-group": "visible", "aria-label": "Visible columns", children: visible.map((key, index) => row(key, false, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { "data-column-editor-group": "hidden", className: "fractal-column-editor__hidden", "aria-label": hiddenLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fractal-column-editor__divider", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { children: [
+    open ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { id, className: "fractal-column-editor__panel", ref: panel, role: "dialog", "data-dragging": Boolean(preview) || void 0, "aria-label": label, tabIndex: -1, onPointerMove: update, onPointerUp: finish, onPointerCancel: cancel, onLostPointerCapture: cancel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "fractal-column-editor__list", "data-column-editor-group": "visible", "aria-label": "Visible columns", children: visible.map((key, index) => row(key, false, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("section", { "data-column-editor-group": "hidden", className: "fractal-column-editor__hidden", "aria-label": hiddenLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fractal-column-editor__divider", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
           hiddenLabel,
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_fractal_icons17.EyeSlash, { "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "fractal-column-editor__list", children: hidden.map((key, index) => row(key, true, index)) }),
-        !hidden.length ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "fractal-column-editor__empty", children: "Drag columns here to hide them." }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "fractal-column-editor__list", children: hidden.map((key, index) => row(key, true, index)) }),
+        !hidden.length ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "fractal-column-editor__empty", children: "Drag columns here to hide them." }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "fractal-column-editor__announcement", role: "status", "aria-live": "polite", children: announcement })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "fractal-column-editor__announcement", role: "status", "aria-live": "polite", children: announcement })
     ] }) : null
   ] });
 }
 
 // src/components/Tooltip/Tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Tooltip({
   content,
   children,
@@ -3449,9 +3460,9 @@ function Tooltip({
   className
 }) {
   if (disabled || content == null || content === "") return children;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipPrimitive.Root, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       TooltipPrimitive.Content,
       {
         side: placement,
@@ -3459,7 +3470,10 @@ function Tooltip({
         collisionPadding: 8,
         className: cn("fractal-tooltip", className),
         style: { "--tooltip-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
-        children: content
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TooltipPrimitive.Arrow, { className: "fractal-tooltip-arrow", width: 8, height: 4, "aria-hidden": "true" })
+        ]
       }
     ) })
   ] }) });