npm - @mohasinac/appkit - Versions diffs - 2.8.1 → 2.8.3 - Mend

@mohasinac/appkit 2.8.1 → 2.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/dist/features/homepage/components/HomepageSkeleton.js CHANGED Viewed

@@ -1,6 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Div, Grid, Row, Section, Stack } from "../../../ui";
+const __P = {
+    p8: "p-8",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 /** Full-page skeleton shown while homepage data loads. */
 export function HomepageSkeleton() {
     const { skeleton, flex, themed } = THEME_CONSTANTS;
@@ -9,5 +15,5 @@ export function HomepageSkeleton() {
     const trustCardH = "h-[clamp(120px,18vh,170px)]";
     const categoryTileH = "h-[clamp(112px,16vh,160px)]";
     const newsletterH = "h-[clamp(220px,28vh,320px)]";
-    return (_jsxs(Div, { className: "w-full overflow-hidden", children: [_jsx(Div, { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx(Div, { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-52` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-56` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Div, { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
+    return (_jsxs(Div, { className: `w-full ${__O.hidden}`, children: [_jsx(Div, { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `${__P.p8} ${themed.bgSecondary}`, children: [_jsx(Div, { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-52` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `${__P.p8} ${themed.bgSecondary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-56` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `${__P.p8} ${themed.bgPrimary}`, children: _jsx(Div, { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
 }

package/dist/features/homepage/components/HowItWorksInfoView.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text } from "../../../ui";
+import { Div, Grid, Heading, Section, Span, Text } from "../../../ui";
 // --- View ---------------------------------------------------------------------
 export function HowItWorksInfoView({ title, subtitle, heroClass = "bg-gradient-to-br from-cobalt-700 via-cobalt-600 to-violet-700", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400", className = "", }) {
     const { themed, flex, spacing } = THEME_CONSTANTS;
-    return (_jsxs("div", { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, "data-section": "howitworksinfoview-div-333", children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", "data-section": "howitworksinfoview-div-334", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", "data-section": "howitworksinfoview-div-335", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx("div", { className: `${spacing.stack} mb-14`, "data-section": "howitworksinfoview-div-336", children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx("div", { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, "data-section": "howitworksinfoview-div-337", children: _jsx(Span, { className: textClass, children: number }) }), _jsxs("div", { "data-section": "howitworksinfoview-div-338", children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, "data-section": "howitworksinfoview-div-339", children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
+    return (_jsxs(Div, { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs(Div, { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs(Div, { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx(Div, { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx(Div, { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, children: _jsx(Span, { className: textClass, children: number }) }), _jsxs(Div, { children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
 }

package/dist/features/homepage/components/HowItWorksSection.js CHANGED Viewed

@@ -14,7 +14,7 @@ function StepCard({ step, visible, delay, }) {
             "shadow-md group hover:-translate-y-2 hover:shadow-xl",
             "transition-all duration-300",
             visible ? CLS_VISIBLE : "opacity-0 translate-y-8",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx("div", { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", "data-section": "howitworkssection-div-341", children: step.number }), _jsx("div", { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, "data-section": "howitworkssection-div-342", children: step.number }), step.renderIcon && (_jsx("div", { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, "data-section": "howitworkssection-div-343", children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx(Div, { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx(Div, { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, children: step.number }), step.renderIcon && (_jsx(Div, { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className = "", }) {
@@ -34,5 +34,5 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-344", children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", "data-section": "howitworkssection-div-345", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-346", children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-center mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx(Div, { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx(Div, { className: `text-center transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
 }

package/dist/features/homepage/components/NewsletterBanner.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Div, Heading, Input, Section, Span, Text, } from "../../../ui";
+const CLS_ERROR_TEXT = "mt-3 text-sm text-red-300";
 export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", heading = "Join Our Newsletter", subheading = "Get exclusive offers, new arrivals and more.", placeholder = "Enter your email", ctaLabel = "Subscribe", successMessage = "You're in! Check your inbox.", errorMessage = "Something went wrong. Please try again.", }) {
     const [email, setEmail] = useState("");
     const [loading, setLoading] = useState(false);
@@ -27,8 +28,8 @@ export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", head
     }
     return (_jsxs(Section, { className: "relative overflow-hidden py-24", style: {
             background: "var(--newsletter-bg, linear-gradient(135deg, var(--color-primary, #1e40af) 0%, var(--color-secondary, #7c3aed) 100%))",
-        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl px-4 text-center sm:px-6", children: [_jsx(Span, { className: "mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/70", children: eyebrow }), _jsx(Heading, { level: 2, className: "text-3xl font-bold text-white sm:text-4xl", children: heading }), _jsx(Text, { className: "mt-4 text-white/60", children: subheading }), success ? (_jsx(Text, { className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white", children: successMessage })) : (_jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, required: true, className: "flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40" }), _jsx(Button, { type: "submit", disabled: loading, variant: "primary", className: "shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60", style: {
+        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl px-4 text-center sm:px-6", children: [_jsx(Span, { size: "xs", weight: "semibold", className: "mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 uppercase tracking-widest text-white/70", children: eyebrow }), _jsx(Heading, { level: 2, className: "text-3xl font-bold text-white sm:text-4xl", children: heading }), _jsx(Text, { className: "mt-4 text-white/60", children: subheading }), success ? (_jsx(Text, { className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white", children: successMessage })) : (_jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, required: true, className: "flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40" }), _jsx(Button, { type: "submit", disabled: loading, variant: "primary", className: "shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60", style: {
                                     background: "var(--color-yellow, #FFE500)",
                                     color: "#0D0D0D",
-                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: "mt-3 text-sm text-red-300", children: errorMessage })), _jsx(Text, { className: "mt-4 text-xs text-white/40", children: "No spam, ever. Unsubscribe anytime." })] })] }));
+                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: CLS_ERROR_TEXT, children: errorMessage })), _jsx(Text, { className: "mt-4 text-xs text-white/40", children: "No spam, ever. Unsubscribe anytime." })] })] }));
 }

package/dist/features/homepage/components/NewsletterSection.js CHANGED Viewed

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Section, Text, TextLink } from "../../../ui";
+import { Div, Heading, Section, Text, TextLink } from "../../../ui";
 import { Mail } from "lucide-react";
+const __O = {
+    hidden: "overflow-hidden",
+};
 // --- Section -----------------------------------------------------------------
 export function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className = "", }) {
-    return (_jsxs(Section, { className: `py-16 px-4 relative overflow-hidden ${className}`, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 max-w-2xl mx-auto text-center", "data-section": "newslettersection-div-347", children: [_jsx("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", "data-section": "newslettersection-div-348", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-400 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
+    return (_jsxs(Section, { className: `py-16 px-4 relative ${__O.hidden} ${className}`, children: [_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx(Div, { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx(Div, { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 max-w-2xl mx-auto text-center", children: [_jsx(Div, { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-400 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
 }

package/dist/features/homepage/components/PromoGrid.js CHANGED Viewed

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import Link from "next/link";
 import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
+const __P = {
+    p4: "p-4",
+};
 export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
     if (banners.length === 0)
         return null;
@@ -26,7 +29,7 @@ export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DE
                                     background: i === 0
                                         ? "linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)"
                                         : "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 100%)",
-                                } }), _jsx(Div, { className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", style: { boxShadow: "inset 0 0 0 2px var(--color-yellow)" } }), _jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-4", children: [_jsx(Text, { className: "leading-tight", style: {
+                                } }), _jsx(Div, { className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", style: { boxShadow: "inset 0 0 0 2px var(--color-yellow)" } }), _jsxs(Div, { className: `absolute bottom-0 left-0 right-0 ${__P.p4}`, children: [_jsx(Text, { className: "leading-tight", style: {
                                             fontFamily: "var(--font-bangers, Bangers, cursive)",
                                             fontSize: i === 0 ? "1.35rem" : "1rem",
                                             letterSpacing: "0.06em",

package/dist/features/homepage/components/SectionCarousel.js CHANGED Viewed

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, HorizontalScroller, Section, Span, Text, TextLink, } from "../../../ui";
+import { Div, Heading, HorizontalScroller, Section, Span, Text, TextLink, } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
+const __O = {
+    hidden: "overflow-hidden",
+};
 // --- Skeleton ----------------------------------------------------------------
 function CarouselSkeleton({ count }) {
     const { skeleton } = THEME_CONSTANTS;
-    return (_jsx("div", { className: "flex gap-4 overflow-hidden px-4", "data-section": "sectioncarousel-div-349", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", "data-section": "sectioncarousel-div-350", children: [_jsx("div", { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) }));
+    return (_jsx(Div, { className: `flex gap-4 ${__O.hidden} px-4`, children: Array.from({ length: count }).map((_, i) => (_jsxs(Div, { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", children: [_jsx(Div, { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
 // --- Component ---------------------------------------------------------------
 export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = THEME_CONSTANTS.carousel.perView.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
@@ -30,13 +33,13 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 overflow-hidden", "data-section": "sectioncarousel-div-351", children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: "relative z-10 w-full max-w-7xl mx-auto", "data-section": "sectioncarousel-div-352", children: [_jsxs("div", { className: "text-center mb-6", "data-section": "sectioncarousel-div-353", children: [headingVariant === "editorial" && pillLabel && (_jsx("div", { className: "mb-4", "data-section": "sectioncarousel-div-354", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
+            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx(Div, { className: `absolute inset-0 ${__O.hidden}`, children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx(Div, { className: "absolute inset-0 bg-black/55" })] })), _jsxs(Div, { className: "relative z-10 w-full max-w-7xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-6", children: [headingVariant === "editorial" && pillLabel && (_jsx(Div, { className: "mb-4", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
                                     "text-3xl md:text-4xl font-bold mb-2",
                                     headingVariant === "editorial" ? "font-display text-4xl" : "",
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-400 text-xs select-none`, "aria-hidden": "true", "data-section": "sectioncarousel-div-355", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 flex justify-center", "data-section": "sectioncarousel-div-356", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Div, { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-400 text-xs select-none`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 flex justify-center", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
                                 ? "border-white/40 text-white hover:bg-white/10"
                                 : "border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"}`, children: viewMoreLabel }) }))] })] }));
 }

package/dist/features/homepage/components/SecurityHighlightsSection.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text, TextLink } from "../../../ui";
+import { Div, Grid, Heading, Section, Span, Text, TextLink } from "../../../ui";
 // --- Single card -------------------------------------------------------------
 function SecurityCard({ item, visible, delay, }) {
     const colorClass = item.colorClass ??
@@ -12,7 +12,7 @@ function SecurityCard({ item, visible, delay, }) {
             "rounded-xl border p-5 transition-all duration-500",
             colorClass,
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx("div", { className: "w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3", "data-section": "securityhighlightssection-div-358", children: _jsx("span", { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "font-semibold mb-1", children: item.title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: item.description })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx(Div, { className: "w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3", children: _jsx("span", { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "font-semibold mb-1", children: item.title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: item.description })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel = "Learn more →", className = "", }) {
@@ -32,5 +32,5 @@ export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, l
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "max-w-6xl mx-auto", "data-section": "securityhighlightssection-div-359", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "securityhighlightssection-div-360", children: [pillLabel && (_jsx(Span, { className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "securityhighlightssection-div-361", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-10", children: [pillLabel && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx(Div, { className: "text-center mt-8", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/ShopByCategorySection.js CHANGED Viewed

@@ -4,9 +4,15 @@ import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
+import { Div, Heading, HorizontalScroller, Section, Span, Text } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { useTopCategories } from "../hooks/useTopCategories";
+const __P = {
+    p3: "p-3",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
 function isImageUrl(s) {
     return s.startsWith("http") || s.startsWith("/") || s.startsWith("data:");
 }
@@ -15,7 +21,7 @@ function CategoryChip({ category }) {
     const coverImage = category.display?.coverImage;
     const initial = category.name[0]?.toUpperCase() ?? "?";
     const productCount = category.metrics?.productCount ?? 0;
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx("div", { className: "aspect-video w-full overflow-hidden bg-zinc-100 dark:bg-slate-800", children: _jsx(Image, { src: coverImage, alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx("div", { className: "aspect-video w-full bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs("div", { className: "flex flex-1 flex-col p-3 text-left", children: [_jsx("div", { className: "mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: iconSrc, alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx("span", { "aria-hidden": "true", className: "text-lg leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-800 dark:text-zinc-200`, children: category.name }), _jsxs(Text, { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto pt-3 text-xs font-medium text-primary dark:text-primary-400", children: "Browse category \u2192" })] })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-zinc-100 dark:bg-slate-800`, children: _jsx(Image, { src: coverImage, alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { className: "aspect-video w-full bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p3} text-left`, children: [_jsx(Div, { className: "mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: iconSrc, alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx(Span, { size: "lg", "aria-hidden": "true", className: "leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-800 dark:text-zinc-200`, children: category.name }), _jsxs(Text, { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto pt-3 text-xs font-medium text-primary dark:text-primary-400", children: "Browse category \u2192" })] })] }));
 }
 const CTA_CLASSES = {
     filled: "rounded-lg bg-[var(--appkit-color-primary)] px-5 py-2 text-sm font-semibold text-white hover:opacity-90",
@@ -56,10 +62,10 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
     const categories = filtered.length > 0 ? filtered : allCategories;
     if (!isLoading && allCategories.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-10 px-4 md:py-12 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 text-center", children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), hasFilters && !isLoading && (_jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(FilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), rootIds.slice(0, 5).map((id) => {
+    return (_jsx(Section, { className: `py-10 px-4 md:py-12 ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Div, { className: "mb-6 text-center", children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), hasFilters && !isLoading && (_jsxs(Div, { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(FilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), rootIds.slice(0, 5).map((id) => {
                             const cat = allCategories.find((c) => c.id === id);
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden px-1", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx(Div, { className: `flex gap-3 ${__O.hidden} px-1`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/components/SiteFeaturesSection.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Text } from "../../../ui";
+import { Div, Grid, Heading, Section, Text } from "../../../ui";
+const __P = {
+    p8: "p-8",
+};
 // --- Section -----------------------------------------------------------------
 export function SiteFeaturesSection({ title, subtitle, features, className = "", }) {
     const { themed } = THEME_CONSTANTS;
-    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full", "data-section": "sitefeaturessection-div-369", children: [_jsxs("div", { className: "text-center mb-12", "data-section": "sitefeaturessection-div-370", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-2xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8", children: features.map((feature) => (_jsxs("div", { className: "p-6 text-center hover:shadow-lg transition-all group rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800", "data-section": "sitefeaturessection-div-371", children: [_jsx("div", { className: "text-6xl mb-4 group-hover:scale-110 transition-transform", "data-section": "sitefeaturessection-div-372", children: feature.icon }), _jsx(Heading, { level: 3, className: `text-base font-bold ${themed.textPrimary} mb-2`, children: feature.title }), _jsx(Text, { className: `text-base ${themed.textSecondary}`, children: feature.description })] }, feature.id))) })] }) }));
+    return (_jsx(Section, { className: `${__P.p8} ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "w-full", children: [_jsxs(Div, { className: "text-center mb-12", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-2xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8", children: features.map((feature) => (_jsxs("div", { className: "p-6 text-center hover:shadow-lg transition-all group rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800", children: [_jsx(Div, { className: "text-6xl mb-4 group-hover:scale-110 transition-transform", children: feature.icon }), _jsx(Heading, { level: 3, className: `text-base font-bold ${themed.textPrimary} mb-2`, children: feature.title }), _jsx(Text, { className: `text-base ${themed.textSecondary}`, children: feature.description })] }, feature.id))) })] }) }));
 }

package/dist/features/homepage/components/SocialFeedSection.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Heading, Section, Text } from "../../../ui";
+import { Div, Heading, Section, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { SocialPostCard } from "./SocialPostCard";
 import { fetchInstagramPosts, fetchFacebookPosts, fetchTikTokPosts, fetchDeviantArtPosts, } from "../lib/social-feed-fetcher";
@@ -23,11 +23,11 @@ function platformProfileUrl(platform, handle) {
 }
 // --- Skeleton ----------------------------------------------------------------
 function SocialFeedSkeleton({ count }) {
-    return (_jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: Array.from({ length: count }).map((_, i) => (_jsx("div", { className: "aspect-square rounded-xl bg-zinc-200 dark:bg-zinc-700 animate-pulse" }, i))) }));
+    return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: Array.from({ length: count }).map((_, i) => (_jsx(Div, { className: "aspect-square rounded-xl bg-zinc-200 dark:bg-zinc-700 animate-pulse" }, i))) }));
 }
 // --- Empty state -------------------------------------------------------------
 function SocialFeedEmpty({ platform }) {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-zinc-400", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }), _jsx("path", { d: "M9 9h6M9 12h6M9 15h4" })] }), _jsxs(Text, { size: "sm", children: ["No posts from ", PLATFORM_LABELS[platform], " yet."] })] }));
+    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-16 text-zinc-400", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }), _jsx("path", { d: "M9 9h6M9 12h6M9 15h4" })] }), _jsxs(Text, { size: "sm", children: ["No posts from ", PLATFORM_LABELS[platform], " yet."] })] }));
 }
 // --- Server fetch ------------------------------------------------------------
 async function loadPosts(config) {
@@ -102,5 +102,5 @@ export async function SocialFeedSection(config) {
         : layout === "masonry"
             ? "break-inside-avoid"
             : "";
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx("div", { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx("div", { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx("div", { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs(Div, { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx(Div, { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx(Div, { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx(Div, { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
 }

package/dist/features/homepage/components/SocialPostCard.js CHANGED Viewed

@@ -1,6 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "../../../ui";
+import { Div, Span, Text } from "../../../ui";
+const __P = {
+    p3: "p-3",
+};
 // --- Platform brand colours & icons ------------------------------------------
 const PLATFORM_META = {
     instagram: {
@@ -44,12 +47,12 @@ function YouTubeCard({ post, showCaption }) {
     const thumbnail = `https://img.youtube.com/vi/${post.videoId}/maxresdefault.jpg`;
     const href = `https://youtu.be/${post.videoId}`;
     const meta = PLATFORM_META.youtube;
-    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube,#FF0000)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[var(--appkit-color-youtube,#FF0000)] shadow-lg transition-transform duration-200 group-hover:scale-110", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs("div", { className: `absolute right-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (_jsx("div", { className: "absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm", children: post.channelName })), showCaption && post.caption && (_jsx("div", { className: "absolute inset-0 flex flex-col justify-end bg-black/60 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: _jsx(Text, { className: "line-clamp-2 text-xs text-white", children: post.caption }) }))] }));
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube,#FF0000)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx(Div, { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Div, { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[var(--appkit-color-youtube,#FF0000)] shadow-lg transition-transform duration-200 group-hover:scale-110", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs(Div, { className: `absolute right-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (_jsx(Div, { className: "absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm", children: post.channelName })), showCaption && post.caption && (_jsx(Div, { className: `absolute inset-0 flex flex-col justify-end bg-black/60 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: _jsx(Text, { className: "line-clamp-2 text-xs text-white", children: post.caption }) }))] }));
 }
 export function SocialPostCard({ post, showCaption = true, showStats = true }) {
     if (post.platform === "youtube") {
         return _jsx(YouTubeCard, { post: post, showCaption: showCaption });
     }
     const meta = PLATFORM_META[post.platform];
-    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-sm text-zinc-400", children: "No preview" }) })), post.mediaType === "video" && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx("div", { className: "pointer-events-none absolute right-2 top-2", children: _jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-black/50 backdrop-blur-sm", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs("div", { className: `absolute left-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col justify-end bg-black/70 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [showCaption && post.caption && (_jsx(Text, { className: "mb-2 line-clamp-3 text-xs text-white", children: post.caption })), showStats && (_jsxs("div", { className: "flex items-center gap-3 text-xs text-white/80", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
+    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx(Span, { size: "sm", className: "text-zinc-400", children: "No preview" }) })), post.mediaType === "video" && (_jsx(Div, { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx(Div, { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx(Div, { className: "pointer-events-none absolute right-2 top-2", children: _jsx(Div, { className: "flex h-6 w-6 items-center justify-center rounded bg-black/50 backdrop-blur-sm", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs(Div, { className: `absolute left-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs(Div, { className: `pointer-events-none absolute inset-0 flex flex-col justify-end bg-black/70 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: [showCaption && post.caption && (_jsx(Text, { className: "mb-2 line-clamp-3 text-xs text-white", children: post.caption })), showStats && (_jsxs(Div, { className: "flex items-center gap-3 text-xs text-white/80", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
 }

package/dist/features/homepage/components/TrustFeaturesSection.js CHANGED Viewed

@@ -2,18 +2,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text } from "../../../ui";
+import { Div, Grid, Heading, Section, Span, Text } from "../../../ui";
 // --- Single cards-variant card -----------------------------------------------
 function TrustFeatureCard({ item, visible, delay, }) {
     return (_jsxs("div", { className: [
             "flex flex-col items-center text-center p-4",
             "transition-all duration-500",
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "trustfeaturessection-div-373", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30 flex-shrink-0", "data-section": "trustfeaturessection-div-374", children: item.renderIcon ? (item.renderIcon({ className: "w-7 h-7" })) : (_jsx(Span, { className: "text-primary-600 dark:text-secondary-400 text-2xl", "aria-hidden": "true", children: "\u2713" })) }), _jsx(Heading, { level: 3, className: "mt-3 mb-1 text-sm font-bold tracking-wide uppercase text-zinc-900 dark:text-zinc-100", children: item.title }), _jsx(Text, { className: "text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: item.description })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "trustfeaturessection-div-373", children: [_jsx(Div, { className: "flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30 flex-shrink-0", children: item.renderIcon ? (item.renderIcon({ className: "w-7 h-7" })) : (_jsx(Span, { className: "text-primary-600 dark:text-secondary-400 text-2xl", "aria-hidden": "true", children: "\u2713" })) }), _jsx(Heading, { level: 3, className: "mt-3 mb-1 text-sm font-bold tracking-wide uppercase text-zinc-900 dark:text-zinc-100", children: item.title }), _jsx(Text, { className: "text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: item.description })] }));
 }
 // --- Single strip-variant item -----------------------------------------------
 function TrustStripItem({ item }) {
-    return (_jsxs("div", { className: "inline-flex flex-shrink-0 items-center gap-2 px-6", "data-section": "trustfeaturessection-div-375", children: [item.renderIcon ? (item.renderIcon({ className: "w-5 h-5" })) : (_jsx(Span, { className: "text-primary-600 dark:text-primary-400 text-lg", "aria-hidden": "true", children: "\u2713" })), _jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 whitespace-nowrap", children: item.title })] }));
+    return (_jsxs(Div, { className: "inline-flex flex-shrink-0 items-center gap-2 px-6", children: [item.renderIcon ? (item.renderIcon({ className: "w-5 h-5" })) : (_jsx(Span, { className: "text-primary-600 dark:text-primary-400 text-lg", "aria-hidden": "true", children: "\u2713" })), _jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300 whitespace-nowrap", children: item.title })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function TrustFeaturesSection({ items, title, variant = "cards", className = "", }) {
@@ -35,7 +35,7 @@ export function TrustFeaturesSection({ items, title, variant = "cards", classNam
     }, []);
     if (variant === "strip") {
         const doubled = [...items, ...items];
-        return (_jsx(Section, { ref: sectionRef, className: `py-4 overflow-hidden border-y border-zinc-100 dark:border-slate-800 ${className}`, children: _jsx("div", { className: "flex animate-marquee", "data-section": "trustfeaturessection-div-376", children: doubled.map((item, i) => (_jsx(TrustStripItem, { item: item }, `${item.iconName}-${i}`))) }) }));
+        return (_jsx(Section, { ref: sectionRef, className: `py-4 overflow-hidden border-y border-zinc-100 dark:border-slate-800 ${className}`, children: _jsx(Div, { className: "flex animate-marquee", children: doubled.map((item, i) => (_jsx(TrustStripItem, { item: item }, `${item.iconName}-${i}`))) }) }));
     }
-    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 bg-zinc-50 dark:bg-slate-900/80 ${className}`, children: _jsxs("div", { className: "max-w-6xl mx-auto", "data-section": "trustfeaturessection-div-377", children: [title && (_jsx("div", { className: "text-center mb-8", "data-section": "trustfeaturessection-div-378", children: _jsx(Heading, { level: 2, className: "text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100", children: title }) })), _jsx(Grid, { gap: "lg", className: "grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delay: index * 100 }, item.iconName))) })] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 bg-zinc-50 dark:bg-slate-900/80 ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [title && (_jsx(Div, { className: "text-center mb-8", children: _jsx(Heading, { level: 2, className: "text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100", children: title }) })), _jsx(Grid, { gap: "lg", className: "grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delay: index * 100 }, item.iconName))) })] }) }));
 }

package/dist/features/homepage/components/TrustIndicatorsSection.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Text } from "../../../ui";
+import { Div, Grid, Heading, Section, Text } from "../../../ui";
+const __P = {
+    p6: "p-6",
+};
 // --- Section -----------------------------------------------------------------
 export function TrustIndicatorsSection({ items, className = "", }) {
     const { themed } = THEME_CONSTANTS;
-    return (_jsx(Section, { className: `p-6 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full", "data-section": "trustindicatorssection-div-379", children: _jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 md:gap-8", children: items.map((indicator, index) => (_jsxs("div", { className: "text-center p-4 rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800 hover:shadow-md transition-shadow", "data-section": "trustindicatorssection-div-380", children: [_jsx("div", { className: "text-4xl md:text-5xl mb-2 md:mb-3", "data-section": "trustindicatorssection-div-381", children: indicator.icon }), _jsx(Heading, { level: 3, className: `text-sm font-semibold ${themed.textPrimary} mb-1 md:mb-2`, children: indicator.title }), _jsx(Text, { className: `text-xs ${themed.textSecondary}`, children: indicator.description })] }, index))) }) }) }));
+    return (_jsx(Section, { className: `${__P.p6} ${themed.bgSecondary} ${className}`, children: _jsx(Div, { className: "w-full", children: _jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 md:gap-8", children: items.map((indicator, index) => (_jsxs("div", { className: "text-center p-4 rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800 hover:shadow-md transition-shadow", children: [_jsx(Div, { className: "text-4xl md:text-5xl mb-2 md:mb-3", children: indicator.icon }), _jsx(Heading, { level: 3, className: `text-sm font-semibold ${themed.textPrimary} mb-1 md:mb-2`, children: indicator.title }), _jsx(Text, { className: `text-xs ${themed.textSecondary}`, children: indicator.description })] }, index))) }) }) }));
 }

package/dist/features/homepage/components/WelcomeSection.js CHANGED Viewed

@@ -8,5 +8,5 @@ export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, cta
     if (isLoading) {
         return (_jsx(Section, { className: `relative overflow-hidden py-16 md:py-24 px-4 ${className}`, children: _jsxs(Div, { className: "animate-pulse max-w-4xl mx-auto text-center", children: [_jsx(Div, { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-full w-52 mx-auto mb-6" }), _jsx(Div, { className: "h-20 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-4 max-w-2xl mx-auto" }), _jsx(Div, { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-8 max-w-lg mx-auto" }), _jsxs(Row, { justify: "center", gap: "md", children: [_jsx(Div, { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" }), _jsx(Div, { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" })] })] }) }));
     }
-    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs(Div, { className: "text-center lg:text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-700 via-cobalt to-secondary-400 dark:from-primary dark:via-cobalt-400 dark:to-primary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: _jsxs(Div, { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, children: [_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx(Row, { centered: true, className: `absolute inset-0 ${flex.center} px-10`, children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", className: "h-24 xl:h-32 2xl:h-40 max-w-full" }) })] }) })] }) })] }));
+    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs(Div, { className: "text-center lg:text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-700 via-cobalt to-secondary-400 dark:from-primary dark:via-cobalt-400 dark:to-primary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: _jsxs(Div, { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, children: [_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx(Row, { centered: true, className: `absolute inset-0 ${flex.center} px-10`, children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", className: "h-24 xl:h-32 2xl:h-40 max-w-full" }) })] }) })] }) })] }));
 }

package/dist/features/homepage/components/WhatsAppCommunitySection.js CHANGED Viewed

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Heading, RichText, Section, Span, Text } from "../../../ui";
+import { Button, Div, Heading, RichText, Section, Span, Text } from "../../../ui";
 import { Users } from "lucide-react";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 // --- Section -----------------------------------------------------------------
 export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount, memberCountLabel = "members", testimonial, benefits = [], buttonText = "Join our WhatsApp community", groupLink, isLoading = false, className = "", }) {
     const { themed, flex } = THEME_CONSTANTS;
     if (isLoading) {
-        return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsx(Div, { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
     }
     if (!title && !groupLink)
         return null;
@@ -16,5 +16,5 @@ export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount,
         if (groupLink)
             window.open(groupLink, "_blank");
     };
-    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "whatsappcommunitysection-div-391", children: _jsxs("div", { className: "relative rounded-2xl overflow-hidden bg-gradient-to-br from-primary via-cobalt to-primary/80 dark:from-primary/90 dark:via-cobalt/90 dark:to-primary/70 text-white shadow-xl", "data-section": "whatsappcommunitysection-div-392", children: [_jsx("div", { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 px-6 py-10 sm:px-10 sm:py-12", "data-section": "whatsappcommunitysection-div-394", children: [_jsxs("div", { className: `${flex.between} flex-wrap gap-4 mb-8`, "data-section": "whatsappcommunitysection-div-top", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-12 h-12 rounded-xl bg-[#25D366] flex items-center justify-center shadow-lg flex-shrink-0", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { className: "text-white/80 text-sm font-medium tracking-wide uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs("div", { className: "flex items-center gap-2 bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { className: "text-white text-sm font-semibold", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { level: 2, className: "text-white text-2xl sm:text-3xl font-bold mb-3 leading-tight", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-base mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8 max-w-2xl", "data-section": "whatsappcommunitysection-div-benefits", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-white/20 flex items-center justify-center", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { className: "text-white/90 text-sm leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx("blockquote", { className: "border-l-2 border-white/30 pl-4 mb-8 max-w-xl", children: _jsxs(Text, { variant: "none", className: "text-white/75 text-sm italic leading-relaxed", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[#25D366] hover:!bg-[#1ebe5d] !text-white !border-0 shadow-lg font-semibold gap-2.5", children: [_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
+    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsxs("div", { className: "relative rounded-2xl overflow-hidden bg-gradient-to-br from-primary via-cobalt to-primary/80 dark:from-primary/90 dark:via-cobalt/90 dark:to-primary/70 text-white shadow-xl", children: [_jsx(Div, { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 px-6 py-10 sm:px-10 sm:py-12", children: [_jsxs(Div, { className: `${flex.between} flex-wrap gap-4 mb-8`, children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Div, { className: "w-12 h-12 rounded-xl bg-[#25D366] flex items-center justify-center shadow-lg flex-shrink-0", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { size: "sm", weight: "medium", className: "text-white/80 tracking-wide uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs(Div, { className: "flex items-center gap-2 bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { size: "sm", weight: "semibold", className: "text-white", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { level: 2, className: "text-white text-2xl sm:text-3xl font-bold mb-3 leading-tight", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-base mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx(Div, { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8 max-w-2xl", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs(Div, { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-white/20 flex items-center justify-center", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { size: "sm", className: "text-white/90 leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx("blockquote", { className: "border-l-2 border-white/30 pl-4 mb-8 max-w-xl", children: _jsxs(Text, { variant: "none", className: "text-white/75 text-sm italic leading-relaxed", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[#25D366] hover:!bg-[#1ebe5d] !text-white !border-0 shadow-lg font-semibold gap-2.5", children: [_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
 }

package/dist/features/homepage/hooks/useBlogArticles.d.ts CHANGED Viewed

@@ -10,4 +10,4 @@ export interface BlogListResult {
 export declare function useBlogArticles(options?: {
     endpoint?: string;
     initialPosts?: BlogListResult["posts"];
-}): import("@tanstack/react-query").UseQueryResult<BlogListResult, Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<BlogListResult>, Error>;

package/dist/features/homepage/hooks/useFeaturedAuctions.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import type { ProductItem } from "@mohasinac/appkit/features/products";
 export declare function useFeaturedAuctions(options?: {
     filterByBrand?: string;
     initialData?: ProductItem[];
-}): import("@tanstack/react-query").UseQueryResult<ProductItem[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<ProductItem[]>, Error>;

package/dist/features/homepage/hooks/useFeaturedPreOrders.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import type { ProductItem } from "@mohasinac/appkit/features/products";
 export declare function useFeaturedPreOrders(options?: {
     filterByBrand?: string;
     initialData?: ProductItem[];
-}): import("@tanstack/react-query").UseQueryResult<ProductItem[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<ProductItem[]>, Error>;

package/dist/features/homepage/hooks/useFeaturedProducts.d.ts CHANGED Viewed

@@ -2,4 +2,4 @@ import type { ProductListResponse } from "../../products/types";
 export declare function useFeaturedProducts(options?: {
     initialData?: ProductListResponse;
     filterByBrand?: string;
-}): import("@tanstack/react-query").UseQueryResult<ProductListResponse, Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<ProductListResponse>, Error>;

package/dist/features/homepage/hooks/useFeaturedStores.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import type { StoreListItem } from "../../stores/types";
 export declare function useFeaturedStores(limit?: number, options?: {
     initialData?: StoreListItem[];
-}): import("@tanstack/react-query").UseQueryResult<StoreListItem[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<StoreListItem[]>, Error>;

package/dist/features/homepage/hooks/useHeroCarousel.d.ts CHANGED Viewed

@@ -6,4 +6,4 @@ import type { CarouselSlide } from "../types/index";
  */
 export declare function useHeroCarousel(options?: {
     initialData?: CarouselSlide[];
-}): import("@tanstack/react-query").UseQueryResult<CarouselSlide[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<CarouselSlide[]>, Error>;

package/dist/features/homepage/hooks/useHomepageEvents.d.ts CHANGED Viewed

@@ -5,4 +5,4 @@ export interface HomepageEventsListResponse {
 }
 export declare function useHomepageEvents(limit?: number, options?: {
     initialData?: EventItem[];
-}): import("@tanstack/react-query").UseQueryResult<EventItem[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<EventItem[]>, Error>;