@mohasinac/appkit 3.3.5 → 3.4.0

package/dist/features/shell/QuickFormDrawer.js

@@ -121,7 +121,7 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed inset-y-0 right-0 flex flex-col bg-[var(--appkit-color-surface)] shadow-2xl w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: "fixed inset-y-0 right-0 bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
                                     return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));

package/dist/features/shell/StepForm.js

@@ -36,7 +36,7 @@ export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, })
 }
 export function StepForm({ steps, values, onChange, onComplete, completeLabel = "Publish Now", isLoading = false, formId, currentStep, onStepChange, hideActions = false, stepErrors, }) {
     const { showToast } = useToast();
-    const [fieldErrors, setFieldErrors] = useState({});
+    const [fieldErrors, _setFieldErrors] = useState({});
     const [stepError, setStepError] = useState(null);
     // Persist step to localStorage if formId provided
     useEffect(() => {

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -13,9 +13,8 @@ const CLS_RATING_BADGE = "absolute top-2 right-2 flex items-center gap-1 rounded
 export function InteractiveStoreCard({ store, href, selectable, isSelected = false, onSelect, labels = {}, className = "", }) {
     const initial = store.storeName[0]?.toUpperCase() ?? "S";
     const [logoBroken, setLogoBroken] = useState(false);
-    const [bannerBroken, setBannerBroken] = useState(false);
     const hasLogo = Boolean(store.storeLogoURL) && !logoBroken;
-    const hasBanner = Boolean(store.storeBannerURL) && !bannerBroken;
+    const hasBanner = Boolean(store.storeBannerURL);
     const longPress = useLongPress(() => onSelect?.(store.id, !isSelected));
     return (_jsxs(Div, { className: [
             "group relative flex flex-col h-full overflow-hidden rounded-xl border bg-[var(--appkit-color-surface)] shadow-sm transition-shadow hover:shadow-lg",

package/dist/features/stores/components/StoreAboutView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
-import { Div, Heading, RichText, Stack, Text } from "../../../ui";
+import { Anchor, Div, Heading, RichText, Stack, Text } from "../../../ui";
 const CLS_LABEL = "font-medium text-neutral-700 min-w-[120px]";
 const CLS_WARN_BOX = "bg-warning-surface border border-warning rounded-lg p-4";
 const CLS_WARN_TITLE = "text-warning font-medium";
@@ -14,5 +14,5 @@ export function StoreAboutView({ store, labels = {}, renderSocialLinks, renderSt
             month: "long",
         })
         : null;
-    return (_jsxs(Stack, { className: `${className}`, gap: "lg", padding: "y-lg", children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-2", size: "lg", weight: "semibold", children: labels.aboutTitle ?? "About" }), _jsx(RichText, { html: normalizeRichTextHtml(store.bio) })] })), renderStats?.(store), _jsxs(Stack, { textSize: "sm", gap: "3", children: [store.location && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "", children: store.location })] })), joinDate && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "", children: joinDate })] })), store.website && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.websiteLabel ?? "Website" }), _jsx("a", { href: store.website, target: "_blank", rel: "noopener noreferrer", className: "text-primary hover:underline break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy) })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy) })] })), store.isVacationMode && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: CLS_WARN_BODY, children: store.vacationMessage }))] }))] }));
+    return (_jsxs(Stack, { className: `${className}`, gap: "lg", padding: "y-lg", children: [store.bio && (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-2", size: "lg", weight: "semibold", children: labels.aboutTitle ?? "About" }), _jsx(RichText, { html: normalizeRichTextHtml(store.bio) })] })), renderStats?.(store), _jsxs(Stack, { textSize: "sm", gap: "3", children: [store.location && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.locationLabel ?? "Location" }), _jsx(Text, { className: "", children: store.location })] })), joinDate && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.memberSinceLabel ?? "Member since" }), _jsx(Text, { className: "", children: joinDate })] })), store.website && (_jsxs(Row, { gap: "sm", children: [_jsx(Text, { className: CLS_LABEL, children: labels.websiteLabel ?? "Website" }), _jsx(Anchor, { href: store.website, tone: "none", underline: "hover", className: "text-primary break-all", children: store.website })] }))] }), store.socialLinks && renderSocialLinks?.(store.socialLinks), store.returnPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.returnPolicyLabel ?? "Return Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.returnPolicy) })] })), store.shippingPolicy && (_jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", weight: "semibold", children: labels.shippingPolicyLabel ?? "Shipping Policy" }), _jsx(RichText, { html: normalizeRichTextHtml(store.shippingPolicy) })] })), store.isVacationMode && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: labels.vacationModeLabel ?? "This store is on vacation mode" }), store.vacationMessage && (_jsx(Text, { className: CLS_WARN_BODY, children: store.vacationMessage }))] }))] }));
 }

package/dist/features/stores/components/StoreCapabilitiesGuideView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, TextLink, Th, Thead, Tr, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -97,5 +97,5 @@ function MultipleStoresSection() {
     return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["By default, each owner account can only create one store. The", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "multiple_stores" }), "capability allows the same owner to create and manage additional stores under the same account."] }), _jsx(Alert, { variant: "info", title: "Each store is independent", children: "Multiple stores share the same owner account (Firebase Auth UID) but are separate Firestore documents with their own listings, orders, payouts, and settings. Platform fees apply per-store. Admin grants this capability after reviewing your business justification." })] }));
 }
 export function StoreCapabilitiesGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Capabilities Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Per-store feature flags \u2014 what they unlock, defaults, and how to request access." })] }), _jsx(GuideSection, { title: "1. What are capabilities?", children: _jsx(WhatAreCapabilitiesSection, {}) }), _jsx(GuideSection, { title: "2. Capability table", children: _jsx(CapabilityTable, {}) }), _jsx(GuideSection, { title: "3. How to unlock locked features", children: _jsx(LockedFeatureGuide, {}) }), _jsx(GuideSection, { title: "4. Verified seller badge", children: _jsx(VerifiedSellerSection, {}) }), _jsx(GuideSection, { title: "5. Multiple stores", children: _jsx(MultipleStoresSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Capabilities Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Per-store feature flags \u2014 what they unlock, defaults, and how to request access." })] }), _jsx(GuideSection, { title: "1. What are capabilities?", children: _jsx(WhatAreCapabilitiesSection, {}) }), _jsx(GuideSection, { title: "2. Capability table", children: _jsx(CapabilityTable, {}) }), _jsx(GuideSection, { title: "3. How to unlock locked features", children: _jsx(LockedFeatureGuide, {}) }), _jsx(GuideSection, { title: "4. Verified seller badge", children: _jsx(VerifiedSellerSection, {}) }), _jsx(GuideSection, { title: "5. Multiple stores", children: _jsx(MultipleStoresSection, {}) })] }));
 }

package/dist/features/stores/components/StoreFinanceGuideView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, Ul } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, TextLink, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -76,5 +76,5 @@ function TaxesSection() {
     return (_jsxs(Div, { className: SECTION_BODY, children: [_jsx(Alert, { variant: "warning", title: "Seller tax responsibility", children: "LetItRip is a marketplace platform. Each seller operates independently and is individually responsible for applicable taxes on their sales, including GST where required by Indian tax law. LetItRip does not collect or remit GST on your behalf. Consult a qualified tax advisor to understand your obligations based on your turnover and registration status." }), _jsx(Text, { className: "leading-relaxed", children: "TCS (Tax Collected at Source) deducted by LetItRip under Section 194-O of the Income Tax Act will be reflected in your annual Form 26AS. Your gross payouts (before TCS) are visible in the Finance \u2192 Payouts dashboard." })] }));
 }
 export function StoreFinanceGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Finance Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Payouts, commissions, coupons, and promoted listings." })] }), _jsx(GuideSection, { title: "1. Commission structure", children: _jsx(CommissionSection, {}) }), _jsx(GuideSection, { title: "2. Payout cycle", children: _jsx(PayoutCycleSection, {}) }), _jsx(GuideSection, { title: "3. Coupons", children: _jsx(CouponsSection, {}) }), _jsx(GuideSection, { title: "4. Promoted & featured listings", children: _jsx(PromotedSection, {}) }), _jsx(GuideSection, { title: "5. Taxes", children: _jsx(TaxesSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Finance Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Payouts, commissions, coupons, and promoted listings." })] }), _jsx(GuideSection, { title: "1. Commission structure", children: _jsx(CommissionSection, {}) }), _jsx(GuideSection, { title: "2. Payout cycle", children: _jsx(PayoutCycleSection, {}) }), _jsx(GuideSection, { title: "3. Coupons", children: _jsx(CouponsSection, {}) }), _jsx(GuideSection, { title: "4. Promoted & featured listings", children: _jsx(PromotedSection, {}) }), _jsx(GuideSection, { title: "5. Taxes", children: _jsx(TaxesSection, {}) })] }));
 }

package/dist/features/stores/components/StoreGuideHubView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Package, ShoppingBag, Wallet, Settings, Shield, Headphones, CheckCircle2, Circle, BookOpen, } from "lucide-react";
-import { Div, Heading, Progress, Row, Section, Stack, Text } from "../../../ui";
+import { Div, Heading, Progress, Row, Section, Stack, Text, TextLink } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const CLS_CHECK_ICON = "w-5 h-5 flex-shrink-0 text-emerald-500";
 const CLS_SUCCESS_BOX = "rounded-xl border border-emerald-200 bg-emerald-50 dark:bg-emerald-950/30 dark:border-emerald-800 px-5 py-4";
@@ -77,7 +77,7 @@ export function StoreGuideHubView({ store }) {
     const storeName = store?.storeName ?? "Your Store";
     const steps = buildChecklist(store);
     const completedCount = steps.filter((s) => s.done).length;
-    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Seller Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: storeName }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { layout: "grid", gap: "8", className: "grid-cols-1 lg:grid-cols-3", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 sm:grid-cols-2", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Getting started" }), _jsxs(Div, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsxs(Div, { className: "px-[1.25rem] pt-[1.25rem] border-b border-[var(--appkit-color-border)]", padding: "b-md", children: [_jsxs(Row, { className: "mb-2", align: "center", justify: "between", children: [_jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Progress, { value: completedCount, max: steps.length, size: "sm", variant: "gradient" })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)]", children: steps.map(({ label, done, href }) => (_jsxs("a", { href: done ? "#" : href, "aria-disabled": done, className: `flex items-center gap-3 px-5 py-3.5 text-sm transition-colors ${done
+    return (_jsxs(Stack, { gap: "xl", padding: "b-2xl", children: [_jsx(Section, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "2xl", shadow: "sm", children: _jsxs(Div, { paddingX: "x-md-xl", paddingY: "y-xl", className: "[background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_60%,var(--appkit-color-secondary-400)_100%)]", children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10", surface: "default", align: "center", justify: "center", rounded: "xl", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { color: "inverse", className: "/80 tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Seller Guide" })] }), _jsx(Heading, { color: "inverse", level: 1, className: "mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: storeName }), _jsx(Text, { color: "inverse", className: "/80", size: "base", children: "Everything you need to know about selling on LetItRip." })] }) }), _jsxs(Div, { layout: "grid", gap: "8", className: "grid-cols-1 lg:grid-cols-3", children: [_jsxs(Stack, { className: "lg:col-span-2", gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Guides" }), _jsx(Div, { layout: "grid", gap: "4", className: "grid-cols-1 sm:grid-cols-2", children: GUIDE_CARDS.map(({ Icon, title, description, href }) => (_jsxs(TextLink, { variant: "bare", href: href, rounded: "xl", layout: "flex-col", gap: "md", className: "group border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-9 h-9 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", weight: "semibold", children: title })] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: description }), _jsx(Text, { className: "text-[var(--appkit-color-primary)] mt-auto", size: "xs", weight: "medium", children: "Read guide \u2192" })] }, title))) })] }), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, className: "text-[var(--appkit-color-text)]", size: "lg", weight: "semibold", children: "Getting started" }), _jsxs(Div, { overflow: "hidden", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", rounded: "xl", children: [_jsxs(Div, { className: "px-[1.25rem] pt-[1.25rem] border-b border-[var(--appkit-color-border)]", padding: "b-md", children: [_jsxs(Row, { className: "mb-2", align: "center", justify: "between", children: [_jsxs(Text, { className: "text-[var(--appkit-color-text)]", size: "sm", weight: "medium", children: [completedCount, " of ", steps.length, " complete"] }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [Math.round((completedCount / steps.length) * 100), "%"] })] }), _jsx(Progress, { value: completedCount, max: steps.length, size: "sm", variant: "gradient" })] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)]", children: steps.map(({ label, done, href }) => (_jsxs(TextLink, { variant: "bare", href: done ? "#" : href, "aria-disabled": done, layout: "flex", align: "center", gap: "sm", paddingX: "lg", size: "sm", className: `py-3.5 transition-colors ${done
                                                 ? "cursor-default"
                                                 : "hover:bg-[var(--appkit-color-border)]/30"}`, children: [done ? (_jsx(CheckCircle2, { className: CLS_CHECK_ICON })) : (_jsx(Circle, { className: "w-5 h-5 flex-shrink-0 text-[var(--appkit-color-text-muted)]" })), _jsx(Text, { className: `leading-snug ${done
                                                         ? "line-through text-[var(--appkit-color-text-muted)]"

package/dist/features/stores/components/StoreListingsGuideView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Div, Heading, Li, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
+import { Alert, Div, Heading, Li, Section, Span, Stack, Table, Tbody, Td, Text, TextLink, Th, Thead, Tr, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -148,5 +148,5 @@ function CommonMistakes() {
     return (_jsx(Alert, { variant: "warning", title: "Common mistakes to avoid", children: _jsx(Ul, { className: "mt-2", spacing: "comfortable", indent: "md", children: MISTAKES.map((m) => (_jsx(Li, { textSize: "sm", className: LIST_DISC, children: m }, m))) }) }));
 }
 export function StoreListingsGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Listings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Products, auctions, and pre-orders \u2014 create and manage your listings." })] }), _jsx(GuideSection, { title: "1. Three listing types", children: _jsx(ListingTypesTable, {}) }), _jsx(GuideSection, { title: "2. Standard product walkthrough", children: _jsx(StandardWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Auction walkthrough", children: _jsx(AuctionWalkthrough, {}) }), _jsx(GuideSection, { title: "4. Pre-order walkthrough", children: _jsx(PreorderWalkthrough, {}) }), _jsx(GuideSection, { title: "5. Product status lifecycle", children: _jsx(StatusLifecycle, {}) }), _jsx(GuideSection, { title: "6. Media guide", children: _jsx(MediaGuide, {}) }), _jsx(GuideSection, { title: "7. Common mistakes", children: _jsx(CommonMistakes, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Listings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Products, auctions, and pre-orders \u2014 create and manage your listings." })] }), _jsx(GuideSection, { title: "1. Three listing types", children: _jsx(ListingTypesTable, {}) }), _jsx(GuideSection, { title: "2. Standard product walkthrough", children: _jsx(StandardWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Auction walkthrough", children: _jsx(AuctionWalkthrough, {}) }), _jsx(GuideSection, { title: "4. Pre-order walkthrough", children: _jsx(PreorderWalkthrough, {}) }), _jsx(GuideSection, { title: "5. Product status lifecycle", children: _jsx(StatusLifecycle, {}) }), _jsx(GuideSection, { title: "6. Media guide", children: _jsx(MediaGuide, {}) }), _jsx(GuideSection, { title: "7. Common mistakes", children: _jsx(CommonMistakes, {}) })] }));
 }

package/dist/features/stores/components/StoreNavTabs.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Div } from "../../../ui";
+import { Div, TextLink } from "../../../ui";
 export function StoreNavTabs({ tabs, activeValue, onTabChange, renderTabBar, className = "", }) {
     const handleChange = (v) => onTabChange?.(v);
     if (renderTabBar) {
         return _jsx(_Fragment, { children: renderTabBar(tabs, activeValue, handleChange) });
     }
-    return (_jsx(Div, { layout: "flex", gap: "2", role: "tablist", border: "bottom", className: `overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx("a", { href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
+    return (_jsx(Div, { layout: "flex", gap: "2", role: "tablist", border: "bottom", className: `overflow-x-auto ${className}`, children: tabs.map((tab) => tab.href ? (_jsx(TextLink, { variant: "bare", href: tab.href, role: "tab", "aria-selected": activeValue === tab.value, paddingX: "md", paddingY: "xs", size: "sm", weight: "medium", className: `whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"
                 : "border-transparent text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)] hover:text-neutral-800 hover:text-[var(--appkit-color-text-muted)]"}`, children: tab.label }, tab.value)) : (_jsx("button", { type: "button", role: "tab", "aria-selected": activeValue === tab.value, onClick: () => handleChange(tab.value), className: `px-4 py-2 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors ${activeValue === tab.value
                 ? "border-primary text-primary"

package/dist/features/stores/components/StoreOrdersGuideView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { Accordion, Alert, Code, Div, Heading, Li, Ol, Row, Section, Span, Stack, Table, Tbody, Td, Text, Th, Thead, Tr, Ul } from "../../../ui";
+import { Accordion, Alert, Code, Div, Heading, Li, Ol, Row, Section, Span, Stack, Table, Tbody, Td, Text, TextLink, Th, Thead, Tr, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -118,5 +118,5 @@ function CommonFAQs() {
     return (_jsx(Stack, { gap: "3", children: FAQS.map(({ q, a }) => (_jsx(Accordion, { title: q, children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: a }) }, q))) }));
 }
 export function StoreOrdersGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Orders & Fulfilment Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Processing orders, shipping, cancellations, returns, and auction orders." })] }), _jsx(GuideSection, { title: "1. Order lifecycle", children: _jsx(OrderLifecycle, {}) }), _jsx(GuideSection, { title: "2. Processing an order", children: _jsx(ProcessingWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Supported carriers", children: _jsx(CarriersSection, {}) }), _jsx(GuideSection, { title: "4. Cancellations", children: _jsx(CancellationsSection, {}) }), _jsx(GuideSection, { title: "5. Return requests", children: _jsx(ReturnsSection, {}) }), _jsx(GuideSection, { title: "6. Auction orders", children: _jsx(AuctionOrdersSection, {}) }), _jsx(GuideSection, { title: "7. Common questions", children: _jsx(CommonFAQs, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Orders & Fulfilment Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Processing orders, shipping, cancellations, returns, and auction orders." })] }), _jsx(GuideSection, { title: "1. Order lifecycle", children: _jsx(OrderLifecycle, {}) }), _jsx(GuideSection, { title: "2. Processing an order", children: _jsx(ProcessingWalkthrough, {}) }), _jsx(GuideSection, { title: "3. Supported carriers", children: _jsx(CarriersSection, {}) }), _jsx(GuideSection, { title: "4. Cancellations", children: _jsx(CancellationsSection, {}) }), _jsx(GuideSection, { title: "5. Return requests", children: _jsx(ReturnsSection, {}) }), _jsx(GuideSection, { title: "6. Auction orders", children: _jsx(AuctionOrdersSection, {}) }), _jsx(GuideSection, { title: "7. Common questions", children: _jsx(CommonFAQs, {}) })] }));
 }

package/dist/features/stores/components/StoreSettingsGuideView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { ArrowLeft } from "lucide-react";
-import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, Ul } from "../../../ui";
+import { Alert, Code, Div, Heading, Li, Section, Span, Stack, Text, TextLink, Ul } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
@@ -28,7 +28,7 @@ function VacationModeSection() {
 }
 // -- Section 5: WhatsApp integration ------------------------------------------
 function WhatsAppSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["The WhatsApp integration allows your customers to contact you via WhatsApp from your store profile and lets you sync your product catalog to your WhatsApp Business Catalog (requires the", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_catalog_sync" }), " capability)."] }), _jsxs(Text, { className: "leading-relaxed", children: ["Full settings and the catalog sync toggle are at", " ", _jsx("a", { href: String(ROUTES.STORE.WHATSAPP), className: "underline text-[var(--appkit-color-primary)] hover:opacity-80", children: "Settings \u2192 WhatsApp" }), ". See the WhatsApp settings page for step-by-step setup instructions."] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Text, { className: "leading-relaxed", children: ["The WhatsApp integration allows your customers to contact you via WhatsApp from your store profile and lets you sync your product catalog to your WhatsApp Business Catalog (requires the", _jsx(Code, { className: "mx-1", size: "xs", padding: "xs", rounded: "default", surface: "subtle", children: "whatsapp_catalog_sync" }), " capability)."] }), _jsxs(Text, { className: "leading-relaxed", children: ["Full settings and the catalog sync toggle are at", " ", _jsx(TextLink, { variant: "bare", href: String(ROUTES.STORE.WHATSAPP), className: "underline text-[var(--appkit-color-primary)] hover:opacity-80", children: "Settings \u2192 WhatsApp" }), ". See the WhatsApp settings page for step-by-step setup instructions."] })] }));
 }
 // -- Section 6: Visibility states ---------------------------------------------
 function VisibilityStatesSection() {
@@ -53,5 +53,5 @@ function VisibilityStatesSection() {
     return (_jsx(Stack, { gap: "3", children: STATES.map(({ state, note }) => (_jsxs(Row, { textSize: "sm", gap: "3", children: [_jsx(Text, { className: "shrink-0 w-32 text-[var(--appkit-color-text)]", weight: "semibold", children: state }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", children: note })] }, state))) }));
 }
 export function StoreSettingsGuideView(_props) {
-    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs("a", { href: String(ROUTES.STORE.GUIDE), className: "inline-flex items-center gap-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Store profile, shipping, returns, vacation mode, WhatsApp, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. WhatsApp integration", children: _jsx(WhatsAppSection, {}) }), _jsx(GuideSection, { title: "6. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "b-2xl", children: [_jsxs(TextLink, { variant: "bare", href: String(ROUTES.STORE.GUIDE), size: "sm", layout: "inline-flex", align: "center", gap: "sm", className: "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to Seller Guide"] }), _jsxs(Div, { children: [_jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)]", size: "2xl", weight: "bold", children: "Settings Guide" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Store profile, shipping, returns, vacation mode, WhatsApp, and visibility." })] }), _jsx(GuideSection, { title: "1. Store profile", children: _jsx(StoreProfileSection, {}) }), _jsx(GuideSection, { title: "2. Shipping configuration", children: _jsx(ShippingSection, {}) }), _jsx(GuideSection, { title: "3. Return policy", children: _jsx(ReturnPolicySection, {}) }), _jsx(GuideSection, { title: "4. Vacation mode", children: _jsx(VacationModeSection, {}) }), _jsx(GuideSection, { title: "5. WhatsApp integration", children: _jsx(WhatsAppSection, {}) }), _jsx(GuideSection, { title: "6. Visibility states", children: _jsx(VisibilityStatesSection, {}) })] }));
 }

package/dist/features/wishlist/components/WishlistView.js

@@ -1,16 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { Div, Heading, Row, Text } from "../../../ui";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useWishlist } from "../hooks/useWishlist";
-const WISHLIST_SORT_OPTIONS = [
-    { value: sortBy("addedAt", "DESC"), label: "Newest first" },
-    { value: "addedAt", label: "Oldest first" },
-    { value: sortBy("price", "DESC"), label: "Price: high → low" },
-    { value: sortBy("price", "ASC"), label: "Price: low → high" },
-];
 export function WishlistView({ userId, initialData, labels = {}, renderTabs, renderSearch, renderSort, renderViewToggle, renderProducts, renderTabPlaceholder, renderBulkActions, renderPagination, className = "", }) {
     const table = useUrlTable({ defaults: { sort: "-addedAt", view: "card" } });
     const [selectedIds, setSelectedIds] = React.useState([]);

package/dist/index.d.ts

@@ -911,6 +911,7 @@ export { FeesView } from "./features/about/index";
 export { HelpPageView } from "./features/about/index";
 export { HowAuctionsWorkView } from "./features/about/index";
 export { HowCheckoutWorksView } from "./features/about/index";
+export { HowEmiWorksView } from "./features/about/index";
 export { HowOffersWorkView } from "./features/about/index";
 export { HowOrdersWorkView } from "./features/about/index";
 export { HowPayoutsWorkView } from "./features/about/index";
@@ -929,6 +930,7 @@ export type { FeesViewProps } from "./features/about/index";
 export type { HelpPageViewProps } from "./features/about/index";
 export type { HowAuctionsWorkViewProps } from "./features/about/index";
 export type { HowCheckoutWorksViewProps } from "./features/about/index";
+export type { HowEmiWorksViewProps } from "./features/about/index";
 export type { HowOffersWorkViewProps } from "./features/about/index";
 export type { HowOrdersWorkViewProps } from "./features/about/index";
 export type { HowPayoutsWorkViewProps } from "./features/about/index";

package/dist/index.js

@@ -1888,6 +1888,9 @@ export { HowAuctionsWorkView } from "./features/about/index";
 // HowCheckoutWorksView - Component for how checkout works view.
 export { HowCheckoutWorksView } from "./features/about/index";
 // [CLIENT-SSR]-Runs in both SSR and browser â€" React component or hook that does not depend on browser-only APIs.
+// HowEmiWorksView - Component for how EMI works view.
+export { HowEmiWorksView } from "./features/about/index";
+// [CLIENT-SSR]-Runs in both SSR and browser â€" React component or hook that does not depend on browser-only APIs.
 // HowOffersWorkView - Component for how offers work view.
 export { HowOffersWorkView } from "./features/about/index";
 // [CLIENT-SSR]-Runs in both SSR and browser â€" React component or hook that does not depend on browser-only APIs.

package/dist/next/ErrorBoundary.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
 import { Button } from "../ui/components/Button";
-import { Div } from "../ui/components/Div";
+import { Stack } from "../ui/components/Layout";
 import { Heading, Text } from "../ui/components/Typography";
 function DefaultFallback({ error, onReset, }) {
-    return (_jsxs(Div, { className: "flex min-h-[40vh] flex-col items-center justify-center gap-4 rounded-xl border border-zinc-200 bg-[var(--appkit-color-surface)] p-6 text-center border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", "data-section": "errorboundary-div-445", children: [_jsx(Heading, { level: 2, children: "Something went wrong" }), _jsx(Text, { variant: "secondary", children: "An unexpected error occurred. Please try again." }), process.env.NODE_ENV === "development" && error ? (_jsx("pre", { className: "max-w-full overflow-auto rounded-md bg-[var(--appkit-color-surface)] p-3 text-left text-xs bg-[var(--appkit-color-surface-elevated)]", children: error.message })) : null, _jsx(Button, { type: "button", onClick: onReset, children: "Try again" })] }));
+    return (_jsxs(Stack, { centered: true, gap: "md", surface: "default", padding: "lg", rounded: "xl", border: "default", className: "min-h-[40vh] text-center", "data-section": "errorboundary-div-445", children: [_jsx(Heading, { level: 2, children: "Something went wrong" }), _jsx(Text, { variant: "secondary", children: "An unexpected error occurred. Please try again." }), process.env.NODE_ENV === "development" && error ? (_jsx("pre", { className: "max-w-full overflow-auto rounded-md bg-[var(--appkit-color-surface)] p-3 text-left text-xs bg-[var(--appkit-color-surface-elevated)]", children: error.message })) : null, _jsx(Button, { type: "button", onClick: onReset, children: "Try again" })] }));
 }
 export class ErrorBoundary extends Component {
     constructor(props) {

package/dist/next/routing/route-map.d.ts

@@ -72,6 +72,7 @@ export declare const DEFAULT_ROUTE_MAP: {
         readonly HOW_PRE_ORDERS_WORK: "/how-pre-orders-work";
         readonly HOW_OFFERS_WORK: "/how-offers-work";
         readonly HOW_CHECKOUT_WORKS: "/how-checkout-works";
+        readonly HOW_EMI_WORKS: "/how-emi-works";
         readonly HOW_ORDERS_WORK: "/how-orders-work";
         readonly HOW_REVIEWS_WORK: "/how-reviews-work";
         readonly HOW_PAYOUTS_WORK: "/how-payouts-work";
@@ -421,6 +422,7 @@ export declare const ROUTES: {
         readonly HOW_PRE_ORDERS_WORK: "/how-pre-orders-work";
         readonly HOW_OFFERS_WORK: "/how-offers-work";
         readonly HOW_CHECKOUT_WORKS: "/how-checkout-works";
+        readonly HOW_EMI_WORKS: "/how-emi-works";
         readonly HOW_ORDERS_WORK: "/how-orders-work";
         readonly HOW_REVIEWS_WORK: "/how-reviews-work";
         readonly HOW_PAYOUTS_WORK: "/how-payouts-work";

package/dist/next/routing/route-map.js

@@ -60,6 +60,7 @@ export const DEFAULT_ROUTE_MAP = {
         HOW_PRE_ORDERS_WORK: "/how-pre-orders-work",
         HOW_OFFERS_WORK: "/how-offers-work",
         HOW_CHECKOUT_WORKS: "/how-checkout-works",
+        HOW_EMI_WORKS: "/how-emi-works",
         HOW_ORDERS_WORK: "/how-orders-work",
         HOW_REVIEWS_WORK: "/how-reviews-work",
         HOW_PAYOUTS_WORK: "/how-payouts-work",

package/dist/seed/factories/product.factory.js

@@ -3,38 +3,6 @@ import { seedExtMedia } from "../_helpers/media";
 import { getSeedLocale, getDefaultCurrency, pick, irand, } from "../seed-market-config";
 let _seq = 1;
 // --- Realistic data pools (from seed locale config) ---------------------------
-const PRODUCT_NAMES = [
-    "Handloom Cotton Saree",
-    "Silver Oxidised Jhumkas",
-    "Brass Pooja Diya Set",
-    "Khadi Kurta & Pyjama Set",
-    "Terracotta Flower Vase",
-    "Sandalwood Incense Sticks",
-    "Batik Print Salwar Suit",
-    "Copper Water Bottle",
-    "Warli Art Wall Frame",
-    "Clay Tea Kadai Set",
-    "Jute Laptop Bag",
-    "Madhubani Painting Print",
-    "Organic Tulsi Green Tea",
-    "Kantha Embroidered Cushion",
-    "Brass Dancing Ganesha Figurine",
-    "Block Print Bedsheet Set",
-    "Bamboo Cutlery Kit",
-    "Dhokra Metal Elephant",
-    "Rajasthani Mojari Jutti",
-    "Coconut Shell Bowl Set",
-];
-const CATEGORIES = [
-    "clothing",
-    "jewellery",
-    "home-decor",
-    "food-beverages",
-    "art-crafts",
-    "wellness",
-    "accessories",
-    "kitchenware",
-];
 const TAGS_POOL = [
     ["handmade", "artisan"],
     ["featured", "new-arrival"],

package/dist/seed/faq-seed-data.js

@@ -484,22 +484,41 @@ export const faqSeedData = [
     {
         id: "faq-payment-methods",
         question: "What payment methods are accepted?",
-        answer: html(`<p>LetItRip accepts UPI (GPay, PhonePe, Paytm), credit/debit cards, net banking, and wallets via Razorpay. All payments are processed through secure escrow — the seller only receives funds after you confirm delivery.</p>`),
+        answer: html(`<p>LetItRip's default payment method is <strong>Manual UPI / Bank Transfer</strong> — you pay directly and submit your payment reference, which the seller or LetItRip confirms before shipping. Where enabled, you can also pay instantly via <strong>Razorpay</strong> (cards, UPI, net banking), choose <strong>Cash on Delivery</strong> (a small deposit online plus cash on arrival), or spread the cost with <strong>EMI</strong> on eligible orders. Sellers only receive payout funds after you confirm delivery (or after the dispute window closes).</p>`),
         category: "orders_payment",
         showOnHomepage: false,
         showInFooter: true,
         isPinned: false,
         order: 25,
         priority: 8,
-        tags: ["payment", "upi", "razorpay", "escrow"],
-        relatedFAQs: ["faq-what-is-escrow"],
+        tags: ["payment", "upi", "razorpay", "cod", "emi"],
+        relatedFAQs: ["faq-what-is-escrow", "faq-emi-installments"],
         stats: makeStats(5100, 255),
-        seo: { slug: "faq-payment-methods", metaTitle: "Payment Methods on LetItRip", metaDescription: "UPI, cards, net banking — all payment options on LetItRip." },
+        seo: { slug: "faq-payment-methods", metaTitle: "Payment Methods on LetItRip", metaDescription: "Manual UPI, Razorpay, Cash on Delivery, and EMI — all payment options on LetItRip." },
         isActive: true,
         createdBy: "user-admin-letitrip",
         createdAt: daysAgo(110),
         updatedAt: daysAgo(6),
     },
+    {
+        id: "faq-emi-installments",
+        question: "Can I pay in installments (EMI)?",
+        answer: html(`<p>Yes — on eligible orders. If the seller has EMI enabled and your order with them meets the minimum order value, "Pay in EMI" appears as a payment option at checkout. Choose a tenure of 2–6 months, pay a small token amount upfront, and the remaining balance plus a small monthly surcharge is billed automatically in equal installments each month. Your order ships as soon as the token payment is confirmed — you don't wait for the full amount to be paid.</p>`),
+        category: "orders_payment",
+        showOnHomepage: false,
+        showInFooter: false,
+        isPinned: false,
+        order: 56,
+        priority: 6,
+        tags: ["emi", "installments", "payment"],
+        relatedFAQs: ["faq-payment-methods"],
+        stats: makeStats(1400, 70),
+        seo: { slug: "faq-emi-installments", metaTitle: "Pay in EMI on LetItRip", metaDescription: "How EMI installment payments work for eligible orders on LetItRip." },
+        isActive: true,
+        createdBy: "user-admin-letitrip",
+        createdAt: daysAgo(20),
+        updatedAt: daysAgo(2),
+    },
     {
         id: "faq-coupons-and-discounts",
         question: "How do I use coupons and discount codes?",