@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -14,16 +14,16 @@ const __O = {
 const PLACEHOLDER_EMOJI = "📦";
 export function FeaturedBundlesSection({ title = BUNDLE_COPY.featuredDefaultTitle, description, initialItems = [], className = "", onBuyNow, }) {
     const items = initialItems.filter((c) => c.categoryType === "bundle");
-    return (_jsx(Section, { className: `py-10 ${className}`, children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-100", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES ?? "/bundles"), className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: BUNDLE_COPY.featured.viewAll })] }), items.length === 0 ? (_jsx(Div, { className: "rounded-xl border border-dashed border-zinc-200 py-12 text-center dark:border-zinc-700", children: _jsx(Text, { color: "muted", children: BUNDLE_COPY.featured.empty }) })) : (_jsx(Div, { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, onBuyNow: onBuyNow }, bundle.id))) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, padding: "y-2xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES ?? "/bundles"), className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: BUNDLE_COPY.featured.viewAll })] }), items.length === 0 ? (_jsx(Div, { className: "border-dashed text-center", padding: "y-3xl", rounded: "xl", border: "default", children: _jsx(Text, { color: "muted", children: BUNDLE_COPY.featured.empty }) })) : (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, onBuyNow: onBuyNow }, bundle.id))) }))] }) }));
 }
 function FeaturedBundleCard({ bundle, onBuyNow }) {
     const stock = bundle.bundleStockStatus ?? "in_stock";
     const memberCount = bundle.bundleProductIds?.length ?? 0;
     const cover = bundle.display?.coverImage;
     const href = String(ROUTES.PUBLIC.BUNDLE_DETAIL?.(bundle.slug) ?? "#");
-    return (_jsxs(Stack, { gap: "none", className: "rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900", children: [_jsxs(Link, { href: href, className: "group block p-3 hover:no-underline", children: [_jsx(Div, { className: `mb-2 aspect-square ${__O.hidden} rounded-lg bg-zinc-100 dark:bg-zinc-800`, children: cover ? (
-                        // eslint-disable-next-line @next/next/no-img-element, lir/no-raw-media-elements
-                        _jsx("img", { src: cover, alt: bundle.name, className: "h-full w-full object-cover transition-transform group-hover:scale-105", loading: "lazy" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center text-3xl", children: PLACEHOLDER_EMOJI })) }), _jsx(Text, { className: "line-clamp-2 text-sm font-semibold", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", className: "mt-1 flex-wrap", children: [_jsx(Text, { size: "sm", weight: "bold", children: bundle.bundlePriceInPaise
+    return (_jsxs(Stack, { gap: "none", surface: "default", rounded: "xl", border: "default", children: [_jsxs(Link, { href: href, className: "group block p-3 hover:no-underline", children: [_jsx(Div, { className: `mb-2 aspect-square ${__O.hidden}`, rounded: "lg", surface: "subtle", children: cover ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        _jsx("img", { src: cover, alt: bundle.name, className: "h-full w-full object-cover transition-transform group-hover:scale-105", loading: "lazy" })) : (_jsx(Row, { textSize: "3xl", className: "h-full w-full", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })) }), _jsx(Text, { className: "line-clamp-2", size: "sm", weight: "semibold", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", className: "mt-1", wrap: true, children: [_jsx(Text, { size: "sm", weight: "bold", children: bundle.bundlePriceInPaise
                                     ? formatCurrency(bundle.bundlePriceInPaise / 100, "INR")
-                                    : BUNDLE_COPY.featured.priceFallback }), _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.featured.itemCount(memberCount)] }), stock !== "in_stock" && (_jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: BUNDLE_COPY.stockBadge.listVariantOutOfStock }))] })] }), onBuyNow && (_jsx(Div, { className: `border-t border-zinc-100 ${__P.p3} pt-2 dark:border-zinc-800`, children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }));
+                                    : BUNDLE_COPY.featured.priceFallback }), _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.featured.itemCount(memberCount)] }), stock !== "in_stock" && (_jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: BUNDLE_COPY.stockBadge.listVariantOutOfStock }))] })] }), onBuyNow && (_jsx(Div, { border: "subtle", className: `border-t ${__P.p3}`, padding: "t-xs", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }));
 }

package/dist/features/homepage/components/FeaturedPreOrdersSection.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 { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
     const { data: items = [], isLoading } = useFeaturedPreOrders({ filterByBrand, initialData: initialItems });
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", 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(MarketplacePreorderCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", 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(MarketplacePreorderCard, { product: product })), className: className }));
 }

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

@@ -4,7 +4,7 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { ROUTES } from "../../../next";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, }) {
     const { data, isLoading } = useFeaturedProducts({
         filterByBrand,
@@ -13,5 +13,5 @@ export function FeaturedProductsSection({ title = "Featured Products", descripti
             : undefined,
     });
     const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", 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(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", 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(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) })), className: className }));
 }

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

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Section, Span, Text, HorizontalScroller } from "../../../ui";
+import { Div, Heading, HorizontalScroller, Row, Section, Span, Text } from "../../../ui";
 import { BeforeAfterCard } from "./BeforeAfterCard";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 // --- Sectmon -----------------------------------------------------------------
 export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLabel = "✶", items, className = "", }) {
-    const { flex } = THEME_CONSTANTS;
     const pillCls = "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium uppercase tracking-[0.2em] text-primary-700 backdrop-blur-sm dark:text-primary-400";
     if (!items.length)
         return null;
-    return (_jsxs(Section, { className: `px-4 py-16 md:py-20 ${className}`, children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 rounded-full bg-primary-500", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display text-4xl text-zinc-900 dark:text-white", children: title }), _jsxs(Div, { className: `mt-3 ${flex.center} gap-2 text-zinc-400 dark:text-zinc-400`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md text-sm text-zinc-500 dark:text-zinc-400", children: subtitle }))] }), _jsx(Div, { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx(Div, { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
+    return (
+    // audit-variant-ok: section — base paddingY=y-4xl + md:py-20 responsive bump (PADDING_MAP lacks responsive md-up ladder)
+    _jsxs(Section, { className: `md:py-20 ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 bg-primary-500", rounded: "full", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display", color: "primary", size: "4xl", children: title }), _jsxs(Row, { align: "center", justify: "center", gap: "sm", color: "faint", className: "mt-3", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md", color: "muted", size: "sm", children: subtitle }))] }), _jsx(Div, { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx(Div, { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
                                 id: item.id ?? `result-${i}`,
                                 beforeImage: item.beforeImage,
                                 afterImage: item.afterImage,
                                 caption: item.caption ?? "",
                                 sortOrder: item.sortOrder ?? i,
-                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true, loop: true }) })] }));
+                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: CAROUSEL_PER_VIEW.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true, loop: true }) })] }));
 }

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedStores } from "../hooks/useFeaturedStores";
 import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
 import { ROUTES } from "../../../next";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", initialItems, }) {
     const { data: items = [], isLoading } = useFeaturedStores(limit, { initialData: initialItems });
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
 }

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Div, Heading, Section, Span, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Div, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
 import { fetchGoogleReviews } from "../lib/google-reviews-fetcher";
 const __P = {
@@ -11,11 +10,13 @@ const CLS_STAR_OFF = "text-zinc-300 dark:text-zinc-600";
 const CLS_GMAPS_LINK = "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline";
 // --- Star Rating -------------------------------------------------------------
 function StarRating({ rating }) {
-    return (_jsx(Div, { className: "flex items-center gap-0.5", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? CLS_STAR_ON : CLS_STAR_OFF}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
+    return (
+    // audit-variant-ok: star rating Row — gap-0.5 between stars; Row.gap lacks 0.5 key
+    _jsx(Row, { className: "gap-0.5", align: "center", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? CLS_STAR_ON : CLS_STAR_OFF}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
 }
 // --- Google Logo Badge -------------------------------------------------------
 function GoogleBadge() {
-    return (_jsxs(Span, { size: "xs", className: "inline-flex items-center gap-1 text-zinc-500 dark:text-zinc-400", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Posted on Google"] }));
+    return (_jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", color: "muted", children: [_jsxs("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }), _jsx("path", { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }), _jsx("path", { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }), _jsx("path", { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })] }), "Posted on Google"] }));
 }
 // --- Review Card -------------------------------------------------------------
 function ReviewCard({ review, showRating, showDate, }) {
@@ -26,25 +27,24 @@ function ReviewCard({ review, showRating, showDate, }) {
             day: "numeric",
         })
         : null;
-    return (_jsxs(Div, { className: `flex flex-col gap-3 ${__P.p4} rounded-xl bg-[var(--appkit-color-surface)] shadow-sm border border-[var(--appkit-color-border)]`, children: [_jsxs(Div, { className: "flex items-center gap-3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx(Div, { className: "w-9 h-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-center flex-shrink-0", children: _jsx(Span, { size: "sm", weight: "bold", className: "text-white", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "text-sm font-semibold truncate", children: review.authorName }), dateStr && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx(Text, { className: "text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-4", children: review.text })), _jsx(GoogleBadge, {})] }));
+    return (_jsxs(Stack, { className: `${__P.p4} bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)]`, gap: "3", rounded: "xl", shadow: "sm", children: [_jsxs(Row, { align: "center", gap: "3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx(Row, { className: "w-9 h-9 bg-[var(--appkit-color-primary)] flex-shrink-0", align: "center", justify: "center", rounded: "full", children: _jsx(Span, { color: "inverse", size: "sm", weight: "bold", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "semibold", children: review.authorName }), dateStr && (_jsx(Text, { size: "xs", color: "muted", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx(Text, { className: "leading-relaxed line-clamp-4", color: "muted", size: "sm", children: review.text })), _jsx(GoogleBadge, {})] }));
 }
 // --- Empty / Not Configured States -------------------------------------------
 function NotConfiguredState() {
-    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4m0 4h.01" })] }), "Google Reviews not configured. Add your Google Maps API key in Site Settings."] }));
+    return (_jsxs(Stack, { textSize: "sm", justify: "center", color: "faint", padding: "y-4xl", align: "center", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4m0 4h.01" })] }), "Google Reviews not configured. Add your Google Maps API key in Site Settings."] }));
 }
 function EmptyState() {
-    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-16 text-zinc-400 text-sm", children: [_jsx("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }) }), "No reviews yet."] }));
+    return (_jsxs(Stack, { textSize: "sm", justify: "center", color: "faint", padding: "y-4xl", align: "center", children: [_jsx("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }) }), "No reviews yet."] }));
 }
 export async function GoogleReviewsSection(config) {
     const { placeId: configPlaceId, maxReviews = 6, minRating = 0, layout = "grid", showRating = true, showDate = true, linkToGoogleMaps = true, googleMapsUrl, } = config;
-    const { themed } = THEME_CONSTANTS;
     // Get credentials from site settings
     const credentials = await siteSettingsRepository
         .getDecryptedCredentials()
         .catch(() => ({}));
     const apiKey = credentials.googleMapsApiKey ?? "";
     if (!apiKey) {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx(Div, { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(NotConfiguredState, {}) }) }));
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", padding: "x-md", children: _jsx(NotConfiguredState, {}) }) }));
     }
     const placeId = configPlaceId || credentials.googlePlaceId || "";
     if (!placeId) {
@@ -65,7 +65,7 @@ export async function GoogleReviewsSection(config) {
     const gridClass = layout === "carousel"
         ? "flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory"
         : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4";
-    const cardClass = layout === "carousel" ? "flex-shrink-0 w-72 snap-start" : "";
+    const cardClass = layout === "carousel" ? "flex-shrink-0 w-[85%] sm:w-72 snap-start" : "";
     const mapsHref = googleMapsUrl || (placeId ? `https://search.google.com/local/reviews?placeid=${placeId}` : "");
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs(Div, { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs(Div, { className: "flex items-center gap-2 mt-1", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: CLS_GMAPS_LINK, children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(Div, { className: gridClass, children: reviews.map((review, i) => (_jsx(Div, { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
+    return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", padding: "x-md", children: [_jsxs(Row, { className: "mb-8", align: "end", justify: "between", gap: "md", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs(Row, { className: "mt-1", align: "center", gap: "sm", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: CLS_GMAPS_LINK, children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(Div, { className: gridClass, children: reviews.map((review, i) => (_jsx(Div, { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useCallback } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { Button, Div, Heading, Row, Span } from "../../../ui";
+import { Button, Div, Heading, Row, Span, Stack } from "../../../ui";
 const FONT_BANGERS = "var(--font-bangers, Bangers, cursive)";
 export function HeroBanner({ banners, autoplayMs = 5000 }) {
     const [current, setCurrent] = useState(0);
@@ -39,11 +39,11 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                 } }), _jsx(Div, { className: "absolute inset-0", style: {
                     background: "linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 30%, rgba(0,0,0,0.55) 100%)",
                     zIndex: 3,
-                } }), _jsxs(Div, { className: "relative flex flex-col justify-end px-5 pb-16 sm:px-12 sm:pb-24 lg:px-20", style: {
+                } }), _jsxs(Stack, { justify: "end", className: "relative pb-16 sm:px-12 sm:pb-24 lg:px-20", padding: "x-md", style: {
                     minHeight: "100svh",
                     zIndex: 10,
                     paddingTop: "var(--header-height, 4rem)",
-                }, children: [banner.subtitle && (_jsx(Div, { className: "mb-3", children: _jsx(Span, { className: "inline-block px-3 py-1 text-xs font-black uppercase tracking-[0.18em]", style: {
+                }, children: [banner.subtitle && (_jsx(Div, { className: "mb-3", children: _jsx(Span, { className: "inline-block font-black uppercase tracking-[0.18em]", padding: "pill-md", size: "xs", style: {
                                 background: "var(--color-red)",
                                 color: "#FFFFFF",
                                 fontFamily: FONT_BANGERS,
@@ -61,7 +61,7 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                                 background: "var(--color-yellow)",
                                 color: "#1A1A1A",
                                 boxShadow: "0 4px 24px rgba(255,229,0,0.35)",
-                            }, children: [banner.ctaLabel, _jsx(Span, { "aria-hidden": "true", className: "text-lg sm:text-xl leading-none", children: "\u2192" })] }) }))] }), banners.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: prev, "aria-label": "Previous slide", variant: "ghost", size: "sm", className: "absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                            }, children: [banner.ctaLabel, _jsx(Span, { "aria-hidden": "true", className: "leading-none", smSize: "xl", size: "lg", children: "\u2192" })] }) }))] }), banners.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { rounded: "full", onClick: prev, "aria-label": "Previous slide", variant: "ghost", size: "sm", className: "absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 justify-center transition-all hover:scale-105", style: {
                             zIndex: 15,
                             width: 40,
                             height: 40,
@@ -69,7 +69,7 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                             border: "1px solid rgba(255,255,255,0.2)",
                             color: "#ffffff",
                             backdropFilter: "blur(6px)",
-                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { onClick: next, "aria-label": "Next slide", variant: "ghost", size: "sm", className: "absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { rounded: "full", onClick: next, "aria-label": "Next slide", variant: "ghost", size: "sm", className: "absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 justify-center transition-all hover:scale-105", style: {
                             zIndex: 15,
                             width: 40,
                             height: 40,
@@ -77,18 +77,18 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                             border: "1px solid rgba(255,255,255,0.2)",
                             color: "#ffffff",
                             backdropFilter: "blur(6px)",
-                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] })), banners.length > 1 && (_jsxs(Row, { className: "absolute bottom-8 right-6 sm:right-12 gap-3", style: { zIndex: 15 }, children: [_jsxs(Span, { className: "text-xs font-black tabular-nums", style: {
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] })), banners.length > 1 && (_jsxs(Row, { className: "absolute bottom-8 right-6 sm:right-12", gap: "3", style: { zIndex: 15 }, children: [_jsxs(Span, { className: "font-black tabular-nums", size: "xs", style: {
                             color: "rgba(255,255,255,0.6)",
                             fontFamily: FONT_BANGERS,
                             letterSpacing: "0.1em",
-                        }, children: [String(current + 1).padStart(2, "0"), " /", " ", String(banners.length).padStart(2, "0")] }), _jsx(Div, { className: "flex gap-1.5", children: banners.map((_, i) => (_jsx(Button, { onClick: () => goTo(i), "aria-label": `Go to slide ${i + 1}`, variant: "ghost", size: "sm", className: "transition-all", style: {
+                        }, children: [String(current + 1).padStart(2, "0"), " /", " ", String(banners.length).padStart(2, "0")] }), _jsx(Row, { gap: "xs", className: "", children: banners.map((_, i) => (_jsx(Button, { onClick: () => goTo(i), "aria-label": `Go to slide ${i + 1}`, variant: "ghost", size: "sm", className: "transition-all", style: {
                                 height: 3,
                                 width: i === current ? 28 : 10,
                                 borderRadius: 2,
                                 background: i === current
                                     ? "var(--color-yellow)"
                                     : "rgba(255,255,255,0.35)",
-                            } }, i))) })] })), _jsx(Div, { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1", style: { zIndex: 15, opacity: 0.5 }, "aria-hidden": "true", children: _jsx(Div, { className: "h-8 w-px", style: {
+                            } }, i))) })] })), _jsx(Stack, { className: "absolute bottom-6 left-1/2 -translate-x-1/2", align: "center", gap: "xs", style: { zIndex: 15, opacity: 0.5 }, "aria-hidden": "true", children: _jsx(Div, { className: "h-8 w-px", style: {
                         background: "linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8))",
                     } }) })] }));
 }

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

@@ -2,12 +2,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useMediaQuery } from "../../../react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
+import { Button, Div, Heading, Row, Scrim, Section, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { MediaVideo } from "../../media/MediaVideo";
 import { useHeroCarousel } from "../hooks/useHeroCarousel";
-const { flex, position } = THEME_CONSTANTS;
+import { HERO_CAROUSEL_ARROW, HERO_CAROUSEL_DOT_ACTIVE, HERO_CAROUSEL_DOT_INACTIVE, POSITION_FILL, FLEX_CENTER, HERO_PLACEHOLDER_BG } from "../constants/hero-carousel-styles";
 function makeButtonClickHandler(href, openInNewTab, push) {
     return () => {
         if (openInNewTab) {
@@ -71,33 +70,34 @@ function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
     const mobileUrl = effectiveBg?.mobileUrl ?? (isMobile && mobileLegacy ? mobileLegacy.url : undefined);
     const src = mobileUrl ?? effectiveBg?.url ?? "";
     if (!effectiveBg) {
-        return _jsx(Div, { className: `${position.fill} bg-zinc-900` });
+        // audit-variant-ok: slide placeholder — bg-zinc-900 over POSITION_FILL; brand placeholder when no slide image
+        return _jsx(Div, { className: `${POSITION_FILL} bg-zinc-900` });
     }
     if (effectiveBg.type === "color") {
         const bg_color = effectiveBg.color ?? "var(--appkit-color-primary)";
-        return _jsx(Div, { className: position.fill, style: { backgroundColor: bg_color } });
+        return _jsx(Div, { className: POSITION_FILL, style: { backgroundColor: bg_color } });
     }
     if (effectiveBg.type === "gradient") {
         const from = effectiveBg.gradientFrom ?? "var(--appkit-color-primary)";
         const to = effectiveBg.gradientTo ?? "var(--appkit-color-secondary)";
         const angle = effectiveBg.gradientAngle ?? 135;
-        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+        return (_jsx(Div, { className: POSITION_FILL, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
     }
     if (effectiveBg.type === "video") {
-        return (_jsxs(_Fragment, { children: [_jsx(MediaVideo, { src: src, thumbnailUrl: effectiveBg.thumbnail ?? legacy?.thumbnail, alt: "", autoPlayMuted: true, loop: true, controls: false }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+        return (_jsxs(_Fragment, { children: [_jsx(MediaVideo, { src: src, thumbnailUrl: effectiveBg.thumbnail ?? legacy?.thumbnail, alt: "", autoPlayMuted: true, loop: true, controls: false }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: position.fill, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
 }
 /** Renders the background of a card (image, video, color, gradient). */
 function CardBackground({ bg }) {
     if (bg.type === "color") {
-        return (_jsx(Div, { className: position.fill, style: { backgroundColor: bg.color ?? "var(--appkit-color-surface)" } }));
+        return (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: bg.color ?? "var(--appkit-color-surface)" } }));
     }
     if (bg.type === "gradient") {
         const from = bg.gradientFrom ?? "var(--appkit-color-primary)";
         const to = bg.gradientTo ?? "var(--appkit-color-secondary)";
         const angle = bg.gradientAngle ?? 135;
-        return (_jsx(Div, { className: position.fill, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
+        return (_jsx(Div, { className: POSITION_FILL, style: { background: `linear-gradient(${angle}deg, ${from}, ${to})` } }));
     }
     if (bg.type === "image" && bg.url) {
         return _jsx(MediaImage, { src: bg.url, alt: "", size: "card" });
@@ -112,16 +112,24 @@ function CarouselCardRenderer({ card, isMobile, push, }) {
     const hoverClass = getHoverClass(card.hover?.effect);
     const textAlign = card.content?.textAlign ?? "left";
     const textAlignClass = textAlign === "center" ? "text-center" : textAlign === "right" ? "text-right" : "text-left";
-    return (_jsxs(Div, { className: `relative rounded-lg overflow-hidden shadow-lg transition-all duration-300 ${hoverClass}`, style: {
+    return (_jsxs(Div, { className: `relative overflow-hidden transition-all duration-300 ${hoverClass}`, rounded: "lg", shadow: "lg", style: {
             gridRow: String(gridPos.gridRow),
             gridColumn: String(gridPos.gridColumn),
             minHeight: isMobile ? 100 : 140,
-        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent p-2 md:p-6 ${textAlignClass}`, children: [card.content?.eyebrow && (_jsx(Text, { className: "text-[10px] md:text-xs !text-white/70 mb-0.5 uppercase tracking-wider drop-shadow-sm", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl font-bold mb-0.5 md:mb-3 drop-shadow-md ${THEME_CONSTANTS.utilities.textClamp2}`, style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (_jsx(Text, { className: `text-[10px] md:text-sm !text-white/80 mb-1 md:mb-4 ${THEME_CONSTANTS.utilities.textClamp1} drop-shadow-sm`, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
-                            const variant = btn.variant === "link" || btn.variant === "ghost"
-                                ? "ghost"
-                                : btn.variant;
-                            return (_jsx(Button, { variant: variant, size: "sm", onClick: makeButtonClickHandler(btn.href, btn.openInNewTab, push), children: btn.text }, btn.id ?? i));
-                        }) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { size: "lg", className: "md:text-2xl", children: card.buttons[0].text }) }))] }));
+        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-6 ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] !/70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block !/90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (
+                            // audit-variant-ok: card title — arbitrary text-[11px] base + md:text-2xl lg:text-3xl ladder + drop-shadow-md
+                            _jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl mb-0.5 md:mb-3 drop-shadow-md`, truncate: 2, weight: "bold", style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (
+                            // audit-variant-ok: card description — arbitrary text-[10px] base + md:text-sm responsive bump
+                            _jsx(Text, { color: "inverse", shadow: "sm", className: `text-[10px] md:text-sm !/80 mb-1 md:mb-4`, truncate: true, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (
+                            // audit-variant-ok: button row — md:gap-2 responsive gap bump (Row.gap is single-axis)
+                            _jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
+                                    const variant = btn.variant === "link" || btn.variant === "ghost"
+                                        ? "ghost"
+                                        : btn.variant;
+                                    return (_jsx(Button, { variant: variant, size: "sm", onClick: makeButtonClickHandler(btn.href, btn.openInNewTab, push), children: btn.text }, btn.id ?? i));
+                                }) }))] })] })), card.isButtonOnly && card.buttons?.[0] && (
+            // audit-variant-ok: button-only card overlay — POSITION_FILL + FLEX_CENTER + hover black/20 overlay
+            _jsx(Button, { variant: "ghost", className: `${POSITION_FILL} ${FLEX_CENTER} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { size: "lg", mdSize: "2xl", children: card.buttons[0].text }) }))] }));
 }
 export function HeroCarousel({ initialSlides, push } = {}) {
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -177,21 +185,33 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         }
     };
     if (isLoading) {
-        return (_jsx(Div, { className: `relative w-full ${heightClass} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
+        return (_jsx(Div, { className: `relative w-full ${heightClass} ${HERO_PLACEHOLDER_BG} animate-pulse`, children: _jsx(Div, { className: `${POSITION_FILL} ${FLEX_CENTER}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
     }
     if (!slides || slides.length === 0) {
-        return (_jsxs(Div, { className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-gradient-to-br from-primary/10 to-secondary/10 ${flex.center} flex-col gap-4`, children: [_jsx(Heading, { level: 2, className: "text-2xl font-bold text-primary", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "text-center max-w-md px-4", children: "Amazing deals are on their way. Stay tuned!" })] }));
+        return (
+        // audit-variant-ok: empty-state hero — min-h responsive + gradient bg + FLEX_CENTER + flex-col
+        _jsxs(Div, { gap: "4", className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-[image:var(--appkit-gradient-section-cool)] ${FLEX_CENTER} flex-col`, children: [_jsx(Heading, { level: 2, className: "text-primary", size: "2xl", weight: "bold", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "max-w-md px-4", align: "center", children: "Amazing deals are on their way. Stay tuned!" })] }));
     }
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
+    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: position.fill, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
+                        return (
+                        // audit-variant-ok: slide container — bg-zinc-900 brand placeholder + snap/flex layout
+                        _jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (
+                                // audit-variant-ok: overlay container — POSITION_FILL + FLEX_CENTER + responsive px-lg/16/32 ladder
+                                _jsxs(Div, { className: `${POSITION_FILL} ${FLEX_CENTER} flex-col text-center md:px-16 lg:px-32`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 !/80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
+                                        // audit-variant-ok: hero title — responsive md:text-6xl lg:text-8xl + drop-shadow-2xl over Heading size="4xl" base
+                                        _jsx(Heading, { color: "inverse", level: 1, className: "stagger-2 font-display md:text-6xl lg:text-8xl ! drop-shadow-2xl mb-2 md:mb-4", size: "4xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 !/90 mb-4 md:mb-8 max-w-2xl mx-auto", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (
+                                // audit-variant-ok: cards grid — POSITION_FILL + base padding=md + responsive gap-2 md:gap-4 + md:p-8
+                                _jsx(Div, { className: `${POSITION_FILL} grid gap-2 md:gap-4 md:p-8`, padding: "md", style: {
                                         gridTemplateRows: "repeat(2, 1fr)",
                                         gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                                         alignContent: "center",
                                         alignItems: "stretch",
                                     }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
-                    }) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
-                        ? THEME_CONSTANTS.carousel.dotActive
-                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                    }) }) }), slides.length > 1 && (_jsx(Row, { gap: "sm", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
+                        ? HERO_CAROUSEL_DOT_ACTIVE
+                        : `${HERO_CAROUSEL_DOT_INACTIVE} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (
+                    // audit-variant-ok: progress-fill bar — absolute positioned bg-black/20 progress animation
+                    _jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 animate-[progress-fill_4s_linear_forwards]", rounded: "full", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Row, { gap: "sm", className: "absolute bottom-4 right-4 z-20", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }

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

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Section, Text } from "../../../ui";
 export function HeroSection({ section, onCtaClick }) {
     const { content } = section;
-    return (_jsxs(Section, { className: "relative flex min-h-[60vh] items-center overflow-hidden bg-neutral-900", style: content?.imageUrl
+    return (
+    // audit-variant-ok: hero section — min-h-[60vh] custom + bg-neutral-900 dark surface (Section.tone lacks hero-dark variant); flex+items-center handled by layout/align
+    _jsxs(Section, { layout: "flex", align: "center", className: "relative min-h-[60vh] overflow-hidden bg-neutral-900", style: content?.imageUrl
             ? {
                 backgroundImage: `url(${content.imageUrl})`,
                 backgroundSize: "cover",
                 backgroundPosition: "center",
             }
-            : undefined, children: [_jsx(Div, { className: "absolute inset-0 bg-black/40" }), _jsxs(Div, { className: "relative mx-auto max-w-7xl px-4 py-16 text-center text-white sm:px-6 lg:px-8", children: [content?.title && (_jsx(Heading, { level: 1, className: "text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl text-lg opacity-90", children: content.subtitle })), content?.ctaLabel && (_jsx(Button, { onClick: onCtaClick, className: "mt-8 inline-block rounded-full bg-white px-8 py-3 text-sm font-semibold text-zinc-900 dark:text-zinc-100 transition hover:bg-neutral-100", children: content.ctaLabel }))] })] }));
+            : undefined, children: [_jsx(Div, { surface: "overlay-xs", className: "absolute inset-0" }), _jsxs(Div, { paddingX: "x-page", className: "relative mx-auto max-w-7xl text-center text-white", padding: "y-4xl", children: [content?.title && (_jsx(Heading, { level: 1, className: "leading-tight", smSize: "5xl", size: "4xl", lgSize: "6xl", weight: "bold", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl opacity-90", size: "lg", children: content.subtitle })), content?.ctaLabel && (
+                    // audit-variant-ok: hero CTA Button — bespoke white-on-dark CTA + zinc-900 text + hover-neutral; Button.variant lacks light-tone-on-dark
+                    _jsx(Button, { rounded: "full", onClick: onCtaClick, paddingX: "xl", paddingY: "md", textSize: "sm", weight: "semibold", className: "mt-8 inline-block bg-white text-zinc-900 dark:text-zinc-100 transition hover:bg-neutral-100 dark:bg-neutral-800", children: content.ctaLabel }))] })] }));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { FLEX_BETWEEN } from "../../../_internal/shared/styles/themed";
+import { SKELETON } from "../../../_internal/shared/styles/skeleton";
 import { Div, Grid, Row, Section, Stack } from "../../../ui";
 const __P = {
     p8: "p-8",
@@ -9,11 +10,12 @@ const __O = {
 };
 /** Full-page skeleton shown while homepage data loads. */
 export function HomepageSkeleton() {
-    const { skeleton, flex, themed } = THEME_CONSTANTS;
+    const flex = { between: FLEX_BETWEEN };
+    const skeleton = SKELETON;
     // Hardcoded clamp values (extended THEME_CONSTANTS keys not in @mohasinac/tokens)
     const heroSkeletonH = "h-[clamp(420px,72vh,680px)]";
     const trustCardH = "h-[clamp(120px,18vh,170px)]";
     const categoryTileH = "h-[clamp(112px,16vh,160px)]";
     const newsletterH = "h-[clamp(220px,28vh,320px)]";
-    return (_jsxs(Div, { className: `w-full ${__O.hidden}`, children: [_jsx(Div, { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `${__P.p8} ${themed.bgSecondary}`, children: [_jsx(Div, { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-52` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `${__P.p8} ${themed.bgSecondary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-56` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: _jsx(Div, { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
+    return (_jsxs(Div, { className: `w-full ${__O.hidden}`, children: [_jsx(Div, { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `${__P.p8}`, surface: "muted", children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Stack, { className: `${skeleton.card} ${trustCardH}`, align: "center", gap: "3", padding: "lg" }, i))) }) }), _jsxs(Section, { className: `${__P.p8}`, surface: "subtle", children: [_jsx(Div, { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `${__P.p8}`, surface: "muted", children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-52` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `${__P.p8}`, surface: "subtle", children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-56` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `${__P.p8}`, surface: "muted", children: _jsx(Div, { className: `${skeleton.card} max-w-2xl mx-auto ${newsletterH}`, rounded: "2xl" }) })] }));
 }

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

@@ -4,7 +4,7 @@ export interface HowItWorksInfoStep {
     icon: string;
     title: string;
     text: string;
-    /** Optional accent colour class for the step number badge, e.g. "bg-emerald-100 …" */
+    /** Optional accent colour class for the step number badge, e.g. "bg-success-surface …" */
     accentClass?: string;
     /** Optional text colour class for the number */
     textClass?: string;
@@ -17,7 +17,7 @@ export interface HowItWorksInfoViewProps {
     /** Page hero heading */
     title: string;
     subtitle?: string;
-    /** Tailwind gradient class for the hero header, e.g. "bg-gradient-to-r from-cobalt-600 to-violet-700" */
+    /** Extra className for the hero <Section>. The themed brand-banner gradient is applied automatically via tone="accent-banner". */
     heroClass?: string;
     /** Step-by-step section heading */
     stepsTitle?: string;

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Grid, Heading, Section, Span, Text } from "../../../ui";
+import { THEMED_BG_SECONDARY, THEMED_BORDER } from "../../../_internal/shared/styles/themed";
+import { SPACING_STACK } from "../../../_internal/shared/styles/grid";
+import { Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui";
 // --- View ---------------------------------------------------------------------
-export function HowItWorksInfoView({ title, subtitle, heroClass = "bg-gradient-to-br from-cobalt-700 via-cobalt-600 to-violet-700", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400", className = "", }) {
-    const { themed, flex, spacing } = THEME_CONSTANTS;
-    return (_jsxs(Div, { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs(Div, { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx(Div, { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx(Div, { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, children: _jsx(Span, { className: textClass, children: number }) }), _jsxs(Div, { children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
+export function HowItWorksInfoView({ title, subtitle, heroClass = "", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-info-surface dark:bg-info-surface text-info dark:text-info", className = "", }) {
+    const themed = { bgSecondary: THEMED_BG_SECONDARY, border: THEMED_BORDER };
+    const spacing = { stack: SPACING_STACK };
+    return (_jsxs(Div, { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { color: "inverse", tone: "accent-banner", className: `${heroClass} md:py-16 lg:py-20`, padding: "y-2-5xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto", padding: "content-banner", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx(Div, { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { layout: "flex", gap: "md", align: "start", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsx(Row, { textWeight: "bold", align: "center", justify: "center", textSize: "sm", className: `shrink-0 w-10 h-10 ${stepAccent ?? accentClass}`, rounded: "xl", children: _jsx(Span, { className: textClass, children: number }) }), _jsxs(Div, { children: [_jsxs(Heading, { level: 3, className: "mb-1", weight: "semibold", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, children: [_jsx(Heading, { level: 3, className: "mb-2", weight: "semibold", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
 }