@camtomlabs/malix-design-system 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   CreditsIndicator: () => CreditsIndicator,
   DataTable: () => DataTable,
   DateInput: () => DateInput,
+  Dialog: () => Dialog,
   Divider: () => Divider,
   Dropzone: () => Dropzone,
   EmptyState: () => EmptyState,
@@ -53,6 +54,7 @@ __export(index_exports, {
   FlyoutMenu: () => FlyoutMenu,
   GlassPopover: () => GlassPopover,
   Header: () => Header,
+  Icon: () => Icon,
   Input: () => Input,
   InputGroup: () => InputGroup,
   LanguageSelector: () => LanguageSelector,
@@ -1233,46 +1235,95 @@ function Overlay({ open, title, onClose, children }) {
 }
 
 // src/components/Modal.tsx
+var import_react10 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/hooks/useOverlayBehavior.ts
 var import_react9 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var FOCUSABLE_SELECTOR2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-function Modal({
+var FOCUSABLE_SELECTOR2 = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useOverlayBehavior({
   open,
-  title,
   onClose,
-  onConfirm,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  children
+  panelRef,
+  closeOnEsc = true,
+  initialFocusRef
 }) {
-  const panelRef = (0, import_react9.useRef)(null);
+  const previousActiveRef = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => {
-    if (!open || !panelRef.current) return;
+    if (!open) return;
     const panel = panelRef.current;
-    const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR2));
-    const first = focusables[0];
-    const last = focusables[focusables.length - 1];
-    first?.focus();
-    function onKeyDown(event) {
-      if (event.key === "Escape") {
+    if (!panel) return;
+    previousActiveRef.current = document.activeElement ?? null;
+    const previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const focusTimer = window.setTimeout(() => {
+      if (initialFocusRef?.current) {
+        initialFocusRef.current.focus();
+        return;
+      }
+      const focusables = Array.from(
+        panel.querySelectorAll(FOCUSABLE_SELECTOR2)
+      );
+      if (focusables.length > 0) {
+        focusables[0].focus();
+      } else {
+        panel.focus();
+      }
+    }, 0);
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEsc) {
         event.preventDefault();
         onClose();
+        return;
       }
-      if (event.key === "Tab" && focusables.length > 0) {
-        if (event.shiftKey && document.activeElement === first) {
-          event.preventDefault();
-          last?.focus();
-        } else if (!event.shiftKey && document.activeElement === last) {
-          event.preventDefault();
-          first?.focus();
-        }
+      if (event.key !== "Tab") return;
+      const focusables = Array.from(
+        panel.querySelectorAll(FOCUSABLE_SELECTOR2)
+      );
+      if (focusables.length === 0) {
+        event.preventDefault();
+        return;
       }
-    }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
     document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
+    return () => {
+      window.clearTimeout(focusTimer);
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousBodyOverflow;
+      const previous = previousActiveRef.current;
+      if (previous && typeof previous.focus === "function") {
+        previous.focus();
+      }
+    };
+  }, [open, onClose, panelRef, closeOnEsc, initialFocusRef]);
+}
+
+// src/components/Modal.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Modal({
+  open,
+  title,
+  onClose,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  children
+}) {
+  const panelRef = (0, import_react10.useRef)(null);
+  useOverlayBehavior({ open, onClose, panelRef });
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  if (typeof document === "undefined") return null;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       ref: panelRef,
@@ -1280,6 +1331,7 @@ function Modal({
       role: "dialog",
       "aria-modal": "true",
       "aria-label": title,
+      tabIndex: -1,
       onMouseDown: (event) => event.stopPropagation(),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "malix-modal__header", children: [
@@ -1291,10 +1343,24 @@ function Modal({
               className: "malix-modal__close",
               onClick: onClose,
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-              ] })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                "svg",
+                {
+                  width: "18",
+                  height: "18",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
             }
           )
         ] }),
@@ -1324,12 +1390,13 @@ function Modal({
       ]
     }
   ) });
+  return (0, import_react_dom2.createPortal)(content, document.body);
 }
 
 // src/components/ConfirmDialog.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
+var import_react_dom3 = require("react-dom");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var FOCUSABLE_SELECTOR3 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function ConfirmDialog({
   open,
   title,
@@ -1343,50 +1410,30 @@ function ConfirmDialog({
   children,
   loading = false
 }) {
-  const panelRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
-    if (!open || !panelRef.current) return;
-    const panel = panelRef.current;
-    const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR3));
-    const first = focusables[0];
-    const last = focusables[focusables.length - 1];
-    first?.focus();
-    function onKeyDown(event) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onCancel();
-      }
-      if (event.key === "Tab" && focusables.length > 0) {
-        if (event.shiftKey && document.activeElement === first) {
-          event.preventDefault();
-          last?.focus();
-        } else if (!event.shiftKey && document.activeElement === last) {
-          event.preventDefault();
-          first?.focus();
-        }
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onCancel]);
+  const panelRef = (0, import_react11.useRef)(null);
+  const titleId = (0, import_react11.useId)();
+  const descriptionId = (0, import_react11.useId)();
+  useOverlayBehavior({ open, onClose: onCancel, panelRef });
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  if (typeof document === "undefined") return null;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       ref: panelRef,
       className: "malix-confirm-dialog",
       role: "alertdialog",
       "aria-modal": "true",
-      "aria-labelledby": "malix-confirm-title",
-      "aria-describedby": description ? "malix-confirm-desc" : void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
       "data-variant": variant,
+      tabIndex: -1,
       onMouseDown: (event) => event.stopPropagation(),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "malix-confirm-dialog__content", children: [
           icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "malix-confirm-dialog__icon", children: icon }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "malix-confirm-dialog__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { id: "malix-confirm-title", className: "malix-confirm-dialog__title", children: title }),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { id: "malix-confirm-desc", className: "malix-confirm-dialog__description", children: description }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { id: titleId, className: "malix-confirm-dialog__title", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { id: descriptionId, className: "malix-confirm-dialog__description", children: description }) : null,
             children
           ] })
         ] }),
@@ -1419,10 +1466,124 @@ function ConfirmDialog({
       ]
     }
   ) });
+  return (0, import_react_dom3.createPortal)(content, document.body);
 }
 
-// src/components/GlassPopover.tsx
+// src/components/Dialog.tsx
+var import_react12 = require("react");
+var import_react_dom4 = require("react-dom");
 var import_jsx_runtime31 = require("react/jsx-runtime");
+var DialogContext = (0, import_react12.createContext)(null);
+function useDialogContext(component) {
+  const ctx = (0, import_react12.useContext)(DialogContext);
+  if (!ctx) {
+    throw new Error(
+      `<Dialog.${component}> must be rendered inside <Dialog>. Wrap it in a <Dialog> component.`
+    );
+  }
+  return ctx;
+}
+function Dialog({
+  open,
+  onClose,
+  variant = "default",
+  size = "md",
+  closeOnBackdropClick = true,
+  closeOnEsc = true,
+  initialFocusRef,
+  className,
+  role = "dialog",
+  children
+}) {
+  const panelRef = (0, import_react12.useRef)(null);
+  const titleId = (0, import_react12.useId)();
+  const descriptionId = (0, import_react12.useId)();
+  useOverlayBehavior({
+    open,
+    onClose,
+    panelRef,
+    closeOnEsc,
+    initialFocusRef
+  });
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+  const handleBackdropMouseDown = closeOnBackdropClick ? onClose : void 0;
+  const panelClassName = ["malix-dialog", className].filter(Boolean).join(" ");
+  const contextValue = {
+    onClose,
+    titleId,
+    descriptionId,
+    variant
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: handleBackdropMouseDown, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      ref: panelRef,
+      className: panelClassName,
+      role,
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      "data-variant": variant,
+      "data-size": size,
+      tabIndex: -1,
+      onMouseDown: (event) => event.stopPropagation(),
+      children
+    }
+  ) }) });
+  return (0, import_react_dom4.createPortal)(content, document.body);
+}
+function DialogHeader({
+  children,
+  showClose = true,
+  closeLabel = "Close"
+}) {
+  const { onClose, titleId } = useDialogContext("Header");
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "malix-dialog__header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { className: "malix-dialog__title", id: titleId, children }),
+    showClose ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "malix-dialog__close",
+        onClick: onClose,
+        "aria-label": closeLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          "svg",
+          {
+            width: "18",
+            height: "18",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function DialogBody({ children, className }) {
+  const { descriptionId } = useDialogContext("Body");
+  const bodyClassName = ["malix-dialog__body", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: descriptionId, className: bodyClassName, children });
+}
+function DialogFooter({ children, align = "end" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "malix-dialog__footer", "data-align": align, children });
+}
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+
+// src/components/GlassPopover.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function GlassPopover({
   title,
   onClose,
@@ -1430,37 +1591,37 @@ function GlassPopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: `malix-glass-popover${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        title || onClose ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "malix-glass-popover__header", children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "malix-glass-popover__title", children: title }) : null,
-          onClose ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        title || onClose ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "malix-glass-popover__header", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "malix-glass-popover__title", children: title }) : null,
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "button",
             {
               type: "button",
               className: "malix-glass-popover__close",
               onClick: onClose,
               "aria-label": "Close",
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
               ] })
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "malix-glass-popover__body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "malix-glass-popover__body", children })
       ]
     }
   );
 }
 
 // src/components/Accordion.tsx
-var import_react11 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Accordion({
   title,
   children,
@@ -1469,15 +1630,15 @@ function Accordion({
   className,
   ...props
 }) {
-  const [open, setOpen] = (0, import_react11.useState)(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  const [open, setOpen] = (0, import_react13.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: `malix-accordion${className ? ` ${className}` : ""}`,
       "data-open": open,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "button",
           {
             type: "button",
@@ -1485,9 +1646,9 @@ function Accordion({
             onClick: () => setOpen((prev) => !prev),
             "aria-expanded": open,
             children: [
-              icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "malix-accordion__icon", children: icon }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "malix-accordion__title", children: title }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-accordion__icon", children: icon }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-accordion__title", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "svg",
                 {
                   className: "malix-accordion__chevron",
@@ -1500,20 +1661,20 @@ function Accordion({
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polyline", { points: "6 9 12 15 18 9" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "6 9 12 15 18 9" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "malix-accordion__body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "malix-accordion__body", children })
       ]
     }
   );
 }
 
 // src/components/Badge.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Badge({
   variant = "default",
   dot = false,
@@ -1521,41 +1682,41 @@ function Badge({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       className: `malix-badge${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       ...props,
       children: [
-        dot ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-badge__dot" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-badge__label", children })
+        dot ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "malix-badge__dot" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "malix-badge__label", children })
       ]
     }
   );
 }
 
 // src/components/Banner.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var defaultIcons = {
-  info: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  info: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+  success: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
   ] }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  warning: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
   ] }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  error: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] })
 };
 function Banner({
@@ -1566,7 +1727,7 @@ function Banner({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: `malix-banner${className ? ` ${className}` : ""}`,
@@ -1574,18 +1735,18 @@ function Banner({
       role: "alert",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "malix-banner__icon", children: icon ?? defaultIcons[variant] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "malix-banner__content", children }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "malix-banner__icon", children: icon ?? defaultIcons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "malix-banner__content", children }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
             className: "malix-banner__close",
             onClick: onClose,
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
             ] })
           }
         ) : null
@@ -1595,7 +1756,7 @@ function Banner({
 }
 
 // src/components/Checkbox.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Checkbox({
   checked = false,
   onChange,
@@ -1610,7 +1771,7 @@ function Checkbox({
       onChange(!checked);
     }
   };
-  const checkbox = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  const checkbox = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "button",
     {
       type: "button",
@@ -1624,7 +1785,7 @@ function Checkbox({
       onClick: handleClick,
       ...props,
       children: [
-        checked && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        checked && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "svg",
           {
             className: "malix-checkbox__icon",
@@ -1632,7 +1793,7 @@ function Checkbox({
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "path",
               {
                 d: "M2 6l3 3 5-5",
@@ -1644,7 +1805,7 @@ function Checkbox({
             )
           }
         ) : null,
-        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "svg",
           {
             className: "malix-checkbox__icon",
@@ -1652,7 +1813,7 @@ function Checkbox({
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "path",
               {
                 d: "M2 6h8",
@@ -1667,16 +1828,16 @@ function Checkbox({
     }
   );
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "malix-checkbox-row", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "malix-checkbox-row", children: [
       checkbox,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "malix-checkbox-row__label", children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "malix-checkbox-row__label", children: label })
     ] });
   }
   return checkbox;
 }
 
 // src/components/Radio.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Radio({
   checked = false,
   onChange,
@@ -1692,7 +1853,7 @@ function Radio({
       onChange(value);
     }
   };
-  const radio = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  const radio = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
     {
       type: "button",
@@ -1706,20 +1867,20 @@ function Radio({
       "data-value": value,
       onClick: handleClick,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "malix-radio__dot" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "malix-radio__dot" })
     }
   );
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "malix-radio-row", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "malix-radio-row", children: [
       radio,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "malix-radio-row__label", children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "malix-radio-row__label", children: label })
     ] });
   }
   return radio;
 }
 
 // src/components/Toggle.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Toggle({
   checked = false,
   onChange,
@@ -1733,7 +1894,7 @@ function Toggle({
       onChange(!checked);
     }
   };
-  const toggle = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const toggle = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "button",
     {
       type: "button",
@@ -1745,12 +1906,12 @@ function Toggle({
       disabled,
       onClick: handleClick,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "malix-toggle__knob" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "malix-toggle__knob" })
     }
   );
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "malix-toggle-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "malix-toggle-row__label", children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "malix-toggle-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "malix-toggle-row__label", children: label }),
       toggle
     ] });
   }
@@ -1758,7 +1919,7 @@ function Toggle({
 }
 
 // src/components/Select.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Select({
   value,
   placeholder,
@@ -1769,14 +1930,14 @@ function Select({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: `malix-select${className ? ` ${className}` : ""}`,
       "data-filled": filled || void 0,
       "data-disabled": disabled || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           "select",
           {
             className: "malix-select__native",
@@ -1785,12 +1946,12 @@ function Select({
             onChange: (e) => onChange?.(e.target.value),
             ...props,
             children: [
-              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: "", disabled: true, children: placeholder }) : null,
-              options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: "", disabled: true, children: placeholder }) : null,
+              options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "malix-select__icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "malix-select__icon", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "path",
           {
             d: "M4 6L8 10L12 6",
@@ -1806,7 +1967,7 @@ function Select({
 }
 
 // src/components/SelectGroup.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function SelectGroup({
   label,
   helperText,
@@ -1815,23 +1976,23 @@ function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className: `malix-select-group${className ? ` ${className}` : ""}`,
       "data-error": error || void 0,
       ...props,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "malix-select-group__label", children: label }) : null,
+        label ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "malix-select-group__label", children: label }) : null,
         children,
-        helperText ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "malix-select-group__helper", children: helperText }) : null
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "malix-select-group__helper", children: helperText }) : null
       ]
     }
   );
 }
 
 // src/components/SegmentedControl.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function SegmentedControl({
   items,
   value,
@@ -1839,13 +2000,13 @@ function SegmentedControl({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: `malix-segmented-control${className ? ` ${className}` : ""}`,
       role: "radiogroup",
       ...props,
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         "button",
         {
           type: "button",
@@ -1863,7 +2024,7 @@ function SegmentedControl({
 }
 
 // src/components/DataTable.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -1872,13 +2033,13 @@ function DataTable({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "table",
     {
       className: `malix-data-table${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { className: "malix-data-table__header-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { className: "malix-data-table__header-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "th",
           {
             className: "malix-data-table__header-cell",
@@ -1887,16 +2048,16 @@ function DataTable({
           },
           col.key
         )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { className: "malix-data-table__body", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { className: "malix-data-table__body", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "tr",
           {
             className: "malix-data-table__data-row",
             "data-clickable": onRowClick ? true : void 0,
             onClick: onRowClick ? () => onRowClick(row) : void 0,
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "malix-data-table__cell", children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key))
+            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("td", { className: "malix-data-table__cell", children: col.render ? col.render(row[col.key], row) : row[col.key] }, col.key))
           },
           rowIndex
-        )) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { className: "malix-data-table__data-row", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        )) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tr", { className: "malix-data-table__data-row", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "td",
           {
             className: "malix-data-table__cell",
@@ -1910,12 +2071,12 @@ function DataTable({
 }
 
 // src/components/Pagination.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ChevronLeft() {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function ChevronRight() {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function Pagination({
   currentPage,
@@ -1927,14 +2088,14 @@ function Pagination({
   const isFirstPage = currentPage <= 1;
   const isLastPage = currentPage >= totalPages;
   const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "nav",
     {
       className: `malix-pagination${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       "aria-label": "Pagination",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             type: "button",
@@ -1943,10 +2104,10 @@ function Pagination({
             disabled: isFirstPage,
             onClick: () => onPageChange(currentPage - 1),
             "aria-label": "Previous page",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronLeft, {})
           }
         ),
-        variant === "full" ? pages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        variant === "full" ? pages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             type: "button",
@@ -1957,12 +2118,12 @@ function Pagination({
             children: page
           },
           page
-        )) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "malix-pagination__label", children: [
+        )) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "malix-pagination__label", children: [
           currentPage,
           " of ",
           totalPages
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             type: "button",
@@ -1971,7 +2132,7 @@ function Pagination({
             disabled: isLastPage,
             onClick: () => onPageChange(currentPage + 1),
             "aria-label": "Next page",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronRight, {})
           }
         )
       ]
@@ -1980,30 +2141,30 @@ function Pagination({
 }
 
 // src/components/StatusDot.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function StatusDot({
   variant = "default",
   label,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "span",
     {
       className: `malix-status-dot${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "malix-status-dot__dot", "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "malix-status-dot__label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-status-dot__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-status-dot__label", children: label })
       ]
     }
   );
 }
 
 // src/components/Dropzone.tsx
-var import_react12 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Dropzone({
   onDrop,
   accept,
@@ -2013,8 +2174,8 @@ function Dropzone({
   className,
   ...props
 }) {
-  const [dragging, setDragging] = (0, import_react12.useState)(false);
-  const inputRef = (0, import_react12.useRef)(null);
+  const [dragging, setDragging] = (0, import_react14.useState)(false);
+  const inputRef = (0, import_react14.useRef)(null);
   function handleDragOver(event) {
     event.preventDefault();
     if (!disabled) setDragging(true);
@@ -2038,7 +2199,7 @@ function Dropzone({
   function handleClick() {
     if (!disabled) inputRef.current?.click();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: `malix-dropzone${className ? ` ${className}` : ""}`,
@@ -2053,7 +2214,7 @@ function Dropzone({
       "aria-disabled": disabled || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "input",
           {
             ref: inputRef,
@@ -2064,7 +2225,7 @@ function Dropzone({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "svg",
           {
             className: "malix-dropzone__icon",
@@ -2078,23 +2239,23 @@ function Dropzone({
             strokeLinejoin: "round",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M12 12v9" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "m16 16-4-4-4 4" })
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M12 12v9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "m16 16-4-4-4 4" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-dropzone__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-dropzone__hint", children: hint }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-dropzone__browse-btn", children: "Browse files" })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-dropzone__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-dropzone__hint", children: hint }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-dropzone__browse-btn", children: "Browse files" })
       ]
     }
   );
 }
 
 // src/components/SplitPane.tsx
-var import_react13 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function SplitPane({
   leftPanel,
   rightPanel,
@@ -2104,14 +2265,14 @@ function SplitPane({
   className,
   ...props
 }) {
-  const [split, setSplit] = (0, import_react13.useState)(defaultSplit);
-  const containerRef = (0, import_react13.useRef)(null);
-  const dragging = (0, import_react13.useRef)(false);
-  const onMouseDown = (0, import_react13.useCallback)((e) => {
+  const [split, setSplit] = (0, import_react15.useState)(defaultSplit);
+  const containerRef = (0, import_react15.useRef)(null);
+  const dragging = (0, import_react15.useRef)(false);
+  const onMouseDown = (0, import_react15.useCallback)((e) => {
     e.preventDefault();
     dragging.current = true;
   }, []);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     function onMouseMove(e) {
       if (!dragging.current || !containerRef.current) return;
       const rect = containerRef.current.getBoundingClientRect();
@@ -2129,18 +2290,18 @@ function SplitPane({
       document.removeEventListener("mouseup", onMouseUp);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       ref: containerRef,
       className: `malix-split-pane${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "malix-split-pane__left", style: { width: `${split}%` }, children: [
-          leftTitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-split-pane__panel-title", children: leftTitle }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "malix-split-pane__left", style: { width: `${split}%` }, children: [
+          leftTitle ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-split-pane__panel-title", children: leftTitle }) : null,
           leftPanel
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "div",
           {
             className: "malix-split-pane__handle",
@@ -2151,14 +2312,14 @@ function SplitPane({
             "aria-label": "Resize panels",
             onMouseDown,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" })
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "malix-split-pane__right", style: { width: `${100 - split}%` }, children: [
-          rightTitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-split-pane__panel-title", children: rightTitle }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "malix-split-pane__right", style: { width: `${100 - split}%` }, children: [
+          rightTitle ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-split-pane__panel-title", children: rightTitle }) : null,
           rightPanel
         ] })
       ]
@@ -2167,7 +2328,7 @@ function SplitPane({
 }
 
 // src/components/PricingCard.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function PricingCard({
   planName,
   price,
@@ -2180,21 +2341,21 @@ function PricingCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
       className: `malix-pricing-card${className ? ` ${className}` : ""}`,
       "data-highlighted": highlighted || void 0,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-pricing-card__badge", children: planName }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "malix-pricing-card__price-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-pricing-card__price", children: price }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "malix-pricing-card__period", children: period })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-pricing-card__badge", children: planName }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "malix-pricing-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-pricing-card__price", children: price }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-pricing-card__period", children: period })
         ] }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "malix-pricing-card__description", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("ul", { className: "malix-pricing-card__features", children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { className: "malix-pricing-card__feature-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "malix-pricing-card__description", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("ul", { className: "malix-pricing-card__features", children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "malix-pricing-card__feature-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "svg",
             {
               className: "malix-pricing-card__check-icon",
@@ -2207,12 +2368,12 @@ function PricingCard({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("polyline", { points: "20 6 9 17 4 12" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("polyline", { points: "20 6 9 17 4 12" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: feature })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: feature })
         ] }, i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
             type: "button",
@@ -2227,7 +2388,7 @@ function PricingCard({
 }
 
 // src/components/OnboardingPopover.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function OnboardingPopover({
   step,
   totalSteps,
@@ -2239,7 +2400,7 @@ function OnboardingPopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       className: `malix-onboarding-popover${className ? ` ${className}` : ""}`,
@@ -2247,16 +2408,16 @@ function OnboardingPopover({
       "aria-label": `Step ${step} of ${totalSteps}: ${title}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "malix-onboarding-popover__step", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "malix-onboarding-popover__step", children: [
           "Step ",
           step,
           " of ",
           totalSteps
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h3", { className: "malix-onboarding-popover__title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "malix-onboarding-popover__description", children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "malix-onboarding-popover__actions", children: [
-          onSkip ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "malix-onboarding-popover__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "malix-onboarding-popover__description", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "malix-onboarding-popover__actions", children: [
+          onSkip ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "button",
             {
               type: "button",
@@ -2265,7 +2426,7 @@ function OnboardingPopover({
               children: "Skip"
             }
           ) : null,
-          onNext ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          onNext ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
             "button",
             {
               type: "button",
@@ -2281,20 +2442,20 @@ function OnboardingPopover({
 }
 
 // src/components/CreditsIndicator.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function CreditsIndicator({
   remaining,
   label = "Credits Remaining",
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       className: `malix-credits-indicator${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-credits-indicator__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-credits-indicator__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           "svg",
           {
             width: "20",
@@ -2306,15 +2467,15 @@ function CreditsIndicator({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "malix-credits-indicator__info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-credits-indicator__label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-credits-indicator__value", children: remaining })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "malix-credits-indicator__info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-credits-indicator__label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-credits-indicator__value", children: remaining })
         ] })
       ]
     }
@@ -2322,7 +2483,7 @@ function CreditsIndicator({
 }
 
 // src/components/LanguageSelector.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function LanguageSelector({
   value,
   options,
@@ -2332,13 +2493,13 @@ function LanguageSelector({
 }) {
   const selectedOption = options?.find((opt) => opt.value === value);
   const displayLabel = selectedOption?.label ?? value;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       className: `malix-language-selector${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-language-selector__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-language-selector__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "svg",
           {
             width: "16",
@@ -2350,24 +2511,24 @@ function LanguageSelector({
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" })
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "select",
           {
             className: "malix-language-selector__select",
             value,
             onChange: (e) => onChange?.(e.target.value),
             "aria-label": "Select language",
-            children: options ? options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: opt.value, children: opt.label }, opt.value)) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value, children: displayLabel })
+            children: options ? options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value: opt.value, children: opt.label }, opt.value)) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("option", { value, children: displayLabel })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-language-selector__label", children: displayLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-language-selector__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-language-selector__label", children: displayLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-language-selector__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "svg",
           {
             width: "14",
@@ -2378,7 +2539,7 @@ function LanguageSelector({
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("polyline", { points: "6 9 12 15 18 9" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("polyline", { points: "6 9 12 15 18 9" })
           }
         ) })
       ]
@@ -2387,7 +2548,7 @@ function LanguageSelector({
 }
 
 // src/components/UserProfilePopover.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function UserProfilePopover({
   name,
   email,
@@ -2398,26 +2559,26 @@ function UserProfilePopover({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       className: `malix-user-profile${className ? ` ${className}` : ""}`,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "malix-user-profile__header", children: [
-          avatar ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__avatar", children: avatar }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "malix-user-profile__info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__name", children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__email", children: email })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "malix-user-profile__header", children: [
+          avatar ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__avatar", children: avatar }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "malix-user-profile__info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__name", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__email", children: email })
           ] })
         ] }),
-        credits !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "malix-user-profile__credits", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__credits-label", children: "Credits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__credits-value", children: credits })
+        credits !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "malix-user-profile__credits", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__credits-label", children: "Credits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__credits-value", children: credits })
         ] }) : null,
-        menuItems && menuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("hr", { className: "malix-user-profile__divider" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { className: "malix-user-profile__menu", role: "menu", children: menuItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        menuItems && menuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("nav", { className: "malix-user-profile__menu", role: "menu", children: menuItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
             "button",
             {
               type: "button",
@@ -2425,23 +2586,23 @@ function UserProfilePopover({
               role: "menuitem",
               onClick: item.onClick,
               children: [
-                item.icon ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__menu-item-icon", children: item.icon }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "malix-user-profile__menu-item-label", children: item.label })
+                item.icon ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__menu-item-icon", children: item.icon }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-user-profile__menu-item-label", children: item.label })
               ]
             },
             i
           )) })
         ] }) : null,
-        onLogout ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("hr", { className: "malix-user-profile__divider" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        onLogout ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
             "button",
             {
               type: "button",
               className: "malix-user-profile__logout",
               onClick: onLogout,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
                   "svg",
                   {
                     width: "16",
@@ -2453,13 +2614,13 @@ function UserProfilePopover({
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("polyline", { points: "16 17 21 12 16 7" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: "Log out" })
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: "Log out" })
               ]
             }
           )
@@ -2470,7 +2631,7 @@ function UserProfilePopover({
 }
 
 // src/components/ChatBubble.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ChatBubble({
   variant,
   message,
@@ -2479,22 +2640,22 @@ function ChatBubble({
   className
 }) {
   const content = children ?? message;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "div",
     {
       className: `malix-chat-bubble-row${className ? ` ${className}` : ""}`,
       "data-variant": variant,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-chat-bubble__text", children: content }) }),
-        variant === "user" && avatarInitials ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "malix-chat-bubble", "data-variant": variant, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "malix-chat-bubble__text", children: content }) }),
+        variant === "user" && avatarInitials ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "malix-chat-bubble__avatar", children: avatarInitials }) : null
       ]
     }
   );
 }
 
 // src/components/AIAssistantPanel.tsx
-var import_react14 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function AIAssistantPanel({
   title = "AI Assistant",
   messages,
@@ -2505,9 +2666,9 @@ function AIAssistantPanel({
   disabled,
   className
 }) {
-  const [draft, setDraft] = (0, import_react14.useState)("");
-  const bodyRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react16.useState)("");
+  const bodyRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (bodyRef.current) {
       bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
     }
@@ -2524,25 +2685,25 @@ function AIAssistantPanel({
       handleSend();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "malix-ai-panel__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "malix-ai-panel__title", children: title }),
-      onClose ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: `malix-ai-panel${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "malix-ai-panel__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "malix-ai-panel__logo", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "malix-ai-panel__title", children: title }),
+      onClose ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "button",
         {
           type: "button",
           className: "malix-ai-panel__close",
           onClick: onClose,
           "aria-label": "Close assistant",
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M18 6 6 18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "m6 6 12 12" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "m6 6 12 12" })
           ] })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "malix-ai-panel__body", ref: bodyRef, children: messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       ChatBubble,
       {
         variant: msg.variant,
@@ -2551,8 +2712,8 @@ function AIAssistantPanel({
       },
       msg.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "malix-ai-panel__input-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "malix-ai-panel__footer", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "malix-ai-panel__input-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "input",
         {
           type: "text",
@@ -2565,7 +2726,7 @@ function AIAssistantPanel({
           "aria-label": placeholder
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "button",
         {
           type: "button",
@@ -2573,9 +2734,9 @@ function AIAssistantPanel({
           onClick: handleSend,
           disabled: disabled || !draft.trim(),
           "aria-label": "Send message",
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M12 19V5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "m5 12 7-7 7 7" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M12 19V5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "m5 12 7-7 7 7" })
           ] })
         }
       )
@@ -2584,9 +2745,9 @@ function AIAssistantPanel({
 }
 
 // src/theme.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 var STORAGE_KEY = "malix-theme";
-var MalixThemeContext = (0, import_react15.createContext)(null);
+var MalixThemeContext = (0, import_react17.createContext)(null);
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -2609,8 +2770,8 @@ function applyTheme(resolved) {
   root.setAttribute("data-theme", resolved);
 }
 function MalixThemeProvider({ children, defaultTheme = "system" }) {
-  const [theme, setThemeState] = (0, import_react15.useState)(() => getStoredTheme() ?? defaultTheme);
-  const setTheme = (0, import_react15.useCallback)((next) => {
+  const [theme, setThemeState] = (0, import_react17.useState)(() => getStoredTheme() ?? defaultTheme);
+  const setTheme = (0, import_react17.useCallback)((next) => {
     setThemeState(next);
     try {
       localStorage.setItem(STORAGE_KEY, next);
@@ -2618,7 +2779,7 @@ function MalixThemeProvider({ children, defaultTheme = "system" }) {
     }
     applyTheme(resolveTheme(next));
   }, []);
-  const toggleTheme = (0, import_react15.useCallback)(() => {
+  const toggleTheme = (0, import_react17.useCallback)(() => {
     setThemeState((prev) => {
       const resolved = resolveTheme(prev);
       const next = resolved === "dark" ? "light" : "dark";
@@ -2630,26 +2791,51 @@ function MalixThemeProvider({ children, defaultTheme = "system" }) {
       return next;
     });
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     applyTheme(resolveTheme(theme));
   }, [theme]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (theme !== "system") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = () => applyTheme(getSystemTheme());
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, [theme]);
-  const value = (0, import_react15.useMemo)(() => ({ theme, setTheme, toggleTheme }), [theme, setTheme, toggleTheme]);
-  return (0, import_react15.createElement)(MalixThemeContext.Provider, { value }, children);
+  const value = (0, import_react17.useMemo)(() => ({ theme, setTheme, toggleTheme }), [theme, setTheme, toggleTheme]);
+  return (0, import_react17.createElement)(MalixThemeContext.Provider, { value }, children);
 }
 function useMalixTheme() {
-  const ctx = (0, import_react15.useContext)(MalixThemeContext);
+  const ctx = (0, import_react17.useContext)(MalixThemeContext);
   if (!ctx) {
     throw new Error("useMalixTheme must be used within a MalixThemeProvider");
   }
   return ctx;
 }
+
+// src/components/Icon.tsx
+var import_react18 = require("react");
+var SIZE_MAP = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24
+};
+function resolveSize(size) {
+  return typeof size === "number" ? size : SIZE_MAP[size];
+}
+var Icon = (0, import_react18.forwardRef)(function Icon2({ as: Component, size = "md", label, ...props }, ref) {
+  const pixelSize = resolveSize(size);
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true, focusable: false };
+  return (0, import_react18.createElement)(Component, {
+    ref,
+    width: pixelSize,
+    height: pixelSize,
+    color: "currentColor",
+    ...a11y,
+    ...props
+  });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIAssistantPanel,
@@ -2667,6 +2853,7 @@ function useMalixTheme() {
   CreditsIndicator,
   DataTable,
   DateInput,
+  Dialog,
   Divider,
   Dropzone,
   EmptyState,
@@ -2675,6 +2862,7 @@ function useMalixTheme() {
   FlyoutMenu,
   GlassPopover,
   Header,
+  Icon,
   Input,
   InputGroup,
   LanguageSelector,