@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
+import { Card, Div, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 const __P = {
     p8: "p-8",
 };
-export function AboutView({ labels = {}, howItems = [], valueItems = [], milestones = [], heroBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600", ctaBannerClass = "bg-gradient-to-br from-violet-600 to-indigo-600", renderCtaButtons, }) {
-    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-16 md:py-20 lg:py-24`, 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: "text-4xl md:text-5xl font-bold mb-6 text-white", children: labels.title }), _jsx(Text, { variant: "none", className: "text-xl text-white/80 max-w-2xl mx-auto", children: labels.subtitle })] }) }), _jsxs(Div, { className: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-20 space-y-16 md:space-y-20", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-6 md:gap-8", children: howItems.map(({ title, text, icon, color }) => (_jsxs("div", { className: `bg-gradient-to-br ${color ?? "from-primary/5 to-primary/5"} rounded-2xl p-6 space-y-3`, children: [_jsx(Div, { className: "text-4xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-12", children: labels.valuesTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-5 md:gap-6", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700", children: [_jsx(Div, { className: "text-3xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-center mb-10", children: labels.milestonesTitle }), _jsx(Div, { className: "relative border-l-2 border-primary/30 pl-8 space-y-8 max-w-2xl mx-auto", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 rounded-full bg-primary border-2 border-white dark:border-slate-900" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary uppercase tracking-wide", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { className: `text-center ${ctaBannerClass} rounded-2xl ${__P.p8} md:p-12 text-white`, children: [_jsx(Heading, { level: 2, variant: "none", className: "text-3xl font-bold mb-8 text-white", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { size: "sm", className: "text-white/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
+export function AboutView({ labels = {}, howItems = [], valueItems = [], milestones = [], ctaBannerClass = "", renderCtaButtons, }) {
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", className: "md:py-20 lg:py-24", padding: "y-4xl", 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-6", mdSize: "5xl", size: "4xl", weight: "bold", children: labels.title }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", size: "xl", children: labels.subtitle })] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-5xl mx-auto md:py-20 space-y-16 md:space-y-20", padding: "y-4xl", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-6 md:gap-8", children: howItems.map(({ title, text, icon, tone }) => (_jsxs(Card, { variant: `gradient-${tone ?? "indigo"}`, padding: "md", spacing: "sm", children: [_jsx(Div, { className: "text-4xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.valuesTitle }), _jsx(Div, { className: "grid md:grid-cols-3 gap-5 md:gap-6", children: valueItems.map(({ title, text, icon }) => (_jsxs("div", { className: "bg-white dark:bg-slate-800 rounded-xl p-6 space-y-3 border border-neutral-200 dark:border-slate-700", children: [_jsx(Div, { className: "text-3xl", children: icon }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: labels.milestonesTitle }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 pl-8 max-w-2xl mx-auto", gap: "xl", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 bg-primary border-2 border-white", rounded: "full" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] }), _jsxs(Section, { color: "inverse", tone: "accent-banner", className: `text-center ${ctaBannerClass} ${__P.p8} md:p-12`, rounded: "2xl", children: [_jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "mb-8", size: "3xl", weight: "bold", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { color: "inverse", size: "sm", className: "/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
 }

package/dist/features/about/components/FAQPageView.d.ts

@@ -1,6 +1,5 @@
 export interface FAQPageViewProps {
     /** If provided, filter to this category slug */
     category?: string;
-    heroBannerClass?: string;
 }
-export declare function FAQPageView({ category, heroBannerClass, }?: FAQPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function FAQPageView({ category, }?: FAQPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Stack, RichTextRenderer } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { FLEX_ROW } from "../../../_internal/shared/styles/themed";
+import { Aside, Container, Details, Div, Heading, Nav, RichTextRenderer, Row, Section, Span, Stack, Summary, Text } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { HelpCircle, ChevronRight } 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";
-export async function FAQPageView({ category, heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
-    const { themed, flex, page } = THEME_CONSTANTS;
+export async function FAQPageView({ category, } = {}) {
+    const page = { container: PAGE_CONTAINER };
+    const flex = { row: FLEX_ROW };
     const { getTranslations, getMessages } = await import("next-intl/server");
     const t = await getTranslations("faqs");
     const messages = await getMessages();
@@ -19,9 +20,7 @@ export async function FAQPageView({ category, heroBannerClass = DEFAULT_HERO_CLA
         ? allItems.filter((item) => item.category === category)
         : allItems;
     const activeCategory = categories.find((c) => c.slug === category);
-    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-3 text-white", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Div, { className: `${page.container.md} py-10 md:py-12 lg:py-16`, children: _jsxs(Div, { className: "flex flex-col md:flex-row gap-8", children: [categories.length > 0 && (_jsxs("aside", { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 mb-3", children: t("categoriesLabel") }), _jsxs("nav", { className: "space-y-1", children: [_jsxs(TextLink, { href: String(ROUTES.PUBLIC.FAQS), className: `flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${!category
-                                                ? "bg-primary/10 text-primary font-semibold"
-                                                : "hover:bg-neutral-100 dark:hover:bg-neutral-800"}`, children: [_jsxs("span", { className: `${flex.row} gap-2`, children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), className: `flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${category === cat.slug
-                                                ? "bg-primary/10 text-primary font-semibold"
-                                                : "hover:bg-neutral-100 dark:hover:bg-neutral-800"}`, children: [_jsxs("span", { className: `${flex.row} gap-2`, children: [_jsx("span", { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center py-16 rounded-2xl border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-zinc-600" }), _jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", className: "space-y-3", children: visibleItems.map((item, i) => (_jsxs("details", { className: `group rounded-xl border ${themed.border} ${themed.bgPrimary} overflow-hidden`, children: [_jsxs("summary", { className: `flex items-center justify-between px-5 py-4 cursor-pointer list-none select-none font-medium text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors`, children: [_jsx("span", { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx(Div, { className: "px-5 pb-5 pt-1", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "mb-2 text-base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-4", children: t("stillNeedHelpText") }), _jsxs(Div, { className: `${flex.center} gap-4 flex-wrap`, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Container, { size: "md", className: "text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Container, { size: "md", padding: "content-banner", children: _jsxs(Stack, { direction: "md-row", gap: "xl", children: [categories.length > 0 && (_jsxs(Aside, { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "uppercase tracking-wide mb-3", color: "muted", size: "sm", weight: "semibold", children: t("categoriesLabel") }), _jsxs(Nav, { "aria-label": "FAQ categories", spacing: "xs", children: [_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQS), className: `flex items-center justify-between px-3 py-2 transition-colors ${!category ? "bg-primary/10 text-primary font-semibold" : "hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row} gap-2`, children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (
+                                        // audit-variant-ok: nav item — conditional active (primary-tinted) vs hover bg; TextLink lacks active-state variant
+                                        _jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), className: `flex items-center justify-between px-3 py-2 transition-colors ${category === cat.slug ? "bg-primary/10 text-primary font-semibold" : "hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-800"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row} gap-2`, children: [_jsx(Span, { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleItems.length === 0 ? (_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "y-4xl", children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-zinc-600 dark:text-zinc-400" }), _jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("emptyText") })] })) : (_jsx(Stack, { gap: "sm", children: visibleItems.map((item, i) => (_jsxs(Details, { tone: "card", className: "group overflow-hidden", children: [_jsxs(Summary, { className: `flex items-center justify-between px-5 py-4 cursor-pointer list-none select-none font-medium text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors`, children: [_jsx(Span, { children: item.question }), _jsx(ChevronRight, { className: "w-4 h-4 flex-shrink-0 ml-3 transition-transform group-open:rotate-90" })] }), _jsx(Div, { className: "pb-5 pt-1", padding: "x-md", children: _jsx(RichTextRenderer, { html: item.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert" }) })] }, i))) })), _jsxs(Section, { className: `mt-10 text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "mb-4", size: "sm", children: t("stillNeedHelpText") }), _jsxs(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));
 }

package/dist/features/about/components/FeesView.d.ts

@@ -1,4 +1,3 @@
 export interface FeesViewProps {
-    heroBannerClass?: string;
 }
-export declare function FeesView({ heroBannerClass, }?: FeesViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function FeesView({}?: FeesViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Caption, Table, Thead, Tbody, Tr, Th, Td } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY } from "../../../_internal/shared/styles/themed";
+import { Caption, Div, Heading, Row, Section, Stack, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../ui";
 const __P = {
     p5: "p-5",
 };
 const __O = {
     xAuto: "overflow-x-auto",
 };
-const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-violet-700 to-indigo-700 dark:from-violet-800 dark:to-indigo-800";
 const CLS_RATE_CELL = "py-3 px-4 font-semibold text-violet-700 dark:text-violet-400";
 const CLS_HIGHLIGHT = "font-bold text-green-700 dark:text-green-400";
-export async function FeesView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
-    const { themed, page } = THEME_CONSTANTS;
+export async function FeesView({} = {}) {
+    const themed = { bgPrimary: THEMED_BG_PRIMARY, bgSecondary: THEMED_BG_SECONDARY };
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("fees");
     const FEE_ROWS = [
@@ -61,14 +62,16 @@ export async function FeesView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
         { label: t("netPayoutLabel"), example: "= ₹917.40", highlight: true },
     ];
     void ROUTES; // ROUTES imported for future CTA links if needed
-    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 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Div, { className: `${page.container.sm} py-10 md:py-12 lg:py-16 space-y-12`, children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(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, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.sm} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "section", className: `${page.container.sm}`, padding: "content-banner", children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
 }
 function renderFeeTableSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto} rounded-xl border ${themed.border}`, children: _jsxs(Table, { className: "w-full text-sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colFeeType") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colRate") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold", children: t("colPaidBy") }), _jsx(Th, { className: "py-3 px-4 text-left font-semibold hidden md:table-cell", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 dark:divide-neutral-800", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-neutral-50 dark:hover:bg-neutral-800/50`, children: [_jsx(Td, { className: "py-3 px-4 font-medium", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { className: "py-3 px-4", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "py-3 px-4 text-neutral-500 dark:text-neutral-400 hidden md:table-cell text-xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block text-zinc-500 dark:text-zinc-400", children: t("tableNote") })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto}`, border: "default", rounded: "xl", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colFeeType") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colRate") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colPaidBy") }), _jsx(Th, { className: "text-left hidden md:table-cell", padding: "md", weight: "semibold", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 dark:divide-neutral-800", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-neutral-50 dark:hover:bg-neutral-800/50`, children: [_jsx(Td, { weight: "medium", padding: "md", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { padding: "md", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "text-neutral-500 dark:text-neutral-400 hidden md:table-cell", padding: "md", size: "xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block", color: "muted", children: t("tableNote") })] }));
 }
 function renderPayoutExampleSection(t, themed, rows) {
-    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs(Div, { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} ${__P.p5} max-w-sm`, children: [_jsx(Heading, { level: 3, className: "text-base mb-4", children: t("payoutExampleProduct") }), _jsx(Div, { className: "space-y-2", children: rows.map((row, i) => (_jsxs(Div, { className: `flex justify-between text-sm ${row.highlight ? "border-t border-neutral-200 dark:border-neutral-700 pt-2 mt-2 font-bold" : ""}`, children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-neutral-600 dark:text-neutral-400", children: row.label }), _jsx(Text, { className: row.highlight ? CLS_HIGHLIGHT : "", children: row.example })] }, i))) })] })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("payoutExampleTitle") }), _jsx(Text, { variant: "secondary", className: "mb-6", children: t("payoutExampleSubtitle") }), _jsxs(Div, { className: `${__P.p5} max-w-sm`, border: "default", surface: "muted", rounded: "xl", children: [_jsx(Heading, { level: 3, className: "mb-4", size: "base", children: t("payoutExampleProduct") }), _jsx(Stack, { gap: "sm", children: rows.map((row, i) => (
+                        // audit-variant-ok: payout row — conditional border-top + pt-2/mt-2 separator for highlighted (final) row
+                        _jsxs(Row, { textWeight: "bold", textSize: "sm", className: `${row.highlight ? "border-t border-neutral-200 dark:border-neutral-700 pt-2 mt-2 " : ""}`, justify: "between", children: [_jsx(Text, { className: row.highlight ? "font-bold" : "text-neutral-600 dark:text-neutral-400", children: row.label }), _jsx(Text, { className: row.highlight ? CLS_HIGHLIGHT : "", children: row.example })] }, i))) })] })] }));
 }
 function renderDisclaimerSection(t, themed) {
-    return (_jsxs(Section, { className: `rounded-xl border ${themed.border} ${__P.p5} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 3, className: "text-base mb-2", children: t("disclaimerTitle") }), _jsx(Caption, { className: "leading-relaxed", children: t("disclaimerText") })] }));
+    return (_jsxs(Section, { className: `${__P.p5}`, border: "default", surface: "subtle", rounded: "xl", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("disclaimerTitle") }), _jsx(Caption, { className: "leading-relaxed", children: t("disclaimerText") })] }));
 }

package/dist/features/about/components/HelpPageView.d.ts

@@ -1,4 +1,3 @@
 export interface HelpPageViewProps {
-    heroBannerClass?: string;
 }
-export declare function HelpPageView({ heroBannerClass, }?: HelpPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HelpPageView({}?: HelpPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Stack, Alert } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { FLEX_ROW } from "../../../_internal/shared/styles/themed";
+import { Alert, Div, Heading, Row, Section, Stack, Text } 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;
+export async function HelpPageView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
+    const flex = { row: FLEX_ROW };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("helpPage");
     const TOPICS = [
@@ -63,17 +64,19 @@ 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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderTopicsGrid(t, flex, TOPICS), renderScamAwarenessAlert(t), renderTrackOrderSection(t), renderContactCtaSection(t)] })] }));
 }
 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", 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))) })] }));
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", align: "center", children: t("browseTopics") }), _jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2 lg:grid-cols-3", children: topics.map(({ icon: Icon, title, desc, href, color, iconColor }) => (
+                // audit-variant-ok: topic card TextLink — border + p-5 + hover-shadow-md transition + dynamic color class
+                _jsxs(TextLink, { rounded: "xl", href: href, className: `group border p-5 transition-shadow hover:shadow-md ${color} no-underline`, children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsxs(Div, { layout: "flex", justify: "between", align: "start", className: flex.row, children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", 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") })] }));
+    return (_jsxs(Alert, { variant: "warning", title: t("scamAwarenessTitle"), children: [t("scamAwarenessText"), " ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), className: "underline", weight: "semibold", children: t("scamAwarenessCta") })] }));
 }
-function renderTrackOrderSection(t, themed) {
-    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 renderTrackOrderSection(t) {
+    return (_jsxs(Section, { layout: "flex-sm-row", align: "center", gap: "md", className: __P.p6, border: "default", surface: "subtle", rounded: "2xl", children: [_jsxs(Div, { className: "flex-1", children: [_jsx(Heading, { level: 3, className: "mb-1", size: "base", children: t("trackOrderTitle") }), _jsx(Text, { variant: "secondary", size: "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.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") })] })] }));
+function renderContactCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { justify: "center", gap: "lg", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowAuctionsWorkViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowAuctionsWorkView({ heroBannerClass, }?: HowAuctionsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowAuctionsWorkView({}?: HowAuctionsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } 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;
+export async function HowAuctionsWorkView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("howAuctionsWork");
     const STEPS = [
@@ -87,14 +86,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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderAuctionStepsSection(t, 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(INFO_CARDS), renderAuctionCtaSection(t)] })] }));
 }
-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.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 renderAuctionStepsSection(t, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", textSize: "xl", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));
 }
-function renderAuctionInfoCardsSection(flex, cards) {
-    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 renderAuctionInfoCardsSection(cards) {
+    return (_jsx(Section, { children: _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) }) }));
 }
-function renderAuctionCtaSection(t, themed, flex) {
-    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") })] })] }));
+function renderAuctionCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { align: "center", justify: "center", gap: "md", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowCheckoutWorksViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowCheckoutWorksView({ heroBannerClass, }?: HowCheckoutWorksViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowCheckoutWorksView({}?: HowCheckoutWorksViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } 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;
+export async function HowCheckoutWorksView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("howCheckoutWorks");
     const STEPS = [
@@ -73,14 +72,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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderCheckoutStepsSection(t, 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, PAYMENT_METHODS), renderCheckoutCtaSection(t)] })] }));
 }
-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.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 renderCheckoutStepsSection(t, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", 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", 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 renderPaymentMethodsSection(t, methods) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", align: "center", children: t("paymentMethodsTitle") }), _jsx(Text, { variant: "secondary", className: "mb-8 max-w-xl mx-auto", align: "center", children: t("paymentMethodsSubtitle") }), _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-3", children: methods.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) })] }));
 }
-function renderCheckoutCtaSection(t, themed, flex) {
-    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") })] })] }));
+function renderCheckoutCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { align: "center", justify: "center", gap: "md", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowOffersWorkViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowOffersWorkView({ heroBannerClass, }?: HowOffersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowOffersWorkView({}?: HowOffersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Li, Span, Text, Section, Stack, Ul, FlowDiagram } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { Div, FlowDiagram, Heading, Li, Row, Section, Span, Stack, Text, Ul } 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;
+export async function HowOffersWorkView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("howOffersWork");
     const STEPS = [
@@ -59,14 +58,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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderOffersStepsSection(t, 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, RULES), renderOffersCtaSection(t)] })] }));
 }
-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.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 renderOffersStepsSection(t, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));
 }
-function renderOffersRulesSection(t, themed, rules) {
-    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 renderOffersRulesSection(t, rules) {
+    return (_jsxs(Section, { className: `${__P.p6}`, border: "default", surface: "subtle", rounded: "2xl", children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("rulesTitle") }), _jsx(Ul, { spacing: "comfortable", children: rules.map((rule) => (_jsxs(Li, { layout: "flex-start", gap: "2", textSize: "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.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") })] })] }));
+function renderOffersCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { align: "center", justify: "center", gap: "md", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowOrdersWorkViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowOrdersWorkView({ heroBannerClass, }?: HowOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowOrdersWorkView({}?: HowOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/about/components/HowOrdersWorkView.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 { Div, Heading, Text, Section, Span, Row, FlowDiagram } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { Div, FlowDiagram, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 import { TextLink } from "../../../ui";
 import { PackageSearch, MapPinned, FileText, XCircle } from "lucide-react";
 const __P = {
@@ -9,9 +9,8 @@ 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 HowOrdersWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
-    const { themed, flex, page } = THEME_CONSTANTS;
+export async function HowOrdersWorkView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("howOrdersWork");
     const ORDER_STATUSES = [
@@ -132,14 +131,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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderOrderStatusesSection(t, 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(INFO_CARDS), renderOrdersCtaSection(t)] })] }));
 }
-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", 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 renderOrderStatusesSection(t, statuses) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx(Stack, { gap: "3", children: statuses.map(({ status, icon, badge, desc }) => (_jsxs(Row, { className: `${__P.p4}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", 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: `${badge}`, rounded: "full", padding: "pill-xs", children: status })] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: desc })] }, status))) })] }));
 }
-function renderOrderInfoCardsSection(flex, cards) {
-    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 renderOrderInfoCardsSection(cards) {
+    return (_jsx(Section, { children: _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) }) }));
 }
-function renderOrdersCtaSection(t, themed, flex) {
-    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") })] })] }));
+function renderOrdersCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { align: "center", justify: "center", gap: "md", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowPayoutsWorkViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowPayoutsWorkView({ heroBannerClass, }?: HowPayoutsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowPayoutsWorkView({}?: HowPayoutsWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, Text, Section, Stack, FlowDiagram } from "../../../ui";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page";
+import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } 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;
+export async function HowPayoutsWorkView({} = {}) {
+    const page = { container: PAGE_CONTAINER };
     const { getTranslations } = await import("next-intl/server");
     const t = await getTranslations("howPayoutsWork");
     const STEPS = [
@@ -87,14 +86,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", 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)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderPayoutsStepsSection(t, 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(INFO_CARDS), renderPayoutsCtaSection(t)] })] }));
 }
-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.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 renderPayoutsStepsSection(t, steps) {
+    return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));
 }
-function renderPayoutsInfoCardsSection(flex, cards) {
-    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 renderPayoutsInfoCardsSection(cards) {
+    return (_jsx(Section, { children: _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) }) }));
 }
-function renderPayoutsCtaSection(t, themed, flex) {
-    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") })] })] }));
+function renderPayoutsCtaSection(t) {
+    return (_jsxs(Section, { className: `${__P.p8} text-center`, border: "default", surface: "subtle", rounded: "2xl", 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(Row, { align: "center", justify: "center", gap: "md", wrap: true, 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.d.ts

@@ -1,4 +1,3 @@
 export interface HowPreOrdersWorkViewProps {
-    heroBannerClass?: string;
 }
-export declare function HowPreOrdersWorkView({ heroBannerClass, }?: HowPreOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function HowPreOrdersWorkView({}?: HowPreOrdersWorkViewProps): Promise<import("react/jsx-runtime").JSX.Element>;