@camtomlabs/malix-design-system 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -0,0 +1,2338 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  Banner: () => Banner,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  Card: () => Card,
+  ChatInput: () => ChatInput,
+  Checkbox: () => Checkbox,
+  CreditsIndicator: () => CreditsIndicator,
+  DataTable: () => DataTable,
+  DateInput: () => DateInput,
+  Divider: () => Divider,
+  Dropzone: () => Dropzone,
+  EmptyState: () => EmptyState,
+  FileCard: () => FileCard,
+  FilterTabs: () => FilterTabs,
+  FlyoutMenu: () => FlyoutMenu,
+  GlassPopover: () => GlassPopover,
+  Header: () => Header,
+  Input: () => Input,
+  InputGroup: () => InputGroup,
+  LanguageSelector: () => LanguageSelector,
+  Modal: () => Modal,
+  OnboardingPopover: () => OnboardingPopover,
+  OperationStatus: () => OperationStatus,
+  Overlay: () => Overlay,
+  Pagination: () => Pagination,
+  Pill: () => Pill,
+  PricingCard: () => PricingCard,
+  ProgressBar: () => ProgressBar,
+  Radio: () => Radio,
+  SearchInput: () => SearchInput,
+  SectionHeader: () => SectionHeader,
+  SegmentedControl: () => SegmentedControl,
+  Select: () => Select,
+  SelectGroup: () => SelectGroup,
+  SelectionCard: () => SelectionCard,
+  SidebarItem: () => SidebarItem,
+  SidebarPanel: () => SidebarPanel,
+  SplitPane: () => SplitPane,
+  StatCard: () => StatCard,
+  StatusDot: () => StatusDot,
+  Stepper: () => Stepper,
+  TabBar: () => TabBar,
+  Textarea: () => Textarea,
+  Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
+  UserProfilePopover: () => UserProfilePopover,
+  ValidationAlert: () => ValidationAlert,
+  tokenRegistry: () => tokens_registry_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/tokens.registry.json
+var tokens_registry_default = {
+  version: 1,
+  tokens: [
+    "--malix-background-main",
+    "--malix-surface",
+    "--malix-surface-secondary",
+    "--malix-surface-hover",
+    "--malix-foreground",
+    "--malix-foreground-secondary",
+    "--malix-foreground-tertiary",
+    "--malix-foreground-disabled",
+    "--malix-border",
+    "--malix-border-strong",
+    "--malix-border-focus",
+    "--malix-overlay",
+    "--malix-cta-primary-bg",
+    "--malix-primary-hover",
+    "--malix-primary-active",
+    "--malix-primary-foreground",
+    "--malix-primary-light",
+    "--malix-success",
+    "--malix-success-light",
+    "--malix-success-foreground",
+    "--malix-warning",
+    "--malix-warning-light",
+    "--malix-warning-foreground",
+    "--malix-error",
+    "--malix-error-light",
+    "--malix-error-foreground",
+    "--malix-info",
+    "--malix-info-light",
+    "--malix-info-foreground",
+    "--malix-glass-bg",
+    "--malix-glass-border",
+    "--malix-glass-blur",
+    "--malix-sidebar-bg",
+    "--malix-sidebar-hover-bg",
+    "--malix-sidebar-active-bg",
+    "--malix-space-xs",
+    "--malix-space-sm",
+    "--malix-space-md",
+    "--malix-space-lg",
+    "--malix-space-xl",
+    "--malix-space-2xl",
+    "--malix-space-3xl",
+    "--malix-radius-sm",
+    "--malix-radius-md",
+    "--malix-radius-lg",
+    "--malix-radius-xl",
+    "--malix-radius-pill",
+    "--malix-text-xs",
+    "--malix-text-sm",
+    "--malix-text-base",
+    "--malix-text-lg",
+    "--malix-text-xl",
+    "--malix-text-2xl",
+    "--malix-font-body",
+    "--malix-font-heading",
+    "--malix-weight-normal",
+    "--malix-weight-medium",
+    "--malix-weight-semibold",
+    "--malix-weight-bold",
+    "--malix-shadow-btn-primary",
+    "--malix-shadow-btn-secondary",
+    "--malix-shadow-input",
+    "--malix-shadow-depth",
+    "--malix-shadow-card-l1",
+    "--malix-shadow-card-l2",
+    "--malix-shadow-card-l3",
+    "--malix-shadow-overlay",
+    "--malix-shadow-tooltip",
+    "--malix-shadow-sidebar",
+    "--malix-shadow-header"
+  ]
+};
+
+// src/components/Divider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Divider({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "hr",
+    {
+      className: `malix-divider${className ? ` ${className}` : ""}`,
+      ...props
+    }
+  );
+}
+
+// src/components/Avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Avatar({ initials, size = 40, className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: `malix-avatar${className ? ` ${className}` : ""}`,
+      style: { width: size, height: size, borderRadius: size * 0.35, ...style },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "malix-avatar__text", children: initials })
+    }
+  );
+}
+
+// src/components/Pill.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Pill({ variant = "default", children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      className: `malix-pill${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Button({
+  hierarchy = "primary",
+  variant = "text",
+  icon,
+  badge,
+  loading = false,
+  disabled,
+  children,
+  label,
+  ...props
+}) {
+  const isDisabled = disabled || loading;
+  const isIconOnly = variant === "icon-only";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: "malix-button",
+      "data-hierarchy": hierarchy,
+      "data-variant": variant,
+      "data-loading": loading,
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      "aria-label": isIconOnly ? label : props["aria-label"],
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "malix-button__icon", children: icon }) : null,
+        !isIconOnly ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: loading ? "Loading..." : children }) : null,
+        variant === "icon-badge" && badge ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "malix-button__badge", children: badge }) : null,
+        isIconOnly && !icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: loading ? "..." : label }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Input({ leadingIcon, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "malix-input-wrap", children: [
+    leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "malix-button__icon", children: leadingIcon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { className: "malix-input", ...props })
+  ] });
+}
+function SearchInput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, { type: "search", placeholder: "Search", ...props });
+}
+
+// src/components/InputGroup.tsx
+var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function InputGroup({
+  label,
+  helperText,
+  leadingIcon,
+  error,
+  id,
+  className,
+  ...props
+}) {
+  const inputId = id || `input-${import_react.default.useId()}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `malix-input-group${className ? ` ${className}` : ""}`, "data-error": error || void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: inputId, className: "malix-input-group__label", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "malix-input-group__field", children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "malix-input-group__icon", children: leadingIcon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { id: inputId, className: "malix-input", ...props })
+    ] }),
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "malix-input-group__helper", children: helperText }) : null
+  ] });
+}
+
+// src/components/Tooltip.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Tooltip({ content, children, placement = "top" }) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const tooltipId = (0, import_react2.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "span",
+    {
+      className: "malix-tooltip-wrap",
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      children: [
+        import_react2.default.cloneElement(children, {
+          "aria-describedby": open ? tooltipId : void 0
+        }),
+        open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { role: "tooltip", id: tooltipId, className: "malix-tooltip", "data-placement": placement, children: content }) : null
+      ]
+    }
+  );
+}
+
+// src/components/SidebarItem.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SidebarItem({
+  icon,
+  active = false,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `malix-sidebar-item${className ? ` ${className}` : ""}`,
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "malix-sidebar-item__icon", children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "malix-sidebar-item__label", children })
+      ]
+    }
+  );
+}
+
+// src/components/FlyoutMenu.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function FlyoutMenu({ items, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "nav",
+    {
+      className: `malix-flyout-menu${className ? ` ${className}` : ""}`,
+      role: "menu",
+      ...props,
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "malix-flyout-menu__item",
+          "data-active": item.active || void 0,
+          role: "menuitem",
+          onClick: item.onClick,
+          children: [
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "malix-flyout-menu__icon", children: item.icon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "malix-flyout-menu__label", children: item.label })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/SidebarPanel.tsx
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SidebarPanel({
+  collapsed = false,
+  logo,
+  collapsedLogo,
+  navigation,
+  footer,
+  onToggleCollapse,
+  className,
+  ...props
+}) {
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "aside",
+    {
+      className: `malix-sidebar-panel${className ? ` ${className}` : ""}`,
+      "data-collapsed": collapsed || void 0,
+      onMouseEnter: collapsed ? () => setHovered(true) : void 0,
+      onMouseLeave: collapsed ? () => setHovered(false) : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "malix-sidebar-panel__top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "malix-sidebar-panel__brand", children: collapsed ? (
+            /* Collapsed: show isotype by default, toggle button on hover */
+            hovered && onToggleCollapse ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "malix-sidebar-panel__toggle",
+                onClick: onToggleCollapse,
+                "aria-label": "Expand sidebar",
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M9 3v18" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m14 9 3 3-3 3" })
+                ] })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "malix-sidebar-panel__collapsed-logo", children: collapsedLogo ?? logo })
+          ) : (
+            /* Expanded: logo + toggle button */
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+              logo,
+              onToggleCollapse ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "malix-sidebar-panel__toggle",
+                  onClick: onToggleCollapse,
+                  "aria-label": "Collapse sidebar",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M9 3v18" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m16 15-3-3 3-3" })
+                  ] })
+                }
+              ) : null
+            ] })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { className: "malix-sidebar-panel__nav", children: navigation })
+        ] }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "malix-sidebar-panel__bottom", children: footer }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Header.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Header({ pageTitle, actions, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "header",
+    {
+      className: `malix-header${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "malix-header__left", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: "malix-header__title", children: pageTitle }) }),
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "malix-header__right", children: actions }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Card.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Card({
+  level = 1,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      className: `malix-card${className ? ` ${className}` : ""}`,
+      "data-level": level,
+      ...props,
+      children: [
+        title || description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "malix-card__header", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "malix-card__title", children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "malix-card__desc", children: description }) : null
+        ] }) : null,
+        children ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "malix-card__body", children }) : null
+      ]
+    }
+  );
+}
+
+// src/components/StatCard.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ChangeIcon({ type }) {
+  const shared = { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  switch (type) {
+    case "positive":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "16 7 22 7 22 13" })
+      ] });
+    case "negative":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "16 17 22 17 22 11" })
+      ] });
+    case "neutral":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { ...shared, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+  }
+}
+function StatCard({
+  label,
+  value,
+  change,
+  changeType = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `malix-stat-card${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "malix-stat-card__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "malix-stat-card__value", children: value }),
+        change ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "malix-stat-card__change", "data-type": changeType, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "malix-stat-card__change-icon", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChangeIcon, { type: changeType }) }),
+          change
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/DateInput.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DateInput({
+  value,
+  placeholder = "dd/mm/yyyy",
+  onChange,
+  disabled,
+  className,
+  id,
+  ...props
+}) {
+  const inputId = id || `date-input-${import_react4.default.useId()}`;
+  const handleChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: `malix-date-input${className ? ` ${className}` : ""}`,
+      "data-filled": value ? true : void 0,
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
+          {
+            id: inputId,
+            type: "date",
+            className: "malix-date-input__native",
+            value,
+            onChange: handleChange,
+            disabled,
+            "aria-label": placeholder,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "malix-date-input__value", children: value || placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "malix-date-input__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M12.667 2.667H3.333C2.597 2.667 2 3.264 2 4v9.333c0 .737.597 1.334 1.333 1.334h9.334c.736 0 1.333-.597 1.333-1.334V4c0-.736-.597-1.333-1.333-1.333ZM10.667 1.333V4M5.333 1.333V4M2 6.667h12",
+            stroke: "currentColor",
+            strokeWidth: "1.33",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/FilterTabs.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function FilterTabs({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: `malix-filter-tabs${className ? ` ${className}` : ""}`,
+      role: "tablist",
+      ...props,
+      children: items.map((item) => {
+        const isActive = item.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            className: "malix-filter-tabs__tab",
+            "data-active": isActive || void 0,
+            "aria-selected": isActive,
+            onClick: () => onChange(item.value),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "malix-filter-tabs__tab-label", children: item.label }),
+              item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "malix-filter-tabs__tab-count", children: item.count }) : null
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/Breadcrumb.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DefaultSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Breadcrumb({ items, separator, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "nav",
+    {
+      className: `malix-breadcrumb${className ? ` ${className}` : ""}`,
+      "aria-label": "Breadcrumb",
+      ...props,
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const isActive = item.active ?? isLast;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react5.default.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "malix-breadcrumb__item", "data-active": isActive || void 0, children: [
+            item.icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "malix-breadcrumb__icon", children: item.icon }) : null,
+            isActive || !item.href ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "malix-breadcrumb__label", "aria-current": isActive ? "page" : void 0, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "malix-breadcrumb__label", href: item.href, children: item.label })
+          ] }),
+          !isLast ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "malix-breadcrumb__separator", "aria-hidden": "true", children: separator ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DefaultSeparator, {}) }) : null
+        ] }, index);
+      })
+    }
+  );
+}
+
+// src/components/ProgressBar.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ProgressBar({
+  value,
+  label,
+  showPercent = true,
+  variant = "default",
+  className,
+  ...props
+}) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: `malix-progress-bar${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      role: "progressbar",
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      ...props,
+      children: [
+        label || showPercent ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "malix-progress-bar__label-row", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "malix-progress-bar__label", children: label }) : null,
+          showPercent ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "malix-progress-bar__percent", children: [
+            clampedValue,
+            "%"
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "malix-progress-bar__track", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            className: "malix-progress-bar__fill",
+            style: { width: `${clampedValue}%` }
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/EmptyState.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DefaultIcon = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "path",
+    {
+      d: "M3 7V5C3 3.895 3.895 3 5 3H9L11 5H19C20.105 5 21 5.895 21 7V9",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "rect",
+    {
+      x: "2",
+      y: "9",
+      width: "20",
+      height: "12",
+      rx: "2",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "path",
+    {
+      d: "M9 15H15",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: `malix-empty-state${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "malix-empty-state__icon-wrap", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "malix-empty-state__title", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "malix-empty-state__description", children: description }) : null,
+        action ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "malix-empty-state__action", children: action }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Stepper.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Stepper({ steps, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `malix-stepper${className ? ` ${className}` : ""}`, children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react6.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "malix-stepper__step", "data-status": step.status, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "malix-stepper__step-icon", children: step.status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M11.5 3.5L5.5 10L2.5 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : step.icon ?? null }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "malix-stepper__step-label", children: step.label })
+    ] }),
+    index < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "malix-stepper__connector" }) : null
+  ] }, index)) });
+}
+
+// src/components/Textarea.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Textarea({
+  label,
+  helperText,
+  error,
+  errorMessage,
+  id,
+  className,
+  ...props
+}) {
+  const textareaId = id || `textarea-${import_react7.default.useId()}`;
+  const displayHelper = error && errorMessage ? errorMessage : helperText;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: `malix-textarea-group${className ? ` ${className}` : ""}`,
+      "data-error": error || void 0,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: textareaId, className: "malix-textarea-group__label", children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "textarea",
+          {
+            id: textareaId,
+            className: "malix-textarea-group__field",
+            "aria-invalid": error || void 0,
+            ...props
+          }
+        ),
+        displayHelper ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "malix-textarea-group__helper", children: displayHelper }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ChatInput.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ChatInput({
+  value,
+  onChange,
+  onSend,
+  placeholder = "Type a message...",
+  disabled,
+  className
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && value.trim()) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `malix-chat-input${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "input",
+      {
+        type: "text",
+        className: "malix-chat-input__field",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled,
+        "aria-label": placeholder
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "malix-chat-input__send-btn",
+        onClick: onSend,
+        disabled: disabled || !value.trim(),
+        "aria-label": "Send message",
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)("path", { d: "M12 19V5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "m5 12 7-7 7 7" })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/SectionHeader.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  description,
+  actions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: `malix-section-header${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "malix-section-header__left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "malix-section-header__title", children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "malix-section-header__description", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "malix-section-header__actions", children: actions }) : null
+      ]
+    }
+  );
+}
+
+// src/components/FileCard.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var DefaultFileIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("polyline", { points: "10 9 9 9 8 9" })
+    ]
+  }
+);
+var MoreVerticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "5", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "19", r: "1.5" })
+    ]
+  }
+);
+function FileCard({
+  fileName,
+  meta,
+  icon,
+  onAction,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: `malix-file-card${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "malix-file-card__icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "malix-file-card__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefaultFileIcon, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "malix-file-card__info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "malix-file-card__name", children: fileName }),
+          meta ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "malix-file-card__meta", children: meta }) : null
+        ] }),
+        onAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-file-card__action",
+            onClick: onAction,
+            "aria-label": "More actions",
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MoreVerticalIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/TabBar.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function TabBar({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: `malix-tab-bar${className ? ` ${className}` : ""}`,
+      role: "tablist",
+      ...props,
+      children: items.map((item) => {
+        const isActive = item.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            className: "malix-tab-bar__tab",
+            "data-active": isActive || void 0,
+            "aria-selected": isActive,
+            onClick: () => onChange(item.value),
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "malix-tab-bar__tab-label", children: item.label })
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/OperationStatus.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var DEFAULT_LABELS = {
+  active: "Active",
+  completed: "Completed",
+  failed: "Failed",
+  pending: "Pending"
+};
+function StatusIcon({ status }) {
+  const shared = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  switch (status) {
+    case "active":
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "7", cy: "7", r: "4" }) });
+    case "completed":
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m9 12 2 2 4-4" })
+      ] });
+    case "failed":
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m15 9-6 6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m9 9 6 6" })
+      ] });
+    case "pending":
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("polyline", { points: "12 6 12 12 16 14" })
+      ] });
+  }
+}
+function OperationStatus({
+  status,
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "span",
+    {
+      className: `malix-op-status${className ? ` ${className}` : ""}`,
+      "data-status": status,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "malix-op-status__icon", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StatusIcon, { status }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "malix-op-status__label", children: label ?? DEFAULT_LABELS[status] })
+      ]
+    }
+  );
+}
+
+// src/components/ValidationAlert.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function AlertIcon({ variant }) {
+  const shared = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  switch (variant) {
+    case "error":
+    case "warning":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ] });
+    case "info":
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { ...shared, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      ] });
+  }
+}
+function ValidationAlert({
+  title,
+  message,
+  onClose,
+  variant = "error",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      className: `malix-validation-alert${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "malix-validation-alert__icon", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AlertIcon, { variant }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "malix-validation-alert__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "malix-validation-alert__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "malix-validation-alert__message", children: message })
+        ] }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-validation-alert__close",
+            onClick: onClose,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/SelectionCard.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function SelectionCard({
+  title,
+  description,
+  icon,
+  active = false,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: `malix-selection-card${className ? ` ${className}` : ""}`,
+      "data-active": active || void 0,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "malix-selection-card__icon-wrap", children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "malix-selection-card__title", children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "malix-selection-card__description", children: description }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Overlay.tsx
+var import_react8 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function Overlay({ open, title, onClose, children }) {
+  const panelRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!open || !panelRef.current) return;
+    const panel = panelRef.current;
+    const focusables = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR));
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    first?.focus();
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+      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, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "malix-overlay-backdrop", onMouseDown: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "div",
+    {
+      ref: panelRef,
+      className: "malix-overlay-panel",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      onMouseDown: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "malix-overlay-title", children: title }),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: "malix-button malix-overlay-close", "data-hierarchy": "secondary", onClick: onClose, children: "Close" })
+      ]
+    }
+  ) });
+}
+
+// src/components/Modal.tsx
+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({
+  open,
+  title,
+  onClose,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  children
+}) {
+  const panelRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!open || !panelRef.current) 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") {
+        event.preventDefault();
+        onClose();
+      }
+      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, onClose]);
+  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)(
+    "div",
+    {
+      ref: panelRef,
+      className: "malix-modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      onMouseDown: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "malix-modal__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "malix-modal__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "button",
+            {
+              type: "button",
+              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" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "malix-modal__body", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "malix-modal__footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "malix-button",
+              "data-hierarchy": "secondary",
+              onClick: onClose,
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: cancelLabel })
+            }
+          ),
+          onConfirm ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "malix-button",
+              "data-hierarchy": "primary",
+              onClick: onConfirm,
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: confirmLabel })
+            }
+          ) : null
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/GlassPopover.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function GlassPopover({
+  title,
+  onClose,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      className: `malix-glass-popover${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        title || onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "malix-glass-popover__header", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "malix-glass-popover__title", children: title }) : null,
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "malix-glass-popover__close",
+              onClick: onClose,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime30.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "malix-glass-popover__body", children })
+      ]
+    }
+  );
+}
+
+// src/components/Accordion.tsx
+var import_react10 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Accordion({
+  title,
+  children,
+  defaultOpen = false,
+  icon,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = (0, import_react10.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "div",
+    {
+      className: `malix-accordion${className ? ` ${className}` : ""}`,
+      "data-open": open,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "malix-accordion__header",
+            onClick: () => setOpen((prev) => !prev),
+            "aria-expanded": open,
+            children: [
+              icon ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "malix-accordion__icon", children: icon }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "malix-accordion__title", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "svg",
+                {
+                  className: "malix-accordion__chevron",
+                  width: "16",
+                  height: "16",
+                  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)("polyline", { points: "6 9 12 15 18 9" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "malix-accordion__body", children })
+      ]
+    }
+  );
+}
+
+// src/components/Badge.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function Badge({
+  variant = "default",
+  dot = false,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "span",
+    {
+      className: `malix-badge${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      ...props,
+      children: [
+        dot ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "malix-badge__dot" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "malix-badge__label", children })
+      ]
+    }
+  );
+}
+
+// src/components/Banner.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var defaultIcons = {
+  info: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.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_runtime33.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] })
+};
+function Banner({
+  variant = "info",
+  onClose,
+  icon,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      className: `malix-banner${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      role: "alert",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-banner__icon", children: icon ?? defaultIcons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "malix-banner__content", children }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-banner__close",
+            onClick: onClose,
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Checkbox({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  indeterminate = false,
+  className,
+  ...props
+}) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+  const checkbox = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "checkbox",
+      className: `malix-checkbox${className ? ` ${className}` : ""}`,
+      "data-checked": checked,
+      "data-disabled": disabled,
+      "data-indeterminate": indeterminate,
+      "aria-checked": indeterminate ? "mixed" : checked,
+      disabled,
+      onClick: handleClick,
+      ...props,
+      children: [
+        checked && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "svg",
+          {
+            className: "malix-checkbox__icon",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "path",
+              {
+                d: "M2 6l3 3 5-5",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ) : null,
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          "svg",
+          {
+            className: "malix-checkbox__icon",
+            viewBox: "0 0 12 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "path",
+              {
+                d: "M2 6h8",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "malix-checkbox-row", children: [
+      checkbox,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "malix-checkbox-row__label", children: label })
+    ] });
+  }
+  return checkbox;
+}
+
+// src/components/Radio.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Radio({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  name,
+  value,
+  className,
+  ...props
+}) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(value);
+    }
+  };
+  const radio = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      className: `malix-radio${className ? ` ${className}` : ""}`,
+      "data-checked": checked,
+      "data-disabled": disabled,
+      "aria-checked": checked,
+      disabled,
+      "data-name": name,
+      "data-value": value,
+      onClick: handleClick,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "malix-radio__dot" })
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "malix-radio-row", children: [
+      radio,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "malix-radio-row__label", children: label })
+    ] });
+  }
+  return radio;
+}
+
+// src/components/Toggle.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  className,
+  ...props
+}) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+  const toggle = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      className: `malix-toggle${className ? ` ${className}` : ""}`,
+      "data-checked": checked,
+      "data-disabled": disabled,
+      "aria-checked": checked,
+      disabled,
+      onClick: handleClick,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "malix-toggle__knob" })
+    }
+  );
+  if (label) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "malix-toggle-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "malix-toggle-row__label", children: label }),
+      toggle
+    ] });
+  }
+  return toggle;
+}
+
+// src/components/Select.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function Select({
+  value,
+  placeholder,
+  options = [],
+  onChange,
+  disabled,
+  filled,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      className: `malix-select${className ? ` ${className}` : ""}`,
+      "data-filled": filled || void 0,
+      "data-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          "select",
+          {
+            className: "malix-select__native",
+            value,
+            disabled,
+            onChange: (e) => onChange?.(e.target.value),
+            ...props,
+            children: [
+              placeholder ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: "", disabled: true, children: placeholder }) : null,
+              options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "malix-select__icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "path",
+          {
+            d: "M4 6L8 10L12 6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/SelectGroup.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function SelectGroup({
+  label,
+  helperText,
+  error,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "div",
+    {
+      className: `malix-select-group${className ? ` ${className}` : ""}`,
+      "data-error": error || void 0,
+      ...props,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "malix-select-group__label", children: label }) : null,
+        children,
+        helperText ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "malix-select-group__helper", children: helperText }) : null
+      ]
+    }
+  );
+}
+
+// src/components/SegmentedControl.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function SegmentedControl({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      className: `malix-segmented-control${className ? ` ${className}` : ""}`,
+      role: "radiogroup",
+      ...props,
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "malix-segmented-control__item",
+          role: "radio",
+          "aria-checked": item.value === value,
+          "data-active": item.value === value || void 0,
+          onClick: () => onChange(item.value),
+          children: item.label
+        },
+        item.value
+      ))
+    }
+  );
+}
+
+// src/components/DataTable.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function DataTable({
+  columns,
+  data,
+  onRowClick,
+  emptyMessage,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "table",
+    {
+      className: `malix-data-table${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { className: "malix-data-table__header-row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "th",
+          {
+            className: "malix-data-table__header-cell",
+            style: col.width ? { width: col.width } : void 0,
+            children: col.header
+          },
+          col.key
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { className: "malix-data-table__body", children: data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.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_runtime40.jsx)("tr", { className: "malix-data-table__data-row", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          "td",
+          {
+            className: "malix-data-table__cell",
+            colSpan: columns.length,
+            children: emptyMessage || "No data available"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/components/Pagination.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ChevronLeft() {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  variant = "full",
+  className
+}) {
+  const isFirstPage = currentPage <= 1;
+  const isLastPage = currentPage >= totalPages;
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "nav",
+    {
+      className: `malix-pagination${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      "aria-label": "Pagination",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-pagination__arrow",
+            "data-disabled": isFirstPage || void 0,
+            disabled: isFirstPage,
+            onClick: () => onPageChange(currentPage - 1),
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronLeft, {})
+          }
+        ),
+        variant === "full" ? pages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-pagination__item",
+            "data-active": page === currentPage || void 0,
+            "aria-current": page === currentPage ? "page" : void 0,
+            onClick: () => onPageChange(page),
+            children: page
+          },
+          page
+        )) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "malix-pagination__label", children: [
+          currentPage,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-pagination__arrow",
+            "data-disabled": isLastPage || void 0,
+            disabled: isLastPage,
+            onClick: () => onPageChange(currentPage + 1),
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronRight, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/StatusDot.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function StatusDot({
+  variant = "default",
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "span",
+    {
+      className: `malix-status-dot${className ? ` ${className}` : ""}`,
+      "data-variant": variant,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "malix-status-dot__dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "malix-status-dot__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/Dropzone.tsx
+var import_react11 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function Dropzone({
+  onDrop,
+  accept,
+  title = "Drop files here",
+  hint = "or click to browse",
+  disabled = false,
+  className,
+  ...props
+}) {
+  const [dragging, setDragging] = (0, import_react11.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
+  function handleDragOver(event) {
+    event.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+  function handleDragLeave(event) {
+    event.preventDefault();
+    setDragging(false);
+  }
+  function handleDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    const files = Array.from(event.dataTransfer.files);
+    onDrop?.(files);
+  }
+  function handleInputChange(event) {
+    const files = event.target.files ? Array.from(event.target.files) : [];
+    if (files.length > 0) onDrop?.(files);
+    event.target.value = "";
+  }
+  function handleClick() {
+    if (!disabled) inputRef.current?.click();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      className: `malix-dropzone${className ? ` ${className}` : ""}`,
+      "data-dragging": dragging,
+      "data-disabled": disabled,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: handleClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            onChange: handleInputChange,
+            hidden: true,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "svg",
+          {
+            className: "malix-dropzone__icon",
+            width: "32",
+            height: "32",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)("path", { d: "M12 12v9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { d: "m16 16-4-4-4 4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "malix-dropzone__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "malix-dropzone__hint", children: hint }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "malix-dropzone__browse-btn", children: "Browse files" })
+      ]
+    }
+  );
+}
+
+// src/components/SplitPane.tsx
+var import_react12 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function SplitPane({
+  leftPanel,
+  rightPanel,
+  leftTitle,
+  rightTitle,
+  defaultSplit = 50,
+  className,
+  ...props
+}) {
+  const [split, setSplit] = (0, import_react12.useState)(defaultSplit);
+  const containerRef = (0, import_react12.useRef)(null);
+  const dragging = (0, import_react12.useRef)(false);
+  const onMouseDown = (0, import_react12.useCallback)((e) => {
+    e.preventDefault();
+    dragging.current = true;
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    function onMouseMove(e) {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const pct = Math.min(Math.max(x / rect.width * 100, 5), 95);
+      setSplit(pct);
+    }
+    function onMouseUp() {
+      dragging.current = false;
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `malix-split-pane${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "malix-split-pane__left", style: { width: `${split}%` }, children: [
+          leftTitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-split-pane__panel-title", children: leftTitle }) : null,
+          leftPanel
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          "div",
+          {
+            className: "malix-split-pane__handle",
+            role: "separator",
+            "aria-valuenow": Math.round(split),
+            "aria-valuemin": 5,
+            "aria-valuemax": 95,
+            "aria-label": "Resize panels",
+            onMouseDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-split-pane__handle-dot", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "malix-split-pane__right", style: { width: `${100 - split}%` }, children: [
+          rightTitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "malix-split-pane__panel-title", children: rightTitle }) : null,
+          rightPanel
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/PricingCard.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function PricingCard({
+  planName,
+  price,
+  period = "/month",
+  description,
+  features,
+  ctaLabel = "Get Started",
+  onCtaClick,
+  highlighted = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: `malix-pricing-card${className ? ` ${className}` : ""}`,
+      "data-highlighted": highlighted || void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-pricing-card__badge", children: planName }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "malix-pricing-card__price-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-pricing-card__price", children: price }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "malix-pricing-card__period", children: period })
+        ] }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "malix-pricing-card__description", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ul", { className: "malix-pricing-card__features", children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "malix-pricing-card__feature-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            "svg",
+            {
+              className: "malix-pricing-card__check-icon",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("polyline", { points: "20 6 9 17 4 12" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: feature })
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "malix-pricing-card__cta",
+            onClick: onCtaClick,
+            children: ctaLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/OnboardingPopover.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function OnboardingPopover({
+  step,
+  totalSteps,
+  title,
+  description,
+  onNext,
+  onSkip,
+  nextLabel = "Next",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
+    {
+      className: `malix-onboarding-popover${className ? ` ${className}` : ""}`,
+      role: "dialog",
+      "aria-label": `Step ${step} of ${totalSteps}: ${title}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "malix-onboarding-popover__step", children: [
+          "Step ",
+          step,
+          " of ",
+          totalSteps
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("h3", { className: "malix-onboarding-popover__title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "malix-onboarding-popover__description", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "malix-onboarding-popover__actions", children: [
+          onSkip ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "malix-onboarding-popover__skip",
+              onClick: onSkip,
+              children: "Skip"
+            }
+          ) : null,
+          onNext ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "malix-onboarding-popover__next-btn",
+              onClick: onNext,
+              children: nextLabel
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/CreditsIndicator.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function CreditsIndicator({
+  remaining,
+  label = "Credits Remaining",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    "div",
+    {
+      className: `malix-credits-indicator${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-credits-indicator__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "malix-credits-indicator__info", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-credits-indicator__label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "malix-credits-indicator__value", children: remaining })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/LanguageSelector.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function LanguageSelector({
+  value,
+  options,
+  onChange,
+  className,
+  ...props
+}) {
+  const selectedOption = options?.find((opt) => opt.value === value);
+  const displayLabel = selectedOption?.label ?? value;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "div",
+    {
+      className: `malix-language-selector${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-language-selector__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)("option", { value: opt.value, children: opt.label }, opt.value)) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value, children: displayLabel })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-language-selector__label", children: displayLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "malix-language-selector__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "6 9 12 15 18 9" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/UserProfilePopover.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function UserProfilePopover({
+  name,
+  email,
+  avatar,
+  menuItems,
+  onLogout,
+  credits,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "div",
+    {
+      className: `malix-user-profile${className ? ` ${className}` : ""}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "malix-user-profile__header", children: [
+          avatar ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__avatar", children: avatar }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "malix-user-profile__info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__name", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__email", children: email })
+          ] })
+        ] }),
+        credits !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "malix-user-profile__credits", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__credits-label", children: "Credits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__credits-value", children: credits })
+        ] }) : null,
+        menuItems && menuItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("nav", { className: "malix-user-profile__menu", role: "menu", children: menuItems.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "malix-user-profile__menu-item",
+              role: "menuitem",
+              onClick: item.onClick,
+              children: [
+                item.icon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__menu-item-icon", children: item.icon }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "malix-user-profile__menu-item-label", children: item.label })
+              ]
+            },
+            i
+          )) })
+        ] }) : null,
+        onLogout ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("hr", { className: "malix-user-profile__divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "malix-user-profile__logout",
+              onClick: onLogout,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: "Log out" })
+              ]
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  Avatar,
+  Badge,
+  Banner,
+  Breadcrumb,
+  Button,
+  Card,
+  ChatInput,
+  Checkbox,
+  CreditsIndicator,
+  DataTable,
+  DateInput,
+  Divider,
+  Dropzone,
+  EmptyState,
+  FileCard,
+  FilterTabs,
+  FlyoutMenu,
+  GlassPopover,
+  Header,
+  Input,
+  InputGroup,
+  LanguageSelector,
+  Modal,
+  OnboardingPopover,
+  OperationStatus,
+  Overlay,
+  Pagination,
+  Pill,
+  PricingCard,
+  ProgressBar,
+  Radio,
+  SearchInput,
+  SectionHeader,
+  SegmentedControl,
+  Select,
+  SelectGroup,
+  SelectionCard,
+  SidebarItem,
+  SidebarPanel,
+  SplitPane,
+  StatCard,
+  StatusDot,
+  Stepper,
+  TabBar,
+  Textarea,
+  Toggle,
+  Tooltip,
+  UserProfilePopover,
+  ValidationAlert,
+  tokenRegistry
+});