@geomak/ui 6.34.0 → 7.0.0

package/dist/index.cjs

@@ -57,6 +57,15 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
+// src/utils/cx.ts
+function cx(...values) {
+  let out = "";
+  for (const value of values) {
+    if (!value) continue;
+    out += (out && " ") + value;
+  }
+  return out;
+}
 function Portal({ children, target }) {
   const [resolved, setResolved] = React28.useState(null);
   React28.useEffect(() => {
@@ -142,7 +151,7 @@ function Box({
     Element,
     {
       onClick,
-      className: [
+      className: cx(
         padding(p, "p"),
         padding(px2, "px"),
         padding(py, "py"),
@@ -162,7 +171,7 @@ function Box({
         radius ? RADIUS_MAP[radius] : "",
         SHADOW_MAP[shadow],
         className
-      ].filter(Boolean).join(" "),
+      ),
       style: {
         width: typeof width === "number" ? `${width}px` : width,
         height: typeof height === "number" ? `${height}px` : height,
@@ -221,7 +230,7 @@ function Flex({
     Box,
     {
       ...boxProps,
-      className: [
+      className: cx(
         inline ? "inline-flex" : "flex",
         DIRECTION_CLASS[direction],
         align ? ALIGN_CLASS[align] : "",
@@ -229,7 +238,7 @@ function Flex({
         wrap ? WRAP_CLASS[wrap] : "",
         gap ? GAP_MAP[gap] : "",
         className
-      ].filter(Boolean).join(" ")
+      )
     }
   );
 }
@@ -296,7 +305,7 @@ function Grid({
     Box,
     {
       ...boxProps,
-      className: [
+      className: cx(
         "grid",
         colClass,
         rowClass,
@@ -306,7 +315,7 @@ function Grid({
         align ? ALIGN_CLASS2[align] : "",
         justify ? JUSTIFY_CLASS2[justify] : "",
         className
-      ].filter(Boolean).join(" "),
+      ),
       style: {
         gridTemplateColumns: inlineCols,
         gridTemplateRows: inlineRows,
@@ -466,7 +475,7 @@ function Typography({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Element,
     {
-      className: [
+      className: cx(
         VARIANT_CLASS[variant],
         COLOR_CLASS[color],
         weight ? WEIGHT_CLASS[weight] : "",
@@ -474,7 +483,7 @@ function Typography({
         truncate ? "truncate" : "",
         muted ? "opacity-60" : "",
         className
-      ].filter(Boolean).join(" "),
+      ),
       style,
       children
     }
@@ -486,7 +495,7 @@ function IconButton({
   type = "primary",
   buttonType = "button",
   disabled = false,
-  size = "lg",
+  size = "md",
   loading = false,
   loadingIcon,
   title,
@@ -511,7 +520,7 @@ function IconButton({
       title,
       "aria-label": title,
       style,
-      className: `${size === "sm" ? "p-1" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
+      className: `${size === "sm" ? "p-1" : size === "md" ? "p-1.5" : "p-2"} rounded-lg shadow-md transition-colors duration-150 ${colorScheme} disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`.trim(),
       children: loading ? loadingIcon : icon
     }
   );
@@ -607,14 +616,14 @@ var Button = React28__default.default.forwardRef(function Button2({
       disabled: disabled || loading,
       type: buttonType,
       style,
-      className: [
+      className: cx(
         "inline-flex items-center justify-center font-medium",
         "outline-none transition-colors duration-150 select-none",
         "whitespace-nowrap",
         SIZE_CLASSES[size],
         VARIANT_CLASSES[variant],
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         loading ? /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
@@ -724,7 +733,7 @@ var SIZE_MAP = {
 function Modal({
   width,
   size = "md",
-  isOpen = false,
+  open = false,
   onClose,
   onOk,
   onCancel,
@@ -737,10 +746,10 @@ function Modal({
 }) {
   const reduced = framerMotion.useReducedMotion();
   const maxWidth = width ?? SIZE_MAP[size];
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
-    if (!open) onClose?.();
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open, onOpenChange: (next) => {
+    if (!next) onClose?.();
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         className: "fixed inset-0 bg-backdrop z-overlay",
@@ -750,7 +759,7 @@ function Modal({
         transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" }
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
         className: `fixed left-1/2 top-1/2 z-modal flex flex-col w-[calc(100%-2rem)] max-h-[90dvh] bg-surface rounded-2xl shadow-xl overflow-hidden focus:outline-none ${className}`.trim(),
@@ -776,7 +785,7 @@ function Modal({
               {
                 "aria-label": "Close",
                 className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
               }
             ) })
           ] }),
@@ -812,7 +821,7 @@ var SIZE_MAP2 = {
   full: "calc(100vw - 1rem)"
 };
 function Drawer({
-  isOpen = false,
+  open = false,
   onClose,
   hasFooter = true,
   placement = "right",
@@ -831,10 +840,10 @@ function Drawer({
   const hiddenX = isRight ? "100%" : "-100%";
   const resolvedWidth = width ?? SIZE_MAP2[size];
   const widthCss = typeof resolvedWidth === "number" ? `${resolvedWidth}px` : resolvedWidth;
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open: isOpen, onOpenChange: (open) => {
-    if (!open) onClose?.();
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Root, { open, onOpenChange: (next) => {
+    if (!next) onClose?.();
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog__namespace.Portal, { forceMount: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
         className: "fixed inset-0 bg-backdrop z-overlay",
@@ -844,7 +853,7 @@ function Drawer({
         transition: { duration: reduced ? 0 : 0.2, ease: "easeOut" }
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
         className: `fixed top-0 bottom-0 ${isRight ? "right-0" : "left-0"} z-modal flex flex-col bg-surface shadow-xl focus:outline-none ${className}`.trim(),
@@ -869,7 +878,7 @@ function Drawer({
               {
                 "aria-label": "Close drawer",
                 className: "flex h-7 w-7 items-center justify-center rounded-lg text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
               }
             ) })
           ] }),
@@ -904,7 +913,7 @@ function Tooltip({
       {
         side: placement,
         sideOffset,
-        className: [
+        className: cx(
           // Layout + typography
           "pointer-events-none z-[500000] max-w-[220px] px-2.5 py-1.5",
           // Inverted surface: dark on light, light on dark — both readable
@@ -917,7 +926,7 @@ function Tooltip({
           // In animation — direction-aware
           ANIMATION[placement],
           className
-        ].filter(Boolean).join(" "),
+        ),
         children: [
           title,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -949,7 +958,7 @@ var MARKER_TRANSITION = { duration: 0.26, ease: [0.16, 1, 0.3, 1] };
 function Tabs({
   value,
   defaultValue,
-  onValueChange,
+  onChange,
   variant = "underline",
   size = "md",
   orientation = "horizontal",
@@ -964,8 +973,8 @@ function Tabs({
   const indicatorId = React28.useId();
   const select = React28.useCallback((next) => {
     if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  }, [isControlled, onValueChange]);
+    onChange?.(next);
+  }, [isControlled, onChange]);
   const registry = React28.useRef(/* @__PURE__ */ new Map());
   const orderRef = React28.useRef(0);
   const [, bump] = React28.useState(0);
@@ -984,11 +993,11 @@ function Tabs({
       value: current,
       onValueChange: select,
       orientation,
-      className: [
+      className: cx(
         "flex min-w-0",
         orientation === "vertical" ? "flex-row gap-4" : "flex-col gap-3",
         className
-      ].filter(Boolean).join(" "),
+      ),
       style,
       children
     }
@@ -1056,14 +1065,14 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
   })();
   const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
   const overflowing = scrollable && (edges.start || edges.end);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className), children: [
     scrollable && edges.start && /* @__PURE__ */ jsxRuntime.jsx(Chevron2, { side: "start", orientation, onClick: () => nudge(-1) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TabsPrimitive__namespace.List,
       {
         ref: scrollRef,
         "aria-label": ariaLabel,
-        className: [scrollClass, trackClass, "min-w-0 flex-1"].filter(Boolean).join(" "),
+        className: cx(scrollClass, trackClass, "min-w-0 flex-1"),
         style: maskStyle,
         children
       }
@@ -1192,7 +1201,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
     {
       value,
       disabled,
-      className: [base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
+      className: cx(base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className),
       children: [
         variant === "segmented" && isActive && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.span,
@@ -1261,7 +1270,7 @@ function TabsPanel({ value, keepMounted, className = "", style, children }) {
     {
       value,
       forceMount: keepMounted || void 0,
-      className: ["min-w-0 flex-1 focus:outline-none data-[state=inactive]:hidden", className].filter(Boolean).join(" "),
+      className: cx("min-w-0 flex-1 focus:outline-none data-[state=inactive]:hidden", className),
       style,
       children
     }
@@ -1384,17 +1393,17 @@ function Accordion2({
   type = "single",
   defaultValue,
   value,
-  onValueChange,
+  onChange,
   collapsible = true,
   variant = "separated",
   className = "",
   style
 }) {
   const common = {
-    className: [
+    className: cx(
       variant === "contained" ? "rounded-lg border border-border bg-surface overflow-hidden divide-y divide-border" : "flex flex-col gap-2",
       className
-    ].filter(Boolean).join(" "),
+    ),
     style
   };
   const inner = /* @__PURE__ */ jsxRuntime.jsx(AccordionCtx.Provider, { value: { variant }, children });
@@ -1405,7 +1414,7 @@ function Accordion2({
         type: "multiple",
         defaultValue,
         value,
-        onValueChange,
+        onValueChange: onChange,
         ...common,
         children: inner
       }
@@ -1418,7 +1427,7 @@ function Accordion2({
       collapsible,
       defaultValue,
       value,
-      onValueChange,
+      onValueChange: onChange,
       ...common,
       children: inner
     }
@@ -1443,11 +1452,11 @@ function AccordionItem({ value, title, icon, children, disabled, className = ""
     {
       value,
       disabled,
-      className: [
+      className: cx(
         variant === "separated" ? "rounded-lg border border-border bg-surface overflow-hidden" : "",
         "data-[disabled]:opacity-60",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "m-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionPrimitive__namespace.Trigger,
@@ -1507,7 +1516,7 @@ function Breadcrumbs({
   } else {
     items.forEach((item, index) => visible.push({ item, index }));
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: ["min-w-0", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 flex-nowrap min-w-0", children: visible.map((entry, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cx("min-w-0", className), style, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 flex-nowrap min-w-0", children: visible.map((entry, i) => {
     const isLast = i === visible.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5 min-w-0", children: [
       entry === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1586,12 +1595,12 @@ function Badge({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
-        className: [
+        className: cx(
           "inline-flex items-center font-medium select-none whitespace-nowrap leading-none",
           SIZE2[size],
           TONE[tone][variant],
           className
-        ].filter(Boolean).join(" "),
+        ),
         style,
         children: [
           icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center", children: icon }),
@@ -1603,19 +1612,19 @@ function Badge({
   const indicator = dot ? /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: ["inline-block rounded-full", size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", TONE[tone].dot, className].filter(Boolean).join(" "),
+      className: cx("inline-block rounded-full", size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", TONE[tone].dot, className),
       style: children ? void 0 : style,
       "aria-hidden": children ? true : void 0
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: [
+      className: cx(
         "inline-flex items-center justify-center rounded-full font-semibold leading-none tabular-nums",
         size === "sm" ? "h-4 min-w-4 px-1 text-[10px]" : "h-[18px] min-w-[18px] px-1.5 text-[11px]",
         TONE[tone].solid,
         className
-      ].filter(Boolean).join(" "),
+      ),
       style: children ? void 0 : style,
       children: display2
     }
@@ -1701,7 +1710,7 @@ function Stepper({
   const clickable = (i) => Boolean(onStepClick) && i <= current;
   const stepButton = (i, node) => clickable(i) ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onStepClick?.(i), className: "rounded-md text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-accent", children: node }) : node;
   if (vertical) {
-    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: ["flex flex-col", className].filter(Boolean).join(" "), children: steps.map((step, i) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cx("flex flex-col", className), children: steps.map((step, i) => {
       const state = stateOf(i);
       const last = i === steps.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex gap-3", children: [
@@ -1713,7 +1722,7 @@ function Stepper({
       ] }, step.key);
     }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: ["flex items-start", className].filter(Boolean).join(" "), children: steps.map((step, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cx("flex items-start", className), children: steps.map((step, i) => {
     const state = stateOf(i);
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative flex flex-1 flex-col items-center", children: [
       i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-1/2 h-0.5 w-full bg-border", style: { top: s.center - 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1747,7 +1756,7 @@ function Timeline({ events, current, className = "" }) {
     if (current == null) return "upcoming";
     return i < current ? "complete" : i === current ? "current" : "upcoming";
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: ["flex flex-col", className].filter(Boolean).join(" "), children: events.map((event, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: cx("flex flex-col", className), children: events.map((event, i) => {
     const status = statusOf(event, i);
     const last = i === events.length - 1;
     const railFilled = status === "complete";
@@ -1790,22 +1799,22 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React28__default.default.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React28__default.default.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size], className].filter(Boolean).join(" "), style, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: cx(cap, SIZE3[size], className), style, children });
 }
 var PAD = { none: "", sm: "p-3", md: "p-5", lg: "p-6" };
 function Card({ children, interactive, onClick, padding: padding2 = "none", flush, className = "", style }) {
-  const base = [
+  const base = cx(
     "rounded-xl overflow-hidden bg-surface",
     flush ? "" : "border border-border shadow-sm",
     PAD[padding2],
     interactive ? "transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent" : "",
     className
-  ].filter(Boolean).join(" ");
+  );
   if (interactive && onClick) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1828,10 +1837,10 @@ function Card({ children, interactive, onClick, padding: padding2 = "none", flus
   return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick, className: base, style, children });
 }
 function CardMedia({ children, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["[&>img]:block [&>img]:w-full [&>img]:object-cover", className].filter(Boolean).join(" "), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("[&>img]:block [&>img]:w-full [&>img]:object-cover", className), children });
 }
 function CardHeader({ title, subtitle, action, avatar, children, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-start gap-3 px-5 pt-5", children ? "pb-0" : "pb-3", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex items-start gap-3 px-5 pt-5", children ? "pb-0" : "pb-3", className), children: [
     avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: avatar }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground leading-snug", children: title }),
@@ -1842,10 +1851,10 @@ function CardHeader({ title, subtitle, action, avatar, children, className = ""
   ] });
 }
 function CardBody({ children, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["px-5 py-4 text-sm text-foreground-secondary leading-relaxed", className].filter(Boolean).join(" "), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("px-5 py-4 text-sm text-foreground-secondary leading-relaxed", className), children });
 }
 function CardFooter({ children, noDivider, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["flex items-center gap-2 px-5 py-3", noDivider ? "" : "border-t border-border", className].filter(Boolean).join(" "), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("flex items-center gap-2 px-5 py-3", noDivider ? "" : "border-t border-border", className), children });
 }
 Card.Media = CardMedia;
 Card.Header = CardHeader;
@@ -1921,7 +1930,7 @@ function FlatCarousel({
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     el.scrollTo({ left: i * slideW, behavior: "smooth" });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, "aria-roledescription": "carousel", className: ["relative", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, "aria-roledescription": "carousel", className: cx("relative", className), style, children: [
     showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => slideStep(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollerRef, className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth", style: { gap }, children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i)) }),
     showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => slideStep(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
@@ -1964,7 +1973,7 @@ function RotatingCarousel({
     {
       "aria-label": ariaLabel,
       "aria-roledescription": "carousel",
-      className: ["relative", className].filter(Boolean).join(" "),
+      className: cx("relative", className),
       style,
       onKeyDown,
       children: [
@@ -2027,7 +2036,7 @@ function fieldShell({
   sized = true
 } = {}) {
   const s = FIELD_SIZE[size];
-  return [
+  return cx(
     "w-full rounded-lg border bg-surface text-foreground",
     "transition-[color,box-shadow,border-color] duration-150",
     s.text,
@@ -2041,7 +2050,7 @@ function fieldShell({
     hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
     // placeholder colour for native inputs
     "placeholder:text-foreground-muted"
-  ].filter(Boolean).join(" ");
+  );
 }
 function FieldHelpIcon({ text }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: text, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2074,14 +2083,14 @@ function FieldLabel({
     "div",
     {
       style: { width: horizontal ? width : void 0, ...style },
-      className: [
+      className: cx(
         "flex items-center gap-1",
         horizontal ? "flex-shrink-0 whitespace-nowrap" : "",
         // Only the 'start' alignment needs the top nudge; 'center' relies
         // on the row's items-center to line up with a short control.
         horizontal && align === "start" ? "mt-2" : "",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         label != null && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, className: "text-sm font-medium text-foreground select-none", children: [
           label,
@@ -2111,11 +2120,11 @@ function Field({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [
+      className: cx(
         "flex",
         horizontal ? `flex-row gap-3 ${labelAlign === "center" ? "items-center" : "items-start"}` : "flex-col gap-1.5",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           FieldLabel,
@@ -2154,7 +2163,7 @@ var SKELETON_ROWS = [
   { own: true, w: 90 }
 ];
 function ChatSkeleton() {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex items-end gap-2", r.own ? "flex-row-reverse" : ""), children: [
     !r.own && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
   ] }, i)) });
@@ -2217,7 +2226,7 @@ function Chat({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: ["flex flex-col overflow-hidden rounded-xl border border-border bg-surface", className].filter(Boolean).join(" "),
+      className: cx("flex flex-col overflow-hidden rounded-xl border border-border bg-surface", className),
       style: { height, ...style },
       children: [
         hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-3", children: [
@@ -2237,18 +2246,18 @@ function Chat({
               const firstOfGroup = !prev || prev.authorId !== m.authorId;
               const lastOfGroup = !next || next.authorId !== m.authorId;
               const ts = m.timestamp ? toDate(m.timestamp) : null;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-end gap-2", own ? "flex-row-reverse" : "", firstOfGroup ? "mt-2 first:mt-0" : ""].filter(Boolean).join(" "), children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex items-end gap-2", own ? "flex-row-reverse" : "", firstOfGroup ? "mt-2 first:mt-0" : ""), children: [
                 !own && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 flex-shrink-0", children: lastOfGroup && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: m.avatar, alt: m.authorName ?? "User", fallback: initials(m.authorName), size: "xs" }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex max-w-[78%] flex-col", own ? "items-end" : "items-start"].join(" "), children: [
                   firstOfGroup && !own && m.authorName && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-0.5 px-1 text-[11px] font-medium text-foreground-muted", children: m.authorName }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: [
+                      className: cx(
                         "whitespace-pre-wrap break-words px-3 py-1.5 text-sm leading-snug",
                         own ? "rounded-2xl bg-accent text-accent-fg" : "rounded-2xl border border-border bg-surface text-foreground",
                         lastOfGroup ? own ? "rounded-br-md" : "rounded-bl-md" : ""
-                      ].filter(Boolean).join(" "),
+                      ),
                       children: m.text
                     }
                   ),
@@ -2341,7 +2350,7 @@ function Statistic({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: ["flex gap-3", align === "center" ? "flex-col items-center text-center" : "items-start", className].filter(Boolean).join(" "),
+      className: cx("flex gap-3", align === "center" ? "flex-col items-center text-center" : "items-start", className),
       style,
       children: [
         icon && align === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-5 w-5 inline-flex items-center justify-center", children: icon }) }),
@@ -2434,7 +2443,7 @@ function FAB({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: [fixed ? "fixed" : "absolute", "z-40 flex flex-col", POS[position], className].filter(Boolean).join(" "),
+      className: cx(fixed ? "fixed" : "absolute", "z-40 flex flex-col", POS[position], className),
       style,
       children: [
         bottom && dial,
@@ -2445,13 +2454,13 @@ function FAB({
             "aria-label": label,
             "aria-expanded": hasDial ? open : void 0,
             onClick: (e) => hasDial ? setOpen((o) => !o) : onClick?.(e),
-            className: [
+            className: cx(
               "flex items-center justify-center rounded-full shadow-lg transition-[background-color,transform] duration-200",
               "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
               SIZE4[size],
               TONE3[tone],
               hasDial && open ? "rotate-45" : ""
-            ].filter(Boolean).join(" "),
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 inline-flex items-center justify-center", children: icon })
           }
         ),
@@ -2519,7 +2528,7 @@ function PopConfirm({
         side,
         sideOffset: 8,
         collisionPadding: 12,
-        className: ["z-[400] focus:outline-none", className].filter(Boolean).join(" "),
+        className: cx("z-[400] focus:outline-none", className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             framerMotion.motion.div,
@@ -2650,7 +2659,7 @@ function LogoutTimer({
       clearTimers();
     };
   }, [enabled, timeout, countdown, events.join(","), startIdle, clearTimers]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: warning, onClose: stay, hasFooter: false, title, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { open: warning, onClose: stay, hasFooter: false, title, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground-secondary", children: description }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-semibold tabular-nums text-foreground", "aria-live": "polite", children: formatTime(remaining) }),
@@ -2729,19 +2738,19 @@ function SegmentedControl({
             "aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
             "aria-invalid": hasError || void 0,
             "aria-describedby": hasError ? errorId : void 0,
-            className: [
+            className: cx(
               "inline-flex items-center gap-1 rounded-lg border bg-surface-raised p-1",
               hasError ? "border-status-error" : "border-border",
               sz.h,
               fullWidth ? "flex w-full" : "w-fit",
               disabled ? "opacity-60 cursor-not-allowed" : ""
-            ].filter(Boolean).join(" "),
+            ),
             children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
               ToggleGroup__namespace.Item,
               {
                 value: opt.value,
                 disabled: opt.disabled,
-                className: [
+                className: cx(
                   "inline-flex items-center justify-center gap-1.5 rounded-md select-none whitespace-nowrap",
                   "transition-colors duration-150 h-full",
                   sz.text,
@@ -2753,7 +2762,7 @@ function SegmentedControl({
                   "data-[state=on]:bg-surface data-[state=on]:text-accent data-[state=on]:shadow-sm",
                   "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
                   "disabled:opacity-40 disabled:cursor-not-allowed"
-                ].filter(Boolean).join(" "),
+                ),
                 children: [
                   opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: opt.icon }),
                   opt.label
@@ -2795,6 +2804,7 @@ var addDays = (d, n) => {
 var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
 var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 var isToday = (d) => sameDay(d, /* @__PURE__ */ new Date());
+var dayKey = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
 var isSameMonth = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
 var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
 var endOfMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
@@ -2911,7 +2921,7 @@ function Scheduler({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: ["flex flex-col overflow-hidden rounded-xl border border-border bg-surface", className].filter(Boolean).join(" "),
+      className: cx("flex flex-col overflow-hidden rounded-xl border border-border bg-surface", className),
       style,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3", children: [
@@ -3070,6 +3080,17 @@ function MonthYearPicker({ label, cursor, onPick }) {
   ] });
 }
 var MAX_CHIPS = 3;
+var NO_EVENTS = [];
+function bucketByDay(events) {
+  const map = /* @__PURE__ */ new Map();
+  for (const e of events) {
+    const key = dayKey(e.start);
+    const bucket = map.get(key);
+    if (bucket) bucket.push(e);
+    else map.set(key, [e]);
+  }
+  return map;
+}
 function MonthView({
   cursor,
   weekStartsOn,
@@ -3078,12 +3099,13 @@ function MonthView({
   onSelectEvent
 }) {
   const grid = React28.useMemo(() => buildMonthGrid(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const eventsByDay = React28.useMemo(() => bucketByDay(events), [events]);
   const labels = weekdayLabels(weekStartsOn);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 border-b border-border", children: labels.map((l) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: l }, l)) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid flex-1 grid-cols-7 grid-rows-6", children: grid.map((day, i) => {
       const inMonth = isSameMonth(day, cursor);
-      const dayEvents = events.filter((e) => sameDay(e.start, day));
+      const dayEvents = eventsByDay.get(dayKey(day)) ?? NO_EVENTS;
       const today = isToday(day);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -3152,6 +3174,7 @@ function WeekView({
   onSelectEvent
 }) {
   const days = React28.useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
+  const eventsByDay = React28.useMemo(() => bucketByDay(events), [events]);
   const labels = React28.useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
   const dow = (d) => labels[(d.getDay() - weekStartsOn + 7) % 7];
   const [startHour, endHour] = dayHours;
@@ -3172,7 +3195,7 @@ function WeekView({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid", style: { gridTemplateColumns: `3.5rem repeat(7, 1fr)`, height: gridHeight }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative border-r border-border", children: hours.map((h, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 -translate-y-1/2 text-[10px] tabular-nums text-foreground-muted", style: { top: i * hourHeight }, children: i === 0 ? "" : hourLabel(h) }, h)) }),
       days.map((day) => {
-        const dayEvents = events.filter((e) => sameDay(e.start, day) && !e.allDay);
+        const dayEvents = (eventsByDay.get(dayKey(day)) ?? NO_EVENTS).filter((e) => !e.allDay);
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative border-r border-border last:border-r-0", children: [
           hours.map((h, i) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -3260,7 +3283,7 @@ function EmptyCart({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: ["flex flex-col items-center justify-center px-6 py-10 text-center", className].filter(Boolean).join(" "),
+      className: cx("flex flex-col items-center justify-center px-6 py-10 text-center", className),
       style,
       children: [
         art && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: art }),
@@ -3279,9 +3302,9 @@ var Stepper2 = ({
 }) => {
   const btn = "flex h-7 w-7 items-center justify-center text-foreground-secondary hover:bg-surface-raised disabled:opacity-40 disabled:hover:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset transition-colors";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center rounded-md border border-border overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease quantity", disabled: quantity <= 1, onClick: () => onChange?.(quantity - 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease quantity", disabled: quantity <= 1, onClick: () => onChange?.(quantity - 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M5 12h14" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-8 text-center text-sm tabular-nums text-foreground select-none", children: quantity }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase quantity", disabled: max != null && quantity >= max, onClick: () => onChange?.(quantity + 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase quantity", disabled: max != null && quantity >= max, onClick: () => onChange?.(quantity + 1), className: btn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M12 5v14M5 12h14" }) }) })
   ] });
 };
 function Cart({
@@ -3298,7 +3321,7 @@ function Cart({
 }) {
   const subtotal = items.reduce((sum, it) => sum + it.price * it.quantity, 0);
   const total = subtotal + summaryRows.reduce((sum, r) => sum + r.value, 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex flex-col rounded-xl border border-border bg-surface", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col rounded-xl border border-border bg-surface", className), style, children: [
     items.length === 0 ? emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(EmptyCart, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border", children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-3 p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-md bg-surface-raised", children: it.image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: it.image, alt: "", className: "h-full w-full object-cover" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -4142,7 +4165,7 @@ function Checkout({
   const subtotal = items.reduce((sum, it) => sum + it.price * it.quantity, 0);
   const total = subtotal + summaryRows.reduce((sum, r) => sum + r.value, 0);
   const isEmpty2 = items.length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["mx-auto w-full max-w-5xl", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("mx-auto w-full max-w-5xl", className), children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-6 text-2xl font-semibold tracking-tight text-foreground", children: title }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("section", { "aria-label": "Order summary", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4613,14 +4636,14 @@ function ScalableContainer({
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
         height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
-      className: [
+      className: cx(
         "relative rounded-lg overflow-hidden",
         // OS-window aesthetic: subtle elevation at rest, lifted shadow
         // when expanded. No background colour change.
         isScaled ? "shadow-2xl" : "shadow-md",
         "transition-shadow duration-300",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -4768,7 +4791,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
         onClick: previousApp,
         "aria-label": "Previous",
         className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rotate-180",
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: indexPool.map((index, id) => {
@@ -4805,7 +4828,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
         onClick: nextApp,
         "aria-label": "Next",
         className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence",
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     )
   ] }) });
@@ -5412,8 +5435,8 @@ function Pagination({
   const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
   const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
   const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsxRuntime.jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
-  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
-  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
+  const chevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
     options.withPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
@@ -5789,11 +5812,11 @@ function MegaMenu({
       {
         delayDuration,
         "aria-label": ariaLabel,
-        className: [
+        className: cx(
           "relative z-10 w-full",
           responsive ? "hidden md:flex" : "flex",
           className
-        ].filter(Boolean).join(" "),
+        ),
         style,
         children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.List, { className: "flex items-center gap-1", children })
       }
@@ -5806,13 +5829,13 @@ function MegaMenuItem({ label, icon, href, children, className = "" }) {
   const { align } = React28.useContext(MegaMenuContext);
   const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
   if (!children) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: cx(TOP_ITEM, className), children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
       label
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Item, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Trigger, { className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Trigger, { className: cx(TOP_ITEM, className), children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
       label,
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -5850,14 +5873,14 @@ function MegaMenuPanel({ children, columns, className = "", style }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: ["grid gap-6 p-6", className].filter(Boolean).join(" "),
+      className: cx("grid gap-6 p-6", className),
       style: { ...layout, maxWidth: "min(92vw, 960px)", ...style },
       children
     }
   );
 }
 function MegaMenuSection({ title, children, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["min-w-0 flex flex-col", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("min-w-0 flex flex-col", className), children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
@@ -5869,12 +5892,12 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
       active,
       href,
       onClick,
-      className: [
+      className: cx(
         "group/link flex items-start gap-3 rounded-md p-3 transition-colors select-none",
         "hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
         "data-[active]:bg-surface-raised",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-surface-raised text-accent group-hover/link:bg-surface group-data-[active]/link:bg-surface transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[18px] w-[18px] inline-flex items-center justify-center", children: icon }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col min-w-0", children: [
@@ -5886,7 +5909,7 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
   );
 }
 function MegaMenuFeatured({ children, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
 }
 var elementsOfType = (children, type) => React28__default.default.Children.toArray(children).filter(
   (c) => React28__default.default.isValidElement(c) && c.type === type
@@ -5976,7 +5999,7 @@ function MegaMenuMobile({
           {
             href,
             onClick: () => setOpen(false),
-            className: [rowBase, divider].filter(Boolean).join(" "),
+            className: cx(rowBase, divider),
             children: [
               icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
               itemLabel
@@ -5992,7 +6015,7 @@ function MegaMenuMobile({
             type: "button",
             onClick: () => setExpanded(isOpen ? null : i),
             "aria-expanded": isOpen,
-            className: [rowBase, isOpen ? "text-accent" : ""].filter(Boolean).join(" "),
+            className: cx(rowBase, isOpen ? "text-accent" : ""),
             children: [
               icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: itemLabel }),
@@ -6214,7 +6237,7 @@ function SecureLayout({
   ]);
   if (state === "checking") {
     if (loadingFallback === null) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["flex min-h-[8rem] items-center justify-center", className].filter(Boolean).join(" "), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsxRuntime.jsx(Spinner3, {}) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("flex min-h-[8rem] items-center justify-center", className), children: loadingFallback !== void 0 ? loadingFallback : /* @__PURE__ */ jsxRuntime.jsx(Spinner3, {}) });
   }
   if (state === "denied") {
     if (fallback === null) return null;
@@ -6822,11 +6845,11 @@ function Switch({
     if (!isControlled) setInternal(c);
     onChange?.({ target: { checked: c, name } });
   };
-  const stateLabel = (active) => [
+  const stateLabel = (active) => cx(
     "text-sm select-none transition-colors",
     active ? "text-foreground font-medium" : "text-foreground-muted",
     disabled ? "opacity-50" : "cursor-pointer"
-  ].filter(Boolean).join(" ");
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Field,
     {
@@ -7091,7 +7114,7 @@ function Dropdown({
                       children: labelFor(value)
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
                 ]
               }
             ) }),
@@ -8914,7 +8937,7 @@ function DateRangePicker({
                   onClick: () => setLeftMonth(addMonths3(leftMonth, -1)),
                   "aria-label": "Previous month",
                   className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
                 }
               ),
               renderMonth(leftMonth)
@@ -8927,7 +8950,7 @@ function DateRangePicker({
                   onClick: () => setLeftMonth(addMonths3(leftMonth, 1)),
                   "aria-label": "Next month",
                   className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
                 }
               ),
               renderMonth(addMonths3(leftMonth, 1))
@@ -9191,7 +9214,7 @@ function Jumbotron({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
-      className: ["relative overflow-hidden rounded-2xl px-6 py-16 sm:px-10 sm:py-24", bgClass, className].filter(Boolean).join(" "),
+      className: cx("relative overflow-hidden rounded-2xl px-6 py-16 sm:px-10 sm:py-24", bgClass, className),
       style: { ...background === "gradient" ? { backgroundImage: GRADIENT } : null, ...style },
       children: split ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2", children: [
         copy,
@@ -9219,7 +9242,7 @@ function FeatureGrid({
   style
 }) {
   const hasHeader = eyebrow != null || title != null || description != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx("px-2", className), style, children: [
     hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: ["mb-10 flex flex-col gap-3", centeredHeader ? "items-center text-center" : "items-start text-left"].join(" "), children: [
       eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
       title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
@@ -9242,7 +9265,7 @@ function FeatureGrid({
 var Check3 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", className: "mt-0.5 h-4 w-4 flex-shrink-0 text-accent", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 6 9 17l-5-5" }) });
 function PricingPlans({ plans, eyebrow, title, description, className = "", style }) {
   const hasHeader = eyebrow != null || title != null || description != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx("px-2", className), style, children: [
     hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
       eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
       title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
@@ -9293,7 +9316,7 @@ function Stars({ value }) {
 }
 function Testimonials({ testimonials, eyebrow, title, description, columns = 3, className = "", style }) {
   const hasHeader = eyebrow != null || title != null || description != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx("px-2", className), style, children: [
     hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
       eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
       title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
@@ -9352,7 +9375,7 @@ function SlideShow({
     {
       "aria-label": ariaLabel,
       "aria-roledescription": "carousel",
-      className: ["relative overflow-hidden rounded-2xl", className].filter(Boolean).join(" "),
+      className: cx("relative overflow-hidden rounded-2xl", className),
       style: { height, ...style },
       onMouseEnter: () => setPaused(true),
       onMouseLeave: () => setPaused(false),
@@ -9413,7 +9436,7 @@ function Video({
   style
 }) {
   const [playing, setPlaying] = React28.useState(autoPlay);
-  const frame = ["relative w-full overflow-hidden bg-backdrop", framed ? "rounded-2xl border border-border shadow-sm" : "", className].filter(Boolean).join(" ");
+  const frame = cx("relative w-full overflow-hidden bg-backdrop", framed ? "rounded-2xl border border-border shadow-sm" : "", className);
   const ratio = aspect.replace("/", " / ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frame, style: { aspectRatio: ratio, ...style }, children: embedUrl ? /* @__PURE__ */ jsxRuntime.jsx(
     "iframe",
@@ -9475,7 +9498,7 @@ function Parallax({
     "div",
     {
       ref,
-      className: ["relative overflow-hidden rounded-2xl", className].filter(Boolean).join(" "),
+      className: cx("relative overflow-hidden rounded-2xl", className),
       style: { height, ...style },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9518,7 +9541,7 @@ function Blog({
   style
 }) {
   const hasHeader = eyebrow != null || title != null || description != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: ["w-full", className].filter(Boolean).join(" "), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx("w-full", className), style, children: [
     hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: ["mb-10 flex flex-col gap-3", centeredHeader ? "items-center text-center" : "items-start text-left"].join(" "), children: [
       eyebrow != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
       title != null && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
@@ -9580,7 +9603,7 @@ function Socials({
   className = "",
   style
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: ["flex flex-wrap items-center gap-2", className].filter(Boolean).join(" "), style, children: links.map((link, i) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cx("flex flex-wrap items-center gap-2", className), style, children: links.map((link, i) => {
     const label = link.label ?? (link.platform ? link.platform[0].toUpperCase() + link.platform.slice(1) : "Link");
     const icon = link.icon ?? (link.platform ? ICONS[link.platform] : null);
     const ext = newTab && !link.href.startsWith("mailto:");
@@ -9631,7 +9654,7 @@ function CookieConsent({
       role: "dialog",
       "aria-label": "Cookie consent",
       "aria-live": "polite",
-      className: ["fixed z-[60]", POS2[position], className].filter(Boolean).join(" "),
+      className: cx("fixed z-[60]", POS2[position], className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-t border-border bg-surface p-5 shadow-lg sm:flex-row sm:items-center sm:rounded-xl sm:border", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-sm leading-relaxed text-foreground-secondary", children: [
           title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 font-semibold text-foreground", children: title }),
@@ -9677,7 +9700,7 @@ function LeadCapture({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
-      className: ["w-full overflow-hidden rounded-2xl border border-border bg-surface px-6 py-12 sm:px-12 sm:py-16", className].filter(Boolean).join(" "),
+      className: cx("w-full overflow-hidden rounded-2xl border border-border bg-surface px-6 py-12 sm:px-12 sm:py-16", className),
       style: { ...isGradient ? { backgroundImage: GRADIENT2 } : {}, ...style },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["mx-auto flex max-w-2xl flex-col gap-4", centered ? "items-center text-center" : "items-start text-left"].join(" "), children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
@@ -9833,6 +9856,7 @@ exports.Video = Video;
 exports.Wizard = Wizard;
 exports.cardNumberError = cardNumberError;
 exports.cvvError = cvvError;
+exports.cx = cx;
 exports.detectBrand = detectBrand;
 exports.expiryError = expiryError;
 exports.fieldShell = fieldShell;