@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/ui/index.cjs

@@ -1,4870 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var tailwindMerge = require('tailwind-merge');
-var Link = require('next/link');
-var reactDom = require('react-dom');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var Link__default = /*#__PURE__*/_interopDefault(Link);
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var Section = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("section", __spreadProps(__spreadValues({ className, ref }, props), { children }));
-  }
-);
-Section.displayName = "Section";
-function Article(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("article", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function Main(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("main", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-var Aside = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("aside", __spreadProps(__spreadValues({ className, ref }, props), { children }));
-  }
-);
-Aside.displayName = "Aside";
-function Nav(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function BlockHeader(_a) {
-  var _b = _a, {
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("header", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function BlockFooter(_a) {
-  var _b = _a, {
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function Ul(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function Ol(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-function Li(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-var Header = BlockHeader;
-var Footer = BlockFooter;
-var Div = React__default.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-    return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className }, props), { children }));
-  }
-);
-Div.displayName = "Div";
-var UI_THEME = {
-  typography: {
-    h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
-    h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
-    h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
-    h4: "text-lg md:text-xl lg:text-2xl font-bold font-display",
-    h5: "text-base md:text-lg lg:text-xl font-medium",
-    h6: "text-sm md:text-base lg:text-lg font-medium",
-    body: "text-base lg:text-lg",
-    small: "text-sm lg:text-base",
-    xs: "text-xs lg:text-sm"
-  },
-  themed: {
-    textPrimary: "text-zinc-900 dark:text-zinc-50",
-    textSecondary: "text-zinc-500 dark:text-zinc-400",
-    textMuted: "text-zinc-400 dark:text-zinc-500",
-    textError: "text-red-600 dark:text-red-400",
-    textSuccess: "text-emerald-600 dark:text-emerald-400"
-  },
-  colors: {
-    form: {
-      required: "text-red-500"
-    }
-  }
-};
-function Heading(_a) {
-  var _b = _a, {
-    level = 1,
-    variant = "primary",
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "level",
-    "variant",
-    "className",
-    "children"
-  ]);
-  const Tag = `h${level}`;
-  const { typography, themed } = UI_THEME;
-  const sizeClasses = {
-    1: typography.h1,
-    2: typography.h2,
-    3: typography.h3,
-    4: typography.h4,
-    5: typography.h5,
-    6: typography.h6
-  };
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    none: ""
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    __spreadProps(__spreadValues({
-      className: `${sizeClasses[level]} ${variantClasses[variant]} ${className}`
-    }, props), {
-      children
-    })
-  );
-}
-function Text(_a) {
-  var _b = _a, {
-    variant = "primary",
-    size = "base",
-    weight = "normal",
-    className = "",
-    as: Tag = "p",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "weight",
-    "className",
-    "as",
-    "children"
-  ]);
-  const { typography, themed } = UI_THEME;
-  const sizeClasses = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const variantClasses = {
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    none: ""
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    __spreadProps(__spreadValues({
-      className: `${sizeClasses[size]} ${weightClasses[weight]} ${variantClasses[variant]} ${className}`
-    }, props), {
-      children
-    })
-  );
-}
-function Label(_a) {
-  var _b = _a, {
-    required,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "required",
-    "className",
-    "children"
-  ]);
-  const { themed, typography, colors } = UI_THEME;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    __spreadProps(__spreadValues({
-      className: `block ${typography.small} font-medium ${themed.textSecondary} mb-1.5 ${className}`
-    }, props), {
-      children: [
-        children,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${colors.form.required} ml-1`, children: "*" })
-      ]
-    })
-  );
-}
-function Caption(_a) {
-  var _b = _a, {
-    variant = "default",
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "className",
-    "children"
-  ]);
-  const { themed, typography } = UI_THEME;
-  const variantClasses = {
-    default: themed.textMuted,
-    accent: "text-primary font-semibold",
-    inverse: "text-primary/40"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    __spreadProps(__spreadValues({
-      className: `${typography.xs} ${variantClasses[variant]} ${className}`
-    }, props), {
-      children
-    })
-  );
-}
-function Span(_a) {
-  var _b = _a, {
-    variant = "inherit",
-    size,
-    weight,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "weight",
-    "className",
-    "children"
-  ]);
-  const { themed, typography } = UI_THEME;
-  const variantClasses = {
-    inherit: "",
-    primary: themed.textPrimary,
-    secondary: themed.textSecondary,
-    muted: themed.textMuted,
-    error: themed.textError,
-    success: themed.textSuccess,
-    accent: "text-primary"
-  };
-  const sizeClasses = {
-    xs: typography.xs,
-    sm: typography.small,
-    base: typography.body,
-    lg: "text-lg",
-    xl: "text-xl"
-  };
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold"
-  };
-  const classes = [
-    size ? sizeClasses[size] : "",
-    weight ? weightClasses[weight] : "",
-    variantClasses[variant],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({ className: classes }, props), { children }));
-}
-function Spinner({
-  size = "md",
-  variant = "primary",
-  className = "",
-  label = "Loading..."
-}) {
-  const sizeClasses = {
-    sm: "w-4 h-4 border-2",
-    md: "w-8 h-8 border-2",
-    lg: "w-12 h-12 border-[3px]",
-    xl: "w-16 h-16 border-4"
-  };
-  const variantClasses = {
-    primary: "border-primary-600 border-t-transparent dark:border-secondary-500 dark:border-t-transparent",
-    white: "border-white border-t-transparent",
-    current: "border-current border-t-transparent"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `inline-flex items-center gap-3 ${className}`,
-      role: "status",
-      "aria-label": label,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `${sizeClasses[size]} ${variantClasses[variant]} rounded-full animate-spin force-spin`
-          }
-        ),
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
-      ]
-    }
-  );
-}
-var BG_TERTIARY = "bg-zinc-100 dark:bg-slate-800";
-var WAVE_CSS = `
-@keyframes appkit-skeleton-wave {
-  0% { transform: translateX(-100%); }
-  50%, 100% { transform: translateX(100%); }
-}
-.appkit-skeleton-wave {
-  position: relative;
-  overflow: hidden;
-}
-.appkit-skeleton-wave::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
-  animation: appkit-skeleton-wave 1.5s infinite;
-}
-`;
-function Skeleton({
-  variant = "text",
-  width,
-  height,
-  className = "",
-  animation = "pulse"
-}) {
-  const variantClass = variant === "circular" ? "rounded-full" : "rounded";
-  const defaultSize = {
-    circular: { width: "40px", height: "40px" },
-    rectangular: { width: "100%", height: "140px" },
-    text: { width: "100%", height: "1em" }
-  }[variant];
-  const animationClass = {
-    pulse: "animate-pulse",
-    wave: "appkit-skeleton-wave",
-    none: ""
-  }[animation];
-  const style = {
-    width: width != null ? width : defaultSize.width,
-    height: height != null ? height : defaultSize.height
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animation === "wave" && /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: WAVE_CSS } }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${BG_TERTIARY} ${variantClass} ${animationClass} ${className}`,
-        style,
-        role: "status",
-        "aria-label": "Loading",
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
-      }
-    )
-  ] });
-}
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
-var mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
-var toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
-var toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-
-// node_modules/lucide-react/dist/esm/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-// node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
-var hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-  return false;
-};
-var LucideContext = React.createContext({});
-var useLucideContext = () => React.useContext(LucideContext);
-
-// node_modules/lucide-react/dist/esm/Icon.js
-var Icon = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode } = _b, rest = __objRest(_b, ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children", "iconNode"]);
-    var _a2, _b2, _c;
-    const {
-      size: contextSize = 24,
-      strokeWidth: contextStrokeWidth = 2,
-      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
-      color: contextColor = "currentColor",
-      className: contextClass = ""
-    } = (_a2 = useLucideContext()) != null ? _a2 : {};
-    const calculatedStrokeWidth = (absoluteStrokeWidth != null ? absoluteStrokeWidth : contextAbsoluteStrokeWidth) ? Number(strokeWidth != null ? strokeWidth : contextStrokeWidth) * 24 / Number(size != null ? size : contextSize) : strokeWidth != null ? strokeWidth : contextStrokeWidth;
-    return React.createElement(
-      "svg",
-      __spreadValues(__spreadValues(__spreadProps(__spreadValues({
-        ref
-      }, defaultAttributes), {
-        width: (_b2 = size != null ? size : contextSize) != null ? _b2 : defaultAttributes.width,
-        height: (_c = size != null ? size : contextSize) != null ? _c : defaultAttributes.height,
-        stroke: color != null ? color : contextColor,
-        strokeWidth: calculatedStrokeWidth,
-        className: mergeClasses("lucide", contextClass, className)
-      }), !children && !hasA11yProp(rest) && { "aria-hidden": "true" }), rest),
-      [
-        ...iconNode.map(([tag, attrs]) => React.createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-// node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = React.forwardRef(
-    (_a, ref) => {
-      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-      return React.createElement(Icon, __spreadValues({
-        ref,
-        iconNode,
-        className: mergeClasses(
-          `lucide-${toKebabCase(toPascalCase(iconName))}`,
-          `lucide-${iconName}`,
-          className
-        )
-      }, props));
-    }
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-
-// node_modules/lucide-react/dist/esm/icons/check.js
-var __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-var Check = createLucideIcon("check", __iconNode);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-down.js
-var __iconNode2 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-var ChevronDown = createLucideIcon("chevron-down", __iconNode2);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-left.js
-var __iconNode3 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-var ChevronLeft = createLucideIcon("chevron-left", __iconNode3);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-right.js
-var __iconNode4 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-var ChevronRight = createLucideIcon("chevron-right", __iconNode4);
-
-// node_modules/lucide-react/dist/esm/icons/chevron-up.js
-var __iconNode5 = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-var ChevronUp = createLucideIcon("chevron-up", __iconNode5);
-
-// node_modules/lucide-react/dist/esm/icons/loader-circle.js
-var __iconNode6 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-var LoaderCircle = createLucideIcon("loader-circle", __iconNode6);
-
-// node_modules/lucide-react/dist/esm/icons/star.js
-var __iconNode7 = [
-  [
-    "path",
-    {
-      d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
-      key: "r04s7s"
-    }
-  ]
-];
-var Star = createLucideIcon("star", __iconNode7);
-
-// node_modules/lucide-react/dist/esm/icons/x.js
-var __iconNode8 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-var X = createLucideIcon("x", __iconNode8);
-
-// node_modules/lucide-react/dist/esm/icons/zoom-in.js
-var __iconNode9 = [
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
-  ["line", { x1: "21", x2: "16.65", y1: "21", y2: "16.65", key: "13gj7c" }],
-  ["line", { x1: "11", x2: "11", y1: "8", y2: "14", key: "1vmskp" }],
-  ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
-];
-var ZoomIn = createLucideIcon("zoom-in", __iconNode9);
-var UI_BUTTON = {
-  base: "inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
-  active: "active:scale-95",
-  variants: {
-    primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm focus:ring-primary-500/30 dark:bg-secondary-500 dark:text-white dark:hover:bg-secondary-400 dark:active:bg-secondary-600 dark:focus:ring-secondary-400/30",
-    secondary: "bg-primary-700 text-white hover:bg-primary-600 active:bg-primary-800 shadow-md focus:ring-primary-500 dark:bg-secondary-700 dark:text-white dark:hover:bg-secondary-600 dark:active:bg-secondary-800 dark:focus:ring-secondary-500",
-    outline: "border border-zinc-200 dark:border-slate-700 bg-white dark:bg-transparent text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800 focus:ring-zinc-400",
-    ghost: "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 focus:ring-zinc-400",
-    danger: "bg-red-600 text-white hover:bg-red-500 active:bg-red-700 shadow-sm shadow-red-600/10 focus:ring-red-500",
-    warning: "bg-amber-500 text-white hover:bg-amber-400 active:bg-amber-600 shadow-sm shadow-amber-500/10 focus:ring-amber-500"
-  },
-  sizes: {
-    sm: "px-2.5 py-1.5 text-xs sm:px-3 sm:text-sm gap-1.5 min-h-[36px]",
-    md: "px-3 py-2 text-sm sm:px-4 sm:py-2.5 sm:text-base gap-2 min-h-[44px]",
-    lg: "px-4 py-2.5 text-base sm:px-6 sm:py-3 sm:text-lg gap-2.5 min-h-[44px]"
-  }
-};
-function Button(_a) {
-  var _b = _a, {
-    variant = "primary",
-    size = "md",
-    className = "",
-    isLoading = false,
-    disabled,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "className",
-    "isLoading",
-    "disabled",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      className: tailwindMerge.twMerge(
-        UI_BUTTON.base,
-        UI_BUTTON.active,
-        UI_BUTTON.variants[variant],
-        UI_BUTTON.sizes[size],
-        className
-      ),
-      disabled: disabled || isLoading,
-      "aria-busy": isLoading || void 0
-    }, props), {
-      children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-          LoaderCircle,
-          {
-            className: "w-4 h-4 animate-spin flex-shrink-0",
-            "aria-hidden": "true"
-          }
-        ),
-        isLoading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children }) : children
-      ]
-    })
-  );
-}
-var BASE = "inline-flex items-center justify-center flex-shrink-0 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
-var SIZES = {
-  sm: "h-8 w-8 rounded-lg",
-  md: "h-10 w-10 rounded-xl",
-  lg: "h-12 w-12 rounded-xl"
-};
-var VARIANTS = {
-  ghost: "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800 focus:ring-zinc-400",
-  outline: "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-transparent text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:ring-zinc-400",
-  primary: "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 dark:bg-secondary-500 dark:hover:bg-secondary-400",
-  danger: "text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 focus:ring-red-500"
-};
-function IconButton(_a) {
-  var _b = _a, {
-    size = "md",
-    variant = "ghost",
-    className = "",
-    icon,
-    children
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "className",
-    "icon",
-    "children"
-  ]);
-  if (process.env.NODE_ENV !== "production" && !props["aria-label"]) {
-    throw new Error(
-      '[IconButton] Missing required "aria-label" prop. Add aria-label="..." to the button or wrap with <Tooltip label="...">.'
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: tailwindMerge.twMerge(BASE, SIZES[size], VARIANTS[variant], className)
-    }, props), {
-      children: icon != null ? icon : children
-    })
-  );
-}
-var VARIANTS2 = {
-  default: "text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors",
-  muted: "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors",
-  underline: "text-primary-600 dark:text-primary-400 underline hover:no-underline transition-all",
-  none: ""
-};
-function TextLink(_a) {
-  var _b = _a, {
-    href,
-    children,
-    variant = "default",
-    external = false,
-    className = ""
-  } = _b, props = __objRest(_b, [
-    "href",
-    "children",
-    "variant",
-    "external",
-    "className"
-  ]);
-  const cls = tailwindMerge.twMerge(VARIANTS2[variant], className);
-  if (external) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      __spreadProps(__spreadValues({
-        href,
-        className: cls,
-        target: "_blank",
-        rel: "noopener noreferrer"
-      }, props), {
-        children
-      })
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, __spreadProps(__spreadValues({ href, className: cls }, props), { children }));
-}
-var TOOLTIP_CONTENT = "absolute z-50 whitespace-nowrap px-2 py-1 text-xs font-medium rounded bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 shadow-sm pointer-events-none";
-var POSITION = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2"
-};
-function Tooltip({
-  label,
-  children,
-  side = "top",
-  delay = 400,
-  mobileSheet = true,
-  longPressDelay = 500
-}) {
-  var _a;
-  const [visible, setVisible] = React.useState(false);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const timeoutRef = React.useRef(null);
-  const longPressRef = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
-      if (longPressRef.current !== null) clearTimeout(longPressRef.current);
-    };
-  }, []);
-  const showTooltip = () => {
-    timeoutRef.current = setTimeout(() => setVisible(true), delay);
-  };
-  const hideTooltip = () => {
-    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);
-    setVisible(false);
-  };
-  const handleTouchStart = React.useCallback(() => {
-    if (!mobileSheet) return;
-    longPressRef.current = setTimeout(() => {
-      setMobileOpen(true);
-    }, longPressDelay);
-  }, [mobileSheet, longPressDelay]);
-  const handleTouchEnd = React.useCallback(() => {
-    if (longPressRef.current !== null) {
-      clearTimeout(longPressRef.current);
-      longPressRef.current = null;
-    }
-  }, []);
-  React.useEffect(() => {
-    if (!mobileOpen) return;
-    const handler = (e) => {
-      if (e.key === "Escape") setMobileOpen(false);
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [mobileOpen]);
-  const existingProps = children.props;
-  const child = React__default.default.cloneElement(
-    children,
-    {
-      "aria-label": (_a = existingProps["aria-label"]) != null ? _a : label,
-      onMouseEnter: (e) => {
-        if (typeof existingProps.onMouseEnter === "function")
-          existingProps.onMouseEnter(e);
-        showTooltip();
-      },
-      onMouseLeave: (e) => {
-        if (typeof existingProps.onMouseLeave === "function")
-          existingProps.onMouseLeave(e);
-        hideTooltip();
-      },
-      onFocus: (e) => {
-        if (typeof existingProps.onFocus === "function") existingProps.onFocus(e);
-        setVisible(true);
-      },
-      onBlur: (e) => {
-        if (typeof existingProps.onBlur === "function") existingProps.onBlur(e);
-        hideTooltip();
-      },
-      onTouchStart: (e) => {
-        if (typeof existingProps.onTouchStart === "function")
-          existingProps.onTouchStart(e);
-        handleTouchStart();
-      },
-      onTouchEnd: (e) => {
-        if (typeof existingProps.onTouchEnd === "function")
-          existingProps.onTouchEnd(e);
-        handleTouchEnd();
-      },
-      onTouchCancel: (e) => {
-        if (typeof existingProps.onTouchCancel === "function")
-          existingProps.onTouchCancel(e);
-        handleTouchEnd();
-      }
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", children: [
-    child,
-    visible && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        role: "tooltip",
-        className: `${TOOLTIP_CONTENT} ${POSITION[side]}`,
-        children: label
-      }
-    ),
-    mobileOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        role: "presentation",
-        className: "fixed inset-0 z-50 md:hidden",
-        onClick: () => setMobileOpen(false),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "absolute inset-0 bg-black/40 backdrop-blur-sm",
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              role: "tooltip",
-              "aria-label": label,
-              className: "absolute bottom-0 inset-x-0 flex flex-col items-center gap-2 rounded-t-2xl bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 shadow-2xl px-6 py-5 pb-[calc(1.25rem+env(safe-area-inset-bottom,0px))]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-600 mb-2",
-                    "aria-hidden": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 text-center", children: label })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-var AccordionContext = React.createContext(null);
-function toArray(value) {
-  if (!value) return [];
-  return Array.isArray(value) ? value : [value];
-}
-function renderLegacyAccordion({
-  title,
-  children,
-  open,
-  className = "",
-  titleClassName = "",
-  contentClassName = ""
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "details",
-    {
-      open,
-      className: `group border-b border-zinc-200 dark:border-zinc-700 ${className}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "summary",
-          {
-            className: `flex cursor-pointer select-none list-none items-center justify-between py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100 ${titleClassName}`,
-            children: [
-              title,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "ml-2 flex-shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-180",
-                  "aria-hidden": "true",
-                  children: "\u25BE"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `pb-4 text-sm text-zinc-600 dark:text-zinc-400 ${contentClassName}`,
-            children
-          }
-        )
-      ]
-    }
-  );
-}
-function Accordion({
-  title,
-  children,
-  open = false,
-  className = "",
-  titleClassName = "",
-  contentClassName = "",
-  type = "single",
-  defaultValue,
-  value,
-  onChange
-}) {
-  if (title !== void 0) {
-    return renderLegacyAccordion({
-      title,
-      children,
-      open,
-      className,
-      titleClassName,
-      contentClassName
-    });
-  }
-  const initialOpen = React.useMemo(() => {
-    if (value !== void 0) return toArray(value);
-    return toArray(defaultValue);
-  }, [defaultValue, value]);
-  const [internalOpenValues, setInternalOpenValues] = React.useState(initialOpen);
-  const activeOpenValues = value !== void 0 ? toArray(value) : internalOpenValues;
-  const toggle = (itemValue) => {
-    var _a;
-    const nextOpenValues = type === "single" ? activeOpenValues.includes(itemValue) ? [] : [itemValue] : activeOpenValues.includes(itemValue) ? activeOpenValues.filter((v) => v !== itemValue) : [...activeOpenValues, itemValue];
-    if (value === void 0) {
-      setInternalOpenValues(nextOpenValues);
-    }
-    onChange == null ? void 0 : onChange(type === "single" ? (_a = nextOpenValues[0]) != null ? _a : "" : nextOpenValues);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionContext.Provider,
-    {
-      value: { type, openValues: activeOpenValues, toggle },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Div, { className, children })
-    }
-  );
-}
-function AccordionItem({
-  value,
-  title,
-  disabled = false,
-  className = "",
-  children
-}) {
-  const ctx = React.useContext(AccordionContext);
-  if (!ctx) {
-    throw new Error("AccordionItem must be used within Accordion.");
-  }
-  const isOpen = ctx.openValues.includes(value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Div,
-    {
-      className: `border-b border-gray-200 dark:border-gray-700 ${className}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Button,
-          {
-            type: "button",
-            disabled,
-            "aria-expanded": isOpen,
-            onClick: () => ctx.toggle(value),
-            className: "w-full flex items-center justify-between py-3 px-1 text-left text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Span, { children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Span,
-                {
-                  className: `transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
-                  children: "\u25BE"
-                }
-              )
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsxRuntime.jsx(Div, { className: "pb-3 px-1 text-sm text-gray-600 dark:text-gray-400", children })
-      ]
-    }
-  );
-}
-function Form(_a) {
-  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("form", __spreadProps(__spreadValues({ className }, props), { children }));
-}
-var BADGE_CLASSES = {
-  // Status badges
-  active: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  inactive: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-600 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-400 dark:ring-zinc-400/20",
-  pending: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
-  approved: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  rejected: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
-  // Semantic badges
-  success: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20",
-  warning: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20",
-  danger: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20",
-  info: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
-  // Role badges
-  admin: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-purple-50 text-purple-700 ring-1 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-300 dark:ring-purple-400/20",
-  moderator: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20",
-  seller: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-teal-50 text-teal-700 ring-1 ring-teal-600/20 dark:bg-teal-900/30 dark:text-teal-300 dark:ring-teal-400/20",
-  user: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
-  // Legacy / generic variants
-  default: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20",
-  primary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300",
-  secondary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300"
-};
-function Badge({
-  children,
-  variant = "default",
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Span, { className: `${BADGE_CLASSES[variant]} ${className}`, children });
-}
-var ALERT_STYLES = {
-  info: {
-    container: "bg-sky-50 border-sky-200/80 dark:bg-sky-950/30 dark:border-sky-800/50",
-    icon: "text-sky-600 dark:text-sky-400",
-    title: "text-sky-900 dark:text-sky-200",
-    text: "text-sky-800 dark:text-sky-300"
-  },
-  success: {
-    container: "bg-emerald-50 border-emerald-200/80 dark:bg-emerald-950/30 dark:border-emerald-800/50",
-    icon: "text-emerald-600 dark:text-emerald-400",
-    title: "text-emerald-900 dark:text-emerald-200",
-    text: "text-emerald-800 dark:text-emerald-300"
-  },
-  warning: {
-    container: "bg-amber-50 border-amber-200/80 dark:bg-amber-950/30 dark:border-amber-800/50",
-    icon: "text-amber-600 dark:text-amber-400",
-    title: "text-amber-900 dark:text-amber-200",
-    text: "text-amber-800 dark:text-amber-300"
-  },
-  error: {
-    container: "bg-red-50 border-red-200/80 dark:bg-red-950/30 dark:border-red-800/50",
-    icon: "text-red-600 dark:text-red-400",
-    title: "text-red-900 dark:text-red-200",
-    text: "text-red-800 dark:text-red-300"
-  }
-};
-var ALERT_CLOSE_HOVER = "hover:bg-black/5 dark:hover:bg-white/5";
-var ICONS = {
-  info: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-5 h-5",
-      fill: "currentColor",
-      viewBox: "0 0 20 20",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  ),
-  success: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-5 h-5",
-      fill: "currentColor",
-      viewBox: "0 0 20 20",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  ),
-  warning: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-5 h-5",
-      fill: "currentColor",
-      viewBox: "0 0 20 20",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  ),
-  error: /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-5 h-5",
-      fill: "currentColor",
-      viewBox: "0 0 20 20",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
-          clipRule: "evenodd"
-        }
-      )
-    }
-  )
-};
-function Alert({
-  children,
-  variant = "info",
-  title,
-  onClose,
-  className = ""
-}) {
-  const styles = ALERT_STYLES[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `relative p-4 rounded-xl border ${styles.container} ${className}`,
-      role: "alert",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 ${styles.icon}`, children: ICONS[variant] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(
-            Heading,
-            {
-              level: 3,
-              className: `text-sm font-semibold mb-1 ${styles.title}`,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-sm ${styles.text}`, children })
-        ] }),
-        onClose && /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: onClose,
-            className: `flex-shrink-0 ml-3 rounded-lg p-1.5 min-h-0 ${styles.icon} ${ALERT_CLOSE_HOVER}`,
-            "aria-label": "Close",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "w-5 h-5",
-                fill: "currentColor",
-                viewBox: "0 0 20 20",
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-                    clipRule: "evenodd"
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-}
-var BORDER_LIGHT = "border-zinc-100 dark:border-slate-700/60";
-var TEXT_MUTED = "text-zinc-400 dark:text-zinc-500";
-function Divider({
-  label,
-  orientation = "horizontal",
-  className = ""
-}) {
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `w-px h-full border-l ${BORDER_LIGHT} ${className}`,
-        role: "separator",
-        "aria-orientation": "vertical"
-      }
-    );
-  }
-  if (label) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-4 ${className}`, role: "separator", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 h-px border-t ${BORDER_LIGHT}` }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { className: `text-sm font-medium ${TEXT_MUTED}`, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 h-px border-t ${BORDER_LIGHT}` })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `w-full h-px border-t ${BORDER_LIGHT} ${className}`,
-      role: "separator",
-      "aria-orientation": "horizontal"
-    }
-  );
-}
-var TEXT_PRIMARY = "text-zinc-900 dark:text-zinc-50";
-var TEXT_SECONDARY = "text-zinc-500 dark:text-zinc-400";
-var BG_SECONDARY = "bg-zinc-50 dark:bg-slate-900";
-var FLEX_BETWEEN = "flex items-center justify-between";
-var INDETERMINATE_CSS = `
-@keyframes appkit-progress-indeterminate {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(350%); }
-}
-.appkit-progress-indeterminate {
-  animation: appkit-progress-indeterminate 1.5s ease-in-out infinite;
-}
-`;
-function Progress({
-  value,
-  max = 100,
-  variant = "primary",
-  size = "md",
-  label,
-  showValue = false,
-  className = ""
-}) {
-  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  const sizeClasses = {
-    sm: "h-1",
-    md: "h-2",
-    lg: "h-3"
-  };
-  const variantClasses = {
-    primary: "bg-primary",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    error: "bg-red-600 dark:bg-red-500"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${FLEX_BETWEEN} mb-2`, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: `text-sm font-medium ${TEXT_PRIMARY}`, children: label }),
-      showValue && /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: `text-sm font-medium ${TEXT_SECONDARY}`, children: [
-        Math.round(percentage),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY}`,
-        role: "progressbar",
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        "aria-label": label || `Progress: ${Math.round(percentage)}%`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `h-full ${variantClasses[variant]} transition-all duration-300 ease-in-out rounded-full`,
-            style: { width: `${percentage}%` }
-          }
-        )
-      }
-    )
-  ] });
-}
-function IndeterminateProgress({
-  variant = "primary",
-  size = "md",
-  label,
-  className = ""
-}) {
-  const sizeClasses = {
-    sm: "h-1",
-    md: "h-2",
-    lg: "h-3"
-  };
-  const variantClasses = {
-    primary: "bg-primary",
-    success: "bg-green-600 dark:bg-green-500",
-    warning: "bg-yellow-600 dark:bg-yellow-500",
-    error: "bg-red-600 dark:bg-red-500"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: INDETERMINATE_CSS } }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: `block text-sm font-medium mb-2 ${TEXT_PRIMARY}`, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `w-full ${sizeClasses[size]} rounded-full overflow-hidden ${BG_SECONDARY} relative`,
-        role: "progressbar",
-        "aria-label": label || "Loading...",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `absolute inset-0 ${variantClasses[variant]} appkit-progress-indeterminate rounded-full`,
-            style: { width: "40%" }
-          }
-        )
-      }
-    )
-  ] });
-}
-
-// src/contracts/table.ts
-var DEFAULT_PAGINATION_CONFIG = {
-  perPage: 20,
-  maxPerPage: 100,
-  showPageSizeSelector: false,
-  pageSizeOptions: [10, 20, 50, 100],
-  showFirstLast: true,
-  showPrevNext: true,
-  maxVisible: 7,
-  size: "md"
-};
-var DEFAULT_STICKY_CONFIG = {
-  enabled: false,
-  topOffset: "top-0",
-  maxHeight: "600px",
-  zIndex: 10
-};
-var DEFAULT_TABLE_CONFIG = {
-  pageSize: DEFAULT_PAGINATION_CONFIG.perPage,
-  sticky: DEFAULT_STICKY_CONFIG,
-  striped: false,
-  selectable: false,
-  showViewToggle: false,
-  defaultViewMode: "table",
-  pagination: DEFAULT_PAGINATION_CONFIG
-};
-function mergeTableConfig(override) {
-  if (!override) return DEFAULT_TABLE_CONFIG;
-  return __spreadProps(__spreadValues(__spreadValues({}, DEFAULT_TABLE_CONFIG), override), {
-    sticky: __spreadValues(__spreadValues({}, DEFAULT_STICKY_CONFIG), override.sticky),
-    pagination: __spreadValues(__spreadValues({}, DEFAULT_PAGINATION_CONFIG), override.pagination)
-  });
-}
-function getPageNumbers(currentPage, totalPages, maxVisible) {
-  if (totalPages <= maxVisible) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-  const pages = [];
-  const halfVisible = Math.floor(maxVisible / 2);
-  let startPage = Math.max(1, currentPage - halfVisible);
-  let endPage = Math.min(totalPages, currentPage + halfVisible);
-  if (currentPage <= halfVisible) endPage = maxVisible;
-  if (currentPage >= totalPages - halfVisible)
-    startPage = totalPages - maxVisible + 1;
-  if (startPage > 1) {
-    pages.push(1);
-    if (startPage > 2) pages.push("...");
-  }
-  for (let i = startPage; i <= endPage; i++) pages.push(i);
-  if (endPage < totalPages) {
-    if (endPage < totalPages - 1) pages.push("...");
-    pages.push(totalPages);
-  }
-  return pages;
-}
-var SIZE_CLASSES = {
-  sm: "text-xs px-2 py-1 min-w-[28px]",
-  md: "text-sm px-3 py-1.5 min-w-[36px]",
-  lg: "text-base px-4 py-2 min-w-[44px]"
-};
-function Pagination({
-  currentPage,
-  totalPages,
-  onPageChange,
-  paginationConfig,
-  maxVisible: maxVisibleProp,
-  showFirstLast: showFirstLastProp,
-  showPrevNext: showPrevNextProp,
-  disabled = false,
-  size: sizeProp,
-  className = ""
-}) {
-  const resolved = __spreadValues(__spreadValues({}, DEFAULT_PAGINATION_CONFIG), paginationConfig);
-  const maxVisible = maxVisibleProp != null ? maxVisibleProp : resolved.maxVisible;
-  const showFirstLast = showFirstLastProp != null ? showFirstLastProp : resolved.showFirstLast;
-  const showPrevNext = showPrevNextProp != null ? showPrevNextProp : resolved.showPrevNext;
-  const size = sizeProp != null ? sizeProp : resolved.size;
-  const handle = (page) => {
-    if (disabled || page < 1 || page > totalPages || page === currentPage)
-      return;
-    onPageChange(page);
-  };
-  const btnClass = (active, off) => {
-    const base = `${SIZE_CLASSES[size]} rounded border font-medium transition-colors`;
-    if (off)
-      return `${base} bg-zinc-100 dark:bg-slate-800 opacity-50 text-zinc-400 dark:text-zinc-500 border-zinc-200 dark:border-slate-700 cursor-not-allowed`;
-    if (active)
-      return `${base} bg-primary-600 text-white border-primary-600 cursor-default`;
-    return `${base} bg-white dark:bg-slate-900 text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-slate-700 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:border-zinc-300 dark:hover:border-slate-600 cursor-pointer`;
-  };
-  const pages = getPageNumbers(currentPage, totalPages, maxVisible);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "nav",
-    {
-      className: `flex items-center gap-1 ${className}`,
-      "aria-label": "Pagination",
-      children: [
-        showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: btnClass(false, disabled || currentPage === 1),
-            onClick: () => handle(1),
-            disabled: disabled || currentPage === 1,
-            "aria-label": "First page",
-            children: "\xAB"
-          }
-        ),
-        showPrevNext && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: btnClass(false, disabled || currentPage === 1),
-            onClick: () => handle(currentPage - 1),
-            disabled: disabled || currentPage === 1,
-            "aria-label": "Previous page",
-            children: "\u2039"
-          }
-        ),
-        pages.map(
-          (page, i) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: `${SIZE_CLASSES[size]} text-zinc-400 dark:text-zinc-500 text-center`,
-              "aria-hidden": "true",
-              children: "\u2026"
-            },
-            `ellipsis-${i}`
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: btnClass(
-                page === currentPage,
-                disabled && page !== currentPage
-              ),
-              onClick: () => handle(page),
-              disabled,
-              "aria-label": `Page ${page}`,
-              "aria-current": page === currentPage ? "page" : void 0,
-              children: page
-            },
-            page
-          )
-        ),
-        showPrevNext && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: btnClass(false, disabled || currentPage === totalPages),
-            onClick: () => handle(currentPage + 1),
-            disabled: disabled || currentPage === totalPages,
-            "aria-label": "Next page",
-            children: "\u203A"
-          }
-        ),
-        showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: btnClass(false, disabled || currentPage === totalPages),
-            onClick: () => handle(totalPages),
-            disabled: disabled || currentPage === totalPages,
-            "aria-label": "Last page",
-            children: "\xBB"
-          }
-        )
-      ]
-    }
-  );
-}
-var STATUS_TO_VARIANT = {
-  // Generic
-  active: "active",
-  inactive: "inactive",
-  pending: "pending",
-  approved: "approved",
-  rejected: "rejected",
-  success: "success",
-  warning: "warning",
-  danger: "danger",
-  info: "info",
-  // Order
-  confirmed: "success",
-  processing: "info",
-  shipped: "info",
-  delivered: "success",
-  cancelled: "danger",
-  refunded: "warning",
-  failed: "danger",
-  // Payment
-  paid: "success",
-  partially_refunded: "warning",
-  // Review (pending/approved/rejected already covered)
-  // Ticket
-  open: "warning",
-  in_progress: "info",
-  resolved: "success",
-  closed: "inactive"
-};
-var STATUS_LABELS = {
-  active: "Active",
-  inactive: "Inactive",
-  pending: "Pending",
-  approved: "Approved",
-  rejected: "Rejected",
-  success: "Success",
-  warning: "Warning",
-  danger: "Danger",
-  info: "Info",
-  confirmed: "Confirmed",
-  processing: "Processing",
-  shipped: "Shipped",
-  delivered: "Delivered",
-  cancelled: "Cancelled",
-  refunded: "Refunded",
-  failed: "Failed",
-  paid: "Paid",
-  partially_refunded: "Partially Refunded",
-  open: "Open",
-  in_progress: "In Progress",
-  resolved: "Resolved",
-  closed: "Closed"
-};
-function StatusBadge({ status, label, className }) {
-  var _a, _b;
-  const variant = (_a = STATUS_TO_VARIANT[status]) != null ? _a : "default";
-  const displayLabel = (_b = label != null ? label : STATUS_LABELS[status]) != null ? _b : status;
-  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, className, children: displayLabel });
-}
-var SIZE_CLASSES2 = {
-  sm: "max-w-sm",
-  md: "max-w-lg",
-  lg: "max-w-2xl",
-  xl: "max-w-4xl",
-  full: "max-w-[95vw] max-h-[95vh]"
-};
-function Modal({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = "md",
-  showCloseButton = true,
-  className = ""
-}) {
-  const titleId = React.useId();
-  const panelRef = React.useRef(null);
-  const prevFocusRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [isOpen]);
-  React.useEffect(() => {
-    var _a;
-    if (isOpen) {
-      prevFocusRef.current = document.activeElement;
-      requestAnimationFrame(() => {
-        var _a2;
-        return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
-      });
-    } else {
-      (_a = prevFocusRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isOpen]);
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const panel = panelRef.current;
-      if (!panel) return;
-      const focusable = Array.from(
-        panel.querySelectorAll(
-          'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'
-        )
-      );
-      if (!focusable.length) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    },
-    [onClose]
-  );
-  if (!isOpen) return null;
-  if (typeof document === "undefined") return null;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
-              "aria-hidden": "true",
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: panelRef,
-              tabIndex: -1,
-              className: [
-                "relative w-full rounded-2xl bg-white dark:bg-slate-900",
-                "shadow-2xl ring-1 ring-zinc-200 dark:ring-slate-700",
-                "flex flex-col max-h-[90vh] overflow-hidden",
-                "animate-[fadeInUp_0.15s_ease_forwards]",
-                SIZE_CLASSES2[size],
-                className
-              ].join(" "),
-              children: [
-                (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [
-                  title && /* @__PURE__ */ jsxRuntime.jsx(
-                    Heading,
-                    {
-                      level: 2,
-                      id: titleId,
-                      className: "!text-lg !font-semibold !font-sans tracking-tight",
-                      children: title
-                    }
-                  ),
-                  showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      type: "button",
-                      onClick: onClose,
-                      className: "ml-auto p-1.5 !min-h-0 rounded-lg text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300",
-                      "aria-label": "Close",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "w-5 h-5" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 px-6 py-4", children })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
-var SIDE_TRANSLATE = {
-  left: {
-    closed: "-translate-x-full",
-    open: "translate-x-0",
-    base: "left-0 top-0 bottom-0"
-  },
-  right: {
-    closed: "translate-x-full",
-    open: "translate-x-0",
-    base: "right-0 top-0 bottom-0"
-  },
-  bottom: {
-    closed: "translate-y-full",
-    open: "translate-y-0",
-    base: "bottom-0 left-0 right-0"
-  }
-};
-var SIDE_SIZE = {
-  sm: "w-72",
-  md: "w-80 sm:w-96",
-  lg: "w-full sm:w-[480px]",
-  full: "w-full"
-};
-function Drawer({
-  isOpen,
-  onClose,
-  title,
-  children,
-  footer,
-  side = "right",
-  size = "md",
-  showCloseButton = true,
-  className = ""
-}) {
-  const panelRef = React.useRef(null);
-  const prevFocusRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [isOpen]);
-  React.useEffect(() => {
-    var _a;
-    if (isOpen) {
-      prevFocusRef.current = document.activeElement;
-      requestAnimationFrame(() => {
-        var _a2;
-        return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
-      });
-    } else {
-      (_a = prevFocusRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [isOpen]);
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Escape") onClose();
-    },
-    [onClose]
-  );
-  const { closed, open, base } = SIDE_TRANSLATE[side];
-  const isBottom = side === "bottom";
-  if (typeof document === "undefined") return null;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `fixed inset-0 z-50 ${isOpen ? "pointer-events-auto" : "pointer-events-none"}`,
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0"}`,
-              "aria-hidden": "true",
-              onClick: onClose
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: panelRef,
-              tabIndex: -1,
-              role: "dialog",
-              "aria-modal": "true",
-              className: [
-                "absolute bg-white dark:bg-slate-900",
-                "shadow-2xl ring-1 ring-zinc-200 dark:ring-slate-700",
-                "flex flex-col",
-                "transition-transform duration-300 ease-out",
-                base,
-                isBottom ? "rounded-t-2xl max-h-[90vh]" : `${SIDE_SIZE[size]} h-full`,
-                isOpen ? open : closed,
-                className
-              ].join(" "),
-              children: [
-                isBottom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-3 pb-1 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "w-10 h-1 rounded-full bg-zinc-300 dark:bg-slate-600",
-                    "aria-hidden": "true"
-                  }
-                ) }),
-                (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [
-                  title && /* @__PURE__ */ jsxRuntime.jsx(
-                    Heading,
-                    {
-                      level: 2,
-                      className: "!text-base !font-semibold !font-sans",
-                      children: title
-                    }
-                  ),
-                  showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "sm",
-                      type: "button",
-                      onClick: onClose,
-                      className: "ml-auto p-1.5 !min-h-0 rounded-lg text-zinc-400 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300",
-                      "aria-label": "Close",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "w-5 h-5" })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-5 py-4", children }),
-                footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 border-t border-zinc-100 dark:border-slate-800 px-5 py-4", children: footer })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
-function Select({
-  options,
-  value,
-  onChange,
-  placeholder = "Select\u2026",
-  label,
-  error,
-  disabled = false,
-  required,
-  className = "",
-  id: externalId
-}) {
-  var _a;
-  const generatedId = React.useId();
-  const id = externalId != null ? externalId : generatedId;
-  const [open, setOpen] = React.useState(false);
-  const [openUp, setOpenUp] = React.useState(false);
-  const ref = React.useRef(null);
-  const selected = options.find((o) => o.value === value);
-  const toggle = React.useCallback(() => {
-    if (!disabled) {
-      if (!open && ref.current) {
-        const rect = ref.current.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const spaceAbove = rect.top;
-        setOpenUp(spaceBelow < 160 && spaceAbove > spaceBelow);
-      }
-      setOpen((v) => !v);
-    }
-  }, [disabled, open]);
-  const handleSelect = React.useCallback(
-    (val) => {
-      onChange == null ? void 0 : onChange(val);
-      setOpen(false);
-    },
-    [onChange]
-  );
-  React.useEffect(() => {
-    const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    if (open) document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        setOpen(false);
-        return;
-      }
-      if (e.key === "Enter" || e.key === " ") {
-        toggle();
-        e.preventDefault();
-        return;
-      }
-      if (e.key === "ArrowDown" && !open) {
-        setOpen(true);
-        e.preventDefault();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        const idx = options.findIndex((o) => o.value === value);
-        const next = options.slice(idx < 0 ? 0 : idx + 1).find((o) => !o.disabled);
-        if (next) onChange == null ? void 0 : onChange(next.value);
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        const idx = options.findIndex((o) => o.value === value);
-        if (idx < 0) return;
-        const prev = [...options].slice(0, idx).reverse().find((o) => !o.disabled);
-        if (prev) onChange == null ? void 0 : onChange(prev.value);
-      }
-    },
-    [open, options, value, onChange, toggle]
-  );
-  const triggerClass = [
-    "flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm",
-    "transition-colors bg-white dark:bg-slate-800/60",
-    "focus:outline-none focus:ring-2 focus:ring-offset-0",
-    error ? "border-red-400 dark:border-red-500 focus:ring-red-500/20" : "border-zinc-200 dark:border-slate-700 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20 focus:border-primary-500 dark:focus:border-secondary-400",
-    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-    className
-  ].join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative w-full", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(
-      Label,
-      {
-        htmlFor: id,
-        className: "!text-zinc-700 dark:!text-zinc-300",
-        required,
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        id,
-        type: "button",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-disabled": disabled,
-        disabled,
-        variant: "ghost",
-        className: triggerClass,
-        onClick: toggle,
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Span,
-            {
-              className: selected ? "text-zinc-900 dark:text-zinc-50" : "text-zinc-400 dark:text-zinc-500",
-              children: (_a = selected == null ? void 0 : selected.label) != null ? _a : placeholder
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ChevronDown,
-            {
-              className: `h-4 w-4 flex-shrink-0 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`,
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      Ul,
-      {
-        role: "listbox",
-        className: [
-          "absolute z-50 w-full overflow-auto rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-lg max-h-60 py-1",
-          openUp ? "bottom-full mb-1" : "top-full mt-1"
-        ].join(" "),
-        children: options.map((option) => {
-          const isSelected = option.value === value;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            Li,
-            {
-              role: "option",
-              "aria-selected": isSelected,
-              "aria-disabled": option.disabled,
-              className: [
-                "relative flex cursor-pointer items-center px-3 py-2 text-sm select-none",
-                option.disabled ? "opacity-40 cursor-not-allowed" : isSelected ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300" : "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-700"
-              ].join(" "),
-              onClick: () => !option.disabled && handleSelect(option.value),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "flex-1", children: option.label }),
-                isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                  Check,
-                  {
-                    className: "h-4 w-4 ml-2 flex-shrink-0",
-                    "aria-hidden": "true"
-                  }
-                )
-              ]
-            },
-            option.value
-          );
-        })
-      }
-    ),
-    error && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", variant: "error", className: "mt-1.5", role: "alert", children: error })
-  ] });
-}
-function Input(_a) {
-  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    __spreadValues({
-      className: [
-        "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20",
-        className
-      ].filter(Boolean).join(" ")
-    }, props)
-  );
-}
-function Textarea(_a) {
-  var _b = _a, { className = "" } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "textarea",
-    __spreadValues({
-      className: [
-        "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:ring-secondary-400/20",
-        className
-      ].filter(Boolean).join(" ")
-    }, props)
-  );
-}
-function Slider({
-  value = 0,
-  min = 0,
-  max = 100,
-  step = 1,
-  onChange,
-  className = "",
-  disabled = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      disabled,
-      onChange: (e) => onChange == null ? void 0 : onChange(Number(e.target.value)),
-      className: ["w-full accent-primary dark:accent-secondary", className].filter(Boolean).join(" ")
-    }
-  );
-}
-var SIZE_PX = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6" };
-function StarRating({
-  value = 0,
-  onChange,
-  max = 5,
-  size = "md",
-  readOnly = false,
-  className = "",
-  label
-}) {
-  const [hovered, setHovered] = React.useState(null);
-  const displayed = hovered != null ? hovered : value;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Span,
-    {
-      className: `inline-flex items-center gap-0.5 ${className}`,
-      role: readOnly ? "img" : "group",
-      "aria-label": label != null ? label : `${value} out of ${max} stars`,
-      children: [
-        Array.from({ length: max }, (_, i) => {
-          const starValue = i + 1;
-          const filled = starValue <= displayed;
-          const half = !filled && starValue - 0.5 <= displayed;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Span,
-            {
-              className: readOnly ? void 0 : "cursor-pointer",
-              onClick: () => !readOnly && (onChange == null ? void 0 : onChange(starValue)),
-              onMouseEnter: () => !readOnly && setHovered(starValue),
-              onMouseLeave: () => !readOnly && setHovered(null),
-              "aria-hidden": !readOnly ? "true" : void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                Star,
-                {
-                  className: [
-                    SIZE_PX[size],
-                    "transition-colors duration-100",
-                    filled || half ? "fill-amber-400 text-amber-400" : "fill-transparent text-zinc-300 dark:text-slate-600",
-                    !readOnly && !filled ? "hover:fill-amber-300 hover:text-amber-300" : ""
-                  ].join(" "),
-                  "aria-hidden": "true"
-                }
-              )
-            },
-            starValue
-          );
-        }),
-        !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "sr-only", children: [
-          value,
-          " out of ",
-          max
-        ] })
-      ]
-    }
-  );
-}
-function Breadcrumb({ items, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Nav, { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx(Ol, { className: "flex items-center gap-1 flex-wrap text-sm text-zinc-500 dark:text-zinc-400", children: items.map((item, i) => {
-    const isLast = i === items.length - 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Li, { className: "flex items-center gap-1", children: [
-      i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        ChevronRight,
-        {
-          className: "w-3.5 h-3.5 flex-shrink-0 text-zinc-400 dark:text-zinc-600",
-          "aria-hidden": "true"
-        }
-      ),
-      isLast || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(
-        Span,
-        {
-          className: isLast ? "font-medium text-zinc-900 dark:text-zinc-50" : "text-zinc-500 dark:text-zinc-400",
-          "aria-current": isLast ? "page" : void 0,
-          children: item.label
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "a",
-        {
-          href: item.href,
-          className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
-          children: item.label
-        }
-      )
-    ] }, i);
-  }) }) });
-}
-function ImageLightbox({
-  images,
-  activeIndex,
-  onClose,
-  onNavigate
-}) {
-  var _a;
-  const [currentIndex, setCurrentIndex] = React.useState(activeIndex != null ? activeIndex : 0);
-  const overlayRef = React.useRef(null);
-  React.useEffect(() => {
-    if (activeIndex !== null && activeIndex >= 0) {
-      setCurrentIndex(activeIndex);
-    }
-  }, [activeIndex]);
-  const isOpen = activeIndex !== null && activeIndex >= 0 && images.length > 0;
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [isOpen]);
-  const navigate = React.useCallback(
-    (dir) => {
-      setCurrentIndex((prev) => {
-        const next = (prev + dir + images.length) % images.length;
-        onNavigate == null ? void 0 : onNavigate(next);
-        return next;
-      });
-    },
-    [images.length, onNavigate]
-  );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (e.key === "Escape") {
-        onClose();
-        return;
-      }
-      if (e.key === "ArrowLeft") {
-        navigate(-1);
-        return;
-      }
-      if (e.key === "ArrowRight") {
-        navigate(1);
-        return;
-      }
-    },
-    [onClose, navigate]
-  );
-  React.useEffect(() => {
-    if (isOpen) {
-      requestAnimationFrame(() => {
-        var _a2;
-        return (_a2 = overlayRef.current) == null ? void 0 : _a2.focus();
-      });
-    }
-  }, [isOpen]);
-  if (!isOpen || typeof document === "undefined") return null;
-  const image = images[currentIndex];
-  const hasMultiple = images.length > 1;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: overlayRef,
-        tabIndex: -1,
-        className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col items-center justify-center outline-none",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": "Image lightbox",
-        onKeyDown: handleKeyDown,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              type: "button",
-              onClick: onClose,
-              className: "absolute top-4 right-4 z-10 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/50 text-white flex items-center justify-center",
-              "aria-label": "Close lightbox",
-              children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "w-7 h-7" })
-            }
-          ),
-          hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm font-medium", children: [
-            currentIndex + 1,
-            " / ",
-            images.length
-          ] }),
-          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              type: "button",
-              onClick: () => navigate(-1),
-              className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center",
-              "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { className: "w-7 h-7" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex items-center justify-center p-16 w-full h-full relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: image.src,
-                alt: (_a = image.alt) != null ? _a : "",
-                className: "max-h-full max-w-full object-contain select-none",
-                draggable: false
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 right-4 text-white/40 flex items-center gap-1 text-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "w-4 h-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "text-xs", children: "Scroll to zoom" })
-            ] })
-          ] }),
-          image.caption && /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
-            {
-              size: "sm",
-              variant: "secondary",
-              className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4",
-              children: image.caption
-            }
-          ),
-          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              type: "button",
-              onClick: () => navigate(1),
-              className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center",
-              "aria-label": "Next image",
-              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "w-7 h-7" })
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
-function TagInput({
-  value,
-  onChange,
-  disabled = false,
-  label,
-  placeholder = "Add a tag...",
-  className = "",
-  helperText = "Press Enter or comma to add a tag"
-}) {
-  const [draft, setDraft] = React.useState("");
-  const inputRef = React.useRef(null);
-  const addTag = (raw) => {
-    const tag = raw.trim().replace(/,+$/, "").trim();
-    if (!tag || value.includes(tag)) {
-      setDraft("");
-      return;
-    }
-    onChange([...value, tag]);
-    setDraft("");
-  };
-  const removeTag = (tag) => {
-    onChange(value.filter((t) => t !== tag));
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
-      addTag(draft);
-      return;
-    }
-    if (e.key === "Backspace" && draft === "" && value.length > 0) {
-      onChange(value.slice(0, -1));
-    }
-  };
-  const handleChange = (e) => {
-    var _a;
-    const inputValue = e.target.value;
-    if (inputValue.includes(",")) {
-      const parts = inputValue.split(",");
-      const last = (_a = parts.pop()) != null ? _a : "";
-      parts.forEach((part) => addTag(part));
-      setDraft(last);
-      return;
-    }
-    setDraft(inputValue);
-  };
-  const handleBlur = () => {
-    if (draft.trim()) {
-      addTag(draft);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1.5 block text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: () => {
-          var _a;
-          return !disabled && ((_a = inputRef.current) == null ? void 0 : _a.focus());
-        },
-        className: [
-          "flex min-h-[42px] w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border px-3 py-2",
-          "border-zinc-300 bg-white dark:border-slate-700 dark:bg-slate-900",
-          disabled ? "cursor-not-allowed opacity-50" : "transition-colors focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30"
-        ].join(" "),
-        children: [
-          value.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "inline-flex items-center gap-1 rounded-full bg-primary-500/10 px-2 py-0.5 text-xs font-medium text-primary-700 dark:text-primary-300",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "xs", children: tag }),
-                !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      removeTag(tag);
-                    },
-                    className: "ml-0.5 text-primary-700/70 hover:text-primary-700 dark:text-primary-300/70 dark:hover:text-primary-300",
-                    "aria-label": `Remove tag ${tag}`,
-                    children: "x"
-                  }
-                )
-              ]
-            },
-            tag
-          )),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref: inputRef,
-              value: draft,
-              onChange: handleChange,
-              onKeyDown: handleKeyDown,
-              onBlur: handleBlur,
-              disabled,
-              placeholder: value.length === 0 ? placeholder : "",
-              className: [
-                "min-w-[100px] flex-1 bg-transparent text-sm outline-none",
-                "text-zinc-900 placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500",
-                disabled ? "cursor-not-allowed" : ""
-              ].join(" "),
-              "aria-label": label != null ? label : "Tag input"
-            }
-          )
-        ]
-      }
-    ),
-    helperText && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "xs", className: "mt-1 text-zinc-500 dark:text-zinc-400", children: helperText })
-  ] });
-}
-
-// src/ui/style.helper.ts
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-function mergeTailwindClasses(...classes) {
-  const classArray = classes.filter(Boolean).join(" ").split(" ");
-  return Array.from(new Set(classArray)).join(" ");
-}
-function StepperNav({ steps, currentStep, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Nav, { "aria-label": "Steps", className: classNames("mb-8", className), children: /* @__PURE__ */ jsxRuntime.jsx(Ol, { className: "flex items-center gap-0", children: steps.map((step, i) => {
-    const isComplete = step.number < currentStep;
-    const isActive = step.number === currentStep;
-    const isLast = i === steps.length - 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Li, { className: "flex flex-1 items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: classNames(
-              "flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
-              isComplete ? "border-primary bg-primary text-white" : isActive ? "border-primary bg-transparent text-primary" : "border-zinc-300 text-zinc-500 dark:border-slate-700 dark:text-zinc-400"
-            ),
-            children: isComplete ? /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "h-4 w-4",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2.5,
-                    d: "M5 13l4 4L19 7"
-                  }
-                )
-              }
-            ) : step.number
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Span,
-          {
-            className: classNames(
-              "hidden text-sm font-medium sm:block",
-              isActive ? "text-primary" : isComplete ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400"
-            ),
-            children: step.label
-          }
-        )
-      ] }),
-      !isLast && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: classNames(
-            "mx-3 h-0.5 flex-1 transition-colors",
-            isComplete ? "bg-primary" : "bg-zinc-200 dark:bg-slate-700"
-          )
-        }
-      )
-    ] }, step.number);
-  }) }) });
-}
-var ACTIVE = "bg-primary/5 text-primary ring-primary/30 dark:bg-primary/10";
-var INACTIVE = "text-zinc-500 ring-zinc-200 hover:bg-zinc-100 dark:text-zinc-400 dark:ring-slate-700 dark:hover:bg-slate-800";
-var DEFAULT_LABELS = {
-  card: "Card grid",
-  fluid: "Fluid grid",
-  list: "List view",
-  toolbar: "View mode"
-};
-function ViewToggle({
-  value,
-  onChange,
-  labels,
-  className
-}) {
-  const mergedLabels = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Div,
-    {
-      className: ["flex gap-1", className != null ? className : ""].join(" ").trim(),
-      role: "toolbar",
-      "aria-label": mergedLabels.toolbar,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            onClick: () => onChange("card"),
-            "aria-label": mergedLabels.card,
-            "aria-pressed": value === "card",
-            className: `flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${value === "card" ? ACTIVE : INACTIVE}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "h-5 w-5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: 1.5,
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            onClick: () => onChange("fluid"),
-            "aria-label": mergedLabels.fluid,
-            "aria-pressed": value === "fluid",
-            className: `flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${value === "fluid" ? ACTIVE : INACTIVE}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "h-5 w-5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: 1.5,
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 9.375v1.5m1.5-3.75C19.496 8.25 20 8.754 20 9.375v1.5m0-5.25v5.25m0-5.25C20 5.004 19.496 4.5 18.875 4.5M7.5 15h9"
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            onClick: () => onChange("list"),
-            "aria-label": mergedLabels.list,
-            "aria-pressed": value === "list",
-            className: `flex items-center justify-center rounded-lg p-2 ring-1 transition-colors ${value === "list" ? ACTIVE : INACTIVE}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "h-5 w-5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                strokeWidth: 1.5,
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-var sizeClass = {
-  sm: "h-4 w-4",
-  md: "h-5 w-5",
-  lg: "h-6 w-6"
-};
-function RatingDisplay({
-  rating,
-  maxRating = 5,
-  size = "sm",
-  showValue = false,
-  className
-}) {
-  const starSize = sizeClass[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames("flex items-center gap-1", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        className: classNames(
-          starSize,
-          star <= rating ? "text-amber-400 dark:text-secondary-500" : "text-zinc-300 dark:text-zinc-700"
-        ),
-        fill: "currentColor",
-        viewBox: "0 0 20 20",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
-      },
-      star
-    )) }),
-    showValue && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: rating.toFixed(1) })
-  ] });
-}
-var GAP_MAP = {
-  none: "",
-  px: "gap-px",
-  xs: "gap-1",
-  sm: "gap-2",
-  "2.5": "gap-2.5",
-  "3": "gap-3",
-  md: "gap-4",
-  "5": "gap-5",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12"
-};
-var CONTAINER_MAP = {
-  /** `max-w-3xl` — blog posts, legal / policy pages */
-  sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-4xl` — narrow content, contact, about */
-  md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-5xl` — medium content, checkout, help */
-  lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-6xl` — product detail, cart */
-  xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-7xl` — main content grids (default) */
-  "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-screen-2xl` — full-bleed wide content */
-  full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8",
-  /** `max-w-screen-2xl` — wide store/seller layouts (compact px) */
-  wide: "max-w-screen-2xl mx-auto px-4 sm:px-6",
-  /** `max-w-[1920px]` — ultra-wide / 4K displays */
-  ultra: "max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8"
-};
-var GRID_MAP = {
-  /** Single column */
-  1: "grid grid-cols-1",
-  /** 1 → 2 */
-  2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
-  /** 1 → 2 → 3 → 4 on widescreen */
-  3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
-  /** 1 → 2 → 3 → 4 → 5 on widescreen */
-  4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
-  /** 1 → 2 → 3 → 4 → 5 */
-  5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
-  /** 2 → 3 → 4 → 5 → 6 */
-  6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
-  /**
-   * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
-   * Starts at 1 so product cards are readable even on 320 px handsets.
-   */
-  cards: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
-  /** Auto-fill product cards — min 200 px */
-  productCards: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-6",
-  /** Auto-fill product cards (compact) — min 220 px */
-  productCardsCompact: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
-  /** Auto-fill store cards — min 220 px */
-  storeCards: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-6",
-  /** Auto-fill category tiles — min 130 px */
-  categoryCards: "grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-4",
-  /** Auto-fill coupon/promo cards — min 264 px */
-  couponCards: "grid grid-cols-[repeat(auto-fill,minmax(264px,1fr))] gap-6",
-  /** Auto-fill address / wide cards — min 300 px */
-  addressCards: "grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4",
-  /** Auto-fill KPI/stat tiles — min 180 px */
-  statTiles: "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4",
-  /** Auto-fill account nav tiles — min 160 px */
-  navTiles: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4",
-  /** Equal halves on md+ */
-  halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
-  /** 2fr / 1fr split on md+ */
-  twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]",
-  /** 1fr / 2fr split on md+ */
-  oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]",
-  /** Fixed 280px left sidebar + 1fr on lg+ */
-  sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]",
-  /** 1fr + fixed 280px right sidebar on lg+ */
-  sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]",
-  /** Fixed 320px left sidebar + 1fr on lg+ (admin layout) */
-  sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]",
-  /** Product detail triplet: gallery | info | actions sidebar */
-  productDetailTriplet: "grid grid-cols-1 lg:grid-cols-[1fr_1fr_280px] xl:grid-cols-[1fr_1fr_300px] 2xl:grid-cols-[1fr_1fr_320px] gap-6 lg:gap-8",
-  /** CSS auto-fill, min 200px columns */
-  autoSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]",
-  /** CSS auto-fill, min 280px columns */
-  autoMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]",
-  /** CSS auto-fill, min 360px columns */
-  autoLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]"
-};
-var ITEMS_MAP = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var JUSTIFY_MAP = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-function Container(_a) {
-  var _b = _a, {
-    size = "2xl",
-    as,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "size",
-    "as",
-    "className",
-    "children"
-  ]);
-  const Tag = as != null ? as : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag,
-    __spreadProps(__spreadValues({
-      className: [CONTAINER_MAP[size], className].filter(Boolean).join(" ")
-    }, props), {
-      children
-    })
-  );
-}
-function Stack(_a) {
-  var _b = _a, {
-    gap = "md",
-    centered = false,
-    align = "stretch",
-    as,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "gap",
-    "centered",
-    "align",
-    "as",
-    "className",
-    "children"
-  ]);
-  const Tag = as != null ? as : "div";
-  const classes = [
-    "flex flex-col",
-    GAP_MAP[gap],
-    centered ? "items-center justify-center" : "",
-    !centered && align !== "stretch" ? ITEMS_MAP[align] : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
-}
-function Row(_a) {
-  var _b = _a, {
-    gap = "md",
-    centered = false,
-    align = "center",
-    justify = "start",
-    wrap = false,
-    as,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "gap",
-    "centered",
-    "align",
-    "justify",
-    "wrap",
-    "as",
-    "className",
-    "children"
-  ]);
-  const Tag = as != null ? as : "div";
-  const classes = [
-    "flex flex-row",
-    centered ? "items-center justify-center" : ITEMS_MAP[align],
-    !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
-    GAP_MAP[gap],
-    wrap ? "flex-wrap" : "",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
-}
-function Grid(_a) {
-  var _b = _a, {
-    cols,
-    gap = "md",
-    as,
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "cols",
-    "gap",
-    "as",
-    "className",
-    "children"
-  ]);
-  const Tag = as != null ? as : "div";
-  const baseClass = cols !== void 0 ? GRID_MAP[cols] : "grid";
-  const classes = [baseClass, GAP_MAP[gap], className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, __spreadProps(__spreadValues({ className: classes }, props), { children }));
-}
-function formatCurrency(amount, currency) {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency,
-    maximumFractionDigits: 2
-  }).format(amount);
-}
-function formatPercent(value) {
-  return `${Math.round(value * 100)}%`;
-}
-function PriceDisplay({
-  amount,
-  currency = "INR",
-  originalAmount,
-  variant = "compact",
-  className
-}) {
-  const hasDiscount = originalAmount !== void 0 && originalAmount > amount;
-  const discountPct = hasDiscount ? (originalAmount - amount) / originalAmount : 0;
-  const priceClass = variant === "detail" ? "text-xl font-bold text-primary" : "text-base font-bold text-primary";
-  const originalClass = variant === "detail" ? "text-sm text-zinc-400 line-through dark:text-zinc-500" : "text-xs text-zinc-400 line-through dark:text-zinc-500";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }),
-    hasDiscount && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "rounded bg-emerald-100 px-1 py-0.5 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400", children: [
-        "-",
-        formatPercent(discountPct)
-      ] })
-    ] })
-  ] });
-}
-var columnsClass = {
-  2: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-  3: "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3",
-  4: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
-};
-function StatsGrid({ stats, columns = 3, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(columnsClass[columns], className), children: stats.map((stat, i) => {
-    var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: stat.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "mt-1 text-3xl font-bold", children: stat.value })
-          ] }),
-          stat.icon && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classNames(
-                (_a = stat.colorClass) != null ? _a : "text-zinc-400 dark:text-zinc-500"
-              ),
-              children: stat.icon
-            }
-          )
-        ] })
-      },
-      `${stat.label}-${i}`
-    );
-  }) });
-}
-function SummaryCard({
-  lines,
-  total,
-  action,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: classNames(
-        "space-y-4 rounded-xl border border-zinc-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "text-zinc-500 dark:text-zinc-400", children: line.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Span,
-            {
-              className: line.muted ? "text-zinc-500 dark:text-zinc-400" : "text-zinc-900 dark:text-zinc-100",
-              children: line.value
-            }
-          )
-        ] }, i)) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "font-bold text-zinc-900 dark:text-zinc-100", children: total.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "text-lg font-bold text-primary", children: total.value })
-        ] }),
-        action && /* @__PURE__ */ jsxRuntime.jsx("div", { children: action })
-      ]
-    }
-  );
-}
-function getRemaining(targetDate) {
-  const now = Date.now();
-  const distance = targetDate.getTime() - now;
-  if (distance <= 0) {
-    return null;
-  }
-  const totalSeconds = Math.floor(distance / 1e3);
-  const days = Math.floor(totalSeconds / 86400);
-  const hours = Math.floor(totalSeconds % 86400 / 3600);
-  const minutes = Math.floor(totalSeconds % 3600 / 60);
-  const seconds = totalSeconds % 60;
-  return { days, hours, minutes, seconds };
-}
-function formatLabel(remaining, format) {
-  const { days, hours, minutes, seconds } = remaining;
-  if (format === "hms") {
-    const totalHours = days * 24 + hours;
-    return `${totalHours}h ${minutes}m ${seconds}s`;
-  }
-  if (format === "dhms") {
-    return `${days}d ${hours}h ${minutes}m ${seconds}s`;
-  }
-  if (days > 0) {
-    return `${days}d ${hours}h ${minutes}m`;
-  }
-  if (hours > 0) {
-    return `${hours}h ${minutes}m ${seconds}s`;
-  }
-  return `${minutes}m ${seconds}s`;
-}
-function CountdownDisplay({
-  targetDate,
-  format = "auto",
-  expiredLabel = "Ended",
-  className
-}) {
-  const [tick, setTick] = React.useState(0);
-  React.useEffect(() => {
-    const id = window.setInterval(() => {
-      setTick((value) => value + 1);
-    }, 1e3);
-    return () => {
-      window.clearInterval(id);
-    };
-  }, []);
-  const remaining = React.useMemo(() => getRemaining(targetDate), [targetDate, tick]);
-  const label = remaining ? formatLabel(remaining, format) : expiredLabel;
-  return /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "inherit", className: classNames("tabular-nums", className), children: label });
-}
-function ItemRow({
-  thumbnail,
-  title,
-  subtitle,
-  rightSlot,
-  actions,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Div, { className: classNames("flex items-start gap-4", className), children: [
-    thumbnail && /* @__PURE__ */ jsxRuntime.jsx(Div, { className: "flex-shrink-0", children: thumbnail }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Div, { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", weight: "medium", className: "line-clamp-2", children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx(Caption, { className: "mt-0.5", children: subtitle }),
-      actions && /* @__PURE__ */ jsxRuntime.jsx(Div, { className: "mt-2", children: actions })
-    ] }),
-    rightSlot && /* @__PURE__ */ jsxRuntime.jsx(Div, { className: "flex-shrink-0", children: rightSlot })
-  ] });
-}
-function HorizontalScroller({
-  children,
-  className = "",
-  gap = 16,
-  snapToItems,
-  showArrows,
-  arrowSize = "md",
-  showScrollbar,
-  showFadeEdges,
-  scrollContainerRef: externalRef,
-  onScroll,
-  items,
-  renderItem,
-  keyExtractor,
-  perView,
-  rows = 1,
-  autoScroll,
-  autoScrollInterval = 3500,
-  minItemWidth,
-  itemClassName = ""
-}) {
-  const internalRef = React.useRef(null);
-  const containerRef = externalRef != null ? externalRef : internalRef;
-  const autoScrollTimer = React.useRef(
-    void 0
-  );
-  const scrollBy = React.useCallback(
-    (direction) => {
-      const el = containerRef.current;
-      if (!el) return;
-      const width = el.clientWidth;
-      el.scrollBy({ left: direction * width * 0.8, behavior: "smooth" });
-    },
-    [containerRef]
-  );
-  React.useEffect(() => {
-    if (!autoScroll) return;
-    autoScrollTimer.current = setInterval(
-      () => scrollBy(1),
-      autoScrollInterval
-    );
-    return () => clearInterval(autoScrollTimer.current);
-  }, [autoScroll, autoScrollInterval, scrollBy]);
-  const itemsMode = items != null && renderItem != null;
-  const arrowCls = {
-    sm: "w-7 h-7 text-sm",
-    md: "w-9 h-9 text-base",
-    lg: "w-11 h-11 text-lg"
-  }[arrowSize];
-  const scrollerCls = [
-    "flex h-full overflow-x-auto scroll-smooth",
-    snapToItems ? "snap-x snap-mandatory" : "",
-    showScrollbar ? "" : "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-    "pb-1"
-  ].filter(Boolean).join(" ");
-  const content = itemsMode ? items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: [
-        snapToItems ? "snap-start flex-none" : "flex-none",
-        itemClassName
-      ].filter(Boolean).join(" "),
-      style: minItemWidth ? { minWidth: minItemWidth } : void 0,
-      children: renderItem(item, i)
-    },
-    keyExtractor ? keyExtractor(item, i) : i
-  )) : children;
-  if (showArrows) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, children: [
-      showFadeEdges && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => scrollBy(-1),
-          "aria-label": "Previous",
-          className: `absolute left-0 top-1/2 -translate-y-1/2 z-20 ${arrowCls} rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-700 shadow flex items-center justify-center hover:bg-white dark:hover:bg-gray-700 transition-colors`,
-          children: "<"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: containerRef,
-          onScroll,
-          className: scrollerCls,
-          style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 },
-          children: content
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => scrollBy(1),
-          "aria-label": "Next",
-          className: `absolute right-0 top-1/2 -translate-y-1/2 z-20 ${arrowCls} rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-700 shadow flex items-center justify-center hover:bg-white dark:hover:bg-gray-700 transition-colors`,
-          children: ">"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, children: [
-    showFadeEdges && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: containerRef,
-        onScroll,
-        className: scrollerCls,
-        style: { gap: `${gap}px` },
-        children: content
-      }
-    )
-  ] });
-}
-function useVisibleItems({
-  total,
-  minItemWidth,
-  arrowWidth = 36,
-  gap = 8
-}) {
-  const containerRef = React.useRef(null);
-  const [visibleCount, setVisibleCount] = React.useState(total);
-  const [scrollOffset, setScrollOffset] = React.useState(0);
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const compute = (width) => {
-      const totalItemsWidth = total * minItemWidth + Math.max(0, total - 1) * gap;
-      if (totalItemsWidth <= width) {
-        setVisibleCount(total);
-        return;
-      }
-      const usable = width - 2 * (arrowWidth + gap);
-      const raw = Math.floor((usable + gap) / (minItemWidth + gap));
-      setVisibleCount(Math.max(1, raw));
-    };
-    const ro = new ResizeObserver(([entry]) => {
-      if (entry) compute(entry.contentRect.width);
-    });
-    ro.observe(el);
-    compute(el.getBoundingClientRect().width);
-    return () => ro.disconnect();
-  }, [total, minItemWidth, arrowWidth, gap]);
-  React.useEffect(() => {
-    setScrollOffset((o) => Math.min(o, Math.max(0, total - visibleCount)));
-  }, [visibleCount, total]);
-  const hasOverflow = visibleCount < total;
-  const scrollLeft = React.useCallback(
-    () => setScrollOffset((o) => Math.max(0, o - visibleCount)),
-    [visibleCount]
-  );
-  const scrollRight = React.useCallback(
-    () => setScrollOffset(
-      (o) => Math.min(total - visibleCount, o + visibleCount)
-    ),
-    [visibleCount, total]
-  );
-  return {
-    containerRef,
-    visibleCount,
-    hasOverflow,
-    scrollOffset,
-    setScrollOffset,
-    scrollLeft,
-    scrollRight,
-    canScrollLeft: scrollOffset > 0,
-    canScrollRight: scrollOffset + visibleCount < total
-  };
-}
-var FLUID_GRID_MIN_WIDTHS = {
-  /** Tab strip items */
-  tabItem: 100};
-var TEXT = {
-  body: "text-sm sm:text-base leading-relaxed",
-  label: "text-xs font-medium uppercase tracking-wide"};
-var THEME_CONSTANTS = {
-  text: TEXT};
-function TabStrip({
-  tabs,
-  activeKey,
-  onChange,
-  minTabWidth = FLUID_GRID_MIN_WIDTHS.tabItem,
-  className
-}) {
-  const {
-    containerRef,
-    visibleCount,
-    hasOverflow,
-    scrollLeft,
-    scrollRight,
-    setScrollOffset,
-    scrollOffset,
-    canScrollLeft,
-    canScrollRight
-  } = useVisibleItems({
-    total: tabs.length,
-    minItemWidth: minTabWidth,
-    gap: 0
-  });
-  React.useEffect(() => {
-    const idx = tabs.findIndex((t) => t.key === activeKey);
-    if (idx < 0) return;
-    if (idx < scrollOffset) {
-      setScrollOffset(idx);
-    } else if (idx >= scrollOffset + visibleCount) {
-      setScrollOffset(idx - visibleCount + 1);
-    }
-  }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
-  const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      role: "tablist",
-      className: [
-        "flex items-end border-b border-zinc-200 dark:border-zinc-700",
-        className != null ? className : ""
-      ].join(" ").trim(),
-      children: [
-        hasOverflow && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollLeft,
-            disabled: !canScrollLeft,
-            "aria-label": "Previous tabs",
-            className: "flex-none h-12 w-9 flex items-center justify-center text-zinc-500 disabled:opacity-30 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors",
-            children: "\u2039"
-          }
-        ),
-        visible.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": tab.key === activeKey,
-            "aria-disabled": tab.disabled,
-            onClick: () => !tab.disabled && onChange(tab.key),
-            style: { minWidth: `${minTabWidth}px` },
-            className: [
-              "flex-1 h-12 px-4 text-sm font-medium whitespace-nowrap border-b-2 transition-colors",
-              tab.key === activeKey ? "border-primary-500 text-primary-600 dark:text-primary-400" : "border-transparent text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
-              tab.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"
-            ].join(" ").trim(),
-            children: [
-              tab.label,
-              tab.badge != null && tab.badge > 0 && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "ml-1.5 inline-flex items-center justify-center h-4 min-w-[1rem] px-1 rounded-full text-[10px] bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400", children: tab.badge > 99 ? "99+" : tab.badge })
-            ]
-          },
-          tab.key
-        )),
-        hasOverflow && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: scrollRight,
-            disabled: !canScrollRight,
-            "aria-label": "Next tabs",
-            className: "flex-none h-12 w-9 flex items-center justify-center text-zinc-500 disabled:opacity-30 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors",
-            children: "\u203A"
-          }
-        )
-      ]
-    }
-  );
-}
-function FormGrid({
-  children,
-  minFieldWidth = 280,
-  gap = 16,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `flex flex-wrap ${className != null ? className : ""}`,
-      style: { gap: `${gap}px` },
-      children
-    }
-  );
-}
-function FormField({
-  children,
-  span = "auto",
-  className
-}) {
-  const spanClass = span === "full" ? "w-full" : span === "half" ? "w-1/2 min-w-[280px]" : "flex-1 min-w-[280px]";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${spanClass} flex flex-col gap-1.5 ${className != null ? className : ""}`, children });
-}
-function DescriptionField({
-  label,
-  value,
-  fullWidth,
-  className
-}) {
-  const isLong = fullWidth != null ? fullWidth : value.length > 80;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: [
-        "flex flex-col gap-1",
-        isLong ? "w-full" : "flex-1 min-w-[280px]",
-        className != null ? className : ""
-      ].join(" ").trim(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("dt", { className: THEME_CONSTANTS.text.label, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "dd",
-          {
-            className: isLong ? THEME_CONSTANTS.text.body : THEME_CONSTANTS.text.body,
-            children: value
-          }
-        )
-      ]
-    }
-  );
-}
-function ActiveFilterChips({
-  filters,
-  onRemove,
-  onClearAll,
-  className = "",
-  clearAllLabel = "Clear all"
-}) {
-  if (filters.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Row,
-    {
-      wrap: true,
-      gap: "sm",
-      className,
-      role: "list",
-      "aria-label": "Active filters",
-      children: [
-        filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            role: "listitem",
-            className: "inline-flex items-center gap-1 text-xs font-medium rounded-lg border border-zinc-200 dark:border-slate-700 bg-zinc-50 dark:bg-slate-800 text-zinc-800 dark:text-zinc-200 py-1 pl-2 pr-1",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "text-zinc-500 dark:text-zinc-400 mr-0.5", children: [
-                filter.label,
-                ":"
-              ] }),
-              filter.value,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onRemove(filter.key),
-                  "aria-label": `Remove ${filter.label}: ${filter.value} filter`,
-                  className: "ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      className: "w-2.5 h-2.5",
-                      fill: "none",
-                      viewBox: "0 0 24 24",
-                      stroke: "currentColor",
-                      strokeWidth: 3,
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          d: "M6 18L18 6M6 6l12 12"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          filter.key
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClearAll,
-            className: "text-xs font-medium text-primary hover:underline p-2",
-            children: clearAllLabel
-          }
-        )
-      ]
-    }
-  );
-}
-function SortDropdown({
-  value,
-  onChange,
-  options,
-  label,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Row, { gap: "sm", className, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(Span, { variant: "secondary", size: "sm", className: "whitespace-nowrap", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Select,
-      {
-        value: value != null ? value : "",
-        onChange,
-        options,
-        className: "h-9 min-h-9"
-      }
-    )
-  ] });
-}
-var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-function TablePagination({
-  currentPage,
-  totalPages,
-  pageSize,
-  total,
-  onPageChange,
-  onPageSizeChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  isLoading = false,
-  className = "",
-  compact = false,
-  labels
-}) {
-  var _a, _b, _c, _d, _e;
-  const l = {
-    paginationLabel: (_a = labels == null ? void 0 : labels.paginationLabel) != null ? _a : "Pagination",
-    showing: (_b = labels == null ? void 0 : labels.showing) != null ? _b : "Showing",
-    of: (_c = labels == null ? void 0 : labels.of) != null ? _c : "of",
-    results: (_d = labels == null ? void 0 : labels.results) != null ? _d : "results",
-    perPage: (_e = labels == null ? void 0 : labels.perPage) != null ? _e : "Per page"
-  };
-  if (compact) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "navigation",
-        "aria-label": l.paginationLabel,
-        className: `flex items-center gap-0.5 ${className}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Pagination,
-          {
-            currentPage,
-            totalPages,
-            onPageChange,
-            disabled: isLoading,
-            size: "sm",
-            maxVisible: 5
-          }
-        )
-      }
-    );
-  }
-  const from = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
-  const to = Math.min(currentPage * pageSize, total);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      role: "navigation",
-      "aria-label": l.paginationLabel,
-      className: [
-        "flex flex-col sm:flex-row items-center gap-3 px-4 py-3",
-        "border-t border-zinc-100 dark:border-slate-800/80",
-        className
-      ].join(" "),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Text,
-          {
-            size: "xs",
-            variant: "none",
-            className: "text-zinc-400 dark:text-slate-500 tabular-nums sm:mr-auto",
-            children: [
-              l.showing,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "font-semibold text-zinc-600 dark:text-slate-300", children: [
-                from,
-                "\u2013",
-                to
-              ] }),
-              " ",
-              l.of,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "font-semibold text-zinc-600 dark:text-slate-300", children: new Intl.NumberFormat().format(total) }),
-              " ",
-              l.results
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-0.5 bg-zinc-100 dark:bg-slate-800 inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Pagination,
-          {
-            currentPage,
-            totalPages,
-            onPageChange,
-            disabled: isLoading
-          }
-        ) }),
-        onPageSizeChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:ml-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "label",
-            {
-              htmlFor: "page-size-select",
-              className: "text-xs text-zinc-400 dark:text-slate-500 whitespace-nowrap",
-              children: l.perPage
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Select,
-            {
-              id: "page-size-select",
-              value: String(pageSize),
-              onChange: (value) => onPageSizeChange(Number(value)),
-              disabled: isLoading,
-              "aria-label": l.perPage,
-              className: "text-xs h-7 py-0 px-2 rounded-lg",
-              options: pageSizeOptions.map((s) => ({
-                value: String(s),
-                label: String(s)
-              }))
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function DataTable({
-  data,
-  columns,
-  keyExtractor: keyExtractorProp,
-  onRowClick,
-  loading = false,
-  emptyMessage,
-  actions,
-  mobileCardRender,
-  emptyState,
-  emptyIcon,
-  emptyTitle,
-  tableConfig,
-  paginationConfig,
-  externalPagination = false,
-  // Explicit flat props — override tableConfig when provided
-  pageSize: pageSizeProp,
-  stickyHeader: stickyHeaderProp,
-  striped: stripedProp,
-  showViewToggle: showViewToggleProp,
-  showTableView = true,
-  viewMode: controlledViewMode,
-  defaultViewMode: defaultViewModeProp,
-  onViewModeChange,
-  selectable: selectableProp,
-  selectedIds = [],
-  onSelectionChange,
-  gridCols = "cards",
-  labels = {}
-}) {
-  const resolvedTable = mergeTableConfig(tableConfig);
-  const resolvedPag = __spreadValues(__spreadValues(__spreadValues({}, DEFAULT_PAGINATION_CONFIG), tableConfig == null ? void 0 : tableConfig.pagination), paginationConfig);
-  const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((item) => {
-    var _a;
-    return (_a = item.id) != null ? _a : JSON.stringify(item);
-  });
-  const pageSize = pageSizeProp != null ? pageSizeProp : resolvedTable.pageSize;
-  const stickyHeader = stickyHeaderProp != null ? stickyHeaderProp : resolvedTable.sticky.enabled;
-  const striped = stripedProp != null ? stripedProp : resolvedTable.striped;
-  const showViewToggle = showViewToggleProp != null ? showViewToggleProp : resolvedTable.showViewToggle;
-  const selectable = selectableProp != null ? selectableProp : resolvedTable.selectable;
-  const defaultViewMode = defaultViewModeProp != null ? defaultViewModeProp : resolvedTable.defaultViewMode;
-  const [sortKey, setSortKey] = React.useState(null);
-  const [sortDirection, setSortDirection] = React.useState(null);
-  const [currentPage, setCurrentPage] = React.useState(1);
-  const [internalViewMode, setInternalViewMode] = React.useState(defaultViewMode);
-  const activeViewMode = controlledViewMode != null ? controlledViewMode : internalViewMode;
-  const {
-    loading: labelLoading = "Loading\u2026",
-    noDataTitle = "No data found",
-    noDataDescription = "There are no items to display.",
-    actions: labelActions = "Actions",
-    tableView = "Table view",
-    gridView = "Grid view",
-    listView = "List view"
-  } = labels;
-  const handleViewModeChange = (mode) => {
-    if (controlledViewMode === void 0) setInternalViewMode(mode);
-    onViewModeChange == null ? void 0 : onViewModeChange(mode);
-  };
-  const handleSort = (key) => {
-    const col = columns.find((c) => c.key === key);
-    if (!(col == null ? void 0 : col.sortable)) return;
-    if (sortKey === key) {
-      if (sortDirection === "asc") setSortDirection("desc");
-      else {
-        setSortKey(null);
-        setSortDirection(null);
-      }
-    } else {
-      setSortKey(key);
-      setSortDirection("asc");
-    }
-  };
-  const sortedData = React.useMemo(() => {
-    const sorted = [...data];
-    if (sortKey && sortDirection) {
-      sorted.sort((a, b) => {
-        const aVal = a[sortKey];
-        const bVal = b[sortKey];
-        if (aVal == null) return 1;
-        if (bVal == null) return -1;
-        if (typeof aVal === "string" && typeof bVal === "string") {
-          return sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
-        }
-        if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
-        if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
-        return 0;
-      });
-    }
-    return sorted;
-  }, [data, sortKey, sortDirection]);
-  const paginatedData = React.useMemo(() => {
-    if (externalPagination) return sortedData;
-    const start = (currentPage - 1) * pageSize;
-    return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, externalPagination, pageSize]);
-  const totalPages = Math.ceil(sortedData.length / pageSize);
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "lg", label: labelLoading }) }) });
-  }
-  if (data.length === 0) {
-    if (emptyState) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyState });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center px-4", children: [
-      emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: "mx-auto h-12 w-12 text-zinc-400",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          "aria-hidden": "true",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 1.5,
-              d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", weight: "semibold", className: "mt-4", children: emptyTitle != null ? emptyTitle : noDataTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", variant: "secondary", className: "mt-1", children: emptyMessage != null ? emptyMessage : noDataDescription })
-    ] }) }) });
-  }
-  const renderViewToggle = () => {
-    if (!showViewToggle) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex justify-end gap-1",
-        role: "toolbar",
-        "aria-label": "View mode",
-        children: [
-          showTableView && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              onClick: () => handleViewModeChange("table"),
-              "aria-label": tableView,
-              "aria-pressed": activeViewMode === "table",
-              className: `hidden sm:flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "table" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  strokeWidth: 1.5,
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M3 10h18M3 6h18M3 14h18M3 18h18"
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              onClick: () => handleViewModeChange("grid"),
-              "aria-label": gridView,
-              "aria-pressed": activeViewMode === "grid",
-              className: `flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "grid" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  strokeWidth: 1.5,
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              onClick: () => handleViewModeChange("list"),
-              "aria-label": listView,
-              "aria-pressed": activeViewMode === "list",
-              className: `flex items-center justify-center p-2 rounded-lg ring-1 transition-colors ${activeViewMode === "list" ? "bg-primary/5 text-primary dark:bg-primary/10 ring-primary/30" : "text-zinc-500 dark:text-zinc-400 ring-zinc-200 dark:ring-slate-700 hover:bg-zinc-100 dark:hover:bg-slate-800"}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  strokeWidth: 1.5,
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  };
-  const renderCardGrid = (mode) => {
-    if (!mobileCardRender) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: mode === "grid" ? `${GRID_MAP[gridCols]} gap-6` : "flex flex-col gap-4",
-        children: paginatedData.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          SelectableCard,
-          {
-            id: keyExtractor(item),
-            selectable,
-            selected: selectedIds.includes(keyExtractor(item)),
-            listMode: mode === "list",
-            onToggle: (id, checked) => onSelectionChange == null ? void 0 : onSelectionChange(
-              checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
-            ),
-            children: mobileCardRender(item)
-          },
-          keyExtractor(item)
-        ))
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    renderViewToggle(),
-    activeViewMode !== "table" && mobileCardRender && renderCardGrid(activeViewMode),
-    activeViewMode === "table" && mobileCardRender && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden space-y-6", children: paginatedData.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-      SelectableCard,
-      {
-        id: keyExtractor(item),
-        selectable,
-        selected: selectedIds.includes(keyExtractor(item)),
-        onToggle: (id, checked) => onSelectionChange == null ? void 0 : onSelectionChange(
-          checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
-        ),
-        children: mobileCardRender(item)
-      },
-      keyExtractor(item)
-    )) }),
-    activeViewMode === "table" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-zinc-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `overflow-x-auto ${stickyHeader ? "max-h-[600px] overflow-y-auto" : ""}`,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-zinc-200 dark:divide-slate-700", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "thead",
-            {
-              className: `bg-zinc-50 dark:bg-slate-800 ${stickyHeader ? "sticky top-0 z-10" : ""}`,
-              children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-                selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    className: "rounded border-zinc-300",
-                    "aria-label": "Select all on page",
-                    checked: paginatedData.length > 0 && paginatedData.every(
-                      (item) => selectedIds.includes(keyExtractor(item))
-                    ),
-                    onChange: (e) => {
-                      const pageIds = paginatedData.map(keyExtractor);
-                      onSelectionChange == null ? void 0 : onSelectionChange(
-                        e.target.checked ? [.../* @__PURE__ */ new Set([...selectedIds, ...pageIds])] : selectedIds.filter(
-                          (id) => !pageIds.includes(id)
-                        )
-                      );
-                    }
-                  }
-                ) }),
-                columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "th",
-                  {
-                    scope: "col",
-                    "aria-sort": col.sortable ? sortKey === col.key ? sortDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
-                    className: `px-6 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider ${col.sortable ? "cursor-pointer select-none hover:bg-zinc-100 dark:hover:bg-slate-700" : ""}`,
-                    style: { width: col.width },
-                    onClick: () => col.sortable && handleSort(col.key),
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      col.header,
-                      col.sortable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? sortDirection === "asc" ? "\u2191" : "\u2193" : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-30", children: "\u2195" }) })
-                    ] })
-                  },
-                  col.key
-                )),
-                actions && /* @__PURE__ */ jsxRuntime.jsx(
-                  "th",
-                  {
-                    scope: "col",
-                    className: "px-6 py-3 text-right text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
-                    children: labelActions
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white dark:bg-slate-900 divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "tr",
-            {
-              className: [
-                striped && index % 2 === 1 ? "bg-zinc-50 dark:bg-slate-800" : "",
-                onRowClick ? "cursor-pointer hover:bg-zinc-50 dark:hover:bg-slate-800/60" : "",
-                "transition-colors duration-150"
-              ].join(" "),
-              onClick: () => onRowClick == null ? void 0 : onRowClick(item),
-              children: [
-                selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    className: "px-4 py-4 w-8",
-                    onClick: (e) => e.stopPropagation(),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        type: "checkbox",
-                        className: "rounded border-zinc-300",
-                        "aria-label": "Select row",
-                        checked: selectedIds.includes(keyExtractor(item)),
-                        onChange: (e) => {
-                          const id = keyExtractor(item);
-                          onSelectionChange == null ? void 0 : onSelectionChange(
-                            e.target.checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id)
-                          );
-                        }
-                      }
-                    )
-                  }
-                ),
-                columns.map((col) => {
-                  var _a;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "td",
-                    {
-                      className: "px-6 py-4 whitespace-nowrap text-sm text-zinc-900 dark:text-zinc-100",
-                      children: col.render ? col.render(item) : (_a = item[col.key]) != null ? _a : "-"
-                    },
-                    col.key
-                  );
-                }),
-                actions && /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium",
-                    onClick: (e) => e.stopPropagation(),
-                    children: actions(item)
-                  }
-                )
-              ]
-            },
-            keyExtractor(item)
-          )) })
-        ] })
-      }
-    ) }),
-    !externalPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Pagination,
-      {
-        currentPage,
-        totalPages,
-        onPageChange: setCurrentPage,
-        maxVisible: resolvedPag.maxVisible,
-        showFirstLast: resolvedPag.showFirstLast,
-        showPrevNext: resolvedPag.showPrevNext,
-        size: resolvedPag.size
-      }
-    ) })
-  ] });
-}
-function SelectableCard({
-  id,
-  selectable,
-  selected,
-  onToggle,
-  children,
-  listMode = false
-}) {
-  if (!selectable) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full", children });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: [
-          "absolute z-10",
-          listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2"
-        ].join(" "),
-        onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-md bg-white/95 dark:bg-slate-800/95 shadow-md flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "checkbox",
-              className: [
-                "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
-                selected ? "border-2 border-primary bg-primary" : "border-2 border-zinc-500 dark:border-slate-400 bg-transparent group-hover:border-primary"
-              ].join(" "),
-              checked: selected,
-              onChange: (e) => onToggle(id, e.target.checked),
-              "aria-label": "Select item"
-            }
-          ),
-          selected && /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              className: "absolute inset-0 m-auto w-2.5 h-2.5 text-white pointer-events-none",
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: "0 0 24 24",
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 3,
-                  d: "M5 13l4 4L19 7"
-                }
-              )
-            }
-          )
-        ] }) })
-      }
-    ),
-    selected && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute inset-0 z-[5] rounded-xl ring-2 ring-primary ring-offset-0 pointer-events-none",
-        "aria-hidden": "true"
-      }
-    ),
-    children
-  ] });
-}
-
-// src/ui/animation.helper.ts
-var easings = {
-  linear: (t) => t,
-  easeInQuad: (t) => t * t,
-  easeOutQuad: (t) => t * (2 - t),
-  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
-  easeInCubic: (t) => t * t * t,
-  easeOutCubic: (t) => --t * t * t + 1,
-  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
-  easeInQuart: (t) => t * t * t * t,
-  easeOutQuart: (t) => 1 - --t * t * t * t,
-  easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t
-};
-
-// src/ui/color.helper.ts
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
-function rgbToHex(r, g, b) {
-  return "#" + [r, g, b].map((x) => {
-    const hex = x.toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }).join("");
-}
-function getContrastColor(hex) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return "#000000";
-  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-  return luminance > 0.5 ? "#000000" : "#ffffff";
-}
-function SideModal({
-  isOpen,
-  onClose,
-  title,
-  side = "right",
-  children,
-  className = ""
-}) {
-  const panelRef = React.useRef(null);
-  const titleId = React.useRef(`side-modal-title-${Math.random().toString(36).slice(2, 8)}`);
-  React.useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [isOpen, onClose]);
-  React.useEffect(() => {
-    if (isOpen) {
-      const el = panelRef.current;
-      if (el) {
-        const focusable = el.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        focusable == null ? void 0 : focusable.focus();
-      }
-    }
-  }, [isOpen]);
-  React.useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen]);
-  if (!isOpen) return null;
-  const translateOut = side === "right" ? "translate-x-full" : "-translate-x-full";
-  const origin = side === "right" ? "right-0" : "left-0";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Div,
-    {
-      className: "fixed inset-0 z-50 flex",
-      "aria-hidden": !isOpen,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Div,
-          {
-            className: "absolute inset-0 bg-black/50 transition-opacity duration-300",
-            onClick: onClose,
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Div,
-          {
-            ref: panelRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": title ? titleId.current : void 0,
-            className: `
-          absolute inset-y-0 ${origin} flex flex-col
-          w-full sm:w-[min(60vw,_672px)]
-          bg-white dark:bg-zinc-900
-          shadow-2xl
-          transition-transform duration-300 ease-in-out
-          ${isOpen ? "translate-x-0" : translateOut}
-          ${className}
-        `,
-            children: [
-              title && /* @__PURE__ */ jsxRuntime.jsxs(Div, { className: "flex items-center justify-between border-b border-neutral-200 dark:border-zinc-700 px-5 py-4 flex-shrink-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Heading,
-                  {
-                    level: 2,
-                    id: titleId.current,
-                    className: "text-base font-semibold text-neutral-900 dark:text-white truncate",
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: onClose,
-                    "aria-label": "Close panel",
-                    className: "ml-2 flex-shrink-0",
-                    children: "\u2715"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Div, { className: "flex-1 overflow-y-auto p-5", children })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-var ALLOWED_TAGS = /* @__PURE__ */ new Set([
-  "p",
-  "br",
-  "strong",
-  "em",
-  "u",
-  "s",
-  "del",
-  "ins",
-  "b",
-  "i",
-  "mark",
-  "code",
-  "pre",
-  "blockquote",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "ul",
-  "ol",
-  "li",
-  "a",
-  "hr",
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "th",
-  "td",
-  "caption",
-  "figure",
-  "figcaption",
-  "img",
-  "picture",
-  "span",
-  "div",
-  "section",
-  "article"
-]);
-var ALLOWED_ATTRS = {
-  "*": ["class", "id", "lang", "dir", "aria-label", "role", "tabindex"],
-  a: ["href", "title", "target", "rel"],
-  img: ["src", "alt", "width", "height", "loading", "data-align"],
-  td: ["colspan", "rowspan"],
-  th: ["colspan", "rowspan", "scope"],
-  ol: ["type", "start"]
-};
-function sanitiseHtml(dirty) {
-  if (typeof window === "undefined") {
-    return dirty;
-  }
-  const dp = new DOMParser();
-  const doc = dp.parseFromString(dirty, "text/html");
-  function walk(node) {
-    var _a, _b, _c, _d, _e;
-    const children = Array.from(node.children);
-    for (const child of children) {
-      const tag = child.tagName.toLowerCase();
-      if (!ALLOWED_TAGS.has(tag)) {
-        node.replaceChild(
-          document.createTextNode((_a = child.textContent) != null ? _a : ""),
-          child
-        );
-        continue;
-      }
-      const attrNames = Array.from(child.attributes).map((a) => a.name);
-      const allowed = [
-        ...(_b = ALLOWED_ATTRS["*"]) != null ? _b : [],
-        ...(_c = ALLOWED_ATTRS[tag]) != null ? _c : []
-      ];
-      for (const attr of attrNames) {
-        if (!allowed.includes(attr)) {
-          child.removeAttribute(attr);
-        }
-      }
-      if (tag === "a") {
-        const href = (_d = child.getAttribute("href")) != null ? _d : "";
-        if (/^javascript:/i.test(href)) {
-          child.removeAttribute("href");
-        }
-        if (!href.startsWith("/") && !href.startsWith("#")) {
-          child.setAttribute("rel", "noopener noreferrer");
-          child.setAttribute("target", "_blank");
-        }
-      }
-      if (tag === "img") {
-        const src = (_e = child.getAttribute("src")) != null ? _e : "";
-        if (/^data:/i.test(src)) {
-          child.removeAttribute("src");
-        }
-      }
-      walk(child);
-    }
-  }
-  walk(doc.body);
-  return doc.body.innerHTML;
-}
-function attachCopyButtons(container) {
-  container.querySelectorAll("pre").forEach((pre) => {
-    if (pre.querySelector("[data-copy-btn]")) return;
-    pre.style.position = "relative";
-    const btn = document.createElement("button");
-    btn.dataset.copyBtn = "1";
-    btn.type = "button";
-    btn.setAttribute("aria-label", "Copy code");
-    btn.textContent = "Copy";
-    btn.style.cssText = "position:absolute;top:8px;right:8px;padding:2px 10px;font-size:11px;font-family:inherit;border-radius:6px;border:1px solid rgba(148,163,184,.4);background:rgba(30,41,59,.75);color:#e2e8f0;cursor:pointer;line-height:1.6;user-select:none;transition:background .15s;";
-    btn.addEventListener("click", () => {
-      var _a, _b, _c;
-      const code = (_c = (_b = (_a = pre.querySelector("code")) == null ? void 0 : _a.textContent) != null ? _b : pre.textContent) != null ? _c : "";
-      navigator.clipboard.writeText(code).then(() => {
-        btn.textContent = "Copied!";
-        setTimeout(() => {
-          btn.textContent = "Copy";
-        }, 1800);
-      }).catch(() => {
-      });
-    });
-    pre.appendChild(btn);
-  });
-}
-function RichText({
-  html,
-  className = "",
-  proseClass = "prose dark:prose-invert max-w-none",
-  copyableCode = false,
-  highlightCode
-}) {
-  const containerRef = React.useRef(null);
-  const safe = React.useMemo(() => {
-    const sanitized = sanitiseHtml(html);
-    if (!highlightCode || typeof document === "undefined") return sanitized;
-    const container = document.createElement("div");
-    container.innerHTML = sanitized;
-    container.querySelectorAll("pre > code").forEach((codeEl) => {
-      var _a;
-      const langClass = Array.from(codeEl.classList).find(
-        (c) => c.startsWith("language-")
-      );
-      const lang = langClass ? langClass.replace("language-", "") : "plaintext";
-      const highlighted = highlightCode((_a = codeEl.textContent) != null ? _a : "", lang);
-      codeEl.innerHTML = highlighted;
-    });
-    return container.innerHTML;
-  }, [html, highlightCode]);
-  const ref = (el) => {
-    containerRef.current = el;
-    if (el && copyableCode) {
-      attachCopyButtons(el);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Div,
-    {
-      ref,
-      className: `${proseClass} ${className}`,
-      dangerouslySetInnerHTML: { __html: safe }
-    }
-  );
-}
-var DEFAULT_LABELS2 = {
-  selected: "selected",
-  apply: "Apply",
-  clearSelection: "Clear selection",
-  bulkActions: "Bulk actions"
-};
-function BulkActionBar({
-  selectedCount,
-  onClearSelection,
-  actions = [],
-  labels
-}) {
-  var _a, _b;
-  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
-  const [pickerOpen, setPickerOpen] = React.useState(false);
-  const [selectedActionId, setSelectedActionId] = React.useState(null);
-  const containerRef = React.useRef(null);
-  React.useEffect(() => {
-    const handler = (e) => {
-      var _a2;
-      if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.target))) {
-        setPickerOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-  React.useEffect(() => {
-    setSelectedActionId((prev) => {
-      var _a2;
-      const ids = actions.map((a) => a.id);
-      if (prev && ids.includes(prev)) return prev;
-      return (_a2 = ids[0]) != null ? _a2 : null;
-    });
-  }, [actions.map((a) => a.id).join(",")]);
-  if (selectedCount === 0) return null;
-  const selectedAction = actions.find((a) => a.id === selectedActionId);
-  const handleApply = () => {
-    if (!selectedActionId) return;
-    selectedAction == null ? void 0 : selectedAction.onClick();
-    setPickerOpen(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: "relative rounded-lg overflow-hidden border border-primary/20 dark:border-primary/30 animate-in fade-in slide-in-from-top-1 duration-150",
-      role: "region",
-      "aria-live": "polite",
-      "aria-label": l.bulkActions,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[3px] w-full bg-gradient-to-r from-primary-600 via-primary-400 to-primary-600 dark:from-secondary-600 dark:via-secondary-400 dark:to-secondary-600" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              onClick: onClearSelection,
-              className: "inline-flex items-center gap-1.5 flex-shrink-0 bg-primary-50 hover:bg-primary-100 active:bg-primary-200 dark:bg-primary-950/30 dark:hover:bg-primary-900/50 text-primary-700 dark:text-primary-300 rounded-full pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0",
-              "aria-label": l.clearSelection,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Span, { className: "text-xs font-semibold tabular-nums whitespace-nowrap leading-none", children: [
-                  selectedCount,
-                  " ",
-                  l.selected
-                ] })
-              ]
-            }
-          ),
-          actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              onClick: () => setPickerOpen((o) => !o),
-              "aria-haspopup": "listbox",
-              "aria-expanded": pickerOpen,
-              className: [
-                "flex-1 min-w-0 h-10 flex items-center gap-2 px-3 rounded-lg border text-sm font-medium transition-colors",
-                "bg-zinc-50 hover:bg-zinc-100 active:bg-zinc-200 dark:bg-slate-800/60 dark:hover:bg-slate-700/60",
-                "border-zinc-200 dark:border-slate-700",
-                (selectedAction == null ? void 0 : selectedAction.variant) === "danger" ? "text-red-600 dark:text-red-400" : "text-zinc-800 dark:text-zinc-100"
-              ].filter(Boolean).join(" "),
-              children: [
-                (selectedAction == null ? void 0 : selectedAction.icon) && /* @__PURE__ */ jsxRuntime.jsx(
-                  Span,
-                  {
-                    className: "flex-shrink-0 w-4 h-4 flex items-center justify-center",
-                    "aria-hidden": "true",
-                    children: selectedAction.icon
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "flex-1 truncate text-left leading-none", children: (_a = selectedAction == null ? void 0 : selectedAction.label) != null ? _a : l.bulkActions }),
-                pickerOpen ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ChevronUp,
-                  {
-                    className: "w-4 h-4 flex-shrink-0 text-zinc-400",
-                    "aria-hidden": "true"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  ChevronDown,
-                  {
-                    className: "w-4 h-4 flex-shrink-0 text-zinc-400",
-                    "aria-hidden": "true"
-                  }
-                )
-              ]
-            }
-          ),
-          actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "button",
-              variant: (_b = selectedAction == null ? void 0 : selectedAction.variant) != null ? _b : "primary",
-              size: "sm",
-              isLoading: selectedAction == null ? void 0 : selectedAction.loading,
-              disabled: !selectedActionId || (selectedAction == null ? void 0 : selectedAction.disabled) || (selectedAction == null ? void 0 : selectedAction.loading),
-              onClick: handleApply,
-              className: "h-10 flex-shrink-0",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "leading-none", children: l.apply })
-            }
-          )
-        ] }),
-        actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "listbox",
-            "aria-label": l.bulkActions,
-            className: [
-              "overflow-hidden border-t border-zinc-200/80 dark:border-slate-700/80",
-              "transition-[max-height,opacity] duration-200 ease-out",
-              pickerOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0 pointer-events-none"
-            ].filter(Boolean).join(" "),
-            children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                role: "option",
-                "aria-selected": selectedActionId === action.id,
-                disabled: action.disabled,
-                onClick: () => {
-                  setSelectedActionId(action.id);
-                  setPickerOpen(false);
-                },
-                className: [
-                  "w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-left transition-colors",
-                  "hover:bg-zinc-50 dark:hover:bg-slate-800/60",
-                  action.variant === "danger" ? "text-red-600 dark:text-red-400" : "text-zinc-700 dark:text-zinc-200",
-                  selectedActionId === action.id ? "bg-zinc-50 dark:bg-slate-800/60 font-medium" : "",
-                  action.disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"
-                ].filter(Boolean).join(" "),
-                children: [
-                  action.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                    Span,
-                    {
-                      className: "flex-shrink-0 w-4 h-4 flex items-center justify-center",
-                      "aria-hidden": "true",
-                      children: action.icon
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "flex-1", children: action.label })
-                ]
-              },
-              action.id
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-var DEFAULT_LABELS3 = {
-  filtersTitle: "Filters",
-  clearAll: "Clear all",
-  applyFilters: "Apply filters",
-  close: "Close",
-  showFilters: "Show filters",
-  hideFilters: "Hide filters",
-  filterActiveCount: (count) => `${count} active`
-};
-function ListingLayout({
-  headerSlot,
-  statusTabsSlot,
-  filterContent,
-  filterActiveCount = 0,
-  onFilterApply,
-  onFilterClear,
-  filterTitle,
-  activeFiltersSlot,
-  searchSlot,
-  sortSlot,
-  viewToggleSlot,
-  actionsSlot,
-  selectedCount = 0,
-  onClearSelection,
-  bulkActionItems,
-  toolbarPaginationSlot,
-  paginationSlot,
-  children,
-  isDashboard = false,
-  defaultSidebarOpen = false,
-  className = "",
-  loading = false,
-  errorSlot,
-  labels
-}) {
-  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels);
-  const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
-  const [mobileFilterOpen, setMobileFilterOpen] = React.useState(false);
-  const mobileOverlayRef = React.useRef(null);
-  const hasFilter = Boolean(filterContent);
-  const panelTitle = filterTitle != null ? filterTitle : l.filtersTitle;
-  const stickyTop = isDashboard ? "top-0" : "top-14 md:top-[120px]";
-  const sidebarSticky = isDashboard ? "sticky top-16" : "sticky top-[176px]";
-  React.useEffect(() => {
-    if (!mobileFilterOpen) return;
-    const handle = (e) => {
-      if (e.key === "Escape") setMobileFilterOpen(false);
-    };
-    document.addEventListener("keydown", handle);
-    return () => document.removeEventListener("keydown", handle);
-  }, [mobileFilterOpen]);
-  React.useEffect(() => {
-    if (mobileFilterOpen) {
-      const w = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.overflow = "hidden";
-      document.body.style.paddingRight = `${w}px`;
-    } else {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    };
-  }, [mobileFilterOpen]);
-  const handleMobileApply = () => {
-    onFilterApply == null ? void 0 : onFilterApply();
-    setMobileFilterOpen(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: [
-        "w-full space-y-4",
-        toolbarPaginationSlot ? selectedCount > 0 ? "pb-28 lg:pb-0" : "pb-12 lg:pb-0" : "",
-        className
-      ].filter(Boolean).join(" "),
-      children: [
-        headerSlot,
-        statusTabsSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto touch-pan-x -mx-4 px-4 md:-mx-6 md:px-6", children: statusTabsSlot }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: [
-              "sticky z-20 -mx-4 px-4 md:-mx-6 md:px-6",
-              stickyTop,
-              "bg-white/80 dark:bg-slate-950/80 backdrop-blur-md",
-              "border-b border-zinc-200/70 dark:border-slate-800/70",
-              "shadow-[0_1px_3px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
-              "py-2.5"
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex items-center gap-2 min-w-0", children: [
-                hasFilter && /* @__PURE__ */ jsxRuntime.jsxs(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "outline",
-                    size: "sm",
-                    onClick: () => setSidebarOpen((prev) => !prev),
-                    "aria-label": sidebarOpen ? l.hideFilters : l.showFilters,
-                    "aria-expanded": sidebarOpen,
-                    className: [
-                      "hidden lg:flex flex-shrink-0 items-center gap-1.5",
-                      "rounded-full h-8 px-3 text-sm font-medium",
-                      "border transition-all duration-150",
-                      sidebarOpen ? "bg-primary/10 border-primary/30 text-primary dark:bg-primary/15 dark:border-primary/40" : "border-zinc-200 dark:border-slate-700 text-zinc-600 dark:text-slate-300 hover:border-zinc-300 dark:hover:border-slate-600 hover:bg-zinc-50 dark:hover:bg-slate-800/60"
-                    ].join(" "),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(FilterIcon, {}),
-                      l.filtersTitle,
-                      filterActiveCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                        Span,
-                        {
-                          className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white",
-                          "aria-label": l.filterActiveCount(filterActiveCount),
-                          children: filterActiveCount
-                        }
-                      )
-                    ]
-                  }
-                ),
-                searchSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: searchSlot }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
-                  sortSlot,
-                  viewToggleSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 rounded-full border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-0.5 shadow-sm", children: viewToggleSlot }),
-                  actionsSlot
-                ] }),
-                toolbarPaginationSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex-shrink-0 pl-3 border-l border-zinc-200/70 dark:border-slate-700/70", children: toolbarPaginationSlot })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 lg:hidden", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  hasFilter && /* @__PURE__ */ jsxRuntime.jsxs(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "outline",
-                      size: "sm",
-                      onClick: () => setMobileFilterOpen(true),
-                      "aria-label": l.filtersTitle,
-                      className: [
-                        "flex-shrink-0 flex items-center gap-1.5",
-                        "rounded-full h-9 px-3 text-sm font-medium",
-                        "border border-zinc-200 dark:border-slate-700",
-                        "text-zinc-600 dark:text-slate-300",
-                        "hover:bg-zinc-50 dark:hover:bg-slate-800/60 transition-colors",
-                        filterActiveCount > 0 ? "border-primary/40 bg-primary/5 text-primary" : ""
-                      ].join(" "),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(FilterIcon, {}),
-                        l.filtersTitle,
-                        filterActiveCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                          Span,
-                          {
-                            className: "inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold rounded-full bg-primary text-white",
-                            "aria-label": l.filterActiveCount(filterActiveCount),
-                            children: filterActiveCount
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  searchSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: searchSlot })
-                ] }),
-                (sortSlot || viewToggleSlot || actionsSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-stretch min-h-[44px] gap-2 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0 pb-px", children: [
-                  sortSlot,
-                  viewToggleSlot,
-                  actionsSlot
-                ] }) })
-              ] }),
-              selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block pt-2 mt-2 border-t border-zinc-100 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntime.jsx(
-                BulkActionBar,
-                {
-                  selectedCount,
-                  onClearSelection,
-                  actions: bulkActionItems,
-                  labels: {
-                    selected: l.filtersTitle,
-                    // placeholder — callers provide proper labels
-                    apply: l.applyFilters,
-                    clearSelection: l.clearAll
-                  }
-                }
-              ) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 lg:gap-6 items-start", children: [
-          hasFilter && /* @__PURE__ */ jsxRuntime.jsx(
-            Aside,
-            {
-              "aria-label": panelTitle,
-              className: [
-                "hidden lg:block flex-shrink-0 self-start",
-                sidebarSticky,
-                "transition-all duration-200 ease-in-out overflow-hidden",
-                sidebarOpen ? "w-60 xl:w-64 2xl:w-72 opacity-100" : "w-0 opacity-0 pointer-events-none"
-              ].join(" "),
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: [
-                    "w-60 xl:w-64 2xl:w-72 rounded-2xl overflow-hidden",
-                    "border border-zinc-200/80 dark:border-slate-700/60",
-                    "bg-white dark:bg-slate-900",
-                    "shadow-sm"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-slate-800", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }),
-                      filterActiveCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          type: "button",
-                          variant: "ghost",
-                          size: "sm",
-                          onClick: onFilterClear,
-                          className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium",
-                          children: l.clearAll
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-5 pb-3 max-h-[calc(100vh-15rem)] overflow-y-auto space-y-4", children: filterContent }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 pt-2 border-t border-zinc-100 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "primary",
-                        className: "w-full rounded-xl",
-                        size: "sm",
-                        onClick: onFilterApply,
-                        children: l.applyFilters
-                      }
-                    ) })
-                  ]
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 space-y-3", children: [
-            activeFiltersSlot,
-            errorSlot ? errorSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              children,
-              paginationSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: paginationSlot })
-            ] })
-          ] })
-        ] }),
-        toolbarPaginationSlot && /* @__PURE__ */ jsxRuntime.jsx(
-          Nav,
-          {
-            "aria-label": "Pagination",
-            className: [
-              "fixed left-0 right-0 lg:hidden",
-              isDashboard ? "bottom-0" : selectedCount > 0 ? "bottom-28" : "bottom-14",
-              "z-[39]",
-              "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80",
-              "shadow-[0_-2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_-2px_8px_rgba(0,0,0,0.20)]",
-              "h-10 flex items-center justify-center px-3 overflow-x-auto pb-px"
-            ].join(" "),
-            children: toolbarPaginationSlot
-          }
-        ),
-        hasFilter && mobileFilterOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "fixed inset-0 z-40 bg-black/40 lg:hidden",
-              onClick: () => setMobileFilterOpen(false),
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: mobileOverlayRef,
-              className: "fixed inset-0 z-50 flex flex-col lg:hidden bg-white dark:bg-slate-950",
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": panelTitle,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-slate-800 flex-shrink-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Text, { weight: "semibold", children: [
-                    panelTitle,
-                    filterActiveCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "ml-2 inline-flex items-center justify-center w-5 h-5 text-[11px] font-bold rounded-full bg-primary text-white", children: filterActiveCount })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: () => setMobileFilterOpen(false),
-                      "aria-label": l.close,
-                      className: "rounded-full w-8 h-8 p-0 flex items-center justify-center hover:bg-zinc-100 dark:hover:bg-slate-800",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
-                        {
-                          className: "w-4 h-4",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          "aria-hidden": "true",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              strokeWidth: 2,
-                              d: "M6 18L18 6M6 6l12 12"
-                            }
-                          )
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-4 pt-6 pb-4 space-y-4", children: filterContent }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex gap-3 px-4 py-4 border-t border-zinc-100 dark:border-slate-800 bg-white dark:bg-slate-950", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "secondary",
-                      className: "flex-1 rounded-xl",
-                      onClick: () => onFilterClear == null ? void 0 : onFilterClear(),
-                      children: l.clearAll
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "primary",
-                      className: "flex-1 rounded-xl",
-                      onClick: handleMobileApply,
-                      children: l.applyFilters
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function FilterIcon() {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-4 h-4",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"
-        }
-      )
-    }
-  );
-}
-/*! Bundled license information:
-
-lucide-react/dist/esm/shared/src/utils/mergeClasses.js:
-lucide-react/dist/esm/shared/src/utils/toKebabCase.js:
-lucide-react/dist/esm/shared/src/utils/toCamelCase.js:
-lucide-react/dist/esm/shared/src/utils/toPascalCase.js:
-lucide-react/dist/esm/defaultAttributes.js:
-lucide-react/dist/esm/shared/src/utils/hasA11yProp.js:
-lucide-react/dist/esm/context.js:
-lucide-react/dist/esm/Icon.js:
-lucide-react/dist/esm/createLucideIcon.js:
-lucide-react/dist/esm/icons/check.js:
-lucide-react/dist/esm/icons/chevron-down.js:
-lucide-react/dist/esm/icons/chevron-left.js:
-lucide-react/dist/esm/icons/chevron-right.js:
-lucide-react/dist/esm/icons/chevron-up.js:
-lucide-react/dist/esm/icons/loader-circle.js:
-lucide-react/dist/esm/icons/star.js:
-lucide-react/dist/esm/icons/x.js:
-lucide-react/dist/esm/icons/zoom-in.js:
-lucide-react/dist/esm/lucide-react.js:
-  (**
-   * @license lucide-react v1.7.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/
-
-exports.Accordion = Accordion;
-exports.AccordionItem = AccordionItem;
-exports.ActiveFilterChips = ActiveFilterChips;
-exports.Alert = Alert;
-exports.Article = Article;
-exports.Aside = Aside;
-exports.Badge = Badge;
-exports.BlockFooter = BlockFooter;
-exports.BlockHeader = BlockHeader;
-exports.Breadcrumb = Breadcrumb;
-exports.BulkActionBar = BulkActionBar;
-exports.Button = Button;
-exports.Caption = Caption;
-exports.Container = Container;
-exports.CountdownDisplay = CountdownDisplay;
-exports.DEFAULT_PAGINATION_CONFIG = DEFAULT_PAGINATION_CONFIG;
-exports.DEFAULT_STICKY_CONFIG = DEFAULT_STICKY_CONFIG;
-exports.DEFAULT_TABLE_CONFIG = DEFAULT_TABLE_CONFIG;
-exports.DataTable = DataTable;
-exports.DescriptionField = DescriptionField;
-exports.Div = Div;
-exports.Divider = Divider;
-exports.Drawer = Drawer;
-exports.Footer = Footer;
-exports.Form = Form;
-exports.FormField = FormField;
-exports.FormGrid = FormGrid;
-exports.GRID_MAP = GRID_MAP;
-exports.Grid = Grid;
-exports.Header = Header;
-exports.Heading = Heading;
-exports.HorizontalScroller = HorizontalScroller;
-exports.IconButton = IconButton;
-exports.ImageLightbox = ImageLightbox;
-exports.IndeterminateProgress = IndeterminateProgress;
-exports.Input = Input;
-exports.ItemRow = ItemRow;
-exports.Label = Label;
-exports.Li = Li;
-exports.ListingLayout = ListingLayout;
-exports.Main = Main;
-exports.Modal = Modal;
-exports.Nav = Nav;
-exports.Ol = Ol;
-exports.Pagination = Pagination;
-exports.PriceDisplay = PriceDisplay;
-exports.Progress = Progress;
-exports.RatingDisplay = RatingDisplay;
-exports.RichText = RichText;
-exports.Row = Row;
-exports.Section = Section;
-exports.Select = Select;
-exports.SideModal = SideModal;
-exports.Skeleton = Skeleton;
-exports.Slider = Slider;
-exports.SortDropdown = SortDropdown;
-exports.Span = Span;
-exports.Spinner = Spinner;
-exports.Stack = Stack;
-exports.StarRating = StarRating;
-exports.StatsGrid = StatsGrid;
-exports.StatusBadge = StatusBadge;
-exports.StepperNav = StepperNav;
-exports.SummaryCard = SummaryCard;
-exports.TabStrip = TabStrip;
-exports.TablePagination = TablePagination;
-exports.TagInput = TagInput;
-exports.Text = Text;
-exports.TextLink = TextLink;
-exports.Textarea = Textarea;
-exports.Tooltip = Tooltip;
-exports.Ul = Ul;
-exports.ViewToggle = ViewToggle;
-exports.classNames = classNames;
-exports.easings = easings;
-exports.getContrastColor = getContrastColor;
-exports.hexToRgb = hexToRgb;
-exports.mergeTableConfig = mergeTableConfig;
-exports.mergeTailwindClasses = mergeTailwindClasses;
-exports.rgbToHex = rgbToHex;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map