@mirror-physics/fractal-ui 0.2.0-next.72 → 0.2.0-next.74

package/dist/index.js

@@ -835,6 +835,21 @@ function Slider(props) {
       clamp(nextUpper, nextLower, max)
     ]);
   };
+  const getKeyboardValue = (event, value) => {
+    const pageStep = step * 10;
+    const adjustments = {
+      ArrowDown: -step,
+      ArrowLeft: -step,
+      ArrowRight: step,
+      ArrowUp: step,
+      PageDown: -pageStep,
+      PageUp: pageStep
+    };
+    if (event.key === "Home") return min;
+    if (event.key === "End") return max;
+    if (!(event.key in adjustments)) return null;
+    return value + adjustments[event.key];
+  };
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -869,6 +884,13 @@ function Slider(props) {
                     if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
                     else changeSingleValue(nextValue);
                   },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, firstValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    if (knobs === 2) changeRangeValue(Math.min(nextValue, secondValue), secondValue);
+                    else changeSingleValue(nextValue);
+                  },
                   step,
                   type: "range",
                   value: firstValue
@@ -885,6 +907,12 @@ function Slider(props) {
                     const nextValue = event.currentTarget.valueAsNumber;
                     changeRangeValue(firstValue, Math.max(nextValue, firstValue));
                   },
+                  onKeyDown: (event) => {
+                    const nextValue = getKeyboardValue(event, secondValue);
+                    if (nextValue === null) return;
+                    event.preventDefault();
+                    changeRangeValue(firstValue, Math.max(nextValue, firstValue));
+                  },
                   step,
                   type: "range",
                   value: secondValue
@@ -1005,10 +1033,109 @@ var AlertDescription = React9.forwardRef(
 );
 AlertDescription.displayName = "AlertDescription";
 
-// src/components/Toggle/Toggle.tsx
+// src/components/Toast/Toast.tsx
+import * as React10 from "react";
+import { createPortal } from "react-dom";
+import { CircleCheck as CircleCheck2, CircleClose as CircleClose2, CircleInfo as CircleInfo2, Close, Warning as Warning2 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function Toggle({ checked, onChange, label, className }) {
+var defaultIcons2 = {
+  default: CircleInfo2,
+  info: CircleInfo2,
+  success: CircleCheck2,
+  warning: Warning2,
+  error: CircleClose2
+};
+var Toast = React10.forwardRef(function Toast2({
+  action,
+  children,
+  className,
+  dismissLabel = "Dismiss notification",
+  duration,
+  icon,
+  onBlurCapture,
+  onDismiss,
+  onFocusCapture,
+  onPointerEnter,
+  onPointerLeave,
+  role,
+  variant = "default",
+  ...props
+}, ref) {
+  const [paused, setPaused] = React10.useState(false);
+  const dismissRef = React10.useRef(onDismiss);
+  const DefaultIcon = defaultIcons2[variant];
+  const resolvedDuration = duration === void 0 ? variant === "error" ? null : 5e3 : duration;
+  React10.useEffect(() => {
+    dismissRef.current = onDismiss;
+  }, [onDismiss]);
+  React10.useEffect(() => {
+    if (!dismissRef.current || paused || resolvedDuration === null || resolvedDuration <= 0) return;
+    const timeout = window.setTimeout(() => dismissRef.current?.(), resolvedDuration);
+    return () => window.clearTimeout(timeout);
+  }, [paused, resolvedDuration]);
+  const announcementRole = role ?? (variant === "error" ? "alert" : "status");
   return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref,
+      "aria-atomic": "true",
+      "aria-live": announcementRole === "alert" ? "assertive" : "polite",
+      className: cn("fractal-toast", `fractal-toast--${variant}`, className),
+      role: announcementRole,
+      onBlurCapture: (event) => {
+        onBlurCapture?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+      },
+      onFocusCapture: (event) => {
+        onFocusCapture?.(event);
+        setPaused(true);
+      },
+      onPointerEnter: (event) => {
+        onPointerEnter?.(event);
+        setPaused(true);
+      },
+      onPointerLeave: (event) => {
+        onPointerLeave?.(event);
+        setPaused(false);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "fractal-toast__icon", children: icon ?? /* @__PURE__ */ jsx12(DefaultIcon, { size: 18 }) }),
+        /* @__PURE__ */ jsx12("div", { className: "fractal-toast__content", children }),
+        action && /* @__PURE__ */ jsx12("div", { className: "fractal-toast__action", children: action }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            "aria-label": dismissLabel,
+            className: "fractal-toast__dismiss",
+            onClick: onDismiss,
+            type: "button",
+            children: /* @__PURE__ */ jsx12(Close, { "aria-hidden": "true", size: 14 })
+          }
+        )
+      ]
+    }
+  );
+});
+var ToastViewport = React10.forwardRef(function ToastViewport2({ children, className, portal = true, position = "top-center", ...props }, ref) {
+  const viewport = /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref,
+      className: cn("fractal-toast-viewport", `fractal-toast-viewport--${position}`, className),
+      "data-position": position,
+      ...props,
+      children
+    }
+  );
+  if (!portal || typeof document === "undefined") return viewport;
+  return createPortal(viewport, document.body);
+});
+
+// src/components/Toggle/Toggle.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Toggle({ checked, onChange, label, className }) {
+  return /* @__PURE__ */ jsxs12(
     "button",
     {
       type: "button",
@@ -1017,19 +1144,19 @@ function Toggle({ checked, onChange, label, className }) {
       className: cn("fractal-toggle", className),
       onClick: () => onChange(!checked),
       children: [
-        /* @__PURE__ */ jsx12("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx12("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
-        label && /* @__PURE__ */ jsx12("span", { className: "fractal-toggle-label", children: label })
+        /* @__PURE__ */ jsx13("span", { className: cn("fractal-toggle-track", checked && "fractal-toggle-track--checked"), children: /* @__PURE__ */ jsx13("span", { className: cn("fractal-toggle-thumb", checked && "fractal-toggle-thumb--checked") }) }),
+        label && /* @__PURE__ */ jsx13("span", { className: "fractal-toggle-label", children: label })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-import * as React10 from "react";
-import { createPortal } from "react-dom";
+import * as React11 from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/hooks/useEscapeDismiss.ts
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 var nextId = 0;
 var stack = [];
 function insertSorted(entry) {
@@ -1062,9 +1189,9 @@ function ensureGlobalListener() {
   );
 }
 function useEscapeDismiss(priority, handler, enabled = true) {
-  const handlerRef = useRef3(handler);
+  const handlerRef = useRef4(handler);
   handlerRef.current = handler;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled) return;
     ensureGlobalListener();
     const id = nextId++;
@@ -1080,7 +1207,7 @@ function useEscapeDismiss(priority, handler, enabled = true) {
 
 // src/components/UILoader/UILoader.tsx
 import { useId } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "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";
@@ -1089,7 +1216,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__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "span",
     {
       "aria-hidden": ariaHidden || void 0,
@@ -1097,52 +1224,52 @@ 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__ */ jsxs12("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
-        /* @__PURE__ */ jsxs12("defs", { children: [
-          /* @__PURE__ */ jsxs12("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
-            /* @__PURE__ */ jsx13("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
-            /* @__PURE__ */ jsx13("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
+      children: /* @__PURE__ */ jsxs13("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 144 92", style: { height, width: "auto" }, children: [
+        /* @__PURE__ */ jsxs13("defs", { children: [
+          /* @__PURE__ */ jsxs13("linearGradient", { id: gradientId, x1: "59", x2: "94.3", y1: "0", y2: "89.1", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-start", offset: "0" }),
+            /* @__PURE__ */ jsx14("stop", { className: "fractal-ui-loader__stop-end", offset: "1" })
           ] }),
-          /* @__PURE__ */ jsxs12("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-            /* @__PURE__ */ jsx13("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
-            /* @__PURE__ */ jsx13("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
-            /* @__PURE__ */ jsx13("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
+          /* @__PURE__ */ jsxs13("linearGradient", { id: `${gradientId}-shine`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ jsx14("stop", { offset: "0.4", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx14("stop", { offset: "0.5", stopColor: "white", stopOpacity: "0.62" }),
+            /* @__PURE__ */ jsx14("stop", { offset: "0.6", stopColor: "white", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsxs12("clipPath", { id: clipId, children: [
-            /* @__PURE__ */ jsx13("path", { d: LEFT }),
-            /* @__PURE__ */ jsx13("path", { d: CENTER }),
-            /* @__PURE__ */ jsx13("path", { d: RIGHT })
+          /* @__PURE__ */ jsxs13("clipPath", { id: clipId, children: [
+            /* @__PURE__ */ jsx14("path", { d: LEFT }),
+            /* @__PURE__ */ jsx14("path", { d: CENTER }),
+            /* @__PURE__ */ jsx14("path", { d: RIGHT })
           ] })
         ] }),
-        /* @__PURE__ */ jsx13("path", { d: CENTER, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ jsx13("path", { d: RIGHT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ jsx13("path", { d: LEFT, fill: `url(#${gradientId})` }),
-        /* @__PURE__ */ jsx13("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx13("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx13("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
+        /* @__PURE__ */ jsx14("path", { d: CENTER, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx14("path", { d: RIGHT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx14("path", { d: LEFT, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx14("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx14("g", { className: "fractal-ui-loader__shine-axis", transform: "translate(72 46) rotate(68.4)", children: /* @__PURE__ */ jsx14("rect", { className: "fractal-ui-loader__shine", x: "-160", y: "-100", width: "320", height: "200", fill: `url(#${gradientId}-shine)` }) }) })
       ] })
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var CloseIcon = () => /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("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] = React10.useState(false);
+  const [bodyScrolled, setBodyScrolled] = React11.useState(false);
   useEscapeDismiss(80, onClose, open && !noClose && !closeDisabled);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (open) setBodyScrolled(false);
   }, [open]);
   if (!open) return null;
   const sizeClass = `fractal-modal-panel--${size}`;
   const accentClass = danger ? "fractal-modal-panel--danger" : warn ? "fractal-modal-panel--warn" : "";
-  return createPortal(
-    /* @__PURE__ */ jsx14("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs13(
+  return createPortal2(
+    /* @__PURE__ */ jsx15("div", { className: "fractal-modal-overlay", onClick: noClose || closeDisabled ? void 0 : onClose, children: /* @__PURE__ */ jsxs14(
       "div",
       {
         className: cn("fractal-modal-panel", sizeClass, accentClass, scrollable && "fractal-modal-panel--scrollable", className),
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: cn(
@@ -1151,12 +1278,12 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
                 scrollable && bodyScrolled && "fractal-modal-title-row--scrolled"
               ),
               children: [
-                /* @__PURE__ */ jsx14("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
-                !noClose && /* @__PURE__ */ jsx14("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx14(CloseIcon, {}) })
+                /* @__PURE__ */ jsx15("h3", { className: cn("fractal-modal-title", danger && "fractal-modal-title--danger", warn && "fractal-modal-title--warn"), children: title }),
+                !noClose && /* @__PURE__ */ jsx15("button", { type: "button", onClick: onClose, title: "Close", disabled: closeDisabled, className: "fractal-modal-close", children: /* @__PURE__ */ jsx15(CloseIcon, {}) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "div",
             {
               "aria-busy": loading || void 0,
@@ -1167,10 +1294,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__ */ jsx14(UILoader, { label: loadingLabel }) : children
+              children: loading ? /* @__PURE__ */ jsx15(UILoader, { label: loadingLabel }) : children
             }
           ),
-          footer && /* @__PURE__ */ jsx14("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
+          footer && /* @__PURE__ */ jsx15("div", { className: cn("fractal-modal-footer", scrollable && "fractal-modal-footer--divided"), children: footer })
         ]
       }
     ) }),
@@ -1179,17 +1306,17 @@ function Modal({ open, onClose, title, children, danger, warn, footer, noClose,
 }
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function DataTable({ columns, data, emptyMessage, header, size = "md", className }) {
-  return /* @__PURE__ */ jsx15("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs14("div", { className: "fractal-datatable-surface", children: [
-    header && /* @__PURE__ */ jsx15("div", { className: "fractal-datatable-header", children: header }),
-    data.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs14("table", { className: "fractal-datatable-table", children: [
-      /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx15("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
-      /* @__PURE__ */ jsx15("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16("div", { className: cn("fractal-datatable", `fractal-datatable--${size}`, className), children: /* @__PURE__ */ jsxs15("div", { className: "fractal-datatable-surface", children: [
+    header && /* @__PURE__ */ jsx16("div", { className: "fractal-datatable-header", children: header }),
+    data.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "fractal-datatable-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs15("table", { className: "fractal-datatable-table", children: [
+      /* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { className: "fractal-datatable-thead-row", children: columns.map((col) => /* @__PURE__ */ jsx16("th", { className: "fractal-datatable-th", style: { width: col.width }, children: col.header }, col.key)) }) }),
+      /* @__PURE__ */ jsx16("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx16(
         "tr",
         {
           className: "fractal-datatable-row",
-          children: columns.map((col) => /* @__PURE__ */ jsx15("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
+          children: columns.map((col) => /* @__PURE__ */ jsx16("td", { className: "fractal-datatable-td", style: { width: col.width }, children: col.render(row, rowIndex) }, col.key))
         },
         rowIndex
       )) })
@@ -1198,9 +1325,9 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 }
 
 // src/components/Dropdown/Dropdown.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var MARGIN = 4;
 function Dropdown({
   items,
@@ -1222,10 +1349,10 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const triggerRef = React11.useRef(null);
-  const panelRef = React11.useRef(null);
-  const [panelStyle, setPanelStyle] = React11.useState({});
+  const [open, setOpen] = React12.useState(false);
+  const triggerRef = React12.useRef(null);
+  const panelRef = React12.useRef(null);
+  const [panelStyle, setPanelStyle] = React12.useState({});
   const visibleItems = items.filter(
     (item) => item.icon != null || item.description != null && (typeof item.description === "string" ? item.description !== "" : true)
   );
@@ -1235,7 +1362,7 @@ function Dropdown({
   const isUp = direction === "up";
   const isHorizontalDirection = direction === "left" || direction === "right";
   const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
-  React11.useLayoutEffect(() => {
+  React12.useLayoutEffect(() => {
     if (!open || !triggerRef.current || !panelRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const panelRect = panelRef.current.getBoundingClientRect();
@@ -1286,7 +1413,7 @@ function Dropdown({
     }
     setPanelStyle({ top, left, right });
   }, [open, direction, isHorizontalDirection, isUp, align]);
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -1296,8 +1423,8 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs15("div", { className: cn("fractal-dropdown", className), children: [
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16("div", { className: cn("fractal-dropdown", className), children: [
+    /* @__PURE__ */ jsxs16(
       "button",
       {
         ref: triggerRef,
@@ -1316,15 +1443,15 @@ function Dropdown({
           triggerClassName
         ),
         children: [
-          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs15(Fragment2, { children: [
-            selected.icon != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
-            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-selected-text", children: selected.description })
+          triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs16(Fragment2, { children: [
+            selected.icon != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-icon fractal-dropdown-icon--trigger", children: selected.icon }),
+            selected.description != null && (typeof selected.description !== "string" || selected.description !== "") && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-selected-text", children: selected.description })
           ] }),
-          !noChevron && !iconOnly && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx16(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
+          !noChevron && !iconOnly && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-chevron", "aria-hidden": true, children: /* @__PURE__ */ jsx17(ChevronIcon, { size: size === "sm" ? 14 : 16 }) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs15(
+    open && /* @__PURE__ */ jsxs16(
       "div",
       {
         ref: panelRef,
@@ -1333,21 +1460,21 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          label != null && /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-label", children: label }),
+          label != null && /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-label", children: label }),
           visibleItems.map((item, index) => {
-            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-separator" }) : null;
-            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx16("div", { className: "fractal-dropdown-separator" }) : null;
+            const topDivider = item.border === "top" ? /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-separator" }) : null;
+            const bottomDivider = item.border === "bottom" ? /* @__PURE__ */ jsx17("div", { className: "fractal-dropdown-separator" }) : null;
             if (item.kind === "header") {
-              return /* @__PURE__ */ jsxs15(React11.Fragment, { children: [
+              return /* @__PURE__ */ jsxs16(React12.Fragment, { children: [
                 topDivider,
-                /* @__PURE__ */ jsx16("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
+                /* @__PURE__ */ jsx17("div", { role: "presentation", className: "fractal-dropdown-label", children: item.description }),
                 bottomDivider
               ] }, `header-${index}`);
             }
             const isSelected = item.value === selectedValue;
-            return /* @__PURE__ */ jsxs15(React11.Fragment, { children: [
+            return /* @__PURE__ */ jsxs16(React12.Fragment, { children: [
               topDivider,
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 "button",
                 {
                   type: "button",
@@ -1359,9 +1486,9 @@ function Dropdown({
                   },
                   className: "fractal-dropdown-option",
                   children: [
-                    item.icon != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-icon", children: item.icon }),
-                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-option-text", children: item.description }),
-                    item.trailing != null && /* @__PURE__ */ jsx16("span", { className: "fractal-dropdown-trailing", children: item.trailing })
+                    item.icon != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-icon", children: item.icon }),
+                    item.description != null && (typeof item.description !== "string" || item.description !== "") && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-option-text", children: item.description }),
+                    item.trailing != null && /* @__PURE__ */ jsx17("span", { className: "fractal-dropdown-trailing", children: item.trailing })
                   ]
                 }
               ),
@@ -1375,10 +1502,10 @@ function Dropdown({
 }
 
 // src/components/Link/Link.tsx
-import * as React12 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Link = React12.forwardRef(
-  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx17(
+import * as React13 from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Link = React13.forwardRef(
+  ({ className, theme = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx18(
     "a",
     {
       ref,
@@ -1390,10 +1517,10 @@ var Link = React12.forwardRef(
 Link.displayName = "Link";
 
 // src/components/Chip/Chip.tsx
-import * as React13 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Chip = React13.forwardRef(
-  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx18(
+import * as React14 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Chip = React14.forwardRef(
+  ({ className, tone = "neutral", ...props }, ref) => /* @__PURE__ */ jsx19(
     "span",
     {
       ref,
@@ -1406,7 +1533,7 @@ Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
 import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 function Checkbox({
   checked,
   indeterminate = false,
@@ -1417,7 +1544,7 @@ function Checkbox({
   onKeyDown,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       ...props,
@@ -1439,18 +1566,18 @@ function Checkbox({
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: indeterminate ? /* @__PURE__ */ jsxs16("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx19(CheckboxIcon, { size: 18 }),
-        /* @__PURE__ */ jsx19(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
-      ] }) : checked ? /* @__PURE__ */ jsx19(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx19(CheckboxIcon, { "aria-hidden": "true", size: 18 })
+      children: indeterminate ? /* @__PURE__ */ jsxs17("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx20(CheckboxIcon, { size: 18 }),
+        /* @__PURE__ */ jsx20(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ jsx20(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx20(CheckboxIcon, { "aria-hidden": "true", size: 18 })
     }
   );
 }
 
 // src/components/SortableTable/SortableTable.tsx
-import { useMemo as useMemo2, useState as useState6 } from "react";
+import { useMemo as useMemo2, useState as useState7 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
@@ -1475,8 +1602,8 @@ function SortableTable({
   onRowDoubleClick,
   rowAction
 }) {
-  const [internalKey, setInternalKey] = useState6(defaultSortKey ?? null);
-  const [internalDirection, setInternalDirection] = useState6(defaultSortDirection);
+  const [internalKey, setInternalKey] = useState7(defaultSortKey ?? null);
+  const [internalDirection, setInternalDirection] = useState7(defaultSortDirection);
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
@@ -1545,16 +1672,16 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ jsx20("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs17("div", { className: "fractal-sortable-table-surface", children: [
-    header && /* @__PURE__ */ jsx20("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs17("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs17("tr", { className: "fractal-sortable-table-thead-row", children: [
-        selection && /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs18("div", { className: "fractal-sortable-table-surface", children: [
+    header && /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-header", children: header }),
+    visibleRows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs18("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs18("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ jsx21(
           "th",
           {
             className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
             scope: "col",
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               Checkbox,
               {
                 "aria-label": selection.selectAllLabel ?? "Select all rows",
@@ -1580,7 +1707,7 @@ function SortableTable({
         columns.map((col) => {
           const isActive = activeKey === col.key && activeDirection !== null;
           if (!col.sortable) {
-            return /* @__PURE__ */ jsx20(
+            return /* @__PURE__ */ jsx21(
               "th",
               {
                 className: "fractal-sortable-table-th",
@@ -1591,13 +1718,13 @@ function SortableTable({
               col.key
             );
           }
-          return /* @__PURE__ */ jsx20(
+          return /* @__PURE__ */ jsx21(
             "th",
             {
               className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
               scope: "col",
               style: { width: col.width },
-              children: /* @__PURE__ */ jsxs17(
+              children: /* @__PURE__ */ jsxs18(
                 "button",
                 {
                   type: "button",
@@ -1608,8 +1735,8 @@ function SortableTable({
                   onClick: () => handleSortClick(col.key),
                   "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
                   children: [
-                    /* @__PURE__ */ jsx20("span", { children: col.header }),
-                    /* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx20(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx20(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx20(ArrowsUpDown, { size: 14 }) })
+                    /* @__PURE__ */ jsx21("span", { children: col.header }),
+                    /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx21(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx21(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx21(ArrowsUpDown, { size: 14 }) })
                   ]
                 }
               )
@@ -1618,7 +1745,7 @@ function SortableTable({
           );
         })
       ] }) }),
-      /* @__PURE__ */ jsx20("tbody", { children: visibleRows.map((row, rowIndex) => {
+      /* @__PURE__ */ jsx21("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
         const disabled = isRowDisabled?.(row) ?? false;
         const selectionDisabled = disabled || (isRowSelectionDisabled?.(row) ?? false);
@@ -1627,7 +1754,7 @@ function SortableTable({
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ jsxs17(
+        return /* @__PURE__ */ jsxs18(
           "tr",
           {
             className: cn(
@@ -1651,7 +1778,7 @@ function SortableTable({
             role: interactive ? "button" : void 0,
             tabIndex: interactive ? 0 : void 0,
             children: [
-              selection && /* @__PURE__ */ jsx20("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx20(
+              selection && /* @__PURE__ */ jsx21("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx21(
                 Checkbox,
                 {
                   "aria-label": selection.getRowLabel(row),
@@ -1663,7 +1790,7 @@ function SortableTable({
                   }
                 }
               ) }),
-              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs17(
+              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs18(
                 "td",
                 {
                   className: cn(
@@ -1673,7 +1800,7 @@ function SortableTable({
                   style: { width: col.width, textAlign: col.align ?? "left" },
                   children: [
                     col.render(row, rowIndex),
-                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
                   ]
                 },
                 col.key
@@ -1688,8 +1815,8 @@ function SortableTable({
 }
 
 // src/components/Tabs/Tabs.tsx
-import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState7 } from "react";
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function Tabs({
   items,
   defaultValue,
@@ -1701,14 +1828,14 @@ function Tabs({
   variant = "line"
 }) {
   const reactId = useId2();
-  const [internalValue, setInternalValue] = useState7(
+  const [internalValue, setInternalValue] = useState8(
     defaultValue ?? items.find((i) => !i.disabled)?.id ?? items[0]?.id ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const activeId = isControlled ? controlledValue : internalValue;
-  const tabListRef = useRef5(null);
-  const tabRefs = useRef5({});
-  const [indicator, setIndicator] = useState7(null);
+  const tabListRef = useRef6(null);
+  const tabRefs = useRef6({});
+  const [indicator, setIndicator] = useState8(null);
   useLayoutEffect2(() => {
     const updateIndicator = () => {
       const activeTab = tabRefs.current[activeId];
@@ -1760,8 +1887,8 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs18("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs19("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+    /* @__PURE__ */ jsx22(
       "div",
       {
         ref: tabListRef,
@@ -1774,7 +1901,7 @@ function Tabs({
           const isActive = item.id === activeId;
           const tabId = `${reactId}-tab-${item.id}`;
           const panelId = `${reactId}-panel-${item.id}`;
-          return /* @__PURE__ */ jsx21(
+          return /* @__PURE__ */ jsx22(
             "button",
             {
               ref: (el) => {
@@ -1805,7 +1932,7 @@ function Tabs({
       const tabId = `${reactId}-tab-${item.id}`;
       const panelId = `${reactId}-panel-${item.id}`;
       const isActive = item.id === activeId;
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         "div",
         {
           id: panelId,
@@ -1822,14 +1949,14 @@ function Tabs({
 }
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
-import * as React14 from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
-  const switcherRef = React14.useRef(null);
-  const buttonRefs = React14.useRef([]);
-  const indicatorMotionReadyRef = React14.useRef(false);
+  const switcherRef = React15.useRef(null);
+  const buttonRefs = React15.useRef([]);
+  const indicatorMotionReadyRef = React15.useRef(false);
   const activeIndex = items.findIndex((item) => item.value === value);
-  React14.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     const switcher = switcherRef.current;
     const activeButton = buttonRefs.current[activeIndex];
     let motionFrame = 0;
@@ -1881,7 +2008,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -1889,10 +2016,10 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       "aria-label": ariaLabel,
       ref: switcherRef,
       children: [
-        /* @__PURE__ */ jsx22("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
+        /* @__PURE__ */ jsx23("span", { className: "fractal-content-switcher__indicator", "aria-hidden": true }),
         items.map((item, index) => {
           const active = item.value === value;
-          return /* @__PURE__ */ jsx22(
+          return /* @__PURE__ */ jsx23(
             "button",
             {
               className: cn("fractal-content-switcher__item", active && "fractal-content-switcher__item--active"),
@@ -1924,9 +2051,9 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 }
 
 // src/components/Disclosure/Disclosure.tsx
-import { useId as useId3, useState as useState8 } from "react";
+import { useId as useId3, useState as useState9 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function Disclosure({
   title,
   meta,
@@ -1941,7 +2068,7 @@ function Disclosure({
   const reactId = useId3();
   const headerId = `${reactId}-header`;
   const panelId = `${reactId}-panel`;
-  const [internalOpen, setInternalOpen] = useState8(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState9(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -1954,7 +2081,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: cn(
@@ -1965,7 +2092,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -1976,13 +2103,13 @@ function Disclosure({
             disabled,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx23(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx23(ChevronRight3, { size: 16 }) }),
-              /* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-title", children: title }),
-              meta && /* @__PURE__ */ jsx23("span", { className: "fractal-disclosure-meta", children: meta })
+              /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx24(ChevronDown2, { size: 16 }) : /* @__PURE__ */ jsx24(ChevronRight3, { size: 16 }) }),
+              /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-title", children: title }),
+              meta && /* @__PURE__ */ jsx24("span", { className: "fractal-disclosure-meta", children: meta })
             ]
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "div",
           {
             id: panelId,
@@ -1990,7 +2117,7 @@ function Disclosure({
             "aria-labelledby": headerId,
             className: "fractal-disclosure-panel",
             hidden: !isOpen,
-            children: /* @__PURE__ */ jsx23("div", { className: "fractal-disclosure-panel-inner", children })
+            children: /* @__PURE__ */ jsx24("div", { className: "fractal-disclosure-panel-inner", children })
           }
         )
       ]
@@ -1999,18 +2126,18 @@ function Disclosure({
 }
 
 // src/components/LatticeLoader/LatticeLoader.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var LATTICE_COUNT = 160;
 var WAVE_PERIOD = 80;
 function LatticeLoader({ className, label = "Loading", ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       "aria-label": label,
       className: cn("fractal-lattice-loader", className),
       role: "progressbar",
       ...props,
-      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx24(
+      children: Array.from({ length: LATTICE_COUNT }, (_, index) => /* @__PURE__ */ jsx25(
         "span",
         {
           "aria-hidden": "true",
@@ -2024,10 +2151,10 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       "aria-hidden": "true",
@@ -2043,15 +2170,15 @@ function Ghost({ className, width, height, radius, style, ...props }) {
   );
 }
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
-  return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
+  return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
 function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+  return /* @__PURE__ */ jsx26(Ghost, { 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__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
-    showHeader && /* @__PURE__ */ jsx25(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ jsx25("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx25(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+    showHeader && /* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
 }
 function DataTableGhost({
@@ -2065,81 +2192,81 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ jsx25("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs21("table", { className: "fractal-ghost-table__table", children: [
-    (showHeader || headers) && /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsx25("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx25("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
-    /* @__PURE__ */ jsx25("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx25("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx25("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx25(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ jsx26("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs22("table", { className: "fractal-ghost-table__table", children: [
+    (showHeader || headers) && /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx26("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
+    /* @__PURE__ */ jsx26("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx26("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx26("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx26(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
 }
 function InputGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ jsx25(FormFieldGhost, { className, labelWidth, ...props });
+  return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, ...props });
 }
 function TextareaGhost({ className, labelWidth = "26%", ...props }) {
-  return /* @__PURE__ */ jsx25(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
+  return /* @__PURE__ */ jsx26(FormFieldGhost, { className, labelWidth, multiline: true, ...props });
 }
 function LabelGhost({ className, width = "26%", ...props }) {
-  return /* @__PURE__ */ jsx25(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
 function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
-    /* @__PURE__ */ jsx25(LabelGhost, { width: labelWidth }),
-    /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+    /* @__PURE__ */ jsx26(LabelGhost, { width: labelWidth }),
+    /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
-    /* @__PURE__ */ jsx25(GhostLine, { width: "30%" }),
-    /* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: "78%" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+    /* @__PURE__ */ jsx26(GhostLine, { width: "30%" }),
+    /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
-    /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-choice__control" }),
-    /* @__PURE__ */ jsx25(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-choice__control" }),
+    /* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
   ] });
 }
 var ToggleGhost = CheckboxGhost;
 function ChipGhost({ className, width = 74, ...props }) {
-  return /* @__PURE__ */ jsx25(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
+  return /* @__PURE__ */ jsx26(Ghost, { className: cn("fractal-ghost-chip", className), height: 24, width, ...props });
 }
 function LinkGhost({ className, width = 96, ...props }) {
-  return /* @__PURE__ */ jsx25(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
+  return /* @__PURE__ */ jsx26(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
 function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
-    /* @__PURE__ */ jsx25(GhostLine, { width: "38%" }),
-    /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-dropdown__chevron" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+    /* @__PURE__ */ jsx26(GhostLine, { width: "38%" }),
+    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
 }
 function ContentSwitcherGhost({ className, options = 3, ...props }) {
-  return /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx25(Ghost, {}, index)) });
+  return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-switcher", className), ...props, children: Array.from({ length: options }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
-    /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-disclosure__icon" }),
-    /* @__PURE__ */ jsx25(GhostLine, { width: "42%" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-disclosure__icon" }),
+    /* @__PURE__ */ jsx26(GhostLine, { width: "42%" })
   ] });
 }
 function PaginationGhost({ className, pages = 5, ...props }) {
-  return /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx25(Ghost, {}, index)) });
+  return /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx26(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
-    /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-dropzone__icon" }),
-    /* @__PURE__ */ jsx25(GhostLine, { width: "26%" }),
-    /* @__PURE__ */ jsx25(GhostLine, { size: "sm", width: "46%" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-dropzone__icon" }),
+    /* @__PURE__ */ jsx26(GhostLine, { width: "26%" }),
+    /* @__PURE__ */ jsx26(GhostLine, { size: "sm", width: "46%" })
   ] });
 }
 function PromptCardGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsx25(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
+  return /* @__PURE__ */ jsx26(CardGhost, { className: cn("fractal-ghost-prompt-card", className), lines: 4, ...props });
 }
 function ConversationGhost({
   className,
   "aria-label": ariaLabel = "Loading conversation",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       "aria-busy": "true",
@@ -2148,54 +2275,54 @@ function ConversationGhost({
       role: "status",
       ...props,
       children: [
-        /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-conversation__bubble", children: [
-          /* @__PURE__ */ jsx25(GhostLine, { width: "100%" }),
-          /* @__PURE__ */ jsx25(GhostLine, { width: "86%" }),
-          /* @__PURE__ */ jsx25(GhostLine, { width: "64%" })
+        /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--user", children: /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-conversation__bubble", children: [
+          /* @__PURE__ */ jsx26(GhostLine, { width: "100%" }),
+          /* @__PURE__ */ jsx26(GhostLine, { width: "86%" }),
+          /* @__PURE__ */ jsx26(GhostLine, { width: "64%" })
         ] }) }),
-        /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
-          /* @__PURE__ */ jsx25(GhostLine, { width: "92%" }),
-          /* @__PURE__ */ jsx25(GhostLine, { width: "78%" }),
-          /* @__PURE__ */ jsx25(GhostLine, { width: "58%" })
+        /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: "fractal-ghost-conversation__message fractal-ghost-conversation__message--assistant", children: [
+          /* @__PURE__ */ jsx26(GhostLine, { width: "92%" }),
+          /* @__PURE__ */ jsx26(GhostLine, { width: "78%" }),
+          /* @__PURE__ */ jsx26(GhostLine, { width: "58%" })
         ] })
       ]
     }
   );
 }
 function SortableTableGhost(props) {
-  return /* @__PURE__ */ jsx25(DataTableGhost, { ...props });
+  return /* @__PURE__ */ jsx26(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ jsxs21("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
-    /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ jsx25("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-sidebar__item", children: [
-      /* @__PURE__ */ jsx25(Ghost, {}),
-      /* @__PURE__ */ jsx25(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
+  return /* @__PURE__ */ jsxs22("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+    /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-sidebar__brand" }),
+    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-sidebar__item", children: [
+      /* @__PURE__ */ jsx26(Ghost, {}),
+      /* @__PURE__ */ jsx26(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
   ] });
 }
 function ModalGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsx25(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
+  return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-modal", className), title, lines, ...props });
 }
 function SidePanelGhost({ className, title, lines = 5, ...props }) {
-  return /* @__PURE__ */ jsx25(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
+  return /* @__PURE__ */ jsx26(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsxs21("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ jsxs21("div", { className: "fractal-ghost-surface__header", children: [
-      /* @__PURE__ */ jsx25(GhostLine, { width: "42%" }),
-      /* @__PURE__ */ jsx25(Ghost, { className: "fractal-ghost-surface__close" })
+  return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ jsxs22("div", { className: "fractal-ghost-surface__header", children: [
+      /* @__PURE__ */ jsx26(GhostLine, { width: "42%" }),
+      /* @__PURE__ */ jsx26(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
-    title && /* @__PURE__ */ jsx25("div", { className: "fractal-ghost-surface__title", children: title }),
-    /* @__PURE__ */ jsx25("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx25(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
+    title && /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-surface__title", children: title }),
+    /* @__PURE__ */ jsx26("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx26(GhostLine, { width: index === lines - 1 ? "64%" : "100%" }, index)) })
   ] });
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import * as React15 from "react";
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-var Sidebar = React15.forwardRef(
-  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx26(
+import * as React16 from "react";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var Sidebar = React16.forwardRef(
+  ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx27(
     "aside",
     {
       ref,
@@ -2207,12 +2334,12 @@ var Sidebar = React15.forwardRef(
   )
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
+var SidebarHeader = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__header", className), ...props })
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarBrand = React15.forwardRef(
-  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx26("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
+var SidebarBrand = React16.forwardRef(
+  ({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx27("button", { ref, type, className: cn("fractal-sidebar__brand", className), ...props })
 );
 SidebarBrand.displayName = "SidebarBrand";
 function SidebarAccountMenu({
@@ -2223,7 +2350,7 @@ function SidebarAccountMenu({
   icon,
   className
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Dropdown,
     {
       align: "left",
@@ -2233,25 +2360,25 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ jsxs22(Fragment3, { children: [
-        icon && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__account-name", children: name })
+      triggerContent: /* @__PURE__ */ jsxs23(Fragment3, { children: [
+        icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
       triggerLabel,
       triggerVariant: "tertiary"
     }
   );
 }
-var SidebarNav = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
+var SidebarNav = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("nav", { ref, className: cn("fractal-sidebar__nav", className), ...props })
 );
 SidebarNav.displayName = "SidebarNav";
-var SidebarSection = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
+var SidebarSection = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__section", className), ...props })
 );
 SidebarSection.displayName = "SidebarSection";
-var SidebarNavItem = React15.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs22(
+var SidebarNavItem = React16.forwardRef(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "button",
     {
       ref,
@@ -2261,28 +2388,28 @@ var SidebarNavItem = React15.forwardRef(
       "aria-current": active ? "page" : void 0,
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-label", children }),
-        endAdornment && /* @__PURE__ */ jsx26("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
+        icon && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-label", children }),
+        endAdornment && /* @__PURE__ */ jsx27("span", { className: "fractal-sidebar__nav-item-end", children: endAdornment })
       ]
     }
   )
 );
 SidebarNavItem.displayName = "SidebarNavItem";
-var SidebarFooter = React15.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx26("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
+var SidebarFooter = React16.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx27("div", { ref, className: cn("fractal-sidebar__footer", className), ...props })
 );
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
-import { createPortal as createPortal2 } from "react-dom";
-import { Close } from "@mirror-physics/fractal-icons";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { createPortal as createPortal3 } from "react-dom";
+import { Close as Close2 } from "@mirror-physics/fractal-icons";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
   if (!open) return null;
-  return createPortal2(
-    /* @__PURE__ */ jsx27("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs23(
+  return createPortal3(
+    /* @__PURE__ */ jsx28("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs24(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -2291,15 +2418,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs23("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ jsxs23("div", { className: "fractal-side-panel__heading", children: [
-              typeof title === "string" ? /* @__PURE__ */ jsx27("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx27("div", { className: "fractal-side-panel__title", children: title }),
-              description && /* @__PURE__ */ jsx27("p", { className: "fractal-side-panel__description", children: description })
+          /* @__PURE__ */ jsxs24("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ jsxs24("div", { className: "fractal-side-panel__heading", children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx28("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx28("div", { className: "fractal-side-panel__title", children: title }),
+              description && /* @__PURE__ */ jsx28("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ jsx27("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx27(Close, { size: 18 }) })
+            /* @__PURE__ */ jsx28("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx28(Close2, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ jsx27("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx27(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ jsx27("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ jsx28("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx28(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx28("footer", { className: "fractal-side-panel__footer", children: footer })
         ]
       }
     ) }),
@@ -2308,18 +2435,18 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-import * as React16 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Textarea = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx28("textarea", { ref, className: cn("fractal-textarea", className), ...props })
+import * as React17 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Textarea = React17.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx29("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-import * as React17 from "react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
-var TextButton = React17.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+import * as React18 from "react";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+var TextButton = React18.forwardRef(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs25(
     "button",
     {
       ref,
@@ -2327,9 +2454,9 @@ var TextButton = React17.forwardRef(
       type: "button",
       ...props,
       children: [
-        icon && iconPosition === "start" && /* @__PURE__ */ jsx29("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx29("span", { children }),
-        icon && iconPosition === "end" && /* @__PURE__ */ jsx29("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
+        icon && iconPosition === "start" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx30("span", { children }),
+        icon && iconPosition === "end" && /* @__PURE__ */ jsx30("span", { className: "fractal-text-button__icon", "aria-hidden": "true", children: icon })
       ]
     }
   )
@@ -2337,9 +2464,9 @@ var TextButton = React17.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-import * as React18 from "react";
-import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function FileDropzone({
   files,
   onFilesChange,
@@ -2350,17 +2477,17 @@ function FileDropzone({
   description = "Files stay attached to this record.",
   className
 }) {
-  const inputId = React18.useId();
-  const inputRef = React18.useRef(null);
-  const [isDragging, setIsDragging] = React18.useState(false);
+  const inputId = React19.useId();
+  const inputRef = React19.useRef(null);
+  const [isDragging, setIsDragging] = React19.useState(false);
   const addFiles = (nextFiles) => {
     if (disabled) return;
     const additions = Array.from(nextFiles);
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ jsxs25("div", { className: cn("fractal-file-dropzone", className), children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs26("div", { className: cn("fractal-file-dropzone", className), children: [
+    /* @__PURE__ */ jsx31(
       "input",
       {
         ref: inputRef,
@@ -2376,7 +2503,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs26(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -2399,18 +2526,18 @@ function FileDropzone({
           addFiles(event.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ jsx30(FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ jsxs25("span", { className: "fractal-file-dropzone__copy", children: [
-            /* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__title", children: title }),
-            description && /* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__description", children: description })
+          /* @__PURE__ */ jsx31(FileArrowUp, { "aria-hidden": "true", size: 20 }),
+          /* @__PURE__ */ jsxs26("span", { className: "fractal-file-dropzone__copy", children: [
+            /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__title", children: title }),
+            description && /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx30("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs25("li", { className: "fractal-file-dropzone__file", children: [
-      /* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
-      /* @__PURE__ */ jsx30("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
-      /* @__PURE__ */ jsx30(
+    files.length > 0 && /* @__PURE__ */ jsx31("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs26("li", { className: "fractal-file-dropzone__file", children: [
+      /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
+      /* @__PURE__ */ jsx31("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
+      /* @__PURE__ */ jsx31(
         "button",
         {
           className: "fractal-file-dropzone__remove",
@@ -2418,7 +2545,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ jsx30(Close2, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ jsx31(Close3, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })
@@ -2432,7 +2559,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2448,10 +2575,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__ */ jsxs26("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx31("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ jsxs26("div", { className: "fractal-pagination__controls", children: [
-      canChangePageSize && /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs27("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx32("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
+    /* @__PURE__ */ jsxs27("div", { className: "fractal-pagination__controls", children: [
+      canChangePageSize && /* @__PURE__ */ jsx32(
         Dropdown,
         {
           align: "right",
@@ -2468,7 +2595,7 @@ function Pagination({
           triggerVariant: "tertiary"
         }
       ),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2477,15 +2604,15 @@ function Pagination({
           title: "Previous page",
           disabled: currentPage === 1 || totalItems === 0,
           onClick: () => onPageChange(currentPage - 1),
-          children: /* @__PURE__ */ jsx31(ArrowLeft, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ jsx32(ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ jsxs26("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ jsxs27("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsx32(
         "button",
         {
           className: "fractal-pagination__button",
@@ -2494,7 +2621,7 @@ function Pagination({
           title: "Next page",
           disabled: currentPage === totalPages || totalItems === 0,
           onClick: () => onPageChange(currentPage + 1),
-          children: /* @__PURE__ */ jsx31(ArrowRight, { "aria-hidden": "true", size: 16 })
+          children: /* @__PURE__ */ jsx32(ArrowRight, { "aria-hidden": "true", size: 16 })
         }
       )
     ] })
@@ -2572,6 +2699,8 @@ export {
   TextButtonGhost,
   Textarea,
   TextareaGhost,
+  Toast,
+  ToastViewport,
   Toggle,
   ToggleGhost,
   UILoader,