@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/homepage/components/CharacterHotspot.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { GRID_COLS_6_LG } from "../../../_internal/shared/styles/grid";
 import { useMediaQuery } from "../../../react";
-import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
+import { Button, Div, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -183,13 +183,13 @@ const DEFAULT_UNIVERSE_LINKS = [
 function HotspotHeaderOverlay({ heading, subheading, shopAllHref, }) {
     return (_jsx(Div, { className: "absolute top-0 left-0 right-0 z-10 pointer-events-none", style: {
             background: "linear-gradient(to bottom, rgba(10,10,18,0.88) 0%, rgba(10,10,18,0.40) 50%, transparent 100%)",
-        }, children: _jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "sm", className: "pointer-events-auto mx-auto max-w-7xl px-4 pt-4 pb-6 gap-y-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-[0.2em]", style: { color: "var(--color-red)" }, children: "Explore the Universe" }), _jsx(Heading, { level: 2, style: {
+        }, children: _jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "sm", className: "pointer-events-auto mx-auto max-w-7xl pt-4 pb-6 gap-y-3", padding: "x-md", children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-[0.2em]", size: "xs", style: { color: "var(--color-red)" }, children: "Explore the Universe" }), _jsx(Heading, { level: 2, style: {
                                 fontFamily: FONT_BANGERS,
                                 fontSize: "clamp(1.8rem, 4.5vw, 3rem)",
                                 letterSpacing: "0.07em",
                                 color: "#FFFFFF",
                                 lineHeight: 1,
-                            }, children: heading }), subheading ? (_jsx(Text, { className: "mt-2 text-sm font-medium max-w-md", style: { color: "var(--dark-section-muted)" }, children: subheading })) : (_jsxs(Text, { className: "mt-2 text-sm font-medium max-w-md", style: { color: "var(--dark-section-muted)" }, children: ["& beyond \u2014 tap the", " ", _jsx(Span, { className: "inline-flex items-center justify-center rounded-full font-light", style: {
+                            }, children: heading }), subheading ? (_jsx(Text, { className: "mt-2 max-w-md", size: "sm", weight: "medium", style: { color: "var(--dark-section-muted)" }, children: subheading })) : (_jsxs(Text, { className: "mt-2 max-w-md", size: "sm", weight: "medium", style: { color: "var(--dark-section-muted)" }, children: ["& beyond \u2014 tap the", " ", _jsx(Span, { layout: "inline-flex-center", rounded: "full", weight: "light", style: {
                                         background: "rgba(255,255,255,0.92)",
                                         color: "#111111",
                                         width: 18,
@@ -225,11 +225,11 @@ function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
             top: `${hotspot.yPct}%`,
             zIndex: isActive ? 30 : 10,
             transform: "translate(-50%, -50%)",
-        }, children: [!isActive && (_jsx(Span, { className: "absolute rounded-full animate-ping", style: {
+        }, children: [!isActive && (_jsx(Span, { className: "absolute animate-ping", rounded: "full", style: {
                     inset: -6,
                     background: "rgba(255,255,255,0.2)",
                     pointerEvents: "none",
-                } })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => toggle(hotspot.id), "aria-label": `Info about ${hotspot.name}`, "aria-expanded": isActive, className: "relative flex items-center justify-center rounded-full", style: {
+                } })), _jsx(Button, { rounded: "full", type: "button", variant: "ghost", size: "sm", onClick: () => toggle(hotspot.id), "aria-label": `Info about ${hotspot.name}`, "aria-expanded": isActive, className: "relative justify-center", style: {
                     width: isMobile ? 18 : 38,
                     height: isMobile ? 18 : 38,
                     background: isMobile ? "none" : isActive ? "rgba(30,30,30,0.92)" : "rgba(255,255,255,0.95)",
@@ -256,7 +256,7 @@ function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
                     overflow: "hidden",
                     zIndex: 40,
                     animation: "fadeInUp 0.2s ease both",
-                }, children: [_jsx(Div, { style: { height: 4, background: hotspot.accent } }), _jsxs(Div, { className: "px-5 py-4", children: [_jsx(Text, { className: "text-[10px] font-bold uppercase tracking-[0.18em] mb-1", style: { color: hotspot.accent === "#FFE500" ? "#b08800" : hotspot.accent }, children: hotspot.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-3", style: { fontFamily: FONT_BANGERS, fontSize: "1.45rem", letterSpacing: "0.06em", color: "#111111" }, children: hotspot.name }), _jsx(Text, { className: "text-xs leading-relaxed mb-4", style: { color: "#374151" }, children: hotspot.description }), _jsxs(Link, { href: hotspot.href, onClick: onClose, className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
+                }, children: [_jsx(Div, { style: { height: 4, background: hotspot.accent } }), _jsxs(Div, { paddingX: "x-5", padding: "y-md", children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: hotspot.accent === "#FFE500" ? "#b08800" : hotspot.accent }, children: hotspot.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-3", style: { fontFamily: FONT_BANGERS, fontSize: "1.45rem", letterSpacing: "0.06em", color: "#111111" }, children: hotspot.name }), _jsx(Text, { className: "leading-relaxed mb-4", size: "xs", style: { color: "#374151" }, children: hotspot.description }), _jsxs(Link, { href: hotspot.href, onClick: onClose, className: "flex items-center justify-between px-4 py-2.5 text-sm font-black uppercase transition-opacity hover:opacity-85", style: {
                                     fontFamily: FONT_BANGERS,
                                     letterSpacing: "0.1em",
                                     background: hotspot.accent,
@@ -265,24 +265,24 @@ function HotspotPin({ hotspot, isActive, isMobile, toggle, onClose, }) {
                                 }, children: [hotspot.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] })] })] }))] }));
 }
 function MobileHotspotSheet({ active, onClose, }) {
-    return (_jsx(Div, { className: "fixed inset-0 z-50 flex items-end", style: { background: "rgba(0,0,0,0.6)", backdropFilter: "blur(3px)" }, onClick: (e) => { if (e.target === e.currentTarget)
+    return (_jsx(Row, { className: "fixed inset-0 z-50", align: "end", style: { background: "rgba(0,0,0,0.6)", backdropFilter: "blur(3px)" }, onClick: (e) => { if (e.target === e.currentTarget)
             onClose(); }, children: _jsxs(Div, { className: "w-full", style: {
                 background: "var(--surface-elevated)",
                 borderTopLeftRadius: 16,
                 borderTopRightRadius: 16,
                 overflow: "hidden",
                 animation: "fadeInUp 0.22s ease both",
-            }, children: [_jsx(Div, { className: "flex justify-center pt-3 pb-1", children: _jsx(Div, { style: { width: 40, height: 4, borderRadius: 2, background: "#D1D5DB" } }) }), _jsx(Div, { style: { height: 4, background: active.accent } }), _jsxs(Div, { className: "px-5 pt-4 pb-10", children: [_jsx(Text, { className: "text-[10px] font-bold uppercase tracking-[0.18em] mb-1", style: { color: active.accent === "#FFE500" ? "#b08800" : active.accent }, children: active.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-2", style: { fontFamily: FONT_BANGERS, fontSize: "clamp(1.5rem, 6vw, 2rem)", letterSpacing: "0.06em", color: "#111111" }, children: active.name }), _jsx(Text, { className: "text-sm leading-relaxed mb-5", style: { color: "#374151" }, children: active.description }), _jsxs(Div, { className: "flex gap-3", children: [_jsxs(Link, { href: active.href, onClick: onClose, className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
+            }, children: [_jsx(Row, { paddingY: "b-2xs", padding: "t-sm", justify: "center", children: _jsx(Div, { style: { width: 40, height: 4, borderRadius: 2, background: "#D1D5DB" } }) }), _jsx(Div, { style: { height: 4, background: active.accent } }), _jsxs(Div, { className: "px-5 pb-10", padding: "t-md", children: [_jsx(Text, { className: "text-[10px] uppercase tracking-[0.18em] mb-1", weight: "bold", style: { color: active.accent === "#FFE500" ? "#b08800" : active.accent }, children: active.universe }), _jsx(Heading, { level: 3, className: "font-black leading-tight mb-2", style: { fontFamily: FONT_BANGERS, fontSize: "clamp(1.5rem, 6vw, 2rem)", letterSpacing: "0.06em", color: "#111111" }, children: active.name }), _jsx(Text, { className: "leading-relaxed mb-5", size: "sm", style: { color: "#374151" }, children: active.description }), _jsxs(Row, { gap: "3", children: [_jsxs(Link, { href: active.href, onClick: onClose, className: "flex-1 flex items-center justify-between px-4 py-3 font-black uppercase", style: {
                                         fontFamily: FONT_BANGERS,
                                         letterSpacing: "0.1em",
                                         fontSize: "0.9rem",
                                         background: active.accent,
                                         color: active.accent === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
                                         borderRadius: 4,
-                                    }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: onClose, className: "px-5 py-3 text-sm font-bold rounded", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) }));
+                                    }, children: [active.buyText, _jsx(Span, { "aria-hidden": "true", children: "\u2192" })] }), _jsx(Button, { type: "button", variant: "outline", onClick: onClose, paddingX: "lg", textSize: "sm", rounded: "default", className: "py-3 font-bold", style: { background: "#F1F5F9", color: "#475569" }, children: "Close" })] })] })] }) }));
 }
 function UniverseBrowseRow({ universeLinks, }) {
-    return (_jsx(Div, { className: `mx-auto max-w-7xl px-4 py-6 ${THEME_CONSTANTS.grid.cols6Lg} gap-3`, style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
+    return (_jsx(Div, { gap: "3", className: `mx-auto max-w-7xl ${GRID_COLS_6_LG}`, paddingY: "y-lg", paddingX: "x-md", style: { borderTop: "1px solid rgba(255,255,255,0.08)" }, children: universeLinks.map(({ label, href, color, icon }) => (_jsxs(Link, { href: href, className: "group flex items-center gap-2.5 px-3 py-2.5 rounded-sm transition-all hover:-translate-y-0.5", style: {
                 background: "rgba(255,255,255,0.04)",
                 border: "1px solid rgba(255,255,255,0.08)",
                 transition: "all 0.15s ease",
@@ -328,7 +328,7 @@ function CharacterHotspotInner({ panoramicImage, panoramicAlt, hotspots, univers
                             { label: "MARVEL", color: "#E8001C" },
                             { label: "DC COMICS", color: "#4A90D9" },
                             { label: "ANIME", color: "#FFE500" },
-                        ].map(({ label, color }) => (_jsxs(Div, { className: "flex flex-col items-center", children: [_jsx(Span, { className: "px-3 py-1 text-[10px] sm:text-xs font-black uppercase tracking-[0.18em] rounded-sm", style: {
+                        ].map(({ label, color }) => (_jsxs(Stack, { align: "center", children: [_jsx(Span, { className: "text-[10px] font-black uppercase tracking-[0.18em]", smSize: "xs", rounded: "sm", padding: "pill-md", style: {
                                         background: color,
                                         color: color === "#FFE500" ? "#0D0D0D" : "#FFFFFF",
                                         boxShadow: "2px 2px 0px rgba(0,0,0,0.6)",

package/dist/features/homepage/components/CharacterHotspotForm.d.ts

@@ -5,13 +5,13 @@ export interface CharacterHotspotFormProps {
      * Upload an image and return its public URL.
      * Implement however suits your storage backend:
      * ```ts
-     * onUploadImage={async (file) => {
-     *   const storage = getStorage(getFirebaseApp());
-     *   const storageRef = ref(storage, `character-hotspot/${Date.now()}_${file.name}`);
-     *   await uploadBytes(storageRef, file);
-     *   return getDownloadURL(storageRef);
-     * }}
-     * ```
+   * onUploadImage={async (file) => {
+   * const storage = getStorage(getFirebaseApp());
+   * const storageRef = ref(storage, `character-hotspot/${Date.now()}_${file.name}`);
+   * await uploadBytes(storageRef, file);
+   * return getDownloadURL(storageRef);
+   * }}
+   * ```
      */
     onUploadImage: (file: File) => Promise<string>;
     /**

package/dist/features/homepage/components/CharacterHotspotForm.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import Image from "next/image";
-import { Button, Div, Heading, Input, Label, Li, Row, Span, Text, Textarea, Ul, } from "../../../ui";
+import { Button, Details, Div, Heading, Input, Label, Li, Row, Span, Stack, Summary, Text, Textarea, Ul } from "../../../ui";
 function randomId() {
     return Math.random().toString(36).slice(2, 9);
 }
 const CLS_STEP = "space-y-4 rounded-lg border-2 p-6";
 const CLS_IMG_WRAP = "relative w-full overflow-hidden rounded-lg";
 const CLS_INPUT = "rounded border-2 px-3 py-2 text-sm outline-none";
-const CLS_ERROR_BANNER = "rounded border border-red-200 bg-red-50 px-4 py-2 text-sm font-bold text-red-600";
-const CLS_SUCCESS_BANNER = "rounded border border-green-200 bg-green-50 px-4 py-2 text-sm font-bold text-green-700";
-const CLS_SUCCESS_TEXT = "text-xs font-medium text-green-700";
-const CLS_DELETE_PIN = "shrink-0 rounded p-1 text-xs text-red-500 hover:bg-red-50";
+const CLS_ERROR_BANNER = "rounded border border-error bg-error-surface px-4 py-2 text-sm font-bold text-error";
+const CLS_SUCCESS_BANNER = "rounded border border-success bg-success-surface px-4 py-2 text-sm font-bold text-success";
+const CLS_SUCCESS_TEXT = "text-xs font-medium text-success";
+const CLS_DELETE_PIN = "shrink-0 rounded p-1 text-xs text-error hover:bg-error-surface";
 const STY_BORDER_INK = "2px solid var(--border-ink)";
 const STY_CENTERED = "translate(-50%, -50%)";
 export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSave, }) {
@@ -114,11 +114,11 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
         { key: "review", label: "Review & Save" },
     ];
     const stepIndex = STEPS.findIndex((s) => s.key === step);
-    return (_jsxs(Div, { className: "mx-auto max-w-3xl space-y-6", children: [error && (_jsx(Text, { className: CLS_ERROR_BANNER, children: error })), success && (_jsx(Text, { className: CLS_SUCCESS_BANNER, children: "Saved to database successfully!" })), _jsx(Div, { className: "flex items-start", children: STEPS.map((s, i) => (_jsxs(Div, { className: "flex flex-1 flex-col items-center", children: [_jsxs(Div, { className: "flex w-full items-center", children: [i > 0 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
+    return (_jsxs(Stack, { className: "mx-auto max-w-3xl", gap: "lg", children: [error && (_jsx(Text, { className: CLS_ERROR_BANNER, children: error })), success && (_jsx(Text, { className: CLS_SUCCESS_BANNER, children: "Saved to database successfully!" })), _jsx(Row, { align: "start", children: STEPS.map((s, i) => (_jsxs(Stack, { className: "flex-1", align: "center", children: [_jsxs(Row, { className: "w-full", align: "center", children: [i > 0 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
                                         background: i <= stepIndex
                                             ? "var(--color-black)"
                                             : "var(--border-ink)",
-                                    } })), _jsx(Div, { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold", style: {
+                                    } })), _jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-8 w-8 shrink-0", align: "center", justify: "center", rounded: "full", style: {
                                         background: i < stepIndex
                                             ? "var(--color-black)"
                                             : i === stepIndex
@@ -137,11 +137,11 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                     } }))] }), _jsx(Span, { weight: "medium", className: "mt-1 text-center text-[10px]", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { weight: "medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { size: "xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: CLS_SUCCESS_TEXT, children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: CLS_INPUT, style: {
+                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Upload Background Image" }), _jsx(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { layout: "flex", gap: "md", className: "cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { size: "3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { weight: "medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { size: "xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: CLS_SUCCESS_TEXT, children: "\u2713 Image uploaded" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: CLS_INPUT, style: {
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
-                                } })] }), _jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] }), _jsxs(Row, { justify: "end", gap: "sm", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [(initial?.pins?.length ?? 0) > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: {
+                                } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] }), _jsxs(Row, { justify: "end", gap: "sm", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [(initial?.pins?.length ?? 0) > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: {
                                     background: "transparent",
                                     color: "var(--color-black)",
                                 }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
@@ -150,7 +150,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx(Span, { weight: "bold", children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: CLS_IMG_WRAP, style: {
+                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Place a Pin" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: [_jsx(Span, { weight: "bold", children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: CLS_IMG_WRAP, style: {
                             paddingTop: "56.25%",
                             cursor: "crosshair",
                             background: "#111",
@@ -159,22 +159,24 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                     top: `${pin.yPct}%`,
                                     transform: STY_CENTERED,
                                     zIndex: 10,
-                                }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
+                                }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
                                             width: 24,
                                             height: 24,
                                             background: pin.accent || "#E8001C",
                                             border: "2px solid white",
                                             boxShadow: "0 1px 4px rgba(0,0,0,0.5)",
-                                        }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
+                                        }, children: "+" }), pin.name && (
+                                    // audit-variant-ok: absolute-positioned pin tooltip — px-1.5 py-0.5 outside PADDING_MAP scale + arbitrary text-[9px]
+                                    _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
                                     left: `${draftPos.xPct}%`,
                                     top: `${draftPos.yPct}%`,
                                     transform: STY_CENTERED,
                                     zIndex: 20,
-                                }, children: [_jsx(Span, { className: "absolute animate-ping rounded-full", style: {
+                                }, children: [_jsx(Span, { className: "absolute animate-ping", rounded: "full", style: {
                                             inset: -6,
                                             background: "rgba(255,228,0,0.4)",
                                             pointerEvents: "none",
-                                        } }), _jsx(Div, { className: "relative flex items-center justify-center rounded-full font-bold", style: {
+                                        } }), _jsx(Row, { textWeight: "bold", className: "relative", align: "center", justify: "center", rounded: "full", style: {
                                             width: 32,
                                             height: 32,
                                             background: "var(--color-yellow)",
@@ -182,10 +184,10 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                             boxShadow: "0 2px 8px rgba(0,0,0,0.55)",
                                             color: "var(--color-black)",
                                             fontSize: 18,
-                                        }, children: "\u2605" }), _jsx(Div, { className: "pointer-events-none absolute left-9 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-2 py-0.5 text-[10px] font-bold", style: {
+                                        }, children: "\u2605" }), _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-9 top-1/2 -translate-y-1/2 whitespace-nowrap py-0.5 text-[10px]", padding: "x-xs", rounded: "default", style: {
                                             background: "var(--color-black)",
                                             color: "var(--color-yellow)",
-                                        }, children: "NEW PIN" })] }))] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                                        }, children: "NEW PIN" })] }))] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
                             {
                                 label: "X Position (%)",
                                 field: "xPct",
@@ -206,7 +208,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                     yPct: Math.max(1, Math.min(99, v)),
                                 })),
                             },
-                        ].map(({ label, field, value, onChange }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "number", min: 1, max: 99, step: 0.1, value: value, placeholder: "e.g. 42.5", onChange: (e) => {
+                        ].map(({ label, field, value, onChange }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "number", min: 1, max: 99, step: 0.1, value: value, placeholder: "e.g. 42.5", onChange: (e) => {
                                         const v = parseFloat(e.target.value);
                                         if (!isNaN(v))
                                             onChange(v);
@@ -214,7 +216,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
+                                    } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
                                             background: "var(--surface-warm)",
                                             color: "var(--color-black)",
                                             border: STY_BORDER_INK,
@@ -224,7 +226,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Pin Details" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: ["Fill in the details for the pin at", " ", _jsxs(Span, { weight: "bold", children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Pin Details" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: ["Fill in the details for the pin at", " ", _jsxs(Span, { weight: "bold", children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
                             {
                                 label: "Name *",
                                 value: draftName,
@@ -237,19 +239,19 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftUniverse,
                                 placeholder: "Marvel",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, label))) }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Description *" }), _jsx(Textarea, { rows: 3, value: draftDescription, onChange: (e) => setDraftDescription(e.target.value), className: "resize-none rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    } })] }, label))) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Description *" }), _jsx(Textarea, { rows: 3, value: draftDescription, onChange: (e) => setDraftDescription(e.target.value), className: "resize-none rounded border-2 px-3 py-2 text-sm outline-none", style: {
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
-                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: CLS_INPUT, style: {
+                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: CLS_INPUT, style: {
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
-                                } })] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                                } })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
                             {
                                 label: "Button Text *",
                                 value: draftBuyText,
@@ -262,15 +264,15 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftBadge,
                                 placeholder: "MARVEL",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: CLS_INPUT, style: {
+                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: CLS_INPUT, style: {
                                             borderColor: "var(--border-ink)",
                                             background: "var(--surface-elevated)",
                                             color: "var(--color-black)",
-                                        } })] }), _jsx(Input, { type: "color", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), className: "mb-0.5 h-10 w-10 cursor-pointer rounded border-2", style: { borderColor: "var(--border-ink)" }, title: "Pick colour" })] }), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("place"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
+                                        } })] }), _jsx(Input, { type: "color", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), className: "mb-0.5 h-10 w-10 cursor-pointer rounded border-2", style: { borderColor: "var(--border-ink)" }, title: "Pick colour" })] }), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("place"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
                                             commitDraftPin();
                                             setStep("review");
                                         }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
@@ -286,25 +288,31 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: CLS_STEP, style: {
                     borderColor: "var(--border-ink)",
                     background: "var(--surface-elevated)",
-                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Review & Save" }), _jsxs(Span, { rounded: "full", padding: "pill-md", size: "sm", weight: "bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
                                     left: `${pin.xPct}%`,
                                     top: `${pin.yPct}%`,
                                     transform: STY_CENTERED,
                                     zIndex: 10,
-                                }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
+                                }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
                                             width: 28,
                                             height: 28,
                                             background: pin.accent || "#E8001C",
                                             border: "2px solid white",
                                             boxShadow: "0 2px 6px rgba(0,0,0,0.55)",
-                                        }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate text-sm font-bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { className: "rounded-lg border-2 border-dashed p-8 text-center text-sm", style: {
+                                        }, children: "+" }), pin.name && (
+                                    // audit-variant-ok: absolute-positioned pin tooltip — px-1.5 py-0.5 outside PADDING_MAP scale + arbitrary text-[9px]
+                                    _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (
+                    // audit-variant-ok: bordered list with divide-y between rows; Ul lacks divide variant
+                    _jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (
+                        // audit-variant-ok: list-row padding px-4 py-3 outside PADDING_MAP scale
+                        _jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { layout: "flex-center", color: "inverse", className: "h-6 w-6 shrink-0", rounded: "full", size: "xs", weight: "bold", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { textSize: "sm", className: "border-2 border-dashed text-center", rounded: "lg", padding: "xl", style: {
                             borderColor: "var(--border-ink)",
                             color: "var(--color-muted)",
-                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {
+                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs(Details, { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Summary, { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Stack, { className: "mt-3", gap: "3", children: [_jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer rounded border-2 border-dashed px-3 py-1.5 transition-colors hover:opacity-80", size: "sm", weight: "medium", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {
                                                     borderColor: "var(--border-ink)",
                                                     background: "var(--surface-elevated)",
                                                     color: "var(--color-black)",
-                                                } })] }), _jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] })] })] }), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => {
+                                                } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] })] })] }), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => {
                                     setDraftPos(null);
                                     setStep("place");
                                 }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {

package/dist/features/homepage/components/CollectionCardsSection.js

@@ -37,5 +37,7 @@ export async function CollectionCardsSection({ config, }) {
     if (collections.length === 0) {
         return null;
     }
-    return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: title }), subtitle ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", className: "flex-wrap", children: collections.slice(0, 3).map((entry, idx) => (_jsx(Text, { className: "rounded-full border border-zinc-300 px-3 py-1 text-xs font-medium text-zinc-700 dark:border-slate-600 dark:text-zinc-300", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, _jsxs(Stack, { align: "center", gap: "sm", className: "rounded-2xl border border-dashed border-zinc-300 px-6 py-12 text-center dark:border-slate-700", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: ["Mixed collection rendering (", collections.length, "/3 collection", collections.length === 1 ? "" : "s", ", up to ", maxItems, " items,", " ", itemsPerRow, " per row) \u2014 data wiring lands with the bundle/raffle work."] }), cta ? (_jsxs(Link, { href: cta.href, className: "text-sm font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] })] }) }) }));
+    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", wrap: true, children: collections.slice(0, 3).map((entry, idx) => (
+                        // audit-variant-ok: filter tab Text — pill chip with border-zinc-300 + px-3/py-1 micro padding
+                        _jsx(Text, { className: "rounded-full border border-zinc-300 px-3 py-1 dark:border-slate-600", color: "muted", size: "xs", weight: "medium", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, _jsxs(Stack, { align: "center", gap: "sm", className: "border-dashed text-center", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Mixed collection rendering (", collections.length, "/3 collection", collections.length === 1 ? "" : "s", ", up to ", maxItems, " items,", " ", itemsPerRow, " per row) \u2014 data wiring lands with the bundle/raffle work."] }), cta ? (_jsxs(Link, { href: cta.href, className: "text-sm font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] })] }) }) }));
 }

package/dist/features/homepage/components/CustomCardsSection.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, HorizontalScroller, Section, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Row } from "@mohasinac/appkit/ui";
+import { Div, Heading, HorizontalScroller, Section, Stack, Text } from "../../../ui";
+import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed";
 import { SectionCarousel } from "./SectionCarousel";
 import { MediaImage } from "../../media/MediaImage";
 const __P = {
@@ -47,31 +48,31 @@ function CardItem({ card }) {
         cardStyle.backgroundColor = card.backgroundColor;
     if (card.textColor)
         cardStyle.color = card.textColor;
-    return (_jsxs(Div, { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, 
+    return (_jsxs(Stack, { className: `overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, 
         // audit-inline-style-ok: pass-through style prop
-        style: cardStyle, children: [card.image && (_jsx(Div, { className: `relative w-full aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs(Div, { className: `flex flex-col gap-2 ${__P.p4} flex-1`, children: [card.eyebrow && (_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx(Text, { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx(Text, { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx(Div, { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", 
+        style: cardStyle, children: [card.image && (_jsx(Div, { className: `relative w-full aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs(Stack, { className: `${__P.p4} flex-1`, gap: "sm", children: [card.eyebrow && (_jsx(Text, { className: "tracking-widest opacity-70", size: "xs", weight: "semibold", transform: "uppercase", children: card.eyebrow })), card.title && (_jsx(Text, { className: "leading-snug", size: "base", weight: "bold", children: card.title })), card.body && (_jsx(Text, { className: "opacity-80 leading-relaxed flex-1", size: "sm", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", 
                         // audit-inline-style-ok: dynamic CSS
                         style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
 }
 // --- Section Header ----------------------------------------------------------
 function SectionHeader({ title }) {
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     if (!title)
         return null;
     return (_jsx(Div, { className: "mb-6", children: _jsx(Heading, { level: 2, className: themed.textPrimary, children: title }) }));
 }
 export function CustomCardsSection(config) {
     const { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs } = config;
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     if (!cards?.length)
         return null;
     // autoScroll: wrap all cards in SectionCarousel (client carousel)
     if (autoScroll) {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
     }
     // Row layout: horizontal scroller
     if (layout === "row") {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: true, children: cards.map((card) => (_jsx(Div, { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: true, children: cards.map((card) => (_jsx(Div, { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Masonry layout: CSS columns
     if (layout === "masonry") {
@@ -80,9 +81,9 @@ export function CustomCardsSection(config) {
             .split(" ")
             .map((c) => c.replace("grid-cols-", "columns-"))
             .join(" ");
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Div, { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx(Div, { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Stack, { className: `${masonryClass}`, gap: "md", children: cards.map((card) => (_jsx(Div, { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Grid layout (default)
     const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Div, { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+    return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Div, { layout: "grid", gap: "4", className: `${colsClass}`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
 }

package/dist/features/homepage/components/CustomerReviewsSection.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY } from "../../../_internal/shared/styles/themed";
+import { SKELETON as skeleton } from "../../../_internal/shared/styles/skeleton";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 import { Div, Heading, HorizontalScroller, Section, Text, TextLink, } from "../../../ui";
 const __P = {
     p8: "p-8",
@@ -9,11 +11,11 @@ const __O = {
 };
 // --- Section -----------------------------------------------------------------
 export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", }) {
-    const { themed, skeleton } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
     if (isLoading) {
-        return (_jsx(Section, { className: `${__P.p8} ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", children: [_jsx(Div, { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx(Div, { className: `flex gap-6 ${__O.hidden}`, children: [...Array(3)].map((_, i) => (_jsx(Div, { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
+        return (_jsx(Section, { className: `${__P.p8} ${className}`, surface: "muted", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", children: [_jsx(Div, { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx(Div, { layout: "flex", gap: "6", className: `${__O.hidden}`, children: [...Array(3)].map((_, i) => (_jsx(Div, { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto px-4 md:px-8", children: [_jsxs(Div, { className: "text-center mb-10", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: THEME_CONSTANTS.carousel.perView.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: true }), viewMoreHref && (_jsx(Div, { className: "text-center mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-8", padding: "x-md", children: [_jsxs(Div, { className: "text-center mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: true }), viewMoreHref && (_jsx(Div, { className: "text-center mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/EventsSection.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useHomepageEvents } from "../hooks/useHomepageEvents";
 import { EventCard } from "../../events/components/EventCard";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", initialItems, }) {
     const { data: items = [], isLoading } = useHomepageEvents(limit, { initialData: initialItems });
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: CAROUSEL_PER_VIEW.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
 }

package/dist/features/homepage/components/FAQSection.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Heading, RichText, Section, Span, Text, TextLink } from "../../../ui";
+import { THEMED_BG_PRIMARY, THEMED_BG_TERTIARY, THEMED_BORDER, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, FLEX_BETWEEN } from "../../../_internal/shared/styles/themed";
+import { Button, Div, Heading, RichText, Row, Section, Span, Stack, Text, TextLink } from "../../../ui";
 import { ChevronDown } from "lucide-react";
 const __O = {
     hidden: "overflow-hidden",
@@ -23,7 +23,8 @@ function isHtml(s) {
 }
 // --- Section -----------------------------------------------------------------
 export function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategoryTabs = false, allowMultipleOpen = false, defaultOpenCount = 0, viewMoreHref, viewMoreLabel = "View all FAQs →", hasMore = false, moreCount = 0, className = "", }) {
-    const { themed, flex } = THEME_CONSTANTS;
+    const themed = { bgPrimary: THEMED_BG_PRIMARY, bgTertiary: THEMED_BG_TERTIARY, border: THEMED_BORDER, textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
+    const flex = { between: FLEX_BETWEEN };
     // Derive tabs from items when not explicitly provided
     const derivedTabs = useMemo(() => {
         if (!showCategoryTabs)
@@ -66,8 +67,8 @@ export function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategor
             return items;
         return items.filter((i) => (i.category ?? "general") === activeTab);
     }, [items, showTabs, activeTab]);
-    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "w-full max-w-4xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-10", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base max-w-xl mx-auto ${themed.textSecondary}`, children: subtitle }))] }), showTabs && (_jsxs(Div, { className: `${flex.center} flex-wrap gap-2 mb-8`, children: [_jsx(Button, { variant: activeTab === "all" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("all"), className: "rounded-full", children: "All" }), derivedTabs.map((tab) => (_jsx(Button, { variant: activeTab === tab.value ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab(tab.value), className: "rounded-full", children: tab.label }, tab.value)))] })), _jsxs(Div, { className: "space-y-2", children: [visibleItems.length === 0 && (_jsx(Text, { className: `text-center py-12 ${themed.textSecondary}`, children: "No FAQs in this category yet." })), visibleItems.map((faq) => {
+    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsxs(Div, { className: "w-full max-w-4xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-10", children: [_jsx(Heading, { level: 2, variant: "none", gradient: "brand", className: "mb-3", mdSize: "4xl", size: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `max-w-xl mx-auto ${themed.textSecondary}`, size: "base", children: subtitle }))] }), showTabs && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", wrap: true, className: `mb-8`, children: [_jsx(Button, { rounded: "full", variant: activeTab === "all" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("all"), children: "All" }), derivedTabs.map((tab) => (_jsx(Button, { rounded: "full", variant: activeTab === tab.value ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab(tab.value), children: tab.label }, tab.value)))] })), _jsxs(Stack, { gap: "sm", children: [visibleItems.length === 0 && (_jsx(Text, { paddingY: "3xl", align: "center", className: themed.textSecondary, children: "No FAQs in this category yet." })), visibleItems.map((faq) => {
                             const isOpen = openIds.has(faq.id);
-                            return (_jsxs("div", { className: `${themed.bgPrimary} rounded-xl overflow-hidden border transition-all duration-200 ${isOpen ? "border-primary/40 shadow-sm" : `${themed.border}`}`, children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left px-5 py-4 ${flex.between} gap-4 hover:${themed.bgTertiary} transition-colors rounded-none`, onClick: () => toggle(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { size: "sm", weight: "medium", className: `flex-1 leading-snug ${isOpen ? "text-primary" : themed.textPrimary}`, children: faq.question }), _jsx(ChevronDown, { className: `w-4 h-4 flex-shrink-0 transition-transform duration-250 ${isOpen ? "rotate-180 text-primary" : themed.textSecondary}` })] }), _jsx(Div, { className: `grid transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`, children: _jsx(Div, { className: `${__O.hidden}`, children: _jsx(Div, { className: "px-5 pb-5 pt-0", children: isHtml(faq.answer) ? (_jsx(RichText, { html: faq.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" })) : (_jsx(Text, { className: `text-sm leading-relaxed ${themed.textSecondary}`, children: faq.answer })) }) }) })] }, faq.id));
-                        })] }), viewMoreHref && (_jsx(Div, { className: "text-center mt-10", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { size: "xs", className: "bg-primary text-white px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
+                            return (_jsxs("div", { className: `${themed.bgPrimary} rounded-xl overflow-hidden border transition-all duration-200 ${isOpen ? "border-primary/40 shadow-sm" : `${themed.border}`}`, children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left px-5 py-4 ${flex.between} gap-4 hover:${themed.bgTertiary} transition-colors rounded-none`, onClick: () => toggle(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { size: "sm", weight: "medium", className: `flex-1 leading-snug ${isOpen ? "text-primary" : themed.textPrimary}`, children: faq.question }), _jsx(ChevronDown, { className: `w-4 h-4 flex-shrink-0 transition-transform duration-250 ${isOpen ? "rotate-180 text-primary" : themed.textSecondary}` })] }), _jsx(Div, { layout: "grid", className: `transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`, children: _jsx(Div, { className: `${__O.hidden}`, children: _jsx(Div, { paddingY: "b-md-lg", padding: "x-md", children: isHtml(faq.answer) ? (_jsx(RichText, { html: faq.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" })) : (_jsx(Text, { className: `leading-relaxed ${themed.textSecondary}`, size: "sm", children: faq.answer })) }) }) })] }, faq.id));
+                        })] }), viewMoreHref && (_jsx(Div, { className: "text-center mt-10", children: _jsxs(TextLink, { rounded: "full", paddingX: "xl", paddingY: "sm", href: viewMoreHref, className: "inline-flex items-center gap-2 bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 transition-colors", size: "sm", weight: "medium", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { color: "inverse", size: "xs", className: "bg-primary", rounded: "full", padding: "pill-xs", children: ["+", moreCount] }))] }) }))] }) }));
 }

package/dist/features/homepage/components/FeaturedAuctionsSection.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
     const { data: items = [], isLoading } = useFeaturedAuctions({ filterByBrand, initialData: initialItems });
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }