@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/grouped/schemas/index.d.ts

@@ -0,0 +1,83 @@
+import { z } from "zod";
+export * from "./firestore";
+export declare const groupThemeSchema: z.ZodEnum<["related", "character", "lineage", "set", "generic"]>;
+export declare const groupVisibilitySchema: z.ZodEnum<["visible", "hidden"]>;
+export declare const groupedListingFirestoreSchema: z.ZodObject<{
+    createdAt: z.ZodUnion<[z.ZodDate, z.ZodString, z.ZodObject<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">>]>;
+    updatedAt: z.ZodUnion<[z.ZodDate, z.ZodString, z.ZodObject<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">>]>;
+    id: z.ZodString;
+    slug: z.ZodString;
+    title: z.ZodString;
+    description: z.ZodOptional<z.ZodString>;
+    productIds: z.ZodArray<z.ZodString, "many">;
+    coverImage: z.ZodOptional<z.ZodString>;
+    groupTheme: z.ZodEnum<["related", "character", "lineage", "set", "generic"]>;
+    minActiveMembers: z.ZodNumber;
+    activeMemberCount: z.ZodNumber;
+    visibilityStatus: z.ZodEnum<["visible", "hidden"]>;
+    isActive: z.ZodBoolean;
+    isFeatured: z.ZodBoolean;
+    storeId: z.ZodOptional<z.ZodString>;
+    brandSlug: z.ZodOptional<z.ZodString>;
+    categorySlug: z.ZodOptional<z.ZodString>;
+    createdBy: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    createdAt: string | Date | z.objectOutputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">;
+    id: string;
+    title: string;
+    slug: string;
+    updatedAt: string | Date | z.objectOutputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">;
+    isActive: boolean;
+    isFeatured: boolean;
+    createdBy: string;
+    productIds: string[];
+    groupTheme: "set" | "related" | "character" | "lineage" | "generic";
+    visibilityStatus: "hidden" | "visible";
+    minActiveMembers: number;
+    activeMemberCount: number;
+    storeId?: string | undefined;
+    description?: string | undefined;
+    brandSlug?: string | undefined;
+    categorySlug?: string | undefined;
+    coverImage?: string | undefined;
+}, {
+    createdAt: string | Date | z.objectInputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">;
+    id: string;
+    title: string;
+    slug: string;
+    updatedAt: string | Date | z.objectInputType<{
+        toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
+    }, z.ZodTypeAny, "passthrough">;
+    isActive: boolean;
+    isFeatured: boolean;
+    createdBy: string;
+    productIds: string[];
+    groupTheme: "set" | "related" | "character" | "lineage" | "generic";
+    visibilityStatus: "hidden" | "visible";
+    minActiveMembers: number;
+    activeMemberCount: number;
+    storeId?: string | undefined;
+    description?: string | undefined;
+    brandSlug?: string | undefined;
+    categorySlug?: string | undefined;
+    coverImage?: string | undefined;
+}>;
+export type GroupedListingFromSchema = z.infer<typeof groupedListingFirestoreSchema>;

package/dist/features/grouped/schemas/index.js

@@ -0,0 +1,34 @@
+// [SCHEMA] grouped-listings feature — Firestore document schema.
+//
+// Mirrors GroupedListingDocument in ./firestore.ts. Registered into
+// SCHEMAS.firestore.groupedListings.
+import { z } from "zod";
+import { auditTimestampsShape } from "../../../schemas/firestore-helpers";
+export * from "./firestore";
+export const groupThemeSchema = z.enum([
+    "related",
+    "character",
+    "lineage",
+    "set",
+    "generic",
+]);
+export const groupVisibilitySchema = z.enum(["visible", "hidden"]);
+export const groupedListingFirestoreSchema = z.object({
+    id: z.string(),
+    slug: z.string(),
+    title: z.string(),
+    description: z.string().optional(),
+    productIds: z.array(z.string()),
+    coverImage: z.string().optional(),
+    groupTheme: groupThemeSchema,
+    minActiveMembers: z.number().int().nonnegative(),
+    activeMemberCount: z.number().int().nonnegative(),
+    visibilityStatus: groupVisibilitySchema,
+    isActive: z.boolean(),
+    isFeatured: z.boolean(),
+    storeId: z.string().optional(),
+    brandSlug: z.string().optional(),
+    categorySlug: z.string().optional(),
+    createdBy: z.string(),
+    ...auditTimestampsShape,
+});

package/dist/features/history/repository/user-history.repository.js

@@ -12,6 +12,7 @@
 import { getAdminDb } from "../../../providers/db-firebase";
 import { serverLogger } from "../../../monitoring";
 import { HISTORY_COLLECTION, HISTORY_DOC_ID, HISTORY_MAX, } from "../../../constants/limits";
+// audit-unknown-ok: type-narrowing entry point — accepts any value, narrows by typeof/Array.isArray
 function toDate(raw) {
     if (raw instanceof Date)
         return raw;
@@ -22,6 +23,7 @@ function toDate(raw) {
         return new Date(raw);
     return new Date();
 }
+// audit-unknown-ok: type-narrowing entry point — accepts any value, narrows by typeof/Array.isArray
 function normaliseItems(raw) {
     if (!Array.isArray(raw))
         return [];

package/dist/features/homepage/actions/carousel-actions.d.ts

@@ -4,6 +4,7 @@
  * Pure async functions for carousel slide CRUD. No auth, no rate-limit.
  * Called by letitrip thin wrappers which handle auth + rate limiting.
  */
+import type { JsonValue } from "@mohasinac/appkit";
 import type { CarouselSlideDocument } from "../schemas/firestore";
 export interface CarouselSlideInput {
     title: string;
@@ -24,8 +25,8 @@ export interface CarouselSlideInput {
         url: string;
         alt: string;
     };
-    cards?: Record<string, unknown>[];
-    overlay?: Record<string, unknown>;
+    cards?: Record<string, JsonValue>[];
+    overlay?: Record<string, JsonValue>;
 }
 export type CarouselSlideUpdateInput = Partial<CarouselSlideInput>;
 export declare function createCarouselSlide(adminId: string, input: CarouselSlideInput): Promise<CarouselSlideDocument>;

package/dist/features/homepage/actions/carousel-actions.js

@@ -11,6 +11,7 @@ export async function createCarouselSlide(adminId, input) {
     const slide = await carouselRepository.create({
         ...input,
         createdBy: adminId,
+        // audit-unknown-ok: TS structural escape — CarouselSlideCreateInput
     });
     serverLogger.info("createCarouselSlide", { adminId, slideId: slide.id });
     return slide;

package/dist/features/homepage/actions/homepage-section-actions.js

@@ -6,16 +6,18 @@ export const createSectionSchema = z.object({
     type: z.string().min(1),
     enabled: z.boolean().default(true),
     order: z.number().int().default(0),
-    config: z.record(z.string(), z.unknown()).optional(),
+    config: z.record(z.string(), z.unknown()).optional(), // audit-z-any-ok: section config validated per-type by adminSectionsBuildParse (W5 row 1)
 });
 export const updateSectionSchema = z.object({
     order: z.number().int().optional(),
     enabled: z.boolean().optional(),
-    config: z.record(z.string(), z.unknown()).optional(),
+    config: z.record(z.string(), z.unknown()).optional(), // audit-z-any-ok: section config validated per-type by adminSectionsBuildParse (W5 row 1)
 });
 // --- Actions --------------------------------------------------------------
 export async function createHomepageSection(input, createdBy) {
-    const section = await homepageSectionsRepository.create(input);
+    const section = await homepageSectionsRepository.create(
+    // audit-unknown-ok: TS structural escape — HomepageSectionCreateInput
+    input);
     serverLogger.info("createHomepageSection", {
         createdBy,
         sectionId: section.id,

package/dist/features/homepage/api/[id]/route.d.ts

@@ -5,7 +5,7 @@
  * ```ts
  * // app/api/homepage-sections/[id]/route.ts
  * export { homepageSectionItemGET as GET, homepageSectionItemPATCH as PATCH, homepageSectionItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
+ * from "@mohasinac/feat-homepage";
  * ```
  */
 import { NextResponse } from "next/server.js";

package/dist/features/homepage/api/[id]/route.js

@@ -5,13 +5,14 @@
  * ```ts
  * // app/api/homepage-sections/[id]/route.ts
  * export { homepageSectionItemGET as GET, homepageSectionItemPATCH as PATCH, homepageSectionItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
+ * from "@mohasinac/feat-homepage";
  * ```
  */
 import { NextResponse } from "next/server.js";
 import { z } from "zod";
 import { getProviders } from "../../../../contracts";
 import { createRouteHandler } from "../../../../next";
+import { normalizeError } from "../../../../errors/normalize";
 const ERR_SECTION_NOT_FOUND = "Section not found";
 // ---- GET /api/homepage-sections/[id] ----------------------------------------
 export async function GET(_request, context) {
@@ -29,6 +30,7 @@ export async function GET(_request, context) {
         return NextResponse.json({ success: true, data: section });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-homepage] GET /api/homepage-sections/[id] failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch homepage section" }, { status: 500 });
     }

package/dist/features/homepage/api/carousel/[id]/route.d.ts

@@ -5,7 +5,7 @@
  * ```ts
  * // app/api/carousel/[id]/route.ts
  * export { carouselItemGET as GET, carouselItemPATCH as PATCH, carouselItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
+ * from "@mohasinac/feat-homepage";
  * ```
  */
 import { NextResponse } from "next/server.js";

package/dist/features/homepage/api/carousel/[id]/route.js

@@ -5,13 +5,14 @@
  * ```ts
  * // app/api/carousel/[id]/route.ts
  * export { carouselItemGET as GET, carouselItemPATCH as PATCH, carouselItemDELETE as DELETE }
- *   from "@mohasinac/feat-homepage";
+ * from "@mohasinac/feat-homepage";
  * ```
  */
 import { NextResponse } from "next/server.js";
 import { z } from "zod";
 import { getProviders } from "../../../../../contracts";
 import { createRouteHandler } from "../../../../../next";
+import { normalizeError } from "../../../../../errors/normalize";
 // ---- GET /api/carousel/[id] --------------------------------------------------
 export async function GET(_request, context) {
     try {
@@ -28,6 +29,7 @@ export async function GET(_request, context) {
         return NextResponse.json({ success: true, data: slide });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-homepage] GET /api/carousel/[id] failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch carousel slide" }, { status: 500 });
     }

package/dist/features/homepage/api/carousel/route.js

@@ -12,6 +12,7 @@ import { z } from "zod";
 import { getProviders } from "../../../../contracts";
 import { createRouteHandler } from "../../../../next";
 /** Read `__session` cookie from request headers (HTTP cookie string). */
+import { normalizeError } from "../../../../errors/normalize";
 function getSessionCookie(request) {
     const cookieHeader = request.headers.get("cookie") ?? "";
     const match = cookieHeader.match(/(?:^|;\s*)__session=([^;]+)/);
@@ -76,6 +77,7 @@ export async function GET(request) {
         return response;
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-homepage] GET /api/carousel failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch carousel slides" }, { status: 500 });
     }
@@ -148,6 +150,7 @@ export const carouselPOST = createRouteHandler({
             cards: body.cards ?? [],
             createdAt: now,
             updatedAt: now,
+            // audit-unknown-ok: TS structural escape — CarouselSlide
         });
         return NextResponse.json({ success: true, data: created }, { status: 201 });
     },

package/dist/features/homepage/api/route.js

@@ -12,6 +12,7 @@ import { z } from "zod";
 import { getProviders } from "../../../contracts";
 import { createRouteHandler } from "../../../next";
 /** Read `__session` cookie from request headers (HTTP cookie string). */
+import { normalizeError } from "../../../errors/normalize";
 function getSessionCookie(request) {
     const cookieHeader = request.headers.get("cookie") ?? "";
     const match = cookieHeader.match(/(?:^|;\s*)__session=([^;]+)/);
@@ -68,6 +69,7 @@ export async function GET(request) {
         return res;
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-homepage] GET /api/homepage-sections failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch homepage sections" }, { status: 500 });
     }
@@ -130,6 +132,7 @@ export const POST = createRouteHandler({
             enabled: body.enabled ?? true,
             createdAt: now,
             updatedAt: now,
+            // audit-unknown-ok: TS structural escape — HomepageSection
         });
         return NextResponse.json({ success: true, data: created }, { status: 201 });
     },

package/dist/features/homepage/api/sections/[id]/route.js

@@ -10,6 +10,7 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../../contracts";
+import { normalizeError } from "../../../../../errors/normalize";
 const ERR_SECTION_ID_REQUIRED = "Section ID is required";
 const ERR_DB_NOT_CONFIGURED = "Database provider not configured";
 const ERR_INTERNAL_SERVER_ERROR = "Internal server error";
@@ -33,6 +34,7 @@ export async function GET(request, { params }) {
         });
     }
     catch (error) {
+        void normalizeError(error);
         return NextResponse.json({
             success: false,
             error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
@@ -60,6 +62,7 @@ export async function PATCH(request, { params }) {
         });
     }
     catch (error) {
+        void normalizeError(error);
         return NextResponse.json({
             success: false,
             error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
@@ -83,6 +86,7 @@ export async function DELETE(request, { params }) {
         });
     }
     catch (error) {
+        void normalizeError(error);
         return NextResponse.json({
             success: false,
             error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,

package/dist/features/homepage/api/sections/route.js

@@ -10,6 +10,7 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../contracts";
+import { normalizeError } from "../../../../errors/normalize";
 function numParam(url, key, fallback) {
     const v = url.searchParams.get(key);
     const n = v !== null ? Number(v) : NaN;
@@ -48,6 +49,7 @@ export async function GET(request) {
         });
     }
     catch (error) {
+        void normalizeError(error);
         return NextResponse.json({
             success: false,
             error: error instanceof Error ? error.message : "Internal server error",
@@ -71,6 +73,7 @@ export async function POST(request) {
         }, { status: 201 });
     }
     catch (error) {
+        void normalizeError(error);
         return NextResponse.json({
             success: false,
             error: error instanceof Error ? error.message : "Internal server error",

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

@@ -13,7 +13,6 @@ function AdsenseAd({ config }) {
         if (typeof window === "undefined")
             return;
         try {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (window.adsbygoogle = window.adsbygoogle || []).push({});
         }
         catch {
@@ -36,7 +35,9 @@ function ManualAdBanner({ ad }) {
     const { creative } = ad;
     if (!creative)
         return null;
-    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx(Span, { size: "xs", weight: "semibold", className: "flex-shrink-0 rounded-md bg-primary px-3 py-1.5 text-white", children: creative.ctaLabel })) : null] }));
+    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "truncate", color: "muted", size: "xs", children: creative.body })) : null] }), creative.ctaLabel ? (
+            // audit-variant-ok: CTA pill — bg-primary + py-1.5 (between Span padding map keys)
+            _jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "flex-shrink-0 bg-primary py-1.5", rounded: "md", padding: "x-sm", children: creative.ctaLabel })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Primary component

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Grid, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
+import { CARD_ASPECT_BANNER, GRID_COLS_2_MD } from "../../../_internal/shared/styles/grid";
+import { Button, Div, Grid, Heading, Row, Scrim, Section, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ArrowRight, Sparkles } from "lucide-react";
 const __P = {
@@ -9,20 +9,24 @@ const __P = {
 const __O = {
     hidden: "overflow-hidden",
 };
-const CLS_GRADIENT_BG = "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600";
+const CLS_GRADIENT_BG = "absolute inset-0 bg-[image:var(--appkit-gradient-promotion)]";
 const CLS_CTA_BTN_SM = "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold gap-1.5 flex-shrink-0";
 const CLS_CTA_BTN_LG = "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold shadow-lg gap-2";
 // --- Constants ---------------------------------------------------------------
 const CLS_CONTAINER = "w-full max-w-7xl mx-auto";
 // --- Component ---------------------------------------------------------------
 export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading = false, compact = false, className = "", }) {
-    const wrapClass = "bg-gradient-to-br from-amber-50/40 to-orange-50/20 dark:from-amber-950/10 dark:to-orange-950/5";
+    const wrapClass = "bg-[image:var(--appkit-gradient-section-warm)]";
     if (isLoading) {
-        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: "h-72 animate-pulse", surface: "subtle", rounded: "2xl" }) }) }));
     }
     // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} rounded-2xl bg-zinc-900 shadow-xl`, children: _jsxs(Grid, { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Div, { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs(Stack, { className: "relative justify-center px-8 py-10 md:px-12 md:py-14", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs(Span, { size: "xs", weight: "semibold", className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} bg-zinc-900`, rounded: "2xl", shadow: "xl", children: _jsxs(Grid, { className: `${GRID_COLS_2_MD} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${CARD_ASPECT_BANNER} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Scrim, { direction: "right-to-left", intensity: "medium", className: "hidden md:block absolute inset-y-0 right-0 w-24" })] }), _jsxs(Stack, { justify: "center", className: "relative px-8 md:px-12 md:py-14", padding: "y-2xl", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (
+                                    // audit-variant-ok: translucent-white tag pill over dark ad — no white-overlay surface variant + wide tracking + backdrop-blur
+                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "self-start bg-white/10 /80 tracking-widest mb-5 backdrop-blur-sm", rounded: "full", padding: "pill-md", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "4xl", lgSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/75 mb-8 leading-relaxed", mdSize: "lg", size: "base", children: subtitle })), ctaLabel && onCtaClick && (
+                                    // audit-variant-ok: white CTA pill over dark ad — bg-white + dark-mode preserved zinc tones override Button.variant secondary
+                                    _jsxs(Button, { gap: "md", variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 font-semibold shadow-lg", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
     // -- Full-width gradient layout --
     return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsxs(Row, { align: "center", className: [
@@ -32,5 +36,9 @@ export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", on
                         : "min-h-[clamp(240px,34vh,360px)]",
                 ].join(" "), 
                 // audit-inline-style-ok: optional inline color
-                style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs(Span, { className: "inline-flex items-center gap-2", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { size: "sm", weight: "semibold", className: "text-white", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", children: [tagLabel && (_jsxs(Span, { size: "xs", weight: "semibold", className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+                style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 bg-primary/20 blur-3xl animate-pulse", rounded: "full" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 bg-cobalt/20 blur-3xl animate-pulse", rounded: "full" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full", gap: "md", padding: "inlineLg", children: [_jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { color: "inverse", size: "sm", weight: "semibold", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (
+                    // audit-variant-ok: gradient banner content — responsive md:py-16 ladder beyond y-3xl base
+                    _jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto md:py-16 text-center", paddingY: "y-3xl", paddingX: "x-lg", children: [tagLabel && (
+                            // audit-variant-ok: translucent-white tag pill over gradient ad — no white-overlay surface variant + shadow-sm + backdrop-blur
+                            _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "bg-white/15 /90 tracking-widest mb-5 backdrop-blur-sm shadow-sm", rounded: "full", padding: "pill-lg", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "lg:text-6xl font-extrabold mb-4 drop-shadow-lg leading-tight", mdSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "mb-10 max-w-2xl mx-auto", mdSize: "xl", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
 }

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

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { X } from "lucide-react";
 import { useAuth } from "../../../react/contexts/SessionContext";
 import { Div } from "../../../ui/components/Div";
+import { Row, Span } from "@mohasinac/appkit";
 const STORAGE_KEY = "letitrip:announcement-dismissed";
 const ONE_WEEK_MS = 7 * 24 * 60 * 60 * 1000;
 export function hashBannerMessage(msg) {
@@ -50,7 +51,7 @@ export function AnnouncementBar({ message, className = "", onDismiss }) {
     }, [message, userAlreadyDismissed]);
     if (dismissed)
         return null;
-    return (_jsx(Div, { className: `relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700 transition-opacity duration-200 ${mounted ? "opacity-100" : "opacity-0"} ${className}`, role: "banner", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-4 sm:px-6 lg:px-8", children: _jsxs(Div, { className: "relative flex items-center justify-center py-2 text-center text-sm font-medium text-white", children: [_jsx("span", { children: message }), _jsx("button", { type: "button", onClick: () => {
+    return (_jsx(Div, { className: `relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700 transition-opacity duration-200 ${mounted ? "opacity-100" : "opacity-0"} ${className}`, role: "banner", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsxs(Row, { textWeight: "medium", textSize: "sm", className: "relative text-center text-white", padding: "y-xs", align: "center", justify: "center", children: [_jsx(Span, { children: message }), _jsx("button", { type: "button", onClick: () => {
                             saveLocalDismissal(message);
                             onDismiss?.(bannerHash);
                             setDismissed(true);

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useEffect } from "react";
 import Image from "next/image";
-import { Div, Span, Text } from "../../../ui";
+import { Div, Row, Span, Text } from "../../../ui";
 const __P = {
     p4: "p-4",
 };
@@ -44,7 +44,7 @@ export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "Af
             window.removeEventListener("touchend", onUp);
         };
     }, [dragging, updatePosition]);
-    return (_jsxs(Div, { className: `border-border ${__O.hidden} rounded-2xl border bg-card shadow-sm`, children: [_jsxs(Div, { ref: containerRef, className: "relative aspect-[4/3] cursor-col-resize overflow-hidden select-none", onMouseDown: (e) => {
+    return (_jsxs(Div, { className: `border-border ${__O.hidden} border bg-card`, rounded: "2xl", shadow: "sm", children: [_jsxs(Div, { ref: containerRef, className: "relative aspect-[4/3] cursor-col-resize overflow-hidden select-none", onMouseDown: (e) => {
                     setDragging(true);
                     updatePosition(e.clientX);
                 }, onTouchStart: (e) => {
@@ -57,7 +57,7 @@ export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "Af
                         setPosition((p) => Math.min(100, p + 2));
                 }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", 
                         // audit-inline-style-ok: computed percentage
-                        style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card shadow-md", 
+                        style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card", shadow: "md", 
                         // audit-inline-style-ok: computed percentage
-                        style: { left: `${position}%` }, children: _jsx(Div, { className: "absolute top-1/2 left-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-card shadow-lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10 rounded-full bg-black/50 px-2.5 py-0.5 text-white", children: beforeLabel }), _jsx(Span, { size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10 rounded-full bg-black/50 px-2.5 py-0.5 text-white", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground text-sm font-medium", children: item.caption }) })] }));
+                        style: { left: `${position}%` }, children: _jsx(Row, { className: "absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 bg-card", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10", padding: "pill-sm", rounded: "full", children: beforeLabel }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10", padding: "pill-sm", rounded: "full", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground", size: "sm", weight: "medium", children: item.caption }) })] }));
 }

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useBlogArticles } from "../hooks/useBlogArticles";
 import { BlogFeaturedCard } from "../../blog/components/BlogFeaturedCard";
 import { ROUTES } from "../../../next";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", initialItems, }) {
     const { data, isLoading } = useBlogArticles({ initialPosts: initialItems });
     const items = data?.posts ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "From Our Blog", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "From Our Blog", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
 }

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

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, HorizontalScroller, Section, Text } from "../../../ui";
+import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed";
+import { Div, Heading, HorizontalScroller, Row, Section, Text } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { useTopBrands } from "../hooks/useTopBrands";
 const __O = {
@@ -27,10 +27,10 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Div, { className: "flex h-16 w-16 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: initial })), _jsx(Text, { className: "w-full truncate text-center text-xs font-medium text-zinc-700 dark:text-zinc-300", children: brand.name })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-2 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: iconSrc ?? coverImage, alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "center", children: brand.name })] }));
 }
 export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, }) {
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     const { data: allBrands = [], isLoading } = useTopBrands(limit, { initialData: initialItems });
     const [activeFilter, setActiveFilter] = useState("all");
     // Available filter chips: "All" + "Featured" when featuredOnly filter is configured
@@ -42,5 +42,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Div, { className: "mb-6 flex items-center justify-between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Div, { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { className: `flex gap-3 ${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700 md:h-40" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, loop: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "subtle", paddingY: "y-3xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Row, { className: "mb-6", align: "center", justify: "between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden}`, children: Array.from({ length: 8 }).map((_, i) => (_jsx(Div, { className: "h-32 w-36 flex-none animate-pulse md:h-40", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false, loop: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Div, Heading, Section, Span, Text } from "../../../ui";
+import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
 export function CTABannerSection({ title = "Thousands of collectibles. One marketplace.", subtitle, primaryLabel = "Shop All Products →", primaryHref = "/products", secondaryLabel = "Browse Auctions →", secondaryHref = "/auctions", className = "", }) {
-    return (_jsx(Section, { className: `bg-gradient-to-r from-primary-600 to-primary-700 py-16 px-4 ${className}`, children: _jsxs(Div, { className: "mx-auto max-w-3xl text-center", children: [_jsx(Span, { className: "mb-4 inline-block text-2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { level: 2, className: "text-2xl font-bold text-white md:text-3xl lg:text-4xl", children: title }), subtitle && (_jsx(Text, { className: "mt-3 text-base text-white/80", children: subtitle })), _jsxs(Div, { className: "mt-8 flex flex-wrap items-center justify-center gap-4", children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
+    return (_jsx(Section, { tone: "accent-banner", className: `${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-3xl text-center", children: [_jsx(Span, { className: "mb-4 inline-block", size: "2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse", className: "mt-3 /80", size: "base", children: subtitle })), _jsxs(Row, { className: "mt-8", align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
 }