@mirror-physics/fractal-ui 0.2.0-next.41 → 0.2.0-next.43

package/dist/index.js

@@ -831,27 +831,44 @@ var Chip = React10.forwardRef(
 Chip.displayName = "Chip";
 
 // src/components/Checkbox/Checkbox.tsx
-import { Checkbox as CheckboxIcon, CheckboxChecked } from "@mirror-physics/fractal-icons";
-import { jsx as jsx15 } from "react/jsx-runtime";
-function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }) {
+import { Checkbox as CheckboxIcon, CheckboxChecked, Minus as Minus2 } from "@mirror-physics/fractal-icons";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  indeterminate = false,
+  onCheckedChange,
+  className,
+  disabled,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
   return /* @__PURE__ */ jsx15(
     "button",
     {
       ...props,
-      className: cn("fractal-checkbox", checked && "fractal-checkbox--checked", className),
+      className: cn(
+        "fractal-checkbox",
+        (checked || indeterminate) && "fractal-checkbox--checked",
+        indeterminate && "fractal-checkbox--indeterminate",
+        className
+      ),
       type: "button",
       role: "checkbox",
-      "aria-checked": checked,
+      "aria-checked": indeterminate ? "mixed" : checked,
       disabled,
       onClick: (event) => {
         onClick?.(event);
-        if (!event.defaultPrevented) onCheckedChange(!checked);
+        if (!event.defaultPrevented) onCheckedChange(indeterminate || !checked);
       },
       onKeyDown: (event) => {
         onKeyDown?.(event);
         if (event.key === " " || event.key === "Enter") event.stopPropagation();
       },
-      children: checked ? /* @__PURE__ */ jsx15(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx15(CheckboxIcon, { "aria-hidden": "true", size: 18 })
+      children: indeterminate ? /* @__PURE__ */ jsxs12("span", { className: "fractal-checkbox__indeterminate-icon", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx15(CheckboxIcon, { size: 18 }),
+        /* @__PURE__ */ jsx15(Minus2, { className: "fractal-checkbox__indeterminate-mark", size: 12 })
+      ] }) : checked ? /* @__PURE__ */ jsx15(CheckboxChecked, { "aria-hidden": "true", size: 18 }) : /* @__PURE__ */ jsx15(CheckboxIcon, { "aria-hidden": "true", size: 18 })
     }
   );
 }
@@ -859,7 +876,7 @@ function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKe
 // src/components/SortableTable/SortableTable.tsx
 import { useMemo, useState as useState3 } from "react";
 import { ArrowUp, ArrowDown, ArrowsUpDown } from "@mirror-physics/fractal-icons";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
@@ -935,9 +952,9 @@ function SortableTable({
       onSortChange?.(nextKey, nextDirection);
     }
   };
-  return /* @__PURE__ */ jsx16("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs12("div", { className: "fractal-sortable-table-surface", children: [
+  return /* @__PURE__ */ jsx16("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs13("div", { className: "fractal-sortable-table-surface", children: [
     header && /* @__PURE__ */ jsx16("div", { className: "fractal-sortable-table-header", children: header }),
-    sorted.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs12("table", { className: "fractal-sortable-table-table", children: [
+    sorted.length === 0 ? /* @__PURE__ */ jsx16("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs13("table", { className: "fractal-sortable-table-table", children: [
       /* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
         const isActive = activeKey === col.key && activeDirection !== null;
         if (!col.sortable) {
@@ -956,7 +973,7 @@ function SortableTable({
           {
             className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
             style: { width: col.width },
-            children: /* @__PURE__ */ jsxs12(
+            children: /* @__PURE__ */ jsxs13(
               "button",
               {
                 type: "button",
@@ -1000,7 +1017,7 @@ function SortableTable({
             "aria-label": action?.label,
             role: onRowClick ? "button" : void 0,
             tabIndex: onRowClick ? 0 : void 0,
-            children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs12(
+            children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs13(
               "td",
               {
                 className: cn(
@@ -1025,7 +1042,7 @@ function SortableTable({
 
 // src/components/Tabs/Tabs.tsx
 import { useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function Tabs({
   items,
   defaultValue,
@@ -1096,7 +1113,7 @@ function Tabs({
     selectTab(nextId2);
     requestAnimationFrame(() => tabRefs.current[nextId2]?.focus());
   };
-  return /* @__PURE__ */ jsxs13("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn("fractal-tabs", `fractal-tabs--${variant}`, divider && "fractal-tabs--divider", className), children: [
     /* @__PURE__ */ jsx17(
       "div",
       {
@@ -1159,7 +1176,7 @@ function Tabs({
 
 // src/components/ContentSwitcher/ContentSwitcher.tsx
 import * as React11 from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = false, className }) {
   const switcherRef = React11.useRef(null);
   const buttonRefs = React11.useRef([]);
@@ -1217,7 +1234,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
       onValueChange(items[nextIndex].value);
     }
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn("fractal-content-switcher", fullWidth && "fractal-content-switcher--full-width", className),
@@ -1262,7 +1279,7 @@ function ContentSwitcher({ items, value, onValueChange, ariaLabel, fullWidth = f
 // src/components/Disclosure/Disclosure.tsx
 import { useId as useId3, useState as useState5 } from "react";
 import { ChevronRight as ChevronRight2, ChevronDown as ChevronDown2 } from "@mirror-physics/fractal-icons";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function Disclosure({
   title,
   meta,
@@ -1290,7 +1307,7 @@ function Disclosure({
       onOpenChange?.(next);
     }
   };
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
@@ -1301,7 +1318,7 @@ function Disclosure({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "button",
           {
             type: "button",
@@ -1360,7 +1377,7 @@ function LatticeLoader({ className, label = "Loading", ...props }) {
 }
 
 // src/components/Ghost/Ghost.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Ghost({ className, width, height, radius, style, ...props }) {
   return /* @__PURE__ */ jsx21(
@@ -1385,7 +1402,7 @@ function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props
   return /* @__PURE__ */ jsx21(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__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
     showHeader && /* @__PURE__ */ jsx21(GhostLine, { width: "38%" }),
     /* @__PURE__ */ jsx21("div", { className: "fractal-ghost-stack", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx21(GhostLine, { width: index === lines - 1 ? "62%" : "100%" }, index)) })
   ] });
@@ -1401,7 +1418,7 @@ function DataTableGhost({
   ...props
 }) {
   const cells = Array.from({ length: columns }, (_, index) => index);
-  return /* @__PURE__ */ jsx21("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs16("table", { className: "fractal-ghost-table__table", children: [
+  return /* @__PURE__ */ jsx21("div", { "aria-busy": "true", "aria-label": "Loading table", className: cn("fractal-ghost-table", `fractal-ghost-table--${size}`, className), role: "status", ...props, children: /* @__PURE__ */ jsxs17("table", { className: "fractal-ghost-table__table", children: [
     (showHeader || headers) && /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsx21("tr", { className: "fractal-ghost-table__head-row", children: cells.map((index) => /* @__PURE__ */ jsx21("th", { style: { width: columnWidths?.[index] }, children: headers?.[index] ?? /* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: index === columns - 1 ? "62%" : "76%" }) }, index)) }) }),
     /* @__PURE__ */ jsx21("tbody", { children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx21("tr", { className: "fractal-ghost-table__row", children: cells.map((columnIndex) => /* @__PURE__ */ jsx21("td", { style: { width: columnWidths?.[columnIndex] }, children: /* @__PURE__ */ jsx21(GhostLine, { width: `${[72, 54, 82, 63, 46][(rowIndex + columnIndex) % 5]}%` }) }, columnIndex)) }, rowIndex)) })
   ] }) });
@@ -1416,19 +1433,19 @@ function LabelGhost({ className, width = "26%", ...props }) {
   return /* @__PURE__ */ jsx21(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
 function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
     /* @__PURE__ */ jsx21(LabelGhost, { width: labelWidth }),
     /* @__PURE__ */ jsx21(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
 }
 function AlertGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-alert", className), ...props, children: [
     /* @__PURE__ */ jsx21(GhostLine, { width: "30%" }),
     /* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: "78%" })
   ] });
 }
 function CheckboxGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-choice", className), ...props, children: [
     /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-choice__control" }),
     /* @__PURE__ */ jsx21(GhostLine, { width: "42%" })
   ] });
@@ -1442,7 +1459,7 @@ function LinkGhost({ className, width = 96, ...props }) {
 }
 var TextButtonGhost = LinkGhost;
 function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
     /* @__PURE__ */ jsx21(GhostLine, { width: "38%" }),
     /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
@@ -1452,7 +1469,7 @@ function ContentSwitcherGhost({ className, options = 3, ...props }) {
 }
 var TabsGhost = ContentSwitcherGhost;
 function DisclosureGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-disclosure", className), ...props, children: [
     /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-disclosure__icon" }),
     /* @__PURE__ */ jsx21(GhostLine, { width: "42%" })
   ] });
@@ -1461,7 +1478,7 @@ function PaginationGhost({ className, pages = 5, ...props }) {
   return /* @__PURE__ */ jsx21("div", { "aria-hidden": "true", className: cn("fractal-ghost-pagination", className), ...props, children: Array.from({ length: pages }, (_, index) => /* @__PURE__ */ jsx21(Ghost, {}, index)) });
 }
 function FileDropzoneGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropzone", className), ...props, children: [
     /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-dropzone__icon" }),
     /* @__PURE__ */ jsx21(GhostLine, { width: "26%" }),
     /* @__PURE__ */ jsx21(GhostLine, { size: "sm", width: "46%" })
@@ -1474,9 +1491,9 @@ function SortableTableGhost(props) {
   return /* @__PURE__ */ jsx21(DataTableGhost, { ...props });
 }
 function SidebarGhost({ className, items = 6, ...props }) {
-  return /* @__PURE__ */ jsxs16("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
+  return /* @__PURE__ */ jsxs17("aside", { "aria-hidden": "true", className: cn("fractal-ghost-sidebar", className), ...props, children: [
     /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-sidebar__brand" }),
-    /* @__PURE__ */ jsx21("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs16("div", { className: "fractal-ghost-sidebar__item", children: [
+    /* @__PURE__ */ jsx21("div", { className: "fractal-ghost-sidebar__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs17("div", { className: "fractal-ghost-sidebar__item", children: [
       /* @__PURE__ */ jsx21(Ghost, {}),
       /* @__PURE__ */ jsx21(GhostLine, { width: `${[54, 68, 44, 61][index % 4]}%` })
     ] }, index)) })
@@ -1489,8 +1506,8 @@ function SidePanelGhost({ className, title, lines = 5, ...props }) {
   return /* @__PURE__ */ jsx21(SurfaceGhost, { className: cn("fractal-ghost-side-panel", className), title, lines, ...props });
 }
 function SurfaceGhost({ className, title, lines = 3, ...props }) {
-  return /* @__PURE__ */ jsxs16("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
-    /* @__PURE__ */ jsxs16("div", { className: "fractal-ghost-surface__header", children: [
+  return /* @__PURE__ */ jsxs17("div", { "aria-hidden": "true", className: cn("fractal-ghost-surface", className), ...props, children: [
+    /* @__PURE__ */ jsxs17("div", { className: "fractal-ghost-surface__header", children: [
       /* @__PURE__ */ jsx21(GhostLine, { width: "42%" }),
       /* @__PURE__ */ jsx21(Ghost, { className: "fractal-ghost-surface__close" })
     ] }),
@@ -1501,7 +1518,7 @@ function SurfaceGhost({ className, title, lines = 3, ...props }) {
 
 // src/components/Sidebar/Sidebar.tsx
 import * as React12 from "react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var Sidebar = React12.forwardRef(
   ({ className, width, compact = false, style, ...props }, ref) => /* @__PURE__ */ jsx22(
     "aside",
@@ -1541,7 +1558,7 @@ function SidebarAccountMenu({
       panelClassName: "fractal-sidebar__account-panel",
       selectedValue: "",
       triggerClassName: "fractal-sidebar__account-trigger",
-      triggerContent: /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      triggerContent: /* @__PURE__ */ jsxs18(Fragment3, { children: [
         icon && /* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__account-icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsx22("span", { className: "fractal-sidebar__account-name", children: name })
       ] }),
@@ -1559,7 +1576,7 @@ var SidebarSection = React12.forwardRef(
 );
 SidebarSection.displayName = "SidebarSection";
 var SidebarNavItem = React12.forwardRef(
-  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs17(
+  ({ active = false, icon, endAdornment, className, type = "button", children, ...props }, ref) => /* @__PURE__ */ jsxs18(
     "button",
     {
       ref,
@@ -1585,12 +1602,12 @@ 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 jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } 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__ */ jsx23("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsx23("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs19(
       "aside",
       {
         className: cn("fractal-side-panel", `fractal-side-panel--${size}`, className),
@@ -1599,8 +1616,8 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs18("header", { className: "fractal-side-panel__header", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "fractal-side-panel__heading", children: [
+          /* @__PURE__ */ jsxs19("header", { className: "fractal-side-panel__header", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "fractal-side-panel__heading", children: [
               typeof title === "string" ? /* @__PURE__ */ jsx23("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx23("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ jsx23("p", { className: "fractal-side-panel__description", children: description })
             ] }),
@@ -1625,9 +1642,9 @@ Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
 import * as React14 from "react";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextButton = React14.forwardRef(
-  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs19(
+  ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs20(
     "button",
     {
       ref,
@@ -1647,7 +1664,7 @@ TextButton.displayName = "TextButton";
 // src/components/FileDropzone/FileDropzone.tsx
 import * as React15 from "react";
 import { Close as Close2, FileArrowUp } from "@mirror-physics/fractal-icons";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function FileDropzone({
   files,
   onFilesChange,
@@ -1667,7 +1684,7 @@ function FileDropzone({
     if (additions.length === 0) return;
     onFilesChange(multiple ? [...files, ...additions] : additions.slice(0, 1));
   };
-  return /* @__PURE__ */ jsxs20("div", { className: cn("fractal-file-dropzone", className), children: [
+  return /* @__PURE__ */ jsxs21("div", { className: cn("fractal-file-dropzone", className), children: [
     /* @__PURE__ */ jsx26(
       "input",
       {
@@ -1684,7 +1701,7 @@ function FileDropzone({
         }
       }
     ),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         className: "fractal-file-dropzone__target",
@@ -1708,14 +1725,14 @@ function FileDropzone({
         },
         children: [
           /* @__PURE__ */ jsx26(FileArrowUp, { "aria-hidden": "true", size: 20 }),
-          /* @__PURE__ */ jsxs20("span", { className: "fractal-file-dropzone__copy", children: [
+          /* @__PURE__ */ jsxs21("span", { className: "fractal-file-dropzone__copy", children: [
             /* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__title", children: title }),
             description && /* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__description", children: description })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx26("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs20("li", { className: "fractal-file-dropzone__file", children: [
+    files.length > 0 && /* @__PURE__ */ jsx26("ul", { className: "fractal-file-dropzone__files", "aria-label": "Attached files", children: files.map((file, index) => /* @__PURE__ */ jsxs21("li", { className: "fractal-file-dropzone__file", children: [
       /* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__file-name", children: file.name }),
       /* @__PURE__ */ jsx26("span", { className: "fractal-file-dropzone__file-meta", children: formatFileSize(file.size) }),
       /* @__PURE__ */ jsx26(
@@ -1740,7 +1757,7 @@ function formatFileSize(bytes) {
 
 // src/components/Pagination/Pagination.tsx
 import { ArrowLeft, ArrowRight } from "@mirror-physics/fractal-icons";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -1756,9 +1773,9 @@ 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__ */ jsxs21("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsxs22("nav", { className: cn("fractal-pagination", className), "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsx27("span", { className: "fractal-pagination__summary", children: totalItems === 0 ? "No results" : `${start}-${end} of ${totalItems}` }),
-    /* @__PURE__ */ jsxs21("div", { className: "fractal-pagination__controls", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "fractal-pagination__controls", children: [
       canChangePageSize && /* @__PURE__ */ jsx27(
         Dropdown,
         {
@@ -1788,7 +1805,7 @@ function Pagination({
           children: /* @__PURE__ */ jsx27(ArrowLeft, { "aria-hidden": "true", size: 16 })
         }
       ),
-      /* @__PURE__ */ jsxs21("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
+      /* @__PURE__ */ jsxs22("span", { className: "fractal-pagination__page", "aria-current": "page", children: [
         currentPage,
         " of ",
         totalPages