@mohasinac/appkit 2.8.2 → 2.8.4

package/dist/features/about/components/HelpPageView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, Alert } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, Alert } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { BookOpen, MessageCircle, ShoppingBag, Gavel, PackageCheck, UserCheck, Store, ChevronRight, } from "lucide-react";
+const __P = {
+    p6: "p-6",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HelpPageView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -59,17 +63,17 @@ export async function HelpPageView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {
             iconColor: "text-rose-600 dark:text-rose-400",
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "helppageview-div-107", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "helppageview-div-108", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "helppageview-div-109", children: [renderTopicsGrid(t, flex, TOPICS), renderScamAwarenessAlert(t), renderTrackOrderSection(t, themed), renderContactCtaSection(t, themed)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderTopicsGrid(t, flex, TOPICS), renderScamAwarenessAlert(t), renderTrackOrderSection(t, themed), renderContactCtaSection(t, themed)] })] }));
 }
 function renderTopicsGrid(t, flex, topics) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6 text-center", children: t("browseTopics") }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", "data-section": "helppageview-div-110", children: topics.map(({ icon: Icon, title, desc, href, color, iconColor }) => (_jsxs(TextLink, { href: href, className: `group rounded-xl border p-5 transition-shadow hover:shadow-md ${color} no-underline`, children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "helppageview-div-111", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsxs("div", { className: `${flex.row} justify-between items-start`, "data-section": "helppageview-div-112", children: [_jsxs("div", { "data-section": "helppageview-div-113", children: [_jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }), _jsx(ChevronRight, { className: "w-4 h-4 mt-1 flex-shrink-0 opacity-40 group-hover:opacity-80 transition-opacity" })] })] }, href))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6 text-center", children: t("browseTopics") }), _jsx(Div, { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: topics.map(({ icon: Icon, title, desc, href, color, iconColor }) => (_jsxs(TextLink, { href: href, className: `group rounded-xl border p-5 transition-shadow hover:shadow-md ${color} no-underline`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsxs(Div, { className: `${flex.row} justify-between items-start`, children: [_jsxs(Div, { children: [_jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }), _jsx(ChevronRight, { className: "w-4 h-4 mt-1 flex-shrink-0 opacity-40 group-hover:opacity-80 transition-opacity" })] })] }, href))) })] }));
 }
 function renderScamAwarenessAlert(t) {
     return (_jsxs(Alert, { variant: "warning", title: t("scamAwarenessTitle"), children: [t("scamAwarenessText"), " ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), className: "font-semibold underline", children: t("scamAwarenessCta") })] }));
 }
 function renderTrackOrderSection(t, themed) {
-    return (_jsxs(Section, { className: `rounded-2xl p-6 border ${themed.border} ${themed.bgSecondary} flex flex-col sm:flex-row items-center gap-4`, children: [_jsxs("div", { className: "flex-1", "data-section": "helppageview-div-114", children: [_jsx(Heading, { level: 3, className: "mb-1 text-base", children: t("trackOrderTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("trackOrderText") })] }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.TRACK_ORDER), className: "flex-shrink-0", children: t("trackOrderCta") })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p6} border ${themed.border} ${themed.bgSecondary} flex flex-col sm:flex-row items-center gap-4`, children: [_jsxs(Div, { className: "flex-1", children: [_jsx(Heading, { level: 3, className: "mb-1 text-base", children: t("trackOrderTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("trackOrderText") })] }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.TRACK_ORDER), className: "flex-shrink-0", children: t("trackOrderCta") })] }));
 }
 function renderContactCtaSection(t, themed) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(MessageCircle, { className: "w-10 h-10 mx-auto mb-3 text-primary/70" }), _jsx(Heading, { level: 2, className: "mb-3", children: t("contactTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("contactText") }), _jsxs(Stack, { gap: "sm", className: "flex-row flex-wrap justify-center gap-4", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), children: t("contactCta") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FAQS), variant: "muted", children: t("faqCta") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(MessageCircle, { className: "w-10 h-10 mx-auto mb-3 text-primary/70" }), _jsx(Heading, { level: 2, className: "mb-3", children: t("contactTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("contactText") }), _jsxs(Stack, { gap: "sm", className: "flex-row flex-wrap justify-center gap-4", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), children: t("contactCta") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FAQS), variant: "muted", children: t("faqCta") })] })] }));
 }

package/dist/features/about/components/HowAuctionsWorkView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { Gavel, Clock, Trophy, CreditCard } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowAuctionsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -83,14 +87,14 @@ export async function HowAuctionsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howauctionsworkview-div-115", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howauctionsworkview-div-116", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howauctionsworkview-div-117", children: [renderAuctionStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🔨 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderAuctionInfoCardsSection(flex, INFO_CARDS), renderAuctionCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderAuctionStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🔨 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderAuctionInfoCardsSection(flex, INFO_CARDS), renderAuctionCtaSection(t, themed, flex)] })] }));
 }
 function renderAuctionStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howauctionsworkview-div-118", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howauctionsworkview-div-119", children: icon }), _jsxs("div", { "data-section": "howauctionsworkview-div-120", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderAuctionInfoCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howauctionsworkview-div-121", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howauctionsworkview-div-122", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howauctionsworkview-div-123", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderAuctionCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howauctionsworkview-div-124", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.AUCTIONS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.AUCTIONS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowCheckoutWorksView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { Smartphone, Banknote } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowCheckoutWorksView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -69,14 +73,14 @@ export async function HowCheckoutWorksView({ heroBannerClass = DEFAULT_HERO_CLAS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howcheckoutworksview-div-125", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howcheckoutworksview-div-126", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howcheckoutworksview-div-127", children: [renderCheckoutStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🗺️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPaymentMethodsSection(t, flex, PAYMENT_METHODS), renderCheckoutCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderCheckoutStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🗺️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPaymentMethodsSection(t, flex, PAYMENT_METHODS), renderCheckoutCtaSection(t, themed, flex)] })] }));
 }
 function renderCheckoutStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howcheckoutworksview-div-128", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howcheckoutworksview-div-129", children: icon }), _jsxs("div", { "data-section": "howcheckoutworksview-div-130", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center}`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderPaymentMethodsSection(t, flex, methods) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3 text-center", children: t("paymentMethodsTitle") }), _jsx(Text, { variant: "secondary", className: "text-center mb-8 max-w-xl mx-auto", children: t("paymentMethodsSubtitle") }), _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howcheckoutworksview-div-131", children: methods.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howcheckoutworksview-div-132", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howcheckoutworksview-div-133", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3 text-center", children: t("paymentMethodsTitle") }), _jsx(Text, { variant: "secondary", className: "text-center mb-8 max-w-xl mx-auto", children: t("paymentMethodsSubtitle") }), _jsx(Div, { className: "grid gap-5 md:grid-cols-3", children: methods.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) })] }));
 }
 function renderCheckoutCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howcheckoutworksview-div-134", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowOffersWorkView.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Li, Span, Text, Section, Stack, Ul, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
+const __P = {
+    p5: "p-5",
+    p6: "p-6",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowOffersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -54,14 +59,14 @@ export async function HowOffersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howoffersworkview-div-135", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howoffersworkview-div-136", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howoffersworkview-div-137", children: [renderOffersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🤝 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOffersRulesSection(t, themed, RULES), renderOffersCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderOffersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🤝 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOffersRulesSection(t, themed, RULES), renderOffersCtaSection(t, themed, flex)] })] }));
 }
 function renderOffersStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howoffersworkview-div-138", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howoffersworkview-div-139", children: icon }), _jsxs("div", { "data-section": "howoffersworkview-div-140", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center}`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderOffersRulesSection(t, themed, rules) {
-    return (_jsxs(Section, { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx("ul", { className: "space-y-2", children: rules.map((rule) => (_jsxs("li", { className: "flex items-start gap-2 text-sm", children: [_jsx("span", { className: "text-primary mt-0.5", children: "\u2022" }), _jsx(Text, { variant: "secondary", children: rule })] }, rule))) })] }));
+    return (_jsxs(Section, { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} ${__P.p6}`, children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx(Ul, { className: "space-y-2", children: rules.map((rule) => (_jsxs(Li, { className: "flex items-start gap-2 text-sm", children: [_jsx(Span, { color: "primary", className: "mt-0.5", children: "\u2022" }), _jsx(Text, { variant: "secondary", children: rule })] }, rule))) })] }));
 }
 function renderOffersCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howoffersworkview-div-141", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowOrdersWorkView.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Span, Row, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Span, Row, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { PackageSearch, MapPinned, FileText, XCircle } from "lucide-react";
+const __P = {
+    p4: "p-4",
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -127,14 +132,14 @@ export async function HowOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep6Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howordersworkview-div-142", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howordersworkview-div-143", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howordersworkview-div-144", children: [renderOrderStatusesSection(t, themed, ORDER_STATUSES), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOrderInfoCardsSection(flex, INFO_CARDS), renderOrdersCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderOrderStatusesSection(t, themed, ORDER_STATUSES), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOrderInfoCardsSection(flex, INFO_CARDS), renderOrdersCtaSection(t, themed, flex)] })] }));
 }
 function renderOrderStatusesSection(t, themed, statuses) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx("div", { className: "space-y-3", "data-section": "howordersworkview-div-145", children: statuses.map(({ status, icon, badge, desc }) => (_jsxs("div", { className: `flex items-start gap-4 p-4 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howordersworkview-div-146", children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-0.5", children: [_jsx(Span, { className: "text-xl", children: icon }), _jsx(Span, { className: `text-xs font-semibold px-2 py-0.5 rounded-full ${badge}`, children: status })] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }, status))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx(Div, { className: "space-y-3", children: statuses.map(({ status, icon, badge, desc }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p4} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-0.5", children: [_jsx(Span, { size: "xl", children: icon }), _jsx(Span, { size: "xs", weight: "semibold", className: `px-2 py-0.5 rounded-full ${badge}`, children: status })] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: desc })] }, status))) })] }));
 }
 function renderOrderInfoCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howordersworkview-div-147", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howordersworkview-div-148", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howordersworkview-div-149", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderOrdersCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howordersworkview-div-150", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), variant: "muted", children: t("ctaCheckout") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRODUCTS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), variant: "muted", children: t("ctaCheckout") })] })] }));
 }

package/dist/features/about/components/HowPayoutsWorkView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { DollarSign, Calendar, Banknote, ShieldCheck } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowPayoutsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -83,14 +87,14 @@ export async function HowPayoutsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpayoutsworkview-div-151", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpayoutsworkview-div-152", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpayoutsworkview-div-153", children: [renderPayoutsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPayoutsInfoCardsSection(flex, INFO_CARDS), renderPayoutsCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderPayoutsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPayoutsInfoCardsSection(flex, INFO_CARDS), renderPayoutsCtaSection(t, themed, flex)] })] }));
 }
 function renderPayoutsStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpayoutsworkview-div-154", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpayoutsworkview-div-155", children: icon }), _jsxs("div", { "data-section": "howpayoutsworkview-div-156", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center}`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderPayoutsInfoCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpayoutsworkview-div-157", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpayoutsworkview-div-158", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpayoutsworkview-div-159", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderPayoutsCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpayoutsworkview-div-160", children: [_jsx(TextLink, { href: String(ROUTES.STORE.PAYOUT_SETTINGS), children: t("ctaPayoutSettings") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FEES), variant: "muted", children: t("ctaFees") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.STORE.PAYOUT_SETTINGS), children: t("ctaPayoutSettings") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.FEES), variant: "muted", children: t("ctaFees") })] })] }));
 }

package/dist/features/about/components/HowPreOrdersWorkView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { Package, Clock, Banknote, AlertCircle } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowPreOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -83,14 +87,14 @@ export async function HowPreOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLAS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howpreordersworkview-div-161", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howpreordersworkview-div-162", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howpreordersworkview-div-163", children: [renderPreOrdersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPreOrdersInfoCardsSection(flex, INFO_CARDS), renderPreOrdersCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderPreOrdersStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPreOrdersInfoCardsSection(flex, INFO_CARDS), renderPreOrdersCtaSection(t, themed, flex)] })] }));
 }
 function renderPreOrdersStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howpreordersworkview-div-164", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howpreordersworkview-div-165", children: icon }), _jsxs("div", { "data-section": "howpreordersworkview-div-166", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center}`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderPreOrdersInfoCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "howpreordersworkview-div-167", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howpreordersworkview-div-168", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howpreordersworkview-div-169", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderPreOrdersCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howpreordersworkview-div-170", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRE_ORDERS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRE_ORDERS), children: t("ctaBrowse") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaOrders") })] })] }));
 }

package/dist/features/about/components/HowReviewsWorkView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { ShieldCheck, ThumbsUp, Pencil } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function HowReviewsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -68,14 +72,14 @@ export async function HowReviewsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStep4Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "howreviewsworkview-div-171", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "howreviewsworkview-div-172", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "howreviewsworkview-div-173", children: [renderReviewsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderReviewsInfoCardsSection(flex, INFO_CARDS), renderReviewsCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [renderReviewsStepsSection(t, themed, flex, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderReviewsInfoCardsSection(flex, INFO_CARDS), renderReviewsCtaSection(t, themed, flex)] })] }));
 }
 function renderReviewsStepsSection(t, themed, flex, steps) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs("div", { className: `flex items-start gap-4 p-5 rounded-xl border ${themed.border} ${themed.bgPrimary}`, "data-section": "howreviewsworkview-div-174", children: [_jsx("div", { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center} text-xl`, "data-section": "howreviewsworkview-div-175", children: icon }), _jsxs("div", { "data-section": "howreviewsworkview-div-176", children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8 text-center", children: t("stepsTitle") }), _jsx(Stack, { gap: "md", className: "gap-5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Div, { className: `flex items-start gap-4 ${__P.p5} rounded-xl border ${themed.border} ${themed.bgPrimary}`, children: [_jsx(Div, { className: `flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 dark:bg-primary/15 ${flex.center}`, children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "font-semibold mb-0.5", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] })] }, number))) })] }));
 }
 function renderReviewsInfoCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howreviewsworkview-div-177", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "howreviewsworkview-div-178", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "howreviewsworkview-div-179", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-3", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderReviewsCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "howreviewsworkview-div-180", children: [_jsx(TextLink, { href: String(ROUTES.USER.ORDERS), children: t("ctaOrders") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaHowOrders") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.USER.ORDERS), children: t("ctaOrders") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HOW_ORDERS_WORK), variant: "muted", children: t("ctaHowOrders") })] })] }));
 }

package/dist/features/about/components/PolicyPageView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack } from "../../../ui";
+import { Div, Heading, Text, Section, Stack } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { siteSettingsRepository } from "../../../repositories";
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
@@ -43,7 +43,7 @@ export async function PolicyPageView({ policy, heroBannerClass = DEFAULT_HERO_CL
         const policyPath = { privacy: "/privacy", terms: "/terms", cookies: "/cookies", refund: "/refund-policy" }[policy];
         return !l.href.endsWith(policyPath ?? "");
     });
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "policypageview-div-181", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.sm}`, "data-section": "policypageview-div-182", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 text-sm", children: t("lastUpdated") })] }) }), _jsxs("div", { className: `${page.container.sm} py-10 md:py-12 lg:py-16`, "data-section": "policypageview-div-183", children: [adminHtml ? (
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 text-sm", children: t("lastUpdated") })] }) }), _jsxs(Div, { className: `${page.container.sm} py-10 md:py-12 lg:py-16`, children: [adminHtml ? (
                     /* Admin-set HTML takes priority */
-                    _jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: adminHtml } })) : (_jsxs(_Fragment, { children: [t("intro") && (_jsx(Text, { variant: "secondary", className: "mb-10 text-base leading-relaxed", children: t("intro") })), _jsx(Stack, { gap: "xl", className: "space-y-10", children: sections.map((section, i) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: section.heading }), _jsx(Text, { variant: "secondary", className: "leading-relaxed whitespace-pre-line", children: section.body })] }, i))) })] })), relatedLinks.length > 0 && (_jsxs("div", { className: `mt-14 pt-8 border-t ${themed.border}`, "data-section": "policypageview-div-184", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold mb-3 uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: t("relatedTitle") }), _jsx("div", { className: "flex flex-wrap gap-4", "data-section": "policypageview-div-185", children: relatedLinks.map((l) => (_jsx(TextLink, { href: l.href, variant: "muted", className: "text-sm", children: l.label }, l.href))) })] }))] })] }));
+                    _jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: adminHtml } })) : (_jsxs(_Fragment, { children: [t("intro") && (_jsx(Text, { variant: "secondary", className: "mb-10 text-base leading-relaxed", children: t("intro") })), _jsx(Stack, { gap: "xl", className: "space-y-10", children: sections.map((section, i) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: section.heading }), _jsx(Text, { variant: "secondary", className: "leading-relaxed whitespace-pre-line", children: section.body })] }, i))) })] })), relatedLinks.length > 0 && (_jsxs(Div, { className: `mt-14 pt-8 border-t ${themed.border}`, children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold mb-3 uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: t("relatedTitle") }), _jsx(Div, { className: "flex flex-wrap gap-4", children: relatedLinks.map((l) => (_jsx(TextLink, { href: l.href, variant: "muted", className: "text-sm", children: l.label }, l.href))) })] }))] })] }));
 }

package/dist/features/about/components/PublicProfileView.js

@@ -9,6 +9,13 @@ import { ProductCard } from "../../products/components/ProductGrid";
 import { ReviewCard } from "../../reviews/components/ReviewsList";
 import { isAuctionListing, isPreOrderListing } from "../../products/utils/listing-type";
 import { User, Star, ShoppingBag, Package, Trophy, Globe, MapPin, ExternalLink } from "lucide-react";
+const __P = {
+    p4: "p-4",
+    p6: "p-6",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-900 dark:to-black";
 function toProductItem(p) {
     return {
@@ -100,21 +107,21 @@ function buildProfileStatItems(t, ctx) {
 }
 function renderProfileHero(t, ctx) {
     const { displayName, photoURL, memberSince, isSeller, storeSlug, flex, page, heroBannerClass } = ctx;
-    return (_jsx(Section, { className: `${heroBannerClass} text-white py-10 md:py-14`, children: _jsx(Div, { className: `${page.container.md}`, children: _jsxs(Row, { gap: "md", align: "end", wrap: true, className: "flex-col sm:flex-row items-center sm:items-end", children: [_jsx(Div, { className: `w-20 h-20 rounded-full bg-white/20 ${flex.center} flex-shrink-0 overflow-hidden`, children: photoURL ? _jsx("img", { src: photoURL, alt: displayName, className: "w-full h-full object-cover" }) : _jsx(User, { className: "w-10 h-10 text-white/60" }) }), _jsxs(Stack, { gap: "xs", className: "text-center sm:text-left", children: [_jsxs(Row, { gap: "xs", wrap: true, className: "justify-center sm:justify-start", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-white mb-0", children: displayName }), isSeller && _jsx(Span, { className: "rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-semibold text-white/90", children: t("roleSeller") })] }), _jsx(Text, { variant: "none", className: "text-white/60 text-sm", children: memberSince })] }), isSeller && storeSlug && (_jsx(Div, { className: "sm:ml-auto", children: _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "inline-flex items-center gap-1.5 rounded-full border border-white/30 bg-white/10 hover:bg-white/20 px-4 py-2 text-sm font-medium text-white transition-colors", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), t("visitStore")] }) }))] }) }) }));
+    return (_jsx(Section, { className: `${heroBannerClass} text-white py-10 md:py-14`, children: _jsx(Div, { className: `${page.container.md}`, children: _jsxs(Div, { className: "flex flex-wrap gap-4 flex-col sm:flex-row items-center sm:items-end", children: [_jsx(Div, { className: `w-20 h-20 rounded-full bg-white/20 ${flex.center} flex-shrink-0 ${__O.hidden}`, children: photoURL ? _jsx("img", { src: photoURL, alt: displayName, className: "w-full h-full object-cover" }) : _jsx(User, { className: "w-10 h-10 text-white/60" }) }), _jsxs(Stack, { gap: "xs", className: "text-center sm:text-left", children: [_jsxs(Div, { className: "flex flex-wrap gap-1 justify-center sm:justify-start", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-white mb-0", children: displayName }), isSeller && _jsx(Span, { size: "xs", weight: "semibold", className: "rounded-full bg-white/20 px-2.5 py-0.5 text-white/90", children: t("roleSeller") })] }), _jsx(Text, { variant: "none", className: "text-white/60 text-sm", children: memberSince })] }), isSeller && storeSlug && (_jsx(Div, { className: "sm:ml-auto", children: _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "inline-flex items-center gap-1.5 rounded-full border border-white/30 bg-white/10 hover:bg-white/20 px-4 py-2 text-sm font-medium text-white transition-colors", children: [_jsx(ExternalLink, { className: "w-3.5 h-3.5" }), t("visitStore")] }) }))] }) }) }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderProfileStatsRow(themed, flex, statItems) {
-    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-4", children: statItems.map(({ icon: Icon, label, value }) => (_jsxs(Div, { rounded: "xl", className: `border ${themed.border} ${themed.bgPrimary} p-4 text-center`, children: [_jsx(Row, { centered: true, className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { className: "text-lg font-bold", children: value }), _jsx(Text, { variant: "secondary", className: "text-xs", children: label })] }, label))) }));
+    return (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-4", children: statItems.map(({ icon: Icon, label, value }) => (_jsxs(Div, { rounded: "xl", className: `border ${themed.border} ${themed.bgPrimary} ${__P.p4} text-center`, children: [_jsx(Row, { centered: true, className: `${flex.center} mb-1`, children: _jsx(Icon, { className: "w-4 h-4 text-neutral-400" }) }), _jsx(Text, { className: "text-lg font-bold", children: value }), _jsx(Text, { variant: "secondary", className: "text-xs", children: label })] }, label))) }));
 }
 function renderProfileBioSection(themed, pub) {
     if (!pub?.bio && !pub?.location && !pub?.website)
         return null;
-    return (_jsx(Section, { children: _jsxs(Stack, { gap: "sm", className: `rounded-2xl border ${themed.border} ${themed.bgPrimary} p-6`, children: [pub.bio && _jsx(Text, { className: "text-sm leading-relaxed text-neutral-700 dark:text-zinc-300", children: pub.bio }), _jsxs(Row, { gap: "md", wrap: true, children: [pub.location && _jsxs(Span, { className: "flex items-center gap-1.5 text-sm text-neutral-500 dark:text-zinc-400", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] }), pub.website && _jsxs("a", { href: pub.website, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-sm text-primary hover:underline", children: [_jsx(Globe, { className: "w-4 h-4" }), pub.website.replace(/^https?:\/\//, "")] })] })] }) }));
+    return (_jsx(Section, { children: _jsxs(Stack, { gap: "sm", className: `rounded-2xl border ${themed.border} ${themed.bgPrimary} ${__P.p6}`, children: [pub.bio && _jsx(Text, { className: "text-sm leading-relaxed text-neutral-700 dark:text-zinc-300", children: pub.bio }), _jsxs(Row, { gap: "md", wrap: true, children: [pub.location && _jsxs(Span, { size: "sm", className: "flex items-center gap-1.5 text-neutral-500 dark:text-zinc-400", children: [_jsx(MapPin, { className: "w-4 h-4" }), pub.location] }), pub.website && _jsxs("a", { href: pub.website, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 text-primary hover:underline", children: [_jsx(Globe, { className: "w-4 h-4" }), _jsx(Span, { size: "sm", children: pub.website.replace(/^https?:\/\//, "") })] })] })] }) }));
 }
 function renderStoreDescriptionSection(themed, isSeller, storeSlug, storeDescription, storeName, t) {
     if (!isSeller || !storeSlug || !storeDescription)
         return null;
-    return (_jsx(Section, { children: _jsxs(Div, { rounded: "2xl", className: `border ${themed.border} ${themed.bgSecondary} p-6`, children: [_jsx(Heading, { level: 3, className: "mb-2", children: storeName }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: storeDescription }), _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [t("visitStore"), " \u2192"] })] }) }));
+    return (_jsx(Section, { children: _jsxs(Div, { rounded: "2xl", className: `border ${themed.border} ${themed.bgSecondary} ${__P.p6}`, children: [_jsx(Heading, { level: 3, className: "mb-2", children: storeName }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: storeDescription }), _jsxs(Link, { href: String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)), className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [t("visitStore"), " \u2192"] })] }) }));
 }
 function renderProfileListingsSection(t, themed, products, storeSlug) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), products.length === 0 ? (_jsxs(Div, { rounded: "2xl", className: `border ${themed.border} ${themed.bgSecondary} p-12 text-center`, children: [_jsx(ShoppingBag, { className: "w-10 h-10 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("noListings") })] })) : (_jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: products.slice(0, 8).map((p) => _jsx(ProductCard, { product: toProductItem(p), href: getProductHref(p) }, p.id)) })), products.length > 8 && storeSlug && (_jsx(Div, { className: "mt-4 text-center", children: _jsx(Link, { href: String(ROUTES.PUBLIC.STORE_PRODUCTS(storeSlug)), className: "text-sm font-medium text-primary hover:underline", children: t("viewAllListings", { count: products.length }) }) }))] }));

package/dist/features/about/components/SecurityPrivacyView.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { Shield, Lock, Search, Globe, Database, KeyRound, FileText, Upload, ShieldCheck, Scale, } from "lucide-react";
+const __P = {
+    p5: "p-5",
+    p8: "p-8",
+};
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 export async function SecurityPrivacyView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, flex, page } = THEME_CONSTANTS;
@@ -118,11 +122,11 @@ export async function SecurityPrivacyView({ heroBannerClass = DEFAULT_HERO_CLASS
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "securityprivacyview-div-198", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.md} text-center`, "data-section": "securityprivacyview-div-199", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, "data-section": "securityprivacyview-div-200", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(flex, SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", className: "text-center text-sm", children: t("lastUpdated") }), renderSecurityCtaSection(t, themed, flex)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16 space-y-14`, children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(flex, SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", className: "text-center text-sm", children: t("lastUpdated") }), renderSecurityCtaSection(t, themed, flex)] })] }));
 }
 function renderSecurityCardsSection(flex, cards) {
-    return (_jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "securityprivacyview-div-201", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs("div", { className: `rounded-xl border p-5 ${color}`, "data-section": "securityprivacyview-div-202", children: [_jsx("div", { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, "data-section": "securityprivacyview-div-203", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
+    return (_jsx(Section, { children: _jsx(Div, { className: "grid gap-5 md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `rounded-xl border ${__P.p5} ${color}`, children: [_jsx(Div, { className: `w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 ${flex.center} mb-3`, children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "font-semibold mb-1", children: title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: text })] }, title))) }) }));
 }
 function renderSecurityCtaSection(t, themed, flex) {
-    return (_jsxs(Section, { className: `rounded-2xl p-8 text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "securityprivacyview-div-204", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRIVACY), children: t("ctaPrivacy") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("ctaContact") })] })] }));
+    return (_jsxs(Section, { className: `rounded-2xl ${__P.p8} text-center ${themed.bgSecondary} border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("ctaTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6 max-w-lg mx-auto", children: t("ctaText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.PRIVACY), children: t("ctaPrivacy") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("ctaContact") })] })] }));
 }

package/dist/features/about/components/ShippingPolicyView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
 import { TextLink } from "../../../ui";
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
+const CLS_FOOTER_LINK = "text-sky-600 dark:text-sky-400 hover:underline";
 export async function ShippingPolicyView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
     const { themed, page } = THEME_CONSTANTS;
     const { getTranslations } = await import("next-intl/server");
@@ -55,5 +56,5 @@ export async function ShippingPolicyView({ heroBannerClass = DEFAULT_HERO_CLASS,
             desc: t("diagramStatus5Desc"),
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "shippingpolicyview-div-205", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.sm}`, "data-section": "shippingpolicyview-div-206", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80", children: t("lastUpdated") })] }) }), _jsxs("div", { className: `${page.container.sm} py-10 md:py-12 lg:py-16`, "data-section": "shippingpolicyview-div-207", children: [_jsx(Text, { size: "lg", variant: "secondary", className: "mb-8", children: t("subtitle") }), _jsx(FlowDiagram, { title: `🚚 ${t("diagramTitle")}`, titleClass: "text-sky-700 dark:text-sky-300", connectorClass: "bg-sky-200 dark:bg-sky-800", steps: DIAGRAM_STEPS, className: "mb-10", note: `📌 ${t("diagramNote")}` }), _jsxs(Stack, { gap: "xl", children: [SECTIONS.map(({ title, text }) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", children: text })] }, title))), _jsxs(Section, { className: `${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-2", children: t("contactTitle") }), _jsx(Text, { variant: "secondary", children: t("contactText") })] })] }), _jsxs("div", { className: `mt-12 pt-8 border-t ${themed.border} flex gap-6 text-sm`, "data-section": "shippingpolicyview-div-208", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.TRACK_ORDER), className: "text-sky-600 dark:text-sky-400 hover:underline", children: t("trackOrder") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: "text-sky-600 dark:text-sky-400 hover:underline", children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), className: "text-sky-600 dark:text-sky-400 hover:underline", children: t("contactUs") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.REFUND_POLICY), className: "text-sky-600 dark:text-sky-400 hover:underline", children: "Refund Policy" })] })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-3 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80", children: t("lastUpdated") })] }) }), _jsxs(Div, { className: `${page.container.sm} py-10 md:py-12 lg:py-16`, children: [_jsx(Text, { size: "lg", variant: "secondary", className: "mb-8", children: t("subtitle") }), _jsx(FlowDiagram, { title: `🚚 ${t("diagramTitle")}`, titleClass: "text-sky-700 dark:text-sky-300", connectorClass: "bg-sky-200 dark:bg-sky-800", steps: DIAGRAM_STEPS, className: "mb-10", note: `📌 ${t("diagramNote")}` }), _jsxs(Stack, { gap: "xl", children: [SECTIONS.map(({ title, text }) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", children: text })] }, title))), _jsxs(Section, { className: `${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx(Heading, { level: 2, className: "mb-2", children: t("contactTitle") }), _jsx(Text, { variant: "secondary", children: t("contactText") })] })] }), _jsxs(Div, { className: `mt-12 pt-8 border-t ${themed.border} flex gap-6 text-sm`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.TRACK_ORDER), className: CLS_FOOTER_LINK, children: t("trackOrder") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: CLS_FOOTER_LINK, children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), className: CLS_FOOTER_LINK, children: t("contactUs") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.REFUND_POLICY), className: CLS_FOOTER_LINK, children: "Refund Policy" })] })] })] }));
 }

package/dist/features/about/components/TrackOrderView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, Text, Caption, Grid, Section } from "../../../ui";
+import { Div, Heading, Text, Caption, Grid, Section } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { ShoppingBag, Truck, MapPin, CheckCircle2 } from "lucide-react";
 const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
@@ -39,5 +39,5 @@ export async function TrackOrderView({ heroBannerClass = DEFAULT_HERO_CLASS, } =
             bg: "bg-emerald-100 dark:bg-emerald-900/40",
         },
     ];
-    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "trackorderview-div-209", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: `${page.container.sm} text-center`, "data-section": "trackorderview-div-210", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80", children: t("subtitle") })] }) }), _jsxs("div", { className: `${page.container.md} py-14 md:py-16 space-y-14 md:space-y-16`, "data-section": "trackorderview-div-211", children: [_jsxs(Section, { className: `${themed.bgSecondary} rounded-2xl border ${themed.border} p-8 text-center`, children: [_jsx("div", { className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 rounded-full ${flex.center} mx-auto mb-4`, "data-section": "trackorderview-div-212", children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3 justify-center mt-6", "data-section": "trackorderview-div-213", children: [_jsx(TextLink, { href: String(ROUTES.AUTH.LOGIN), className: `inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-colors`, children: t("signIn") }), _jsx(TextLink, { href: String(ROUTES.USER.ORDERS), className: `inline-flex items-center gap-2 ${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} font-medium px-6 py-3 rounded-lg hover:opacity-80 transition-opacity`, children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-10", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs("div", { className: `${themed.bgSecondary} rounded-xl border ${themed.border} p-6 relative`, "data-section": "trackorderview-div-214", children: [_jsx(Caption, { className: "absolute top-4 right-4 font-bold", children: String(index + 1).padStart(2, "0") }), _jsx("div", { className: `w-12 h-12 ${bg} rounded-xl ${flex.center} mb-4`, "data-section": "trackorderview-div-215", children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { className: `${themed.bgSecondary} rounded-xl border ${themed.border} p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4`, children: [_jsxs("div", { "data-section": "trackorderview-div-216", children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs("div", { className: "flex gap-3 flex-shrink-0", "data-section": "trackorderview-div-217", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `text-sm ${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), className: "text-sm bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors", children: t("contactSupport") })] })] })] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: `${page.container.sm} text-center`, children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.md} py-14 md:py-16 space-y-14 md:space-y-16`, children: [_jsxs(Section, { className: `${themed.bgSecondary} rounded-2xl border ${themed.border} p-8 text-center`, children: [_jsx(Div, { className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 rounded-full ${flex.center} mx-auto mb-4`, children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs(Div, { className: "flex flex-col sm:flex-row gap-3 justify-center mt-6", children: [_jsx(TextLink, { href: String(ROUTES.AUTH.LOGIN), className: `inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-colors`, children: t("signIn") }), _jsx(TextLink, { href: String(ROUTES.USER.ORDERS), className: `inline-flex items-center gap-2 ${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} font-medium px-6 py-3 rounded-lg hover:opacity-80 transition-opacity`, children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-10", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs("div", { className: `${themed.bgSecondary} rounded-xl border ${themed.border} p-6 relative`, children: [_jsx(Caption, { className: "absolute top-4 right-4 font-bold", children: String(index + 1).padStart(2, "0") }), _jsx(Div, { className: `w-12 h-12 ${bg} rounded-xl ${flex.center} mb-4`, children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { className: `${themed.bgSecondary} rounded-xl border ${themed.border} p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4`, children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs(Div, { className: "flex gap-3 flex-shrink-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `text-sm ${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), className: "text-sm bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors", children: t("contactSupport") })] })] })] })] }));
 }