@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Span, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Button, Div, Span, Stack, Text } from "../../../ui";
 export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels = {}, }) {
     const line1 = "line1" in address && address.line1
         ? address.line1
@@ -8,8 +7,10 @@ export function AddressCard({ address, onEdit, onDelete, onSetDefault, labels =
     const line2 = "line2" in address && address.line2
         ? address.line2
         : address.addressLine2;
-    return (_jsxs(Div, { surface: "card", padding: "sm", className: "relative", children: [address.isDefault && (_jsx(Span, { size: "xs", weight: "medium", className: "absolute right-3 top-3 rounded-full bg-success-surface px-2 py-0.5 text-success", 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-error 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, { surface: "card", padding: "sm", className: "relative", children: [address.isDefault && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "absolute right-3 top-3", rounded: "full", padding: "pill-xs", children: labels.defaultBadge ?? "Default" })), address.label && (_jsx(Text, { className: "mb-1 tracking-wide text-neutral-500 dark:text-neutral-400", size: "xs", weight: "semibold", transform: "uppercase", children: address.label })), _jsx(Text, { className: "text-neutral-900 dark:text-neutral-100", size: "sm", children: line1 }), line2 && _jsx(Text, { className: "text-neutral-900 dark:text-neutral-100", size: "sm", children: line2 }), _jsxs(Text, { className: "text-neutral-900 dark:text-neutral-100", size: "sm", children: [address.city, ", ", address.state, " ", address.postalCode] }), _jsx(Text, { className: "text-neutral-900 dark:text-neutral-100", size: "sm", children: address.country }), address.phone && (_jsx(Text, { className: "mt-1 text-neutral-500 dark:text-neutral-400", size: "sm", children: address.phone })), _jsxs(Div, { layout: "flex", gap: "1", className: "mt-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-error 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, onSetDefault, 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 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, onSetDefault: onSetDefault }, 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] }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [addresses.length === 0 && (_jsx(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "sm", children: emptyLabel })), _jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: addresses.map((addr) => (_jsx(AddressCard, { address: addr, onEdit: onEdit, onDelete: onDelete, onSetDefault: onSetDefault }, addr.id))) }), onAdd && (
+            // audit-variant-ok: add-address Button — dashed border + hover-shade transitions; Button.border lacks dashed variant + hover state
+            _jsxs(Button, { rounded: "lg", onClick: onAdd, variant: "outline", paddingX: "md", paddingY: "md", textSize: "sm", weight: "medium", className: "mt-2 border border-dashed border-neutral-300 dark:border-slate-600 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

@@ -1,9 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Checkbox, Div, FormField, FormGroup } from "../../../ui";
-import { useFormShellState } from "../../../ui/forms";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Button, Checkbox, FormField, FormGroup, Row } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
 const DEFAULT_LABELS = {
     label: "Address Label",
     fullName: "Full Name",
@@ -34,7 +33,6 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
     const mergedLabels = { ...DEFAULT_LABELS, ...labels };
     const mergedPlaceholders = { ...DEFAULT_PLACEHOLDERS, ...placeholders };
     const effectiveSubmitLabel = submitLabel ?? mergedLabels.save;
-    const { shellCtx, setFieldError, clearErrors } = useFormShellState();
     const [formData, setFormData] = useState({
         label: initialData?.label || "",
         fullName: initialData?.fullName || "",
@@ -49,30 +47,27 @@ export function AddressForm({ initialData, onSubmit, onCancel, isLoading = false
     });
     const handleChange = (field, value) => {
         setFormData((prev) => ({ ...prev, [field]: value }));
-        if (typeof value === "string" && value.trim())
-            setFieldError(field, null);
     };
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        clearErrors();
-        const errs = {};
-        if (!formData.fullName.trim())
-            errs["fullName"] = "Full name is required";
-        if (!formData.phone.trim())
-            errs["phone"] = "Phone number is required";
-        if (!formData.addressLine1.trim())
-            errs["addressLine1"] = "Address is required";
-        if (!formData.city.trim())
-            errs["city"] = "City is required";
-        if (!formData.state.trim())
-            errs["state"] = "State is required";
-        if (!formData.postalCode.trim())
-            errs["postalCode"] = "Postal code is required";
-        if (Object.keys(errs).length > 0) {
-            Object.entries(errs).forEach(([k, v]) => setFieldError(k, v));
-            return;
-        }
-        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, error: shellCtx.errors["fullName"] }), _jsx(FormField, { label: mergedLabels.phone, name: "phone", type: "tel", value: formData.phone, onChange: (value) => handleChange("phone", value), placeholder: mergedPlaceholders.phone, required: true, error: shellCtx.errors["phone"] }), _jsx(FormField, { label: mergedLabels.addressLine1, name: "addressLine1", type: "text", value: formData.addressLine1, onChange: (value) => handleChange("addressLine1", value), placeholder: mergedPlaceholders.addressLine1, required: true, error: shellCtx.errors["addressLine1"] }), _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, error: shellCtx.errors["city"] }), _jsx(FormField, { label: mergedLabels.state, name: "state", type: "text", value: formData.state, onChange: (value) => handleChange("state", value), placeholder: mergedPlaceholders.state, required: true, error: shellCtx.errors["state"] }), _jsx(FormField, { label: mergedLabels.postalCode, name: "postalCode", type: "text", value: formData.postalCode, onChange: (value) => handleChange("postalCode", value), placeholder: mergedPlaceholders.postalCode, required: true, error: shellCtx.errors["postalCode"] })] }), _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`, 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 (_jsx(Form, { onSubmit: (e) => e.preventDefault(), spacing: "md", children: ({ setFieldError, clearErrors }) => (_jsxs(_Fragment, { 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(Row, { padding: "t-xs", align: "center", justify: "start", gap: "xs", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: isLoading, children: mergedLabels.cancel }), _jsx(Button, { type: "submit", variant: "primary", disabled: isLoading, isLoading: isLoading, onClick: async () => {
+                                // toast-handled-by-hook: onSubmit prop's mutation hook owns toast UX
+                                clearErrors();
+                                const errs = {};
+                                if (!formData.fullName.trim())
+                                    errs["fullName"] = "Full name is required";
+                                if (!formData.phone.trim())
+                                    errs["phone"] = "Phone number is required";
+                                if (!formData.addressLine1.trim())
+                                    errs["addressLine1"] = "Address is required";
+                                if (!formData.city.trim())
+                                    errs["city"] = "City is required";
+                                if (!formData.state.trim())
+                                    errs["state"] = "State is required";
+                                if (!formData.postalCode.trim())
+                                    errs["postalCode"] = "Postal code is required";
+                                if (Object.keys(errs).length > 0) {
+                                    Object.entries(errs).forEach(([k, v]) => setFieldError(k, v));
+                                    return;
+                                }
+                                await onSubmit(formData);
+                            }, children: isLoading ? mergedLabels.loading : effectiveSubmitLabel })] })] })) }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useMemo } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useAddresses } from "../hooks/useAddresses";
-import { Div, ListingFilterDrawer, ListingToolbar, Text } from "../../../ui";
+import { Div, ListingFilterDrawer, ListingToolbar, Stack, Text } from "../../../ui";
 import { AddressBook } from "./AddressBook";
 import { AddressFilters } from "./AddressFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
@@ -38,6 +38,7 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
         buildSieveParams: () => "",
         buildSearchParams: () => "",
         params: new URLSearchParams(),
+        // audit-unknown-ok: TS structural escape — table-state type
     }), [pendingFilters]);
     const openFilters = useCallback(() => {
         setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
@@ -73,6 +74,6 @@ export function AddressesIndexListing({ onAdd, onEdit, onDelete, }) {
             activeOnly: table.get("activeOnly") === "true" || undefined,
         },
     });
-    return (_jsxs(Div, { className: "space-y-4", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
-                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "px-3 sm:px-4", children: isLoading ? (_jsx(Div, { className: "grid sm:grid-cols-2 gap-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { className: "py-8 text-center text-sm text-zinc-500 dark:text-zinc-400", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by address, postcode or label...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, view: view, onViewChange: (v) => { if (v === "table")
+                    return; setView(v); }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { className: "sm:px-4", padding: "x-sm", children: isLoading ? (_jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 animate-pulse p-4 space-y-2", children: [_jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" })] }, i))) })) : addresses.length === 0 ? (_jsx(Text, { paddingY: "xl", color: "muted", size: "sm", align: "center", children: table.get(TABLE_KEYS.QUERY) ? `No addresses matching "${table.get(TABLE_KEYS.QUERY)}"` : "No saved addresses." })) : (_jsx(AddressBook, { addresses: addresses, onEdit: onEdit, onDelete: onDelete, onAdd: onAdd })) }), _jsx(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: _jsx(AddressFilters, { table: pendingTable }) })] }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading } from "../../../ui";
 export function BecomeSellerView({ labels = {}, renderGuide, renderSuccess, renderAlreadySeller, state = "guide", isLoading = false, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [labels.title && state === "guide" && (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: labels.title })), state === "guide" && renderGuide?.(), state === "success" && renderSuccess?.(), state === "already-seller" && renderAlreadySeller?.()] }));
+    return (_jsxs(Div, { className: className, children: [labels.title && state === "guide" && (_jsx(Heading, { level: 1, className: "mb-6", size: "2xl", weight: "bold", children: labels.title })), state === "guide" && renderGuide?.(), state === "success" && renderSuccess?.(), state === "already-seller" && renderAlreadySeller?.()] }));
 }

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

@@ -1,39 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { UserCheck, Bell, Heart, Star, Lock, AlertTriangle, Flag } from "lucide-react";
-import { Div, Heading, Span, Text, Section, Alert } from "../../../ui";
+import { Alert, Div, Heading, Li, Row, Section, Span, Stack, Text, TextLink, Ul } from "../../../ui";
 import { ROUTES } from "../../../constants";
 import { GC } from "../../_guide-cls";
 const SECTIONS = [
     {
         Icon: UserCheck, title: "Your Profile",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Update your profile at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Profile" }), ". Your ", _jsx(Span, { weight: "bold", children: "display name" }), " is shown to sellers on order summaries."] }), _jsxs(Div, { className: "grid sm:grid-cols-2 gap-4 text-sm", children: [_jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] mb-1", children: "Visible to others:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Display name" }), _jsx("li", { children: "Avatar / profile photo" }), _jsx("li", { children: "Bio" }), _jsx("li", { children: "Member since date" })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] mb-1", children: "Only you can see:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Email address" }), _jsx("li", { children: "Phone number" }), _jsx("li", { children: "Saved addresses" }), _jsx("li", { children: "Order history" })] })] })] })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Update your profile at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Profile" }), ". Your ", _jsx(Span, { weight: "bold", children: "display name" }), " is shown to sellers on order summaries."] }), _jsxs(Div, { layout: "grid", gap: "4", textSize: "sm", className: "sm:grid-cols-2", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", weight: "semibold", children: "Visible to others:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Display name" }), _jsx(Li, { children: "Avatar / profile photo" }), _jsx(Li, { children: "Bio" }), _jsx(Li, { children: "Member since date" })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", weight: "semibold", children: "Only you can see:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Email address" }), _jsx(Li, { children: "Phone number" }), _jsx(Li, { children: "Saved addresses" }), _jsx(Li, { children: "Order history" })] })] })] })] })),
     },
     {
         Icon: Bell, title: "Notifications",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { className: GC.textMuted, children: "You'll receive in-app notifications for:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Order status changes (Processing, Shipped, Delivered)" }), _jsx("li", { children: "Outbid alerts on auctions you're participating in" }), _jsx("li", { children: "Auction win notification" }), _jsx("li", { children: "Review request after a delivered order" }), _jsx("li", { children: "Support ticket replies" })] }), _jsxs(Text, { className: GC.textMuted, children: ["Manage notification preferences at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Settings \u2192 Notifications" }), "."] })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsx(Text, { className: GC.textMuted, children: "You'll receive in-app notifications for:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Order status changes (Processing, Shipped, Delivered)" }), _jsx(Li, { children: "Outbid alerts on auctions you're participating in" }), _jsx(Li, { children: "Auction win notification" }), _jsx(Li, { children: "Review request after a delivered order" }), _jsx(Li, { children: "Support ticket replies" })] }), _jsxs(Text, { className: GC.textMuted, children: ["Manage notification preferences at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Settings \u2192 Notifications" }), "."] })] })),
     },
     {
         Icon: Heart, iconCls: "w-5 h-5 text-rose-500", title: "Wishlist",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Save any listing to your wishlist by clicking the heart icon on a product card. View your wishlist at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Wishlist" }), "."] }), _jsxs(Alert, { variant: "info", children: ["Your wishlist holds up to ", _jsx(Span, { weight: "bold", children: "20 items" }), ". Remove items you no longer want to make room for new ones. Wishlists are private \u2014 other users cannot see your saved items."] })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Save any listing to your wishlist by clicking the heart icon on a product card. View your wishlist at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Wishlist" }), "."] }), _jsxs(Alert, { variant: "info", children: ["Your wishlist holds up to ", _jsx(Span, { weight: "bold", children: "20 items" }), ". Remove items you no longer want to make room for new ones. Wishlists are private \u2014 other users cannot see your saved items."] })] })),
     },
     {
         Icon: Star, iconCls: "w-5 h-5 text-amber-400", title: "Leaving a Review",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["You can leave a review after your order is marked ", _jsx(Span, { weight: "bold", children: "DELIVERED" }), ". Reviews are verified \u2014 only buyers who completed an order can review that product."] }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Rating" }), " \u2014 1\u20135 stars. Be fair and specific."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Title & body" }), " \u2014 describe item condition vs listing, packaging quality, and seller communication."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Photos" }), " \u2014 optional but helpful for other buyers."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Seller response" }), " \u2014 the seller may respond publicly. You cannot edit a review after a seller has responded."] })] }), _jsx(Text, { className: GC.textMuted, children: "Review guidelines: no personal information, no hate speech or slurs, factual only." })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["You can leave a review after your order is marked ", _jsx(Span, { weight: "bold", children: "DELIVERED" }), ". Reviews are verified \u2014 only buyers who completed an order can review that product."] }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Rating" }), " \u2014 1\u20135 stars. Be fair and specific."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Title & body" }), " \u2014 describe item condition vs listing, packaging quality, and seller communication."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Photos" }), " \u2014 optional but helpful for other buyers."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Seller response" }), " \u2014 the seller may respond publicly. You cannot edit a review after a seller has responded."] })] }), _jsx(Text, { className: GC.textMuted, children: "Review guidelines: no personal information, no hate speech or slurs, factual only." })] })),
     },
     {
         Icon: Lock, title: "Account Security",
-        content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Change password" }), " \u2014 use \"Forgot password\" on the login page. A reset link is sent to your registered email."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Active sessions" }), " \u2014 view all devices signed in at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Sessions" }), ". Sign out unfamiliar devices immediately."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Sign out everywhere" }), " \u2014 use \"Sign out everywhere\" on the Sessions page to invalidate all active sessions at once."] })] })),
+        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Change password" }), " \u2014 use \"Forgot password\" on the login page. A reset link is sent to your registered email."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Active sessions" }), " \u2014 view all devices signed in at ", _jsx(Span, { weight: "bold", children: "My Account \u2192 Sessions" }), ". Sign out unfamiliar devices immediately."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Sign out everywhere" }), " \u2014 use \"Sign out everywhere\" on the Sessions page to invalidate all active sessions at once."] })] })),
     },
     {
         Icon: AlertTriangle, iconCls: "w-5 h-5 text-amber-500", title: "Scam Awareness",
-        content: (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "warning", title: "Top scam types in the collectibles market:", children: _jsxs("ul", { className: "space-y-1 text-sm mt-1", children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "1. Fake payment screenshots" }), " \u2014 always verify refunds in your bank app."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "2. Empty box shipping" }), " \u2014 item photos look real but the box arrives empty. Check seller rating."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "3. Fake graded cards" }), " \u2014 counterfeit PSA/BGS slabs. Verify cert numbers on the grading company's website."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "4. Urgency pressure" }), " \u2014 \"someone else is about to buy\". Legitimate sellers don't pressure you."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "5. Sympathy plays" }), " \u2014 emotional manipulation is a red flag."] })] }) }), _jsxs(Text, { className: `${GC.textMuted} mt-4`, children: ["Read the full ", _jsx("a", { href: String(ROUTES.PUBLIC.SCAMS), className: "text-[var(--appkit-color-primary)] underline hover:no-underline font-medium", children: "Scam Registry \u2192" }), " for all 27 documented scam types."] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "warning", title: "Top scam types in the collectibles market:", children: _jsxs(Ul, { className: "mt-1", spacing: "tight", size: "sm", children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "1. Fake payment screenshots" }), " \u2014 always verify refunds in your bank app."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "2. Empty box shipping" }), " \u2014 item photos look real but the box arrives empty. Check seller rating."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "3. Fake graded cards" }), " \u2014 counterfeit PSA/BGS slabs. Verify cert numbers on the grading company's website."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "4. Urgency pressure" }), " \u2014 \"someone else is about to buy\". Legitimate sellers don't pressure you."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "5. Sympathy plays" }), " \u2014 emotional manipulation is a red flag."] })] }) }), _jsxs(Text, { className: `${GC.textMuted} mt-4`, children: ["Read the full ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), weight: "medium", className: "text-[var(--appkit-color-primary)] underline hover:no-underline", children: "Scam Registry \u2192" }), " for all 27 documented scam types."] })] })),
     },
     {
         Icon: Flag, iconCls: "w-5 h-5 text-rose-500", title: "Reporting Issues",
-        content: (_jsxs(Div, { className: "grid sm:grid-cols-2 gap-6 text-sm", children: [_jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] mb-2", children: "Report a seller (scam, fake item, harassment)" }), _jsx(Text, { className: `${GC.textMuted} mb-2`, children: "Use the Scam Registry report form. Our Trust & Safety team reviews within 48 hours." }), _jsx("a", { href: String(ROUTES.PUBLIC.SCAMS), className: "text-[var(--appkit-color-primary)] text-sm font-medium underline hover:no-underline", children: "Go to Scam Registry \u2192" })] }), _jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] mb-2", children: "Open a support ticket (order dispute, billing, account)" }), _jsx(Text, { className: `${GC.textMuted} mb-2`, children: "Go to My Account \u2192 Support Tickets. Choose the right category for a faster response." }), _jsx("a", { href: String(ROUTES.USER.SUPPORT), className: "text-[var(--appkit-color-primary)] text-sm font-medium underline hover:no-underline", children: "Open Support Ticket \u2192" })] })] })),
+        content: (_jsxs(Div, { layout: "grid", gap: "6", textSize: "sm", className: "sm:grid-cols-2", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-2", weight: "semibold", children: "Report a seller (scam, fake item, harassment)" }), _jsx(Text, { className: `${GC.textMuted} mb-2`, children: "Use the Scam Registry report form. Our Trust & Safety team reviews within 48 hours." }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.SCAMS), size: "sm", weight: "medium", className: "text-[var(--appkit-color-primary)] underline hover:no-underline", children: "Go to Scam Registry \u2192" })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-2", weight: "semibold", children: "Open a support ticket (order dispute, billing, account)" }), _jsx(Text, { className: `${GC.textMuted} mb-2`, children: "Go to My Account \u2192 Support Tickets. Choose the right category for a faster response." }), _jsx(TextLink, { href: String(ROUTES.USER.SUPPORT), size: "sm", weight: "medium", className: "text-[var(--appkit-color-primary)] underline hover:no-underline", children: "Open Support Ticket \u2192" })] })] })),
     },
 ];
 // ─── Component ────────────────────────────────────────────────────────────────
 export function BuyerAccountGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: GC.pageHeaderGradient }, children: _jsx(UserCheck, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Account & Safety" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Manage your LetItRip profile, stay safe from scams, and know how to report problems." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: GC.pageHeaderGradient }, children: _jsx(UserCheck, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Account & Safety" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Manage your LetItRip profile, stay safe from scams, and know how to report problems." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
 }

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

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Gavel, TrendingUp, Trophy, AlertTriangle, Package, XCircle, ShieldCheck } from "lucide-react";
-import { Div, Heading, Span, Text, Section, Alert } from "../../../ui";
+import { Alert, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui";
 import { GC } from "../../_guide-cls";
 const SECTIONS = [
     {
         Icon: Gavel, title: "How Auctions Work",
-        content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Reserve price" }), " \u2014 the minimum amount the seller will accept. If bidding ends below the reserve, no sale occurs. You'll see \"Reserve not met\" on the listing."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Bid increment" }), " \u2014 each new bid must exceed the current highest bid by at least the set increment. The increment is shown on the listing."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auction end time" }), " \u2014 displayed in your local timezone. Countdown timer shows hours and minutes remaining."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auto-extend" }), " \u2014 if a bid is placed within the last 5 minutes of an auction, the end time extends by 5 minutes. This prevents last-second sniping and gives all bidders a fair chance."] })] })),
+        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Reserve price" }), " \u2014 the minimum amount the seller will accept. If bidding ends below the reserve, no sale occurs. You'll see \"Reserve not met\" on the listing."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Bid increment" }), " \u2014 each new bid must exceed the current highest bid by at least the set increment. The increment is shown on the listing."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auction end time" }), " \u2014 displayed in your local timezone. Countdown timer shows hours and minutes remaining."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auto-extend" }), " \u2014 if a bid is placed within the last 5 minutes of an auction, the end time extends by 5 minutes. This prevents last-second sniping and gives all bidders a fair chance."] })] })),
     },
     {
         Icon: TrendingUp, title: "Placing a Bid",
-        content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: `${GC.textMuted} mb-3`, children: ["Enter your bid amount \u2014 it must be at least the current high bid plus the increment \u2014 and click ", _jsx(Span, { weight: "bold", children: "Place Bid" }), ". You'll be asked to confirm."] }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Outbid notification" }), " \u2014 you'll receive an in-app notification and email if someone outbids you."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Max bid (proxy bidding)" }), " \u2014 enter the maximum you're willing to pay. LetItRip will automatically bid on your behalf up to that amount, in the minimum increments needed to keep you in the lead. Your max bid is never revealed to other bidders."] })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: [_jsx(Span, { weight: "bold", children: "Example:" }), " Current bid is \u20B9500, increment is \u20B950. You set a max bid of \u20B9800. Your bid is placed at \u20B9550. If someone bids \u20B9600, the system auto-bids \u20B9650 for you \u2014 up to \u20B9800."] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: `${GC.textMuted} mb-3`, children: ["Enter your bid amount \u2014 it must be at least the current high bid plus the increment \u2014 and click ", _jsx(Span, { weight: "bold", children: "Place Bid" }), ". You'll be asked to confirm."] }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Outbid notification" }), " \u2014 you'll receive an in-app notification and email if someone outbids you."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Max bid (proxy bidding)" }), " \u2014 enter the maximum you're willing to pay. LetItRip will automatically bid on your behalf up to that amount, in the minimum increments needed to keep you in the lead. Your max bid is never revealed to other bidders."] })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: [_jsx(Span, { weight: "bold", children: "Example:" }), " Current bid is \u20B9500, increment is \u20B950. You set a max bid of \u20B9800. Your bid is placed at \u20B9550. If someone bids \u20B9600, the system auto-bids \u20B9650 for you \u2014 up to \u20B9800."] })] })),
     },
     {
         Icon: Trophy, title: "Winning an Auction",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "When an auction ends and you're the highest bidder (above the reserve), you've won." }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Payment window" }), " \u2014 you have ", _jsx(Span, { weight: "bold", children: "48 hours" }), " from the auction end time to complete payment."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "No payment" }), " \u2014 the order auto-cancels after 48 hours, you may receive a bid restriction, and the item may be offered to the next highest bidder."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Winner badge" }), " \u2014 your winning order gets an \"Auction Winner\" badge in My Orders."] })] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "When an auction ends and you're the highest bidder (above the reserve), you've won." }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Payment window" }), " \u2014 you have ", _jsx(Span, { weight: "bold", children: "48 hours" }), " from the auction end time to complete payment."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "No payment" }), " \u2014 the order auto-cancels after 48 hours, you may receive a bid restriction, and the item may be offered to the next highest bidder."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Winner badge" }), " \u2014 your winning order gets an \"Auction Winner\" badge in My Orders."] })] })] })),
     },
     {
         Icon: AlertTriangle, iconCls: "w-5 h-5 text-amber-500", title: "Bid Retraction Policy",
@@ -21,7 +21,7 @@ const SECTIONS = [
     },
     {
         Icon: Package, title: "Pre-orders",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "A pre-order is an item not yet in stock. The seller takes deposits or full payment upfront and orders from their supplier in bulk once demand is confirmed." }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Deposit vs full price" }), " \u2014 check the listing. Some sellers take a partial deposit; others require full payment."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Expected delivery date" }), " \u2014 shown on the listing. This is the seller's estimate based on supplier timelines \u2014 not a guaranteed date."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "\"Confirmed supplier\" status" }), " \u2014 some listings show this badge, meaning the seller has placed the order with their supplier and stock is secured."] })] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "A pre-order is an item not yet in stock. The seller takes deposits or full payment upfront and orders from their supplier in bulk once demand is confirmed." }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Deposit vs full price" }), " \u2014 check the listing. Some sellers take a partial deposit; others require full payment."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Expected delivery date" }), " \u2014 shown on the listing. This is the seller's estimate based on supplier timelines \u2014 not a guaranteed date."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "\"Confirmed supplier\" status" }), " \u2014 some listings show this badge, meaning the seller has placed the order with their supplier and stock is secured."] })] })] })),
     },
     {
         Icon: XCircle, iconCls: "w-5 h-5 text-rose-500", title: "Pre-order Cancellations",
@@ -29,10 +29,10 @@ const SECTIONS = [
     },
     {
         Icon: ShieldCheck, iconCls: "w-5 h-5 text-emerald-500", title: "Bidding Safety Tips",
-        content: (_jsx(Alert, { variant: "info", children: _jsxs("ul", { className: "space-y-1 text-sm", children: [_jsx("li", { children: "\u2713 Check the seller's rating and number of completed orders before bidding." }), _jsx("li", { children: "\u2713 Read every product photo carefully \u2014 look for condition issues, especially on graded card slabs." }), _jsx("li", { children: "\u2713 If authenticity is unclear, contact support before placing a bid \u2014 not after." }), _jsx("li", { children: "\u2713 Set a max bid and stick to it. Bid heat is real \u2014 don't let excitement push you past your budget." })] }) })),
+        content: (_jsx(Alert, { variant: "info", children: _jsxs(Ul, { spacing: "tight", size: "sm", children: [_jsx(Li, { children: "\u2713 Check the seller's rating and number of completed orders before bidding." }), _jsx(Li, { children: "\u2713 Read every product photo carefully \u2014 look for condition issues, especially on graded card slabs." }), _jsx(Li, { children: "\u2713 If authenticity is unclear, contact support before placing a bid \u2014 not after." }), _jsx(Li, { children: "\u2713 Set a max bid and stick to it. Bid heat is real \u2014 don't let excitement push you past your budget." })] }) })),
     },
 ];
 // ─── Component ────────────────────────────────────────────────────────────────
 export function BuyerAuctionsGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: GC.pageHeaderGradient }, children: _jsx(Gavel, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Auctions & Pre-orders" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "How bidding works, how to win, and everything you need to know about pre-orders on LetItRip." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: GC.pageHeaderGradient }, children: _jsx(Gavel, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Auctions & Pre-orders" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "How bidding works, how to win, and everything you need to know about pre-orders on LetItRip." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PackageCheck, Truck, Camera, RotateCcw, Clock, Headphones, Scale } from "lucide-react";
-import { Div, Heading, Span, Text, Section, Alert } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui";
 import { GC } from "../../_guide-cls";
 // ─── Section data ─────────────────────────────────────────────────────────────
 const ORDER_STATUSES = [
@@ -15,11 +15,11 @@ const ORDER_STATUSES = [
 const SECTIONS = [
     {
         Icon: PackageCheck, title: "Order Lifecycle",
-        content: (_jsxs(Div, { className: "space-y-4 text-sm", children: [_jsx(Text, { className: GC.textMuted, children: "Every order on LetItRip moves through these statuses:" }), _jsx(Div, { className: "space-y-2", children: ORDER_STATUSES.map(({ status, desc }) => (_jsxs(Div, { className: "flex gap-3", children: [_jsx(Text, { className: "flex-shrink-0 font-mono font-semibold text-[var(--appkit-color-primary)] w-36 text-xs", children: status }), _jsx(Text, { className: GC.textMuted, children: desc })] }, status))) })] })),
+        content: (_jsxs(Stack, { textSize: "sm", gap: "md", children: [_jsx(Text, { className: GC.textMuted, children: "Every order on LetItRip moves through these statuses:" }), _jsx(Stack, { gap: "sm", children: ORDER_STATUSES.map(({ status, desc }) => (_jsxs(Row, { gap: "3", children: [_jsx(Text, { className: "flex-shrink-0 font-mono text-[var(--appkit-color-primary)] w-36", size: "xs", weight: "semibold", children: status }), _jsx(Text, { className: GC.textMuted, children: desc })] }, status))) })] })),
     },
     {
         Icon: Truck, title: "Tracking Your Order",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Once your order is SHIPPED, go to ", _jsx(Span, { weight: "bold", children: "My Orders \u2192 [Order] \u2192 Tracking" }), " tab. Your tracking number and carrier name are shown there."] }), _jsx(Text, { className: GC.textMuted, children: "Paste the tracking number into the carrier's website for real-time updates. Common carriers: Shiprocket, Delhivery, BlueDart, India Post, Ekart." }), _jsx(Text, { className: GC.textMuted, children: "Typical delivery times: 2\u20135 days metro cities, 5\u201310 days remote areas, 7\u201314 days for pre-orders subject to supplier shipping." })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Once your order is SHIPPED, go to ", _jsx(Span, { weight: "bold", children: "My Orders \u2192 [Order] \u2192 Tracking" }), " tab. Your tracking number and carrier name are shown there."] }), _jsx(Text, { className: GC.textMuted, children: "Paste the tracking number into the carrier's website for real-time updates. Common carriers: Shiprocket, Delhivery, BlueDart, India Post, Ekart." }), _jsx(Text, { className: GC.textMuted, children: "Typical delivery times: 2\u20135 days metro cities, 5\u201310 days remote areas, 7\u201314 days for pre-orders subject to supplier shipping." })] })),
     },
     {
         Icon: Camera, iconCls: "w-5 h-5 text-amber-500", title: "Wrong or Damaged Item",
@@ -27,22 +27,22 @@ const SECTIONS = [
     },
     {
         Icon: RotateCcw, title: "Return Policy",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Platform-wide return window: ", _jsx(Span, { weight: "bold", children: "7 days from DELIVERED date" }), ". Some stores offer 30-day windows \u2014 shown on the product page."] }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)]", children: "Non-returnable items:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Opened card packs (Pok\u00E9mon, Yu-Gi-Oh!, etc.)" }), _jsx("li", { children: "Cracked or opened graded card slabs without documented photographic evidence of a defect" }), _jsx("li", { children: "Items explicitly marked \"Final Sale\" on the listing" })] })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["Platform-wide return window: ", _jsx(Span, { weight: "bold", children: "7 days from DELIVERED date" }), ". Some stores offer 30-day windows \u2014 shown on the product page."] }), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: "Non-returnable items:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Opened card packs (Pok\u00E9mon, Yu-Gi-Oh!, etc.)" }), _jsx(Li, { children: "Cracked or opened graded card slabs without documented photographic evidence of a defect" }), _jsx(Li, { children: "Items explicitly marked \"Final Sale\" on the listing" })] })] })),
     },
     {
         Icon: Clock, title: "Refund Timeline",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { className: GC.textMuted, children: "After the seller accepts your return and confirms receipt of the item:" }), _jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Credit/debit card" }), " \u2014 3\u20137 business days back to your card via Razorpay."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "UPI" }), " \u2014 typically 1\u20132 business days."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Net banking" }), " \u2014 3\u20135 business days."] })] }), _jsx(Text, { className: GC.textMuted, children: "Refunds go back to the original payment method. LetItRip does not issue platform credits in lieu of a refund unless both parties agree." })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsx(Text, { className: GC.textMuted, children: "After the seller accepts your return and confirms receipt of the item:" }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Credit/debit card" }), " \u2014 3\u20137 business days back to your card via Razorpay."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "UPI" }), " \u2014 typically 1\u20132 business days."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Net banking" }), " \u2014 3\u20135 business days."] })] }), _jsx(Text, { className: GC.textMuted, children: "Refunds go back to the original payment method. LetItRip does not issue platform credits in lieu of a refund unless both parties agree." })] })),
     },
     {
         Icon: Headphones, title: "Opening a Support Ticket",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)]", children: "When to use a support ticket:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Seller is unresponsive to your return request for more than 3 days" }), _jsx("li", { children: "Tracking has not updated in 7+ days" }), _jsx("li", { children: "Item is significantly not as described" })] }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)]", children: "What to include:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsxs("li", { children: ["Your order ID (e.g. ", _jsx("code", { className: GC.code, children: "order-2-20260508-a1b2c3" }), ")"] }), _jsx("li", { children: "Photos of the item and packaging" }), _jsx("li", { children: "A clear timeline of events" })] }), _jsx(Text, { className: GC.textMuted, children: "Response SLA: 24\u201348 hours. You can have up to 2 active general tickets and 1 additional ticket per active order." })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: "When to use a support ticket:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Seller is unresponsive to your return request for more than 3 days" }), _jsx(Li, { children: "Tracking has not updated in 7+ days" }), _jsx(Li, { children: "Item is significantly not as described" })] }), _jsx(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: "What to include:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsxs(Li, { children: ["Your order ID (e.g. ", _jsx(Code, { className: GC.code, children: "order-2-20260508-a1b2c3" }), ")"] }), _jsx(Li, { children: "Photos of the item and packaging" }), _jsx(Li, { children: "A clear timeline of events" })] }), _jsx(Text, { className: GC.textMuted, children: "Response SLA: 24\u201348 hours. You can have up to 2 active general tickets and 1 additional ticket per active order." })] })),
     },
     {
         Icon: Scale, title: "Dispute Escalation",
-        content: (_jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: GC.textMuted, children: ["If the seller does not respond to your return request within ", _jsx(Span, { weight: "bold", children: "3 days" }), ", LetItRip's support team steps in to mediate."] }), _jsxs(Text, { className: GC.textMuted, children: ["If mediation cannot resolve the dispute, LetItRip issues a ", _jsx(Span, { weight: "bold", children: "full platform-funded refund" }), " to the buyer. The seller's payout for that order is withheld."] }), _jsx(Alert, { variant: "info", children: "All dispute decisions are final. False dispute claims may result in account restrictions. Always provide accurate, photographic evidence when raising a dispute." })] })),
+        content: (_jsxs(Stack, { gap: "3", children: [_jsxs(Text, { className: GC.textMuted, children: ["If the seller does not respond to your return request within ", _jsx(Span, { weight: "bold", children: "3 days" }), ", LetItRip's support team steps in to mediate."] }), _jsxs(Text, { className: GC.textMuted, children: ["If mediation cannot resolve the dispute, LetItRip issues a ", _jsx(Span, { weight: "bold", children: "full platform-funded refund" }), " to the buyer. The seller's payout for that order is withheld."] }), _jsx(Alert, { variant: "info", children: "All dispute decisions are final. False dispute claims may result in account restrictions. Always provide accurate, photographic evidence when raising a dispute." })] })),
     },
 ];
 // ─── Component ────────────────────────────────────────────────────────────────
 export function BuyerOrdersGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: GC.pageHeaderGradient }, children: _jsx(PackageCheck, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Orders, Returns & Support" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "From placing an order to getting a refund \u2014 everything you need to know about managing your orders on LetItRip." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: GC.pageHeaderGradient }, children: _jsx(PackageCheck, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Orders, Returns & Support" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "From placing an order to getting a refund \u2014 everything you need to know about managing your orders on LetItRip." })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
 }

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

@@ -1,31 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ShoppingBag, ShoppingCart, CreditCard, Tag, CheckCircle, UserX } from "lucide-react";
-import { Div, Heading, Span, Text, Section, Alert } from "../../../ui";
+import { Alert, Div, Heading, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui";
 import { GC } from "../../_guide-cls";
 const SECTIONS = [
     {
         Icon: ShoppingBag, title: "Browsing & Search",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "Use the search bar at the top of any page to find items by keyword \u2014 e.g. \"Charizard Base Set\", \"Hot Wheels Redline\", or \"Beyblade Burst\". Combine keywords for best results." }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] mb-2", children: "Available filters:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "Category" }), " \u2014 Trading Cards, Action Figures, Diecast, Spinning Tops, Model Kits, Vintage & Rare"] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "Brand" }), " \u2014 Pok\u00E9mon Company, Bandai, Hot Wheels, Hasbro, Funko, and more"] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "Price range" }), " \u2014 set a minimum and maximum in rupees"] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "Condition" }), " \u2014 grades 1\u201310 (10 = Gem Mint, 1 = Poor)"] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", children: "Listing type" }), " \u2014 Standard / Auction / Pre-order"] })] }), _jsx(Text, { className: `${GC.textMuted} mt-3`, children: "Sort options: Relevance, Price (Low to High), Price (High to Low), Newest First. On mobile, tap the Filter icon to open the filter drawer." })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "Use the search bar at the top of any page to find items by keyword \u2014 e.g. \"Charizard Base Set\", \"Hot Wheels Redline\", or \"Beyblade Burst\". Combine keywords for best results." }), _jsx(Text, { className: "text-[var(--appkit-color-text)] mb-2", size: "sm", weight: "semibold", children: "Available filters:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Category" }), " \u2014 Trading Cards, Action Figures, Diecast, Spinning Tops, Model Kits, Vintage & Rare"] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Brand" }), " \u2014 Pok\u00E9mon Company, Bandai, Hot Wheels, Hasbro, Funko, and more"] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Price range" }), " \u2014 set a minimum and maximum in rupees"] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Condition" }), " \u2014 grades 1\u201310 (10 = Gem Mint, 1 = Poor)"] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", children: "Listing type" }), " \u2014 Standard / Auction / Pre-order"] })] }), _jsx(Text, { className: `${GC.textMuted} mt-3`, children: "Sort options: Relevance, Price (Low to High), Price (High to Low), Newest First. On mobile, tap the Filter icon to open the filter drawer." })] })),
     },
     {
         Icon: ShoppingBag, title: "Reading a Product Page",
-        content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Images" }), " \u2014 tap or click to zoom; swipe left/right to browse all photos."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Condition grade" }), " \u2014 rated 1\u201310: 10 = PSA 10 Gem Mint (flawless), 9 = Mint, 8 = Near Mint\u2013Mint, 7 = Near Mint, 5 = Heavily Played, 3 = Damaged, 1 = Poor."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Seller card" }), " \u2014 shows store name, rating, and total orders delivered. Click the store name to browse all their listings."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Reviews tab" }), " \u2014 verified buyer reviews with star ratings, photos, and seller responses."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Questions?" }), " \u2014 if listing details are unclear, open a support ticket and reference the product URL."] })] })),
+        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Images" }), " \u2014 tap or click to zoom; swipe left/right to browse all photos."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Condition grade" }), " \u2014 rated 1\u201310: 10 = PSA 10 Gem Mint (flawless), 9 = Mint, 8 = Near Mint\u2013Mint, 7 = Near Mint, 5 = Heavily Played, 3 = Damaged, 1 = Poor."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Seller card" }), " \u2014 shows store name, rating, and total orders delivered. Click the store name to browse all their listings."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Reviews tab" }), " \u2014 verified buyer reviews with star ratings, photos, and seller responses."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Questions?" }), " \u2014 if listing details are unclear, open a support ticket and reference the product URL."] })] })),
     },
     {
         Icon: ShoppingCart, title: "Cart",
-        content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Adding items" }), " \u2014 click \"Add to Cart\" on any standard product or pre-order. Auctions have a \"Place Bid\" flow instead."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Guest cart" }), " \u2014 saved in your browser (localStorage); cleared after 30 days of inactivity."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Logged-in cart" }), " \u2014 synced to your account via Firestore; persists across all your devices."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Item limit" }), " \u2014 up to 20 items per cart. Remove items before adding more."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Updating" }), " \u2014 use the quantity selector or click the trash icon to remove. Changes sync instantly."] })] })),
+        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Adding items" }), " \u2014 click \"Add to Cart\" on any standard product or pre-order. Auctions have a \"Place Bid\" flow instead."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Guest cart" }), " \u2014 saved in your browser (localStorage); cleared after 30 days of inactivity."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Logged-in cart" }), " \u2014 synced to your account via Firestore; persists across all your devices."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Item limit" }), " \u2014 up to 20 items per cart. Remove items before adding more."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Updating" }), " \u2014 use the quantity selector or click the trash icon to remove. Changes sync instantly."] })] })),
     },
     {
         Icon: CreditCard, title: "Checkout",
-        content: (_jsxs("ul", { className: GC.listMuted, children: [_jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Shipping address" }), " \u2014 enter or select a saved address. All fields required: full name, phone, address line, city, state, pin code."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Payment methods" }), " \u2014 UPI, credit/debit card (Visa, Mastercard, Rupay), net banking \u2014 all processed via Razorpay."] }), _jsxs("li", { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Secure checkout" }), " \u2014 LetItRip never stores your card details. All payment data is handled by Razorpay's PCI-DSS compliant gateway."] })] })),
+        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Shipping address" }), " \u2014 enter or select a saved address. All fields required: full name, phone, address line, city, state, pin code."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Payment methods" }), " \u2014 UPI, credit/debit card (Visa, Mastercard, Rupay), net banking \u2014 all processed via Razorpay."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Secure checkout" }), " \u2014 LetItRip never stores your card details. All payment data is handled by Razorpay's PCI-DSS compliant gateway."] })] })),
     },
     {
         Icon: Tag, title: "Coupons",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "Enter your coupon code at step 2 of checkout (Order Summary). The discount is applied immediately and shown in the total." }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text)] mb-2", children: "Why a coupon might not apply:" }), _jsxs("ul", { className: GC.listDiscMuted, children: [_jsx("li", { children: "Your order total is below the coupon's minimum purchase amount" }), _jsx("li", { children: "The coupon has expired or hasn't started yet" }), _jsx("li", { children: "Your cart contains items from categories excluded by the coupon" }), _jsx("li", { children: "The coupon is \"first order only\" but you've placed orders before" }), _jsx("li", { children: "You've already used this coupon the maximum allowed times" })] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "Enter your coupon code at step 2 of checkout (Order Summary). The discount is applied immediately and shown in the total." }), _jsx(Text, { className: "text-[var(--appkit-color-text)] mb-2", size: "sm", weight: "semibold", children: "Why a coupon might not apply:" }), _jsxs(Ul, { className: GC.listDiscMuted, children: [_jsx(Li, { children: "Your order total is below the coupon's minimum purchase amount" }), _jsx(Li, { children: "The coupon has expired or hasn't started yet" }), _jsx(Li, { children: "Your cart contains items from categories excluded by the coupon" }), _jsx(Li, { children: "The coupon is \"first order only\" but you've placed orders before" }), _jsx(Li, { children: "You've already used this coupon the maximum allowed times" })] })] })),
     },
     {
         Icon: CheckCircle, title: "Order Confirmation",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs("ul", { className: `${GC.listDiscMuted} mt-3`, children: [_jsx("li", { children: "An email confirmation to your registered address" }), _jsx("li", { children: "A WhatsApp message if you've added and verified your phone number" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs(Ul, { className: `${GC.listDiscMuted} mt-3`, children: [_jsx(Li, { children: "An email confirmation to your registered address" }), _jsx(Li, { children: "A WhatsApp message if you've added and verified your phone number" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
     },
     {
         Icon: UserX, title: "Guest Limitations",
@@ -34,5 +34,5 @@ const SECTIONS = [
 ];
 // ─── Component ────────────────────────────────────────────────────────────────
 export function BuyerShoppingGuideView() {
-    return (_jsxs(Div, { className: "space-y-8 pb-10 max-w-3xl mx-auto", children: [_jsxs(Section, { children: [_jsxs(Div, { className: "flex items-center gap-3 mb-2", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center", style: { background: GC.pageHeaderGradient }, children: _jsx(ShoppingBag, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-[var(--appkit-color-text-muted)] uppercase tracking-widest", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-[var(--appkit-color-text)] mb-2", children: "Shopping & Checkout" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Everything you need to know about finding, evaluating, and buying collectibles on LetItRip." })] }), SECTIONS.map(({ Icon, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", align: "center", justify: "center", rounded: "xl", style: { background: GC.pageHeaderGradient }, children: _jsx(ShoppingBag, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Shopping & Checkout" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Everything you need to know about finding, evaluating, and buying collectibles on LetItRip." })] }), SECTIONS.map(({ Icon, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
 }

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

@@ -1,7 +1,7 @@
 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 = "", }) {
-    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 4, className: "mb-3 font-semibold", children: labels.title })), isLoading
+    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 4, className: "mb-3", weight: "semibold", children: labels.title })), isLoading
                 ? (renderLoading?.() ?? null)
                 : hasItems
                     ? renderList()

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Div, Heading, Row, Span } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
-const CLS_DOT_ON = "bg-emerald-500";
+const CLS_DOT_ON = "bg-success-surface";
 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: 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 ? CLS_DOT_ON : "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: "border-b border-neutral-200 dark:border-neutral-700 mb-3", padding: "b-sm", children: [_jsxs(Row, { gap: "xs", children: [labels.title && _jsx(Heading, { level: 4, children: labels.title }), _jsx(Span, { className: `w-2 h-2 ${isConnected ? CLS_DOT_ON : "bg-zinc-400"}`, rounded: "full", "aria-label": isConnected ? labels.connected : labels.disconnected })] }), isLoading && (renderLoadingIndicator?.() ?? null)] }), error ?? null, renderMessages(), renderInput()] }));
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Span } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { Div, Heading, Span, Stack } from "../../../ui";
 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 ${THEME_CONSTANTS.spacing.gap.xs}`, children: [renderMobileBack?.(), renderChatWindow?.()] })) : (_jsx(Div, { className: "hidden md:flex items-center justify-center text-zinc-400 dark:text-zinc-400 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, { layout: "grid", gap: "4", className: `grid-cols-1 md:grid-cols-[280px_1fr] xl:grid-cols-[320px_1fr] 2xl:grid-cols-[360px_1fr] 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", weight: "semibold", children: labels.title })), renderChatList?.()] }), chatId ? (_jsxs(Stack, { gap: "xs", children: [renderMobileBack?.(), renderChatWindow?.()] })) : (
+            // audit-variant-ok: empty-state — hidden md:flex breakpoint + dashed border + text-zinc-400 composition
+            _jsx(Div, { className: "hidden md:flex items-center justify-center text-zinc-400 dark:text-zinc-400 border border-dashed border-neutral-200 dark:border-neutral-700", rounded: "xl", children: renderEmptyState?.() ?? (_jsx(Span, { children: labels.selectRoom ?? "Select a conversation" })) }))] }));
 }