@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -0,0 +1,72 @@
+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 { TextLink } from "../../../ui";
+import { ShieldCheck, ThumbsUp, Pencil } 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 HowReviewsWorkView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("howReviewsWork");
+    const STEPS = [
+        { number: 1, icon: "📦", title: t("step1Title"), text: t("step1Text") },
+        { number: 2, icon: "⭐", title: t("step2Title"), text: t("step2Text") },
+        { number: 3, icon: "✍️", title: t("step3Title"), text: t("step3Text") },
+        { number: 4, icon: "🌟", title: t("step4Title"), text: t("step4Text") },
+    ];
+    const INFO_CARDS = [
+        {
+            icon: ShieldCheck,
+            title: t("infoCard1Title"),
+            text: t("infoCard1Text"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+        {
+            icon: ThumbsUp,
+            title: t("infoCard2Title"),
+            text: t("infoCard2Text"),
+            color: "bg-sky-50 border-sky-200 dark:bg-sky-900/20 dark:border-sky-700",
+            iconColor: "text-sky-600 dark:text-sky-400",
+        },
+        {
+            icon: Pencil,
+            title: t("infoCard3Title"),
+            text: t("infoCard3Text"),
+            color: "bg-violet-50 border-violet-200 dark:bg-violet-900/20 dark:border-violet-700",
+            iconColor: "text-violet-600 dark:text-violet-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "📦",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("diagramStep1Badge"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "✉️",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("diagramStep2Badge"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "⭐",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("diagramStep3Badge"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "🌟",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStep4Badge"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            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: [_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))) })] }), _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(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-3", "data-section": "howreviewsworkview-div-177", children: INFO_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))) }) }), _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") })] })] })] })] }));
+}

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

@@ -0,0 +1,6 @@
+export interface PolicyPageViewProps {
+    /** Which policy to render */
+    policy: "privacy" | "terms" | "cookies" | "refund";
+    heroBannerClass?: string;
+}
+export declare function PolicyPageView({ policy, heroBannerClass, }: PolicyPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,28 @@
+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 } 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";
+export async function PolicyPageView({ policy, heroBannerClass = DEFAULT_HERO_CLASS, }) {
+    const { themed, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const namespaceMap = {
+        privacy: "privacyPolicy",
+        terms: "termsOfService",
+        cookies: "cookiePolicy",
+        refund: "refundPolicy",
+    };
+    const t = await getTranslations(namespaceMap[policy]);
+    // Each policy namespace must export: title, lastUpdated, intro, sections (JSON array)
+    // sections: [{ heading: string, body: string }]
+    const rawSections = t.raw("sections");
+    const sections = Array.isArray(rawSections) ? rawSections : [];
+    const relatedLinks = [
+        { label: t("relatedPrivacy"), href: String(ROUTES.PUBLIC.PRIVACY) },
+        { label: t("relatedTerms"), href: String(ROUTES.PUBLIC.TERMS) },
+        { label: t("relatedCookies"), href: String(ROUTES.PUBLIC.COOKIE_POLICY) },
+        { label: t("relatedRefund"), href: String(ROUTES.PUBLIC.REFUND_POLICY) },
+    ].filter((l) => !l.href.includes(`/${policy}`));
+    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: [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-neutral-500", 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))) })] }))] })] }));
+}

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

@@ -0,0 +1,5 @@
+export interface PublicProfileViewProps {
+    userId: string;
+    heroBannerClass?: string;
+}
+export declare function PublicProfileView({ userId, heroBannerClass, }: PublicProfileViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ROUTES } from "../../../constants";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, Text, Section } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { User, Star, ShoppingBag, MessageCircle } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-neutral-800 to-neutral-900 dark:from-neutral-900 dark:to-black";
+export async function PublicProfileView({ userId, heroBannerClass = DEFAULT_HERO_CLASS, }) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("publicProfile");
+    void userId; // userId used by consumer to fetch profile data and pass as props
+    // This is a layout shell — data (displayName, avatarUrl, reviewCount, listingCount, joinedAt)
+    // is injected by the consumer page via server-fetched props.
+    // The view renders a consistent shell; in Phase 3 consumers pass data.
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "publicprofileview-div-186", children: [_jsx(Section, { className: `${heroBannerClass} text-white py-10 md:py-14`, children: _jsx("div", { className: `${page.container.md}`, "data-section": "publicprofileview-div-187", children: _jsxs("div", { className: "flex flex-col sm:flex-row items-center sm:items-end gap-5", "data-section": "publicprofileview-div-188", children: [_jsx("div", { className: `w-20 h-20 rounded-full bg-white/20 ${flex.center} flex-shrink-0`, "data-section": "publicprofileview-div-189", children: _jsx(User, { className: "w-10 h-10 text-white/60" }) }), _jsxs("div", { className: "text-center sm:text-left", "data-section": "publicprofileview-div-190", children: [_jsx(Heading, { level: 1, variant: "none", className: "text-white mb-1", children: t("profileTitle") }), _jsx(Text, { variant: "none", className: "text-white/60 text-sm", children: t("memberSince") })] })] }) }) }), _jsxs("div", { className: `${page.container.md} py-10 md:py-12 space-y-10`, "data-section": "publicprofileview-div-191", children: [_jsx("div", { className: `grid grid-cols-3 gap-4`, "data-section": "publicprofileview-div-192", children: [
+                            { icon: ShoppingBag, label: t("statListings"), value: "—" },
+                            { icon: Star, label: t("statReviews"), value: "—" },
+                            { icon: MessageCircle, label: t("statMessages"), value: "—" },
+                        ].map(({ icon: Icon, label, value }) => (_jsxs("div", { className: `rounded-xl border ${themed.border} ${themed.bgPrimary} p-4 text-center`, "data-section": "publicprofileview-div-193", children: [_jsx("div", { className: `${flex.center} mb-1`, "data-section": "publicprofileview-div-194", 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))) }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("listingsTitle") }), _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, "data-section": "publicprofileview-div-195", 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") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-4", children: t("reviewsTitle") }), _jsxs("div", { className: `rounded-2xl border ${themed.border} ${themed.bgSecondary} p-12 text-center`, "data-section": "publicprofileview-div-196", children: [_jsx(Star, { 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("noReviews") })] })] }), _jsx("div", { className: "flex justify-center pt-2", "data-section": "publicprofileview-div-197", children: _jsxs(TextLink, { href: String(ROUTES.HOME), variant: "muted", className: "text-sm", children: ["\u2190 ", t("backHome")] }) })] })] }));
+}

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

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

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

@@ -0,0 +1,122 @@
+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 { TextLink } from "../../../ui";
+import { Shield, Lock, Search, Globe, Database, KeyRound, FileText, Upload, ShieldCheck, Scale, } 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 SecurityPrivacyView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("securityPage");
+    const SECTIONS = [
+        {
+            icon: Lock,
+            title: t("encryptionTitle"),
+            text: t("encryptionText"),
+            color: "bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30",
+            iconColor: "text-primary",
+        },
+        {
+            icon: Search,
+            title: t("blindIndexTitle"),
+            text: t("blindIndexText"),
+            color: "bg-violet-50 border-violet-200 dark:bg-violet-900/20 dark:border-violet-700",
+            iconColor: "text-violet-600 dark:text-violet-400",
+        },
+        {
+            icon: Globe,
+            title: t("transportTitle"),
+            text: t("transportText"),
+            color: "bg-emerald-50 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-700",
+            iconColor: "text-emerald-600 dark:text-emerald-400",
+        },
+        {
+            icon: Database,
+            title: t("dataMinTitle"),
+            text: t("dataMinText"),
+            color: "bg-sky-50 border-sky-200 dark:bg-sky-900/20 dark:border-sky-700",
+            iconColor: "text-sky-600 dark:text-sky-400",
+        },
+        {
+            icon: KeyRound,
+            title: t("accessTitle"),
+            text: t("accessText"),
+            color: "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-700",
+            iconColor: "text-amber-600 dark:text-amber-400",
+        },
+        {
+            icon: FileText,
+            title: t("loggingTitle"),
+            text: t("loggingText"),
+            color: "bg-rose-50 border-rose-200 dark:bg-rose-900/20 dark:border-rose-700",
+            iconColor: "text-rose-600 dark:text-rose-400",
+        },
+        {
+            icon: Shield,
+            title: t("rtdbTitle"),
+            text: t("rtdbText"),
+            color: "bg-teal-50 border-teal-200 dark:bg-teal-900/20 dark:border-teal-700",
+            iconColor: "text-teal-600 dark:text-teal-400",
+        },
+        {
+            icon: Upload,
+            title: t("uploadsTitle"),
+            text: t("uploadsText"),
+            color: "bg-orange-50 border-orange-200 dark:bg-orange-900/20 dark:border-orange-700",
+            iconColor: "text-orange-600 dark:text-orange-400",
+        },
+        {
+            icon: ShieldCheck,
+            title: t("csrfTitle"),
+            text: t("csrfText"),
+            color: "bg-cyan-50 border-cyan-200 dark:bg-cyan-900/20 dark:border-cyan-700",
+            iconColor: "text-cyan-600 dark:text-cyan-400",
+        },
+        {
+            icon: Scale,
+            title: t("complianceTitle"),
+            text: t("complianceText"),
+            color: "bg-fuchsia-50 border-fuchsia-200 dark:bg-fuchsia-900/20 dark:border-fuchsia-700",
+            iconColor: "text-fuchsia-600 dark:text-fuchsia-400",
+        },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "🖥️",
+            circleClass: "bg-slate-100 dark:bg-slate-700 border-2 border-slate-300 dark:border-slate-500",
+            badge: t("diagramStep1Badge"),
+            badgeClass: "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300",
+            desc: t("diagramStep1Desc"),
+        },
+        {
+            emoji: "🔒",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStep2Badge"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            desc: t("diagramStep2Desc"),
+        },
+        {
+            emoji: "🛡️",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("diagramStep3Badge"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStep3Desc"),
+        },
+        {
+            emoji: "🔐",
+            circleClass: "bg-violet-100 dark:bg-violet-900/40 border-2 border-violet-400 dark:border-violet-600",
+            badge: t("diagramStep4Badge"),
+            badgeClass: "bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300",
+            desc: t("diagramStep4Desc"),
+        },
+        {
+            emoji: "🗄️",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("diagramStep5Badge"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            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") })] }), _jsx(Section, { children: _jsx("div", { className: "grid gap-5 md:grid-cols-2", "data-section": "securityprivacyview-div-201", children: SECTIONS.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))) }) }), _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") }), _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") })] })] })] })] }));
+}

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

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

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

@@ -0,0 +1,59 @@
+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 { 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";
+export async function ShippingPolicyView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("shippingPolicy");
+    const SECTIONS = [
+        { title: t("orderProcessTitle"), text: t("orderProcessText") },
+        { title: t("standardTitle"), text: t("standardText") },
+        { title: t("expressTitle"), text: t("expressText") },
+        { title: t("freeShippingTitle"), text: t("freeShippingText") },
+        { title: t("auctionShippingTitle"), text: t("auctionShippingText") },
+        { title: t("trackingTitle"), text: t("trackingText") },
+        { title: t("internationalTitle"), text: t("internationalText") },
+        { title: t("damagedTitle"), text: t("damagedText") },
+    ];
+    const DIAGRAM_STEPS = [
+        {
+            emoji: "✅",
+            circleClass: "bg-primary/10 dark:bg-primary/15 border-2 border-primary/30 dark:border-primary/40",
+            badge: t("diagramStatus1"),
+            badgeClass: "bg-primary/10 dark:bg-primary/15 text-primary",
+            desc: t("diagramStatus1Desc"),
+        },
+        {
+            emoji: "📦",
+            circleClass: "bg-amber-100 dark:bg-amber-900/40 border-2 border-amber-300 dark:border-amber-600",
+            badge: t("diagramStatus2"),
+            badgeClass: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
+            desc: t("diagramStatus2Desc"),
+        },
+        {
+            emoji: "🚀",
+            circleClass: "bg-sky-100 dark:bg-sky-900/40 border-2 border-sky-300 dark:border-sky-600",
+            badge: t("diagramStatus3"),
+            badgeClass: "bg-sky-100 dark:bg-sky-900/40 text-sky-700 dark:text-sky-300",
+            desc: t("diagramStatus3Desc"),
+        },
+        {
+            emoji: "🚚",
+            circleClass: "bg-violet-100 dark:bg-violet-900/40 border-2 border-violet-300 dark:border-violet-600",
+            badge: t("diagramStatus4"),
+            badgeClass: "bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300",
+            desc: t("diagramStatus4Desc"),
+        },
+        {
+            emoji: "🏠",
+            circleClass: "bg-emerald-100 dark:bg-emerald-900/40 border-2 border-emerald-400 dark:border-emerald-600",
+            badge: t("diagramStatus5"),
+            badgeClass: "bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300",
+            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" })] })] })] }));
+}

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

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

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

@@ -0,0 +1,43 @@
+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 { 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";
+export async function TrackOrderView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("trackOrder");
+    const STEPS = [
+        {
+            icon: ShoppingBag,
+            title: t("step1Title"),
+            text: t("step1Text"),
+            color: "text-primary",
+            bg: "bg-primary/10 dark:bg-primary/15",
+        },
+        {
+            icon: Truck,
+            title: t("step2Title"),
+            text: t("step2Text"),
+            color: "text-violet-600 dark:text-violet-400",
+            bg: "bg-violet-100 dark:bg-violet-900/40",
+        },
+        {
+            icon: MapPin,
+            title: t("step3Title"),
+            text: t("step3Text"),
+            color: "text-amber-600 dark:text-amber-400",
+            bg: "bg-amber-100 dark:bg-amber-900/40",
+        },
+        {
+            icon: CheckCircle2,
+            title: t("step4Title"),
+            text: t("step4Text"),
+            color: "text-emerald-600 dark:text-emerald-400",
+            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") })] })] })] })] }));
+}

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

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

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

@@ -0,0 +1,29 @@
+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 } from "../../../ui";
+import { TextLink } from "../../../ui";
+import { ShieldAlert, Home, LogIn } from "lucide-react";
+const DEFAULT_HERO_CLASS = "bg-gradient-to-br from-rose-600 to-red-700 dark:from-rose-700 dark:to-red-800";
+export async function UnauthorizedView({ heroBannerClass = DEFAULT_HERO_CLASS, } = {}) {
+    const { themed, flex, page } = THEME_CONSTANTS;
+    const { getTranslations } = await import("next-intl/server");
+    const t = await getTranslations("unauthorized");
+    const LINKS = [
+        {
+            icon: Home,
+            label: t("linkHome"),
+            href: String(ROUTES.HOME),
+            isPrimary: true,
+        },
+        {
+            icon: LogIn,
+            label: t("linkLogin"),
+            href: String(ROUTES.AUTH.LOGIN),
+            isPrimary: false,
+        },
+    ];
+    return (_jsxs("div", { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", "data-section": "unauthorizedview-div-218", children: [_jsx(Section, { className: `${heroBannerClass} text-white min-h-[60vh] flex flex-col items-center justify-center py-20 text-center`, children: _jsxs("div", { className: `${page.container.sm}`, "data-section": "unauthorizedview-div-219", children: [_jsx("div", { className: `w-20 h-20 rounded-2xl bg-white/20 ${flex.center} mx-auto mb-6`, "data-section": "unauthorizedview-div-220", children: _jsx(ShieldAlert, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white text-4xl", children: t("title") }), _jsx(Text, { variant: "none", className: "text-white/80 max-w-lg mx-auto text-lg mb-8", children: t("subtitle") }), _jsx("div", { className: `${flex.center} gap-4 flex-wrap`, "data-section": "unauthorizedview-div-221", children: LINKS.map(({ icon: Icon, label, href, isPrimary }) => (_jsx(TextLink, { href: href, className: isPrimary
+                                    ? "bg-white text-rose-700 font-semibold px-6 py-2.5 rounded-xl hover:bg-white/90 transition-colors"
+                                    : "border border-white/40 text-white px-6 py-2.5 rounded-xl hover:bg-white/10 transition-colors", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Icon, { className: "w-4 h-4" }), label] }) }, href))) })] }) }), _jsx("div", { className: `${page.container.sm} py-10`, "data-section": "unauthorizedview-div-222", children: _jsxs(Section, { className: `rounded-2xl p-6 text-center border ${themed.border} ${themed.bgSecondary}`, children: [_jsx(Heading, { level: 2, className: "mb-2 text-base", children: t("helpTitle") }), _jsx(Text, { variant: "secondary", className: "text-sm mb-3", children: t("helpText") }), _jsxs(Stack, { gap: "sm", className: "flex-row flex-wrap justify-center gap-4", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), variant: "muted", className: "text-sm", children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", className: "text-sm", children: t("contact") })] })] }) })] }));
+}

package/dist/features/about/index.d.ts

@@ -1,2 +1,34 @@
 export { AboutView } from "./components/AboutView";
 export type { AboutViewProps, AboutHowItem, AboutValueItem, AboutMilestone, } from "./components/AboutView";
+export { TrackOrderView } from "./components/TrackOrderView";
+export type { TrackOrderViewProps } from "./components/TrackOrderView";
+export { FeesView } from "./components/FeesView";
+export type { FeesViewProps } from "./components/FeesView";
+export { SecurityPrivacyView } from "./components/SecurityPrivacyView";
+export type { SecurityPrivacyViewProps } from "./components/SecurityPrivacyView";
+export { ShippingPolicyView } from "./components/ShippingPolicyView";
+export type { ShippingPolicyViewProps } from "./components/ShippingPolicyView";
+export { HowCheckoutWorksView } from "./components/HowCheckoutWorksView";
+export type { HowCheckoutWorksViewProps } from "./components/HowCheckoutWorksView";
+export { HowOffersWorkView } from "./components/HowOffersWorkView";
+export type { HowOffersWorkViewProps } from "./components/HowOffersWorkView";
+export { HowOrdersWorkView } from "./components/HowOrdersWorkView";
+export type { HowOrdersWorkViewProps } from "./components/HowOrdersWorkView";
+export { HowReviewsWorkView } from "./components/HowReviewsWorkView";
+export type { HowReviewsWorkViewProps } from "./components/HowReviewsWorkView";
+export { UnauthorizedView } from "./components/UnauthorizedView";
+export type { UnauthorizedViewProps } from "./components/UnauthorizedView";
+export { PolicyPageView } from "./components/PolicyPageView";
+export type { PolicyPageViewProps } from "./components/PolicyPageView";
+export { FAQPageView } from "./components/FAQPageView";
+export type { FAQPageViewProps } from "./components/FAQPageView";
+export { HelpPageView } from "./components/HelpPageView";
+export type { HelpPageViewProps } from "./components/HelpPageView";
+export { HowAuctionsWorkView } from "./components/HowAuctionsWorkView";
+export type { HowAuctionsWorkViewProps } from "./components/HowAuctionsWorkView";
+export { HowPayoutsWorkView } from "./components/HowPayoutsWorkView";
+export type { HowPayoutsWorkViewProps } from "./components/HowPayoutsWorkView";
+export { HowPreOrdersWorkView } from "./components/HowPreOrdersWorkView";
+export type { HowPreOrdersWorkViewProps } from "./components/HowPreOrdersWorkView";
+export { PublicProfileView } from "./components/PublicProfileView";
+export type { PublicProfileViewProps } from "./components/PublicProfileView";

package/dist/features/about/index.js

@@ -1 +1,17 @@
 export { AboutView } from "./components/AboutView";
+export { TrackOrderView } from "./components/TrackOrderView";
+export { FeesView } from "./components/FeesView";
+export { SecurityPrivacyView } from "./components/SecurityPrivacyView";
+export { ShippingPolicyView } from "./components/ShippingPolicyView";
+export { HowCheckoutWorksView } from "./components/HowCheckoutWorksView";
+export { HowOffersWorkView } from "./components/HowOffersWorkView";
+export { HowOrdersWorkView } from "./components/HowOrdersWorkView";
+export { HowReviewsWorkView } from "./components/HowReviewsWorkView";
+export { UnauthorizedView } from "./components/UnauthorizedView";
+export { PolicyPageView } from "./components/PolicyPageView";
+export { FAQPageView } from "./components/FAQPageView";
+export { HelpPageView } from "./components/HelpPageView";
+export { HowAuctionsWorkView } from "./components/HowAuctionsWorkView";
+export { HowPayoutsWorkView } from "./components/HowPayoutsWorkView";
+export { HowPreOrdersWorkView } from "./components/HowPreOrdersWorkView";
+export { PublicProfileView } from "./components/PublicProfileView";

package/dist/features/account/components/AddressBook.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Span, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels = {}, }) {
     const line1 = "line1" in address && address.line1
         ? address.line1
@@ -7,8 +8,8 @@ export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels =
     const line2 = "line2" in address && address.line2
         ? address.line2
         : address.addressLine2;
-    return (_jsxs(Div, { className: "relative rounded-xl border border-neutral-200 bg-white p-4", children: [address.isDefault && (_jsx(Span, { className: "absolute right-3 top-3 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500", children: address.label })), _jsx(Text, { className: "text-sm text-neutral-900", children: line1 }), line2 && _jsx(Text, { className: "text-sm text-neutral-900", children: line2 }), _jsxs(Text, { className: "text-sm text-neutral-900", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-sm text-neutral-900", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-sm text-neutral-500", children: address.phone })), _jsxs(Div, { className: "mt-3 flex gap-3", children: [onEdit && (_jsx(Button, { onClick: () => onEdit(address), variant: "ghost", size: "sm", className: "text-xs font-medium text-primary hover:underline", children: labels.edit ?? "Edit" })), onDelete && (_jsx(Button, { onClick: () => onDelete(address.id), variant: "ghost", size: "sm", className: "text-xs font-medium text-red-500 hover:underline", children: labels.delete ?? "Delete" })), !address.isDefault && onSetDefault && (_jsx(Button, { onClick: () => onSetDefault(address.id), variant: "outline", size: "sm", className: "ml-auto text-xs font-medium", children: labels.setDefault ?? "Set default" }))] })] }));
+    return (_jsxs(Div, { className: "relative rounded-xl border border-neutral-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4", children: [address.isDefault && (_jsx(Span, { className: "absolute right-3 top-3 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-zinc-400", children: address.label })), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line1 }), line2 && _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: line2 }), _jsxs(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-sm text-neutral-900 dark:text-zinc-100", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-sm text-neutral-500 dark:text-zinc-400", children: address.phone })), _jsxs(Div, { className: `mt-3 flex ${THEME_CONSTANTS.spacing.gap.xs}`, children: [onEdit && (_jsx(Button, { onClick: () => onEdit(address), variant: "ghost", size: "sm", className: "text-xs font-medium text-primary hover:underline", children: labels.edit ?? "Edit" })), onDelete && (_jsx(Button, { onClick: () => onDelete(address.id), variant: "ghost", size: "sm", className: "text-xs font-medium text-red-500 hover:underline", children: labels.delete ?? "Delete" })), !address.isDefault && onSetDefault && (_jsx(Button, { onClick: () => onSetDefault(address.id), variant: "outline", size: "sm", className: "ml-auto text-xs font-medium", children: labels.setDefault ?? "Set default" }))] })] }));
 }
 export function AddressBook({ addresses, onEdit, onDelete, onAdd, emptyLabel = "No saved addresses", addLabel = "Add Address", }) {
-    return (_jsxs(Div, { className: "space-y-4", children: [addresses.length === 0 && (_jsx(Text, { className: "text-sm text-neutral-500", children: emptyLabel })), _jsx(Div, { className: "grid gap-4 sm:grid-cols-2", children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete }, addr.id))) }), onAdd && (_jsxs(Button, { onClick: onAdd, variant: "outline", className: "mt-2 rounded-lg border border-dashed border-neutral-300 px-4 py-3 text-sm font-medium text-neutral-500 transition hover:border-neutral-400 hover:text-neutral-700", children: ["+ ", addLabel] }))] }));
+    return (_jsxs(Div, { className: "space-y-4", children: [addresses.length === 0 && (_jsx(Text, { className: "text-sm text-neutral-500 dark:text-zinc-400", children: emptyLabel })), _jsx(Div, { className: `grid ${THEME_CONSTANTS.spacing.gap.md} sm:grid-cols-2`, children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete }, addr.id))) }), onAdd && (_jsxs(Button, { onClick: onAdd, variant: "outline", className: "mt-2 rounded-lg border border-dashed border-neutral-300 dark:border-slate-600 px-4 py-3 text-sm font-medium text-neutral-500 dark:text-zinc-400 transition hover:border-neutral-400 dark:hover:border-slate-500 hover:text-neutral-700 dark:hover:text-zinc-200", children: ["+ ", addLabel] }))] }));
 }

package/dist/features/account/components/AddressForm.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Checkbox, FormField, FormGroup } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 const DEFAULT_LABELS = {
     label: "Address Label",
     fullName: "Full Name",
@@ -51,5 +52,5 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
         e.preventDefault();
         await onSubmit(formData);
     };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs("div", { className: "flex items-center justify-start gap-3 pt-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsx(FormField, { label: mergedLabels.label, name: "label", type: "text", value: formData.label, onChange: (value) => handleChange("label", value), placeholder: mergedPlaceholders.label, required: true }), _jsx(FormField, { label: mergedLabels.fullName, name: "fullName", type: "text", value: formData.fullName, onChange: (value) => handleChange("fullName", value), placeholder: mergedPlaceholders.fullName, required: true }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true }), _jsx(FormField, { label: mergedLabels.addressLine2, name: "addressLine2", type: "text", value: formData.addressLine2, onChange: (value) => handleChange("addressLine2", value), placeholder: mergedPlaceholders.addressLine2 }), _jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { label: mergedLabels.city, name: "city", type: "text", value: formData.city, onChange: (value) => handleChange("city", value), placeholder: mergedPlaceholders.city, required: true }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true })] }), _jsx(FormField, { label: mergedLabels.country, name: "country", type: "text", value: formData.country, onChange: (value) => handleChange("country", value), placeholder: mergedPlaceholders.country, required: true }), _jsx(Checkbox, { checked: formData.isDefault, onChange: (e) => handleChange("isDefault", e.target.checked), label: mergedLabels.setDefault }), _jsxs("div", { className: `flex items-center justify-start ${THEME_CONSTANTS.spacing.gap.xs} pt-2`, "data-section": "addressform-div-223", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] }));
 }

package/dist/features/account/components/AddressSelectorCreate.js

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import { Button, Label, Select, SideDrawer } from "../../../ui";
 import { useAddressSelector } from "../hooks/useAddressSelector";
 import { AddressForm } from "./AddressForm";
+import { THEME_CONSTANTS } from "../../../tokens";
 const DEFAULT_LABELS = {
     addAddress: "Add Address",
     save: "Save",
@@ -28,7 +29,7 @@ export function AddressSelectorCreate({ value, onChange, disabled = false, label
         const parts = [addr.label, addr.fullName, addr.city, addr.state].filter(Boolean);
         return parts.join(" - ");
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? mergedLabels.pickupAddress, options: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-section": "addressselectorcreate-div-224", children: [label && _jsx(Label, { className: "mb-1.5", children: label }), _jsxs("div", { className: `flex items-center ${THEME_CONSTANTS.spacing.gap.xs}`, "data-section": "addressselectorcreate-div-225", children: [_jsx("div", { className: "flex-1", "data-section": "addressselectorcreate-div-226", children: _jsx(Select, { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled || isLoading, "aria-label": label ?? mergedLabels.pickupAddress, options: [
                                         { value: "", label: mergedLabels.selectAddress },
                                         ...addresses.map((addr) => ({
                                             value: addr.id,

package/dist/features/account/components/ChatList.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading } from "../../../ui";
 export function ChatList({ labels = {}, isLoading = false, hasItems, renderLoading, renderEmptyState, renderList, className = "", }) {

package/dist/features/account/components/ChatWindow.js

@@ -1,6 +1,6 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Row, Span } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 export function ChatWindow({ labels = {}, isConnected = true, isLoading = false, error, renderLoadingIndicator, renderMessages, renderInput, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "pb-3 border-b border-neutral-200 dark:border-neutral-700 mb-3", children: [_jsxs(Row, { className: "gap-2", children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 rounded-full ${isConnected ? "bg-emerald-500" : "bg-zinc-400"}`, "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
+    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { justify: "between", className: "pb-3 border-b border-neutral-200 dark:border-neutral-700 mb-3", children: [_jsxs(Row, { className: THEME_CONSTANTS.spacing.gap.xs, children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 rounded-full ${isConnected ? "bg-emerald-500" : "bg-zinc-400"}`, "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
 }

package/dist/features/account/components/MessagesView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Span } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 export function MessagesView({ labels = {}, chatId, renderChatList, renderChatWindow, renderMobileBack, renderEmptyState, className = "", }) {
-    return (_jsxs(Div, { className: `grid grid-cols-1 md:grid-cols-[280px_1fr] xl:grid-cols-[320px_1fr] 2xl:grid-cols-[360px_1fr] gap-4 h-full min-h-[600px] ${className}`, children: [_jsxs(Div, { className: chatId ? "hidden md:block" : "block", children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-3 font-semibold", children: labels.title })), renderChatList?.()] }), chatId ? (_jsxs(Div, { className: "flex flex-col gap-3", children: [renderMobileBack?.(), renderChatWindow?.()] })) : (_jsx(Div, { className: "hidden md:flex items-center justify-center text-neutral-400 dark:text-neutral-600 border border-dashed border-neutral-200 dark:border-neutral-700 rounded-xl", children: renderEmptyState?.() ?? (_jsx(Span, { children: labels.selectRoom ?? "Select a conversation" })) }))] }));
+    return (_jsxs(Div, { className: `grid grid-cols-1 md:grid-cols-[280px_1fr] xl:grid-cols-[320px_1fr] 2xl:grid-cols-[360px_1fr] gap-4 h-full min-h-[600px] ${className}`, children: [_jsxs(Div, { className: chatId ? "hidden md:block" : "block", children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-3 font-semibold", children: labels.title })), renderChatList?.()] }), chatId ? (_jsxs(Div, { className: `flex flex-col ${THEME_CONSTANTS.spacing.gap.xs}`, children: [renderMobileBack?.(), renderChatWindow?.()] })) : (_jsx(Div, { className: "hidden md:flex items-center justify-center text-neutral-400 dark:text-neutral-600 border border-dashed border-neutral-200 dark:border-neutral-700 rounded-xl", children: renderEmptyState?.() ?? (_jsx(Span, { children: labels.selectRoom ?? "Select a conversation" })) }))] }));
 }