"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const ExampleShowcase = ({defaultExampleId = "text-links", showCatalog = true}) => { const _components = { a: "a", aside: "aside", button: "button", code: "code", details: "details", div: "div", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", section: "section", span: "span", strong: "strong", summary: "summary", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents() }; const products = [{ id: "lv-pochette", name: "Louis Vuitton Pochette Sling PM", brand: "Louis Vuitton", adCopy: "Perfect anniversary gift. Modern elegance meets timeless luxury.", softPlacementCopy: "This compact black bag feels polished and giftable, with a classic chain detail that works for both daily use and dinner plans.", displayPrice: "$2,030.00", url: "https://us.louisvuitton.com/eng-us/products/pochette-sling-pm-h27-nvprod7150038v/M27822", image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&h=400&fit=crop", imagePosition: "object-center", badge: "High intent", priceBand: "Ultra luxury", matchReason: "A strong fit for someone who likes sleek silhouettes and a polished day-to-night feel.", styleTags: ["structured", "sleek", "day-to-night"], occasionTags: ["anniversary", "birthday", "holiday"], supportingPoints: ["Modern profile with strong visual impact", "Feels premium without looking overly formal", "Easy to style across daytime and evening outfits"], scores: { versatility: 92, statement: 88, giftAppeal: 95 }, personaFit: { minimalist: 96, office: 80, everyday: 82 }, occasionMessages: { birthday: "Feels celebratory and visually striking for a birthday gift.", anniversary: "The strongest milestone-gift option in this shortlist.", holiday: "A festive pick when you want high recognition and polish." } }, { id: "loewe-amazona", name: "Large Amazona 180", brand: "Loewe", adCopy: "Effortlessly sophisticated. A refined gift for someone special.", softPlacementCopy: "A softer and more design-led direction if you want the gift to feel tasteful rather than obviously brand-forward.", displayPrice: "$3,500.00", url: "https://www.loewe.com/int/en/women/bags/amazona/large-amazona-180-bag-in-suede/A039ASRX03-0018.html", image: "https://www.loewe.com/dw/image/v2/BBPC_PRD/on/demandware.static/-/Sites-Loewe_master/default/dwbef4ac14/images_rd/A039ASRX03/A039ASRX03-0018/A039ASRX03_0018_3O.jpg?sw=850&q=100", imagePosition: "object-center", badge: "Editorial", priceBand: "High luxury", matchReason: "Best for a softer, quieter luxury look with a more relaxed and artistic feel.", styleTags: ["soft luxury", "single-handle", "editorial"], occasionTags: ["anniversary", "holiday", "everyday-upgrade"], supportingPoints: ["Distinct silhouette without looking loud", "Carries a crafted, design-forward identity", "Balances elegance with an effortless attitude"], scores: { versatility: 84, statement: 82, giftAppeal: 88 }, personaFit: { minimalist: 78, office: 84, everyday: 90 }, occasionMessages: { birthday: "A thoughtful birthday gift when you want taste over flash.", anniversary: "Works well for an anniversary with a more refined tone.", holiday: "A sophisticated holiday option with a strong editorial mood." } }, { id: "celine-luggage", name: 'Celine "New Luggage"', brand: "Celine", adCopy: "Iconic and versatile. A gift that works across occasions.", softPlacementCopy: "A recognizable icon if you want the recommendation to land with stronger brand recognition while staying clean and wearable.", displayPrice: "$3,900.00", url: "https://www.celine.com/en-us/celine-shop-women/handbags/new-luggage/", image: "https://www.celine.com/on/demandware.static/-/Library-Sites-Celine-SharedLibrary/default/dw68d58acb/content_assets/block%20editor/CELINE_SUMMER_26_4X5_2400PX_02.jpg?im=Resize=(800)", imagePosition: "object-top", badge: "Brand-led", priceBand: "High luxury", matchReason: "A reliable recommendation when you want a recognizable icon with a cleaner 2026 update.", styleTags: ["iconic", "structured", "professional"], occasionTags: ["birthday", "anniversary", "office-style"], supportingPoints: ["Strong brand recognition and proven silhouette", "Feels versatile across professional and social settings", "Updated shape keeps it current without losing familiarity"], scores: { versatility: 90, statement: 85, giftAppeal: 89 }, personaFit: { minimalist: 86, office: 94, everyday: 78 }, occasionMessages: { birthday: "A dependable birthday gift when you want iconic recognition.", anniversary: "A polished anniversary option with broad appeal.", holiday: "A structured holiday pick that still feels practical." } }]; const categories = [{ id: "soft-placement", label: "Soft placement", description: "Keep the recommendation subtle by blending products into a longer, more natural answer." }, { id: "answer-native", label: "Answer-native", description: "Keep the recommendation inside the answer flow and progressively enrich it." }, { id: "browsing-native", label: "Browsing-native", description: "Turn the same response into layouts built for exploration and discovery." }, { id: "decision-support", label: "Decision-support", description: "Help users compare, filter, and shortlist before they take the next step." }, { id: "action-extensions", label: "Action-extensions", description: "Extend the recommendation into service, wishlist, and follow-up actions." }]; const accentByCategory = { "soft-placement": "border-rose-700 bg-rose-700 text-white", "answer-native": "border-slate-900 bg-slate-900 text-white", "browsing-native": "border-amber-700 bg-amber-700 text-white", "decision-support": "border-emerald-700 bg-emerald-700 text-white", "action-extensions": "border-indigo-700 bg-indigo-700 text-white" }; const demos = [{ id: "soft-mention", categoryId: "soft-placement", label: "Soft mention", eyebrow: "Subtle handoff", title: "Blend one product suggestion into the answer without breaking the tone", description: "Keep the response centered on advice, then softly introduce one relevant item as a natural follow-up instead of switching immediately into a shopping layout.", notes: ["Best when you want the recommendation to feel like part of the assistant response, not a separate ad module.", "A good bridge pattern before stronger commerce treatments such as links, cards, or shelves."], code: `return ( <> );` }, { id: "contextual-entity-links", categoryId: "soft-placement", label: "Contextual entity links", eyebrow: "Inline entities", title: "Embed linked brands and products directly inside the answer context", description: "Keep the recommendation paragraph readable, but turn the relevant brands and product entities into links so the commercial surface stays soft and contextual.", notes: ["Useful when the answer should still read like advice, with commerce appearing only on the important entities.", "A good pattern for editorial assistants or brand-aware recommendation flows."], code: `return ( );` }, { id: "contextual-links-with-ad-hover", categoryId: "soft-placement", label: "Contextual links with ad hover", eyebrow: "Hover disclosure", title: "Keep inline entity links subtle, then reveal the product card from a tiny AD marker", description: "Let the answer stay paragraph-first, attach a small AD marker to the linked entity, and show the richer product card only when the user intentionally hovers or focuses that marker.", notes: ["Useful when you want the commercial cue to be visible but still much softer than an always-on card.", "A good pattern for conversational surfaces where disclosure matters but UI noise should stay low."], code: `return ( );` }, { id: "clickable-recommendation-block", categoryId: "soft-placement", label: "Clickable recommendation block", eyebrow: "Larger hit area", title: "Turn one recommendation paragraph into a softer click target", description: "Instead of linking only a few words, make the recommendation paragraph itself clickable so the commercial action is easier without feeling like a separate card.", notes: ["Useful when one paragraph is clearly the recommendation section and deserves a larger tap target.", "Good for mobile surfaces where larger hit areas improve usability without adding hard merchandising UI."], code: `return ( {products[0].matchReason} );` }, { id: "inline-recommendation-insert", categoryId: "soft-placement", label: "Inline recommendation insert", eyebrow: "Embedded card", title: "Insert one compact recommendation card into a longer answer", description: "Keep the answer content-rich, then place one lightweight product card inside the response exactly where the recommendation becomes relevant.", notes: ["Useful when the answer has several advice points and only one section naturally transitions into a product suggestion.", "Very close to assistant-style soft placement because the product sits inside the flow rather than below it."], code: `return ( );` }, { id: "text-links", categoryId: "answer-native", label: "Text links", eyebrow: "Lightweight rendering", title: "Turn product mentions into clickable commerce links", description: "Keep the answer mostly text-first and only upgrade product names into links for the lightest possible enrichment layer.", notes: ["Best when you want almost no visual interruption inside a chat interface.", "Useful as the lowest-effort integration before experimenting with richer cards."], code: `products.map((product) => ( ));` }, { id: "inline-cards", categoryId: "answer-native", label: "Inline product cards", eyebrow: "Contextual enrichment", title: "Insert richer product blocks directly after the answer", description: "Preserve the conversational answer, then attach visual cards that make the next click much easier.", notes: ["Good when the answer still carries most of the meaning but visuals improve engagement.", "A common step up from plain text links in assistant-style products."], code: `return ( <> );` }, { id: "reason-chips", categoryId: "answer-native", label: "Reason chips", eyebrow: "Explainability", title: "Add compact reason chips after each recommendation", description: "Use short tags to explain why an item matches the query without forcing users to read longer paragraphs.", notes: ["Helpful when recommendation quality needs a visible explanation layer.", "Chips are especially effective on mobile because they scan quickly."], code: `return ( <>

{product.matchReason}

);` }, { id: "expandable-picks", categoryId: "answer-native", label: "Expandable picks", eyebrow: "Progressive disclosure", title: "Collapse the shortlist until the user asks for more detail", description: "Show only the product names first, then let users expand each recommendation to inspect the supporting reasons.", notes: ["Useful when answer density matters and the first screen should stay compact.", "Works well in docs because the interaction cost is low and easy to explain."], code: `products.map((product) => ( ));` }, { id: "hover-sync-answer", categoryId: "answer-native", label: "Hover sync answer", eyebrow: "Linked interaction", title: "Sync answer reasoning with a richer product panel", description: "Link a compact answer summary on the left to a richer visual card on the right using hover or focus.", notes: ["Good for desktop-first docs that want to show coordinated UI states.", "Makes the relation between reasoning and product presentation more explicit."], code: `const [activeId, setActiveId] = useState(products[0].id); ` }, { id: "chat-carousel", categoryId: "answer-native", label: "Chat carousel", eyebrow: "Touch-friendly browsing", title: "Keep the chat context and move the products into a scrollable shelf", description: "This keeps the answer bubble intact but turns the product layer into a horizontally scrollable sequence of cards.", notes: ["Good for mobile experiences and chat interfaces with constrained vertical space.", "Feels native to touch interactions without abandoning the chat framing."], code: `return ( );` }, { id: "product-gallery", categoryId: "browsing-native", label: "Product gallery", eyebrow: "Direct merchandising", title: "Render the same items as a standalone recommendation grid", description: "Move from answer-first to browsing-first by presenting the same product payload as a clear grid.", notes: ["A simple and reliable option for landing pages or post-answer recommendation zones.", "Good baseline for comparing richer browsing layouts against a straightforward grid."], code: `return ;` }, { id: "editorial-spotlight", categoryId: "browsing-native", label: "Editorial spotlight", eyebrow: "Hero-led browsing", title: "Promote one hero item while keeping supporting picks nearby", description: "Use a large feature card for the strongest recommendation and smaller slots for alternatives.", notes: ["Works well for content-driven surfaces or brand-heavy presentation.", "Useful when one product clearly deserves more attention than the rest."], code: `return ( );` }, { id: "bento-discovery-grid", categoryId: "browsing-native", label: "Bento discovery grid", eyebrow: "Exploration-first", title: "Use an editorial bento layout to make a small catalog feel richer", description: "A bento grid gives the content more shape and makes the recommendation feel like a discovery surface instead of a utility list.", notes: ["Useful for demoing how layout alone changes the perceived product experience.", "Can make even three products feel more dynamic and premium."], code: `return ( );` }, { id: "lookbook-strip", categoryId: "browsing-native", label: "Lookbook strip", eyebrow: "Image-first storytelling", title: "Push imagery forward with a lookbook-style presentation", description: "Emphasize photography and mood so the same product data reads more like an editorial feature.", notes: ["Best for lifestyle-led merchandising or inspirational landing pages.", "Useful for showing that docs can host presentation-heavy UI, not just reference layouts."], code: `products.map((product) => ( ));` }, { id: "compact-result-shelf", categoryId: "browsing-native", label: "Compact result shelf", eyebrow: "Dense placement", title: "Shrink the same recommendations into a tight recommendation row", description: "Render a denser shelf that could live inside a results page, side rail, or lower-priority placement.", notes: ["Good for embedding product recommendations in tighter layout constraints.", "Helps show how one payload can scale down without needing a different backend response."], code: `products.map((product) => ( ));` }, { id: "comparison-table", categoryId: "decision-support", label: "Comparison table", eyebrow: "Structured trade-offs", title: "Compare style, occasion, and gifting logic in one table", description: "Turn descriptive product data into a comparison matrix for users who are already evaluating trade-offs.", notes: ["Tables are often easier to scan than cards once the user is in decision mode.", "This is especially useful for partner docs explaining recommendation rationale."], code: `return ( );` }, { id: "attribute-scorecards", categoryId: "decision-support", label: "Attribute scorecards", eyebrow: "Visible ranking logic", title: "Expose recommendation criteria through compact scorecards", description: "Make hidden ranking dimensions more legible by visualizing scores such as versatility, statement value, and gift appeal.", notes: ["Helpful when the user wants to understand why one product ranks higher than another.", "A good way to turn abstract recommendation logic into something concrete and visual."], code: `return ( );` }, { id: "persona-matcher", categoryId: "decision-support", label: "Persona matcher", eyebrow: "Intent adaptation", title: "Re-rank the shortlist around different user personas", description: "Let readers switch between personas such as minimalist, office style, or daily use and see the same data reprioritized.", notes: ["Useful for showing how one product set can serve multiple audience lenses.", "Demonstrates lightweight interactivity without involving external data."], code: `const ranked = sortBy(products, product => product.personaFit[persona]); return ;` }, { id: "occasion-switcher", categoryId: "decision-support", label: "Occasion switcher", eyebrow: "Context switching", title: "Change the framing for birthday, anniversary, or holiday gifting", description: "Keep the same products but change the message and ordering depending on the occasion context.", notes: ["Good for recommendation systems that adapt copy rather than inventory.", "Shows how local UI logic can personalize the same backend result set."], code: `const ordered = rankByOccasion(products, activeOccasion); return ;` }, { id: "shortlist-compare-tray", categoryId: "decision-support", label: "Shortlist compare tray", eyebrow: "Mid-funnel state", title: "Let users save two or three picks before comparing them", description: "Simulate the common mid-funnel moment where users gather likely candidates before making a decision.", notes: ["Good for illustrating shortlist behavior inside docs without building a full compare page.", "Adds just enough interactivity to make the experience feel product-like."], code: `const selectedProducts = products.filter((product) => selectedIds.includes(product.id) ); return ;` }, { id: "follow-up-service-card", categoryId: "action-extensions", label: "Follow-up service card", eyebrow: "Extended action", title: "Attach a post-recommendation service module", description: "Add a second action layer after the recommendation, such as premium gift wrapping or another add-on flow.", notes: ["Good for showing how a recommendation can hand off into a monetizable secondary action.", "Keeps the interaction simple while proving the docs page can host a coded module."], code: `return ( );` }, { id: "gift-bundle-builder", categoryId: "action-extensions", label: "Gift bundle builder", eyebrow: "Configurable add-ons", title: "Turn a recommendation into a light bundle-building flow", description: "Keep the product recommendation on screen while letting the user configure simple gift options.", notes: ["Useful for service add-ons that naturally follow a product recommendation.", "Helps teams imagine how the recommendation area can branch into configuration UI."], code: `const [selectedOptions, setSelectedOptions] = useState(["wrap"]); return ;` }, { id: "save-or-share-wishlist", categoryId: "action-extensions", label: "Save or share wishlist", eyebrow: "Intent capture", title: "Convert recommendations into a lightweight wishlist surface", description: "Give the user a softer action than purchase by offering save, share, or copy-style follow-ups.", notes: ["Best when the recommendation is valuable but the user is not ready to act immediately.", "Makes the recommendation module useful even before a final decision happens."], code: `return ( );` }, { id: "next-step-action-sheet", categoryId: "action-extensions", label: "Next-step action sheet", eyebrow: "Clear handoff", title: "Surface the likely next actions in a compact action sheet", description: "Add a bottom action layer that makes the handoff from recommendation to user action explicit.", notes: ["Useful when you want to keep the answer area focused but still show the main downstream actions.", "A clean pattern for docs that want to simulate a fuller product journey."], code: `return ( );` }]; const supportingCodeByDemoId = { "soft-mention": { title: "SoftMentionCard", code: `function SoftMentionCard({ product }) { return (

{product.name}

{product.adCopy}

Open

); }` }, "contextual-entity-links": { title: "ContextEntityLinks", code: `function ContextEntityLinks({ products }) { return (

If you want one polished option,{" "} {products[0].brand} {" "} and{" "} {products[1].name} {" "} are easy starting points because they feel giftable without overwhelming the answer.

); }` }, "contextual-links-with-ad-hover": { title: "LinkedEntityWithAdHint", code: `function LinkedEntityWithAdHint({ product, children }) { return ( {children} AD ); }` }, "clickable-recommendation-block": { title: "RecommendationBlockLink", code: `function RecommendationBlockLink({ product, children }) { return (

{children}

); }` }, "inline-recommendation-insert": { title: "InlineRecommendationInsert", code: `function InlineRecommendationInsert({ product }) { return (

); }` }, "text-links": { title: "LinkedProductName", code: `function LinkedProductName({ product }) { return ( {product.name} ); }` }, "inline-cards": { title: "InlineCards", code: `function InlineCards({ products }) { return (

{products.map((product) => ( ))}

); }` }, "reason-chips": { title: "ReasonChips", code: `function ReasonChips({ product }) { return (

{product.styleTags.map((tag) => ( {tag} ))}

); }` }, "expandable-picks": { title: "ExpandablePick", code: `function ExpandablePick({ product }) { return (

{product.name}

{product.matchReason}

{point}

); }` }, "hover-sync-answer": { title: "ProductPanel", code: `function ProductPanel({ product }) { return (

{product.supportingPoints.map((point) => (

{point}

))}

); }` }, "chat-carousel": { title: "ProductCarousel", code: `function ProductCarousel({ products }) { return (

{products.map((product) => ( ))}

); }` }, "product-gallery": { title: "ProductGallery", code: `function ProductGallery({ products }) { return (

{products.map((product) => ( ))}

); }` }, "editorial-spotlight": { title: "Spotlight", code: `function Spotlight({ hero, supporting }) { return (

{supporting.map((product) => ( ))}

); }` }, "bento-discovery-grid": { title: "BentoGrid", code: `function BentoGrid({ featured, sideItems }) { return (

{featured.name}

{sideItems.map((product) => ( ))}

); }` }, "lookbook-strip": { title: "LookbookCard", code: `function LookbookCard({ product }) { return (

{product.name}

); }` }, "compact-result-shelf": { title: "ShelfCard", code: `function ShelfCard({ product }) { return (

{product.name}

{product.brand}

); }` }, "comparison-table": { title: "ComparisonTable", code: `function ComparisonTable({ products }) { return ( {products.map((product) => ( ))} {/* render rows from product fields */}

Attribute	{product.brand}

); }` }, "attribute-scorecards": { title: "Scorecard", code: `function Scorecard({ product }) { return (

{product.name}

); }` }, "persona-matcher": { title: "PersonaRankedList", code: `function PersonaRankedList({ persona, products }) { const ranked = [...products].sort( (left, right) => right.personaFit[persona] - left.personaFit[persona] ); return ranked.map((product) => ( )); }` }, "occasion-switcher": { title: "OccasionView", code: `function OccasionView({ activeOccasion, products }) { return (

{products.map((product) => (

{product.name}

{product.occasionMessages[activeOccasion]}

))}

); }` }, "shortlist-compare-tray": { title: "ShortlistTray", code: `function ShortlistTray({ selectedProducts }) { return (

{selectedProducts.map((product) => ( {product.name} ))}

); }` }, "follow-up-service-card": { title: "ServiceCard", code: `function ServiceCard() { return (

Follow-up service

Premium gift wrapping

Add a handwritten card, premium wrapping, and delivery timing preferences.

); }` }, "gift-bundle-builder": { title: "BundleBuilder", code: `function BundleBuilder({ options, selectedOptions, onToggle }) { return (

{options.map((option) => ( ))}

); }` }, "save-or-share-wishlist": { title: "WishlistActions", code: `function WishlistActions() { return (

); }` }, "next-step-action-sheet": { title: "ActionSheet", code: `function ActionSheet() { return (

); }` } }; const getDemosByCategory = categoryId => demos.filter(demo => demo.categoryId === categoryId); const getProductById = productId => products.find(product => product.id === productId) || products[0]; const getSortedProductsByPersona = persona => [...products].sort((left, right) => right.personaFit[persona] - left.personaFit[persona]); const getSortedProductsByOccasion = occasion => [...products].sort((left, right) => { const leftScore = left.occasionTags.includes(occasion) ? 1 : 0; const rightScore = right.occasionTags.includes(occasion) ? 1 : 0; return rightScore - leftScore; }); const renderBoldSegments = text => { const segments = text.split(/(\*\*.*?\*\*)/g).filter(Boolean); return segments.map((segment, index) => { if (segment.startsWith("**") && segment.endsWith("**")) { return _jsx(_components.strong, { children: segment.slice(2, -2) }, `${segment}-${index}`); } return _jsx(_components.span, { children: segment }, `${segment}-${index}`); }); }; const tag = (content, tone = "default", key) => { const toneClass = ({ default: "border-slate-200 bg-white text-slate-600", warm: "border-amber-200 bg-amber-50 text-amber-800", dark: "border-slate-800 bg-slate-900 text-white", subtle: "border-slate-200 bg-slate-50 text-slate-600", success: "border-emerald-200 bg-emerald-50 text-emerald-800", indigo: "border-indigo-200 bg-indigo-50 text-indigo-700" })[tone] || "border-slate-200 bg-white text-slate-600"; return _jsx(_components.span, { className: `mint-inline-flex mint-rounded-full mint-border mint-px-2.5 mint-py-1 mint-text-xs mint-font-medium ${toneClass}`, children: content }, key); }; const productImage = ({product, alt = product.name, frameClassName = "h-56 w-full bg-white", frameStyle, imageClassName = "", eager = false}) => _jsx(_components.div, { className: `mint-relative mint-max-w-[full] mint-max-h-[400px] mint-overflow-hidden mint-rounded-2xl mint-bg-slate-100 ${frameClassName}`, style: frameStyle, children: _jsx(_components.img, { alt: alt, className: `mint-m-0 mint-block mint-h-full mint-w-full ${product.imagePosition || "mint-object-center"} mint-object-cover ${imageClassName}`, decoding: "async", loading: eager ? "eager" : "lazy", src: product.image }) }); const softPlacementCard = ({product, description = product.softPlacementCopy || product.adCopy, badge = "AD"}) => _jsx(_components.a, { className: "mint-border-none mint-block", href: product.url, rel: "noreferrer", target: "_blank", children: _jsx(_components.div, { className: "mint-rounded-2xl mint-border mint-border-amber-200 mint-bg-gradient-to-br mint-from-amber-50 mint-to-white mint-p-3 shadow-[0_10px_30px_rgba(217,119,6,0.12)] mint-transition hover:mint-border-amber-300", children: _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [productImage({ frameClassName: "shrink-0 bg-white", frameStyle: { height: "5.5rem", minWidth: "5.5rem", width: "5.5rem" }, product }), _jsxs(_components.div, { className: "mint-min-w-0 mint-flex-1", children: [_jsxs(_components.div, { className: "mint-flex mint-flex-wrap mint-items-center mint-justify-between mint-gap-2", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2", children: [_jsx(_components.span, { className: "mint-inline-flex mint-rounded-full mint-bg-amber-600 mint-px-1.5 mint-py-[1px] mint-text-[9px] mint-font-semibold mint-uppercase mint-leading-none mint-text-white", children: badge }), _jsx(_components.span, { className: "mint-truncate mint-text-sm mint-font-semibold mint-text-slate-900", children: product.name })] }), _jsx(_components.span, { className: "mint-shrink-0 mint-rounded-full mint-bg-amber-100 mint-px-2.5 mint-py-1 mint-text-xs mint-font-semibold mint-text-amber-800", children: product.displayPrice })] }), _jsx(_components.p, { className: "mint-mt-2 mint-text-xs mint-leading-5 mint-text-slate-600", children: description })] })] }) }) }); const scoreBar = ({label, value}) => _jsxs(_components.div, { className: "mint-space-y-1.5", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between mint-text-xs mint-font-medium mint-text-slate-600", children: [_jsx(_components.span, { children: label }), _jsx(_components.span, { children: value })] }), _jsx(_components.div, { className: "mint-h-2 mint-rounded-full mint-bg-slate-200", children: _jsx(_components.div, { className: "mint-h-2 mint-rounded-full mint-bg-slate-900", style: { width: `${value}%` } }) })] }); const previewFrame = ({children, footer}) => _jsxs(_components.div, { className: "mint-overflow-hidden mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-shadow-sm", children: [_jsx(_components.div, { className: "mint-border-b mint-border-slate-200 mint-bg-slate-50 mint-px-5 mint-py-4", children: _jsxs(_components.div, { className: "mint-flex mint-items-start mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-bg-slate-900 mint-text-sm mint-font-semibold mint-text-white", children: "U" }), _jsx(_components.p, { className: "mint-rounded-2xl mint-bg-slate-900 mint-px-4 mint-py-3 mint-text-sm mint-leading-6 mint-text-white", children: "Please help me find some handbags. I am planning to buy them as gifts for my girlfriend." })] }) }), _jsx(_components.div, { className: "mint-space-y-5 mint-px-5 mint-py-5", children: children }), footer ? _jsx(_components.div, { className: "mint-border-t mint-border-slate-200 mint-bg-slate-50 mint-px-5 mint-py-4", children: footer }) : null] }); const productCard = ({product, compact = false, emphasis = false, frameStyle = null, footer}) => _jsx(_components.div, { className: `mint-overflow-hidden mint-rounded-2xl mint-border ${emphasis ? "mint-border-slate-900 mint-bg-slate-900 mint-text-white mint-shadow-md" : "mint-border-amber-200 mint-bg-amber-50 mint-text-slate-900 mint-shadow-sm"}`, children: _jsxs(_components.div, { className: compact ? "flex gap-4 p-4" : "p-4", children: [_jsx(_components.div, { className: compact ? "shrink-0" : "mb-4", children: productImage({ eager: !compact, frameClassName: compact ? "shrink-0 bg-white" : "max-h-[200px] max-w-[200px] w-full bg-white", frameStyle: frameStyle || (compact ? { height: "6rem", minWidth: "6rem", width: "6rem" } : undefined), product }) }), _jsxs(_components.div, { className: "mint-min-w-0 mint-flex-1", children: [_jsxs(_components.div, { className: "mint-mb-2 mint-flex mint-flex-wrap mint-items-center mint-gap-2", children: [tag(product.badge, emphasis ? "dark" : "warm"), tag(product.priceBand, emphasis ? "subtle" : "default")] }), _jsx(_components.p, { className: `mint-mb-1 mint-text-base mint-w-full mint-block mint-font-semibold ${emphasis ? "mint-text-white" : "mint-text-slate-900"}`, children: product.name }), _jsx(_components.p, { className: `mint-mb-2 mint-text-sm ${emphasis ? "mint-text-slate-200" : "mint-text-slate-600"}`, children: product.brand }), _jsx(_components.p, { className: `mint-text-sm mint-leading-6 ${emphasis ? "mint-text-slate-200" : "mint-text-slate-600"}`, children: product.adCopy }), footer ? _jsx(_components.div, { className: "mint-mt-4", children: footer }) : null] })] }) }); const answerList = ({linkNames = false, showReasonChips = false, highlightProductId, itemAction}) => _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-flex-1 mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-2 mint-text-base mint-font-semibold mint-text-slate-900", children: "2026 handbag gifting guide" }), _jsx(_components.p, { className: "mint-mb-4", children: "If you are looking for a milestone gift, these three handbag directions cover the strongest combinations of style, recognition, and gifting potential." }), _jsx(_components.ul, { className: "mint-space-y-3", children: products.map(product => { const isActive = highlightProductId === product.id; return _jsxs(_components.li, { className: `mint-rounded-2xl mint-border mint-px-4 mint-py-3 mint-transition ${isActive ? "mint-border-slate-900 mint-bg-white mint-shadow-sm" : "mint-border-slate-200 mint-bg-white"}`, onMouseEnter: itemAction ? () => itemAction(product.id) : undefined, children: [_jsxs(_components.p, { className: "mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsxs(_components.strong, { children: [linkNames ? _jsx(_components.a, { className: "mint-border-none text-primary mint-no-underline hover:mint-underline", href: product.url, rel: "noreferrer", target: "_blank", children: product.name }) : product.name, ":"] }), " ", renderBoldSegments(product.matchReason)] }), showReasonChips ? _jsx(_components.div, { className: "mint-mt-3 mint-flex mint-flex-wrap mint-gap-2", children: product.styleTags.map(item => tag(item, "subtle", `${product.id}-${item}`)) }) : null] }, product.id); }) })] })] }); const TextLinksPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Lowest-friction option. It keeps the assistant answer intact and only upgrades the product names." }), children: answerList({ linkNames: true }) }); const SoftMentionPreview = () => { const featuredProduct = products[0]; return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "This pattern keeps the answer in advice mode, then introduces one product as a light suggestion instead of a hard merchandising switch." }), children: _jsxs(_components.div, { className: "mint-space-y-4", children: [_jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-3", children: "If you are choosing a gift for your girlfriend, I would usually start from her daily style instead of the product category itself. That makes it easier to avoid recommendations that feel technically correct but emotionally flat." }), _jsx(_components.p, { className: "mint-mb-3", children: "For example, if she usually likes polished pieces that still feel easy to wear, then a refined bag can be a very safe direction. If she is more design-led, then I would lean toward something quieter and more distinctive instead of something obviously logo-driven." }), _jsx(_components.p, { children: "To keep it simple, I can start with one softer recommendation first and only expand into a fuller shortlist if you want more options after that." })] })] }), _jsx(_components.div, { className: "mint-flex mint-justify-end", children: _jsx(_components.div, { className: "mint-max-w-md mint-rounded-2xl mint-bg-slate-900 mint-px-4 mint-py-3 mint-text-sm mint-leading-6 mint-text-white", children: "Yes, show me one subtle option first." }) }), _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-3", children: "A gentle starting point would be this one. It feels polished and gift-ready, but still understated enough that the recommendation does not overpower the conversation." }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-6 mint-text-slate-600", children: "If this direction feels right, I can then give you two stronger alternatives: one more iconic and one more design-led." }), softPlacementCard({ badge: "AD", description: featuredProduct.softPlacementCopy, product: featuredProduct })] })] })] }) }); }; const ContextualEntityLinksPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "This works well when the answer should remain paragraph-first and only the important entities need commercial affordance." }), children: _jsx(_components.div, { className: "mint-space-y-4", children: _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-3", children: "If you want the recommendation to stay elegant, I would keep the shortlist very tight and only mention the strongest directions directly inside the answer instead of switching into a visible product module too early." }), _jsxs(_components.p, { className: "mint-mb-3", children: ["For a more polished and gift-ready option,", " ", _jsx(_components.a, { className: "mint-border-none mint-font-medium text-primary mint-no-underline hover:mint-underline", href: products[0].url, rel: "noreferrer", target: "_blank", children: "Louis Vuitton" }), " ", "is the safest place to start. If you want something quieter and more design-led,", " ", _jsx(_components.a, { className: "mint-border-none mint-font-medium text-primary mint-no-underline hover:mint-underline", href: products[1].url, rel: "noreferrer", target: "_blank", children: "Large Amazona 180" }), " ", "feels more understated and design-forward."] }), _jsx(_components.p, { children: "That way, the answer still reads like advice first, while the most important brand and product entities quietly remain clickable." })] })] }) }) }); const ContextualLinksWithAdHoverPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "This keeps the paragraph visually quiet, while the richer product card only appears when the user inspects the AD marker." }), children: _jsx(_components.div, { className: "mint-space-y-4", children: _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-7 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-3", children: "If you want to keep the recommendation elegant, one good approach is to mention the strongest option directly in the paragraph and only expose the richer product card when the user shows intent." }), _jsxs(_components.p, { className: "mint-mb-3", children: ["For a polished and gift-ready direction,", " ", _jsx(_components.a, { className: "mint-border-none mint-font-medium text-primary mint-no-underline hover:mint-underline", href: products[0].url, rel: "noreferrer", target: "_blank", children: "Louis Vuitton" }), _jsx(_components.span, { className: "mint-relative mint-ml-1 mint-inline-flex mint-align-middle", children: _jsxs(_components.span, { className: "mint-group mint-inline-flex", children: [_jsx(_components.span, { className: "mint-inline-flex mint-cursor-default mint-rounded-full mint-bg-amber-500 mint-px-1 mint-py-[1px] mint-text-[9px] mint-font-semibold mint-uppercase mint-leading-none mint-text-white", tabIndex: 0, children: "AD" }), _jsx(_components.span, { className: "mint-absolute mint-left-0 mint-top-full mint-z-10 mint-mt-2 mint-hidden mint-w-[32rem] mint-max-w-[calc(100vw-4rem)] group-hover:mint-block group-focus-within:mint-block", children: softPlacementCard({ badge: "AD", description: products[0].softPlacementCopy, product: products[0] }) })] }) }), " ", "is an easy place to start because it feels refined without making the answer suddenly look like a product grid."] }), _jsx(_components.p, { children: "This way, the main answer remains readable, but users who notice the disclosure marker can still inspect the product with a much richer preview." })] })] }) }) }); const ClickableRecommendationBlockPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "This pattern enlarges the click target only where the answer clearly moves into recommendation mode." }), children: _jsx(_components.div, { className: "mint-space-y-4", children: _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-3", children: "If you are buying for your girlfriend, I would first narrow the answer to one recommendation paragraph instead of showing a full shopping block right away. That keeps the tone helpful and personal, especially if the user is still thinking through taste, budget, and occasion." }), _jsx(_components.a, { className: "mint-border-none mint-block", href: products[0].url, rel: "noreferrer", target: "_blank", children: _jsxs(_components.p, { className: "mint-rounded-xl mint-px-1 mint-py-1 mint-text-sm mint-leading-7 mint-text-slate-700 mint-transition hover:mint-bg-amber-50/60", children: [_jsxs(_components.span, { className: "mint-font-medium mint-text-slate-900", children: ["My soft recommendation would be ", products[0].name] }), " ", "because it feels polished, giftable, and easy to imagine across both daytime and dinner settings, so the paragraph itself can stay close to normal body copy while still acting as the click target."] }) }), _jsx(_components.p, { className: "mint-mt-3", children: "If you prefer, I can then expand into a fuller shortlist with one more iconic option and one quieter alternative." })] })] }) }) }); const InlineRecommendationInsertPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "This mirrors a long-form answer where one compact recommendation card appears exactly at the point where a product becomes relevant." }), children: _jsx(_components.div, { className: "mint-space-y-4", children: _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(_components.span, { className: "mint-inline-flex mint-h-9 mint-w-9 mint-shrink-0 mint-items-center mint-justify-center mint-rounded-full mint-border mint-border-slate-200 mint-bg-white mint-text-sm mint-font-semibold mint-text-slate-700", children: "AX" }), _jsxs(_components.div, { className: "mint-min-w-0 mint-max-w-3xl mint-rounded-2xl mint-bg-slate-50 mint-p-4 mint-text-sm mint-leading-7 mint-text-slate-700", children: [_jsx(_components.p, { className: "mint-mb-4", children: "If you are choosing a gift for your girlfriend and are not fully sure what direction to take yet, I would usually think through a few categories first and only surface one product when it naturally matches the answer." }), _jsxs(_components.ul, { className: "mint-space-y-4", children: [_jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Jewelry:" }), " A necklace, bracelet, or earrings can work very well if she already likes delicate accessories and tends to wear them often."] }), _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Beauty:" }), " If she has a favorite brand, a premium beauty or skincare item can feel thoughtful without being too difficult to choose."] }), _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Bag direction:" }), " If you want something that feels more complete as a milestone gift, a refined handbag is often the safest upgrade because it feels both practical and special."] })] }), _jsx(_components.div, { className: "mint-my-4", children: softPlacementCard({ badge: "AD", description: products[0].softPlacementCopy, product: products[0] }) }), _jsxs(_components.ul, { className: "mint-space-y-4", children: [_jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Experience gifts:" }), " A dinner, short trip, or a memorable shared activity can also feel more personal than a physical item."] }), _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Final filter:" }), " The best choice usually comes down to whether she would enjoy using it in daily life instead of only appreciating it as a pretty gift."] })] })] })] }) }) }); const InlineCardsPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Same answer payload, then a richer visual layer for faster comparison and higher engagement." }), children: _jsxs(_Fragment, { children: [answerList({}), _jsx(_components.div, { className: "mint-grid mint-gap-4", children: products.map(product => _jsx(_components.a, { className: "mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: productCard({ compact: true, product }) }, product.id)) })] }) }); const ReasonChipsPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Chips help users understand why each item was selected without leaving the answer context." }), children: answerList({ showReasonChips: true }) }); const ExpandablePicksPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Good when you want to keep the first screen compact but still let users inspect the reasoning." }), children: _jsxs(_Fragment, { children: [_jsxs(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-4", children: [_jsx(_components.p, { className: "mint-text-base mint-font-semibold mint-text-slate-900", children: "2026 handbag gifting guide" }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: "If you are looking for a milestone gift, these three handbag directions cover the strongest combinations of style, recognition, and gifting potential." })] }), _jsx(_components.div, { className: "mint-grid mint-gap-3", children: products.map(product => _jsxs(_components.details, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsx(_components.summary, { className: "mint-cursor-pointer mint-list-none mint-text-sm mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.matchReason }), _jsx(_components.ul, { className: "mint-mt-3 mint-space-y-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.supportingPoints.map(point => _jsx(_components.li, { className: "mint-rounded-xl mint-bg-slate-50 mint-px-3 mint-py-2", children: point }, point)) })] }, product.id)) })] }) }); const HoverSyncPreview = () => { const [hoveredProductId, setHoveredProductId] = useState(products[0].id); const activeProduct = getProductById(hoveredProductId); return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Hover or focus can connect reasoning on the left to a richer product treatment on the right." }), children: _jsxs(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-2", children: [answerList({ highlightProductId: hoveredProductId, itemAction: setHoveredProductId }), _jsx(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: productCard({ frameStyle: { width: '100%', height: '400px' }, compact: false, emphasis: true, footer: _jsx(_components.div, { className: "mint-space-y-2", children: activeProduct.supportingPoints.map(point => _jsx(_components.div, { className: "mint-rounded-xl mint-border mint-border-white/10 mint-bg-white/10 mint-px-3 mint-py-2 mint-text-sm mint-text-slate-100", children: point }, point)) }), product: activeProduct }) })] }) }); }; const ChatCarouselPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "A carousel keeps the chat framing but makes product browsing feel more native to touch interfaces." }), children: _jsxs(_Fragment, { children: [answerList({}), _jsx(_components.div, { className: "mint-overflow-x-auto mint-pb-2", children: _jsx(_components.div, { className: "mint-flex mint-gap-4", children: products.map(product => _jsx(_components.a, { className: "mint-w-80 mint-shrink-0 mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: productCard({ frameStyle: { width: '100%', height: '260px' }, product }) }, product.id)) }) })] }) }); const GalleryPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "The same dataset can move from chat-first into a straightforward recommendation grid." }), children: _jsxs(_Fragment, { children: [_jsxs(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-4", children: [_jsx(_components.p, { className: "mint-text-sm mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Recommendation gallery" }), _jsx(_components.h3, { className: "mint-mt-2 mint-text-xl mint-font-semibold mint-text-slate-900", children: "Gift-ready luxury handbags" }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: "A gallery-first view works well when the user wants to compare several options visually." })] }), _jsx(_components.div, { className: "mint-grid mint-gap-1 lg:mint-grid-cols-3", children: products.map(product => _jsx(_components.a, { className: "mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: productCard({ frameStyle: { width: '100%', height: '240px' }, product }) }, product.id)) })] }) }); const EditorialSpotlightPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Spotlight layouts are useful when you want one hero recommendation and two supporting options." }), children: _jsxs(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: [_jsx(_components.div, { className: "lg:mint-col-span-2", children: productCard({ emphasis: true, footer: _jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: products[0].styleTags.map(item => tag(item, "subtle", item)) }), product: products[0] }) }), _jsx(_components.div, { className: "mint-grid mint-gap-4", children: products.slice(1).map(product => _jsx(_components.a, { className: "mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: productCard({ compact: true, product }) }, product.id)) })] }) }); const BentoDiscoveryPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "A bento layout can make even a small dataset feel more editorial and discovery-oriented." }), children: _jsxs(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: [_jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-900 mint-p-5 mint-text-white mint-shadow-sm lg:mint-col-span-2", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-300", children: "Discovery hero" }), _jsxs(_components.div, { className: "mint-mt-4 mint-grid mint-gap-4 lg:mint-grid-cols-2", children: [productImage({ eager: true, frameClassName: "h-72 w-full rounded-2xl bg-slate-100", product: products[0] }), _jsxs(_components.div, { className: "mint-space-y-4", children: [_jsx(_components.h3, { className: "mint-text-2xl mint-font-semibold", children: products[0].name }), _jsx(_components.p, { className: "mint-text-sm mint-leading-6 mint-text-slate-200", children: products[0].matchReason }), _jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: products[0].supportingPoints.map(point => tag(point, "subtle", point)) })] })] })] }), _jsx(_components.div, { className: "mint-grid mint-gap-4", children: products.slice(1).map(product => _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-4 mint-shadow-sm", children: [productImage({ frameClassName: "h-44 w-full bg-white", frameStyle: { width: '100%', height: '200px' }, product }), _jsx(_components.p, { className: "mint-mt-4 mint-text-base mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.adCopy })] }, product.id)) })] }) }); const LookbookStripPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Lookbook strips push the imagery forward and make the merchandising feel more lifestyle-led." }), children: _jsx(_components.div, { className: "mint-grid mint-gap-4 md:mint-grid-cols-3", children: products.map(product => _jsxs(_components.a, { className: "mint-group mint-relative mint-overflow-hidden mint-rounded-3xl mint-border mint-border-slate-200 mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: [productImage({ frameClassName: "h-80 w-full rounded-none bg-slate-100", imageClassName: "transition duration-300 group-hover:scale-105", product }), _jsxs(_components.div, { className: "mint-absolute mint-inset-x-0 mint-bottom-0 mint-bg-gradient-to-t mint-from-black/80 mint-to-transparent mint-p-5 mint-text-white", children: [_jsx(_components.p, { className: "mint-mt-2 mint-text-base mint-font-semibold", children: product.name }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-200", children: product.adCopy })] })] }, product.id)) }) }); const CompactShelfPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Compact shelves are good for side rails, search results, and recommendation rows inside denser pages." }), children: _jsxs(_Fragment, { children: [_jsx(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-4", children: _jsx(_components.p, { className: "mint-text-sm mint-font-semibold mint-text-slate-900", children: "Related gift-ready picks" }) }), _jsx(_components.div, { className: "mint-overflow-x-auto mint-pb-2", children: _jsx(_components.div, { className: "mint-flex mint-gap-3", children: products.map(product => _jsxs(_components.a, { className: "mint-w-64 mint-shrink-0 mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-p-3 mint-shadow-sm mint-border-none", href: product.url, rel: "noreferrer", target: "_blank", children: [productImage({ frameClassName: "h-36 w-full bg-white", frameStyle: { width: '100%', height: '300px' }, product }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-font-semibold mint-text-slate-900", children: product.name })] }, product.id)) }) })] }) }); const ComparisonTablePreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Tables are useful when the user is already comparing and wants structured trade-offs." }), children: _jsx(_components.div, { className: "mint-overflow-x-auto mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-shadow-sm", children: _jsxs(_components.table, { className: "mint-min-w-full mint-text-left mint-text-sm mint-text-slate-600", children: [_jsx(_components.thead, { className: "mint-bg-slate-50 mint-text-slate-900", children: _jsxs(_components.tr, { children: [_jsx(_components.th, { className: "mint-px-4 mint-py-3 mint-font-semibold", children: "Attribute" }), products.map(product => _jsx(_components.th, { className: "mint-px-4 mint-py-3 mint-font-semibold", children: product.brand }, product.id))] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { className: "mint-border-t mint-border-slate-200", children: [_jsx(_components.td, { className: "mint-px-4 mint-py-3 mint-font-medium mint-text-slate-900", children: "Style" }), products.map(product => _jsx(_components.td, { className: "mint-px-4 mint-py-3", children: product.styleTags.slice(0, 2).join(", ") }, product.id))] }), _jsxs(_components.tr, { className: "mint-border-t mint-border-slate-200", children: [_jsx(_components.td, { className: "mint-px-4 mint-py-3 mint-font-medium mint-text-slate-900", children: "Best occasion" }), products.map(product => _jsx(_components.td, { className: "mint-px-4 mint-py-3", children: product.occasionTags[0] }, product.id))] }), _jsxs(_components.tr, { className: "mint-border-t mint-border-slate-200", children: [_jsx(_components.td, { className: "mint-px-4 mint-py-3 mint-font-medium mint-text-slate-900", children: "Price band" }), products.map(product => _jsx(_components.td, { className: "mint-px-4 mint-py-3", children: product.priceBand }, product.id))] }), _jsxs(_components.tr, { className: "mint-border-t mint-border-slate-200", children: [_jsx(_components.td, { className: "mint-px-4 mint-py-3 mint-font-medium mint-text-slate-900", children: "Gift reason" }), products.map(product => _jsx(_components.td, { className: "mint-px-4 mint-py-3", children: product.matchReason }, product.id))] })] })] }) }) }); const AttributeScorecardsPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Scorecards make implicit ranking criteria visible without overloading the page with prose." }), children: _jsx(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: products.map(product => _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-5 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-base mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-1 mint-text-sm mint-text-slate-500", children: product.brand }), _jsxs(_components.div, { className: "mint-mt-5 mint-space-y-4", children: [scoreBar({ label: "Versatility", value: product.scores.versatility }), scoreBar({ label: "Statement", value: product.scores.statement }), scoreBar({ label: "Gift appeal", value: product.scores.giftAppeal })] })] }, product.id)) }) }); const PersonaMatcherPreview = () => { const personas = [{ id: "minimalist", label: "Minimalist" }, { id: "office", label: "Office style" }, { id: "everyday", label: "Daily use" }]; const [activePersona, setActivePersona] = useState(personas[0].id); const rankedProducts = getSortedProductsByPersona(activePersona); return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Persona switches help the same catalog adapt to different buyer intents without changing the data source." }), children: _jsxs(_Fragment, { children: [_jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: personas.map(persona => _jsx(_components.button, { className: `mint-rounded-full mint-border mint-px-4 mint-py-2 mint-text-sm mint-font-semibold ${activePersona === persona.id ? "mint-border-slate-900 mint-bg-slate-900 mint-text-white" : "mint-border-slate-200 mint-bg-white mint-text-slate-700"}`, onClick: () => setActivePersona(persona.id), type: "button", children: persona.label }, persona.id)) }), _jsx(_components.div, { className: "mint-grid mint-gap-4", children: rankedProducts.map((product, index) => _jsxs(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsxs(_components.div, { className: "mint-flex mint-items-start mint-justify-between mint-gap-4", children: [_jsxs(_components.div, { children: [_jsxs(_components.p, { className: "mint-text-base mint-font-semibold mint-text-slate-900", children: [index + 1, ". ", product.name] }), _jsx(_components.p, { className: "mint-mt-1 mint-text-sm mint-text-slate-500", children: product.brand })] }), tag(`${product.personaFit[activePersona]} match`, "success")] }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.matchReason })] }, product.id)) })] }) }); }; const OccasionSwitcherPreview = () => { const occasions = [{ id: "birthday", label: "Birthday" }, { id: "anniversary", label: "Anniversary" }, { id: "holiday", label: "Holiday" }]; const [activeOccasion, setActiveOccasion] = useState(occasions[0].id); const orderedProducts = getSortedProductsByOccasion(activeOccasion); return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Occasion switching is useful when the same response needs a different tone or ranking depending on context." }), children: _jsxs(_Fragment, { children: [_jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: occasions.map(occasion => _jsx(_components.button, { className: `mint-rounded-full mint-border mint-px-4 mint-py-2 mint-text-sm mint-font-semibold ${activeOccasion === occasion.id ? "mint-border-amber-700 mint-bg-amber-700 mint-text-white" : "mint-border-slate-200 mint-bg-white mint-text-slate-700"}`, onClick: () => setActiveOccasion(occasion.id), type: "button", children: occasion.label }, occasion.id)) }), _jsx(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: orderedProducts.map(product => _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [productImage({ frameClassName: "h-48 w-full bg-slate-50", frameStyle: { width: '100%', height: '300px' }, product }), _jsx(_components.p, { className: "mint-mt-4 mint-text-base mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.occasionMessages[activeOccasion] || product.matchReason })] }, product.id)) })] }) }); }; const ShortlistCompareTrayPreview = () => { const [selectedProductIds, setSelectedProductIds] = useState([products[0].id]); const toggleProduct = productId => { setSelectedProductIds(current => { if (current.includes(productId)) { return current.filter(id => id !== productId); } if (current.length >= 3) { return [...current.slice(1), productId]; } return [...current, productId]; }); }; const selectedProducts = products.filter(product => selectedProductIds.includes(product.id)); return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Shortlisting is a useful middle state between passive browsing and final action." }), children: _jsxs(_Fragment, { children: [_jsx(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: products.map(product => { const isSelected = selectedProductIds.includes(product.id); return _jsxs(_components.div, { className: `mint-rounded-3xl mint-border mint-p-4 mint-shadow-sm ${isSelected ? "mint-border-slate-900 mint-bg-slate-900 mint-text-white" : "mint-border-slate-200 mint-bg-white mint-text-slate-900"}`, children: [productImage({ frameClassName: "h-44 w-full bg-slate-50", frameStyle: { width: '100%', height: '300px' }, product }), _jsx(_components.p, { className: "mint-mt-4 mint-text-base mint-font-semibold", children: product.name }), _jsx(_components.button, { className: `mint-mt-4 mint-rounded-full mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-block ${isSelected ? "mint-bg-white mint-text-slate-900" : "mint-bg-slate-900 mint-text-white"}`, onClick: () => toggleProduct(product.id), type: "button", children: isSelected ? "Remove" : "Add to shortlist" })] }, product.id); }) }), _jsx(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-4", children: _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-4 lg:mint-flex-row lg:mint-items-center lg:mint-justify-between", children: [_jsx(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: selectedProducts.map(product => tag(product.name, "dark", product.id)) }), _jsx(_components.button, { className: "mint-inline-flex mint-rounded-full mint-bg-slate-900 mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-white", type: "button", children: "Compare shortlist" })] }) })] }) }); }; const FollowUpServiceCardPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "A docs page can host the first step of a richer service flow without embedding a full application." }), children: _jsxs(_Fragment, { children: [answerList({}), _jsx(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-gradient-to-r mint-from-slate-900 mint-via-slate-800 mint-to-slate-700 mint-p-5 mint-text-white mint-shadow-sm", children: _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-5 lg:mint-items-center lg:mint-justify-between", children: [_jsxs(_components.div, { className: "mint-w-full", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-300", children: "Follow-up service" }), _jsx(_components.h3, { className: "mint-mt-2 mint-text-xl mint-font-semibold", children: "Premium gift wrapping" }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-6 mint-text-slate-200", children: "Add a handwritten card, premium wrapping, and delivery timing preferences without leaving the answer flow." }), _jsxs(_components.div, { className: "mint-mt-4 mint-flex mint-gap-2", children: [tag("Gift note", "subtle"), tag("Premium packaging", "subtle"), tag("Delivery timing", "subtle")] })] }), _jsxs(_components.div, { className: "mint-rounded-2xl mint-bg-white/10 mint-p-4", children: [_jsx(_components.p, { className: "mint-text-sm mint-font-semibold mint-w-full mint-block", children: "Best for " }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-200", children: "Upsell modules, add-on services, and cross-functional flows that start from the same recommendation context." }), _jsx(_components.button, { className: "mint-mt-4 mint-inline-flex mint-items-center mint-justify-center mint-rounded-full mint-bg-white mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-slate-900", type: "button", children: "Add service" })] })] }) })] }) }); const GiftBundleBuilderPreview = () => { const bundleOptions = [{ id: "wrap", label: "Premium wrap" }, { id: "card", label: "Handwritten card" }, { id: "delivery", label: "Timed delivery" }]; const [selectedOptions, setSelectedOptions] = useState(["wrap"]); const toggleOption = optionId => { setSelectedOptions(current => current.includes(optionId) ? current.filter(item => item !== optionId) : [...current, optionId]); }; return previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Bundle builders let the recommendation branch into a simple service configuration flow." }), children: _jsxs(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: [_jsx(_components.div, { className: "lg:mint-col-span-2", children: productCard({ compact: true, product: products[0] }) }), _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-5 mint-shadow-sm lg:mint-col-span-1", children: [_jsx(_components.p, { className: "mint-text-sm mint-font-semibold mint-text-slate-900", children: "Build the gift bundle" }), _jsx(_components.div, { className: "mint-mt-4 mint-grid mint-gap-3", children: bundleOptions.map(option => { const isSelected = selectedOptions.includes(option.id); return _jsx(_components.button, { className: `mint-rounded-2xl mint-border mint-px-4 mint-py-3 mint-text-left mint-text-sm mint-font-medium ${isSelected ? "mint-border-indigo-700 mint-bg-indigo-50 mint-text-indigo-700" : "mint-border-slate-200 mint-bg-slate-50 mint-text-slate-700"}`, onClick: () => toggleOption(option.id), type: "button", children: option.label }, option.id); }) }), _jsxs(_components.div, { className: "mint-mt-5 mint-rounded-2xl mint-bg-slate-50 mint-p-4", children: [_jsx(_components.p, { className: "mint-text-xs mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Selected" }), _jsx(_components.div, { className: "mint-mt-3 mint-flex mint-flex-wrap mint-gap-2", children: selectedOptions.map(optionId => { const option = bundleOptions.find(item => item.id === optionId); return tag(option ? option.label : optionId, "indigo", optionId); }) })] })] })] }) }); }; const SaveOrShareWishlistPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Wishlist actions are a simple way to capture intent when the user is not ready to decide yet." }), children: _jsxs(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: [_jsx(_components.div, { className: "mint-grid mint-gap-4 lg:mint-col-span-2", children: products.slice(0, 2).map(product => _jsx(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: _jsxs(_components.div, { className: "mint-flex mint-gap-4", children: [productImage({ frameClassName: "shrink-0 bg-slate-50", frameStyle: { height: "6rem", minWidth: "6rem", width: "6rem" }, product }), _jsxs(_components.div, { className: "mint-min-w-0 mint-flex-1", children: [_jsx(_components.p, { className: "mint-text-base mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-1 mint-text-sm mint-text-slate-500", children: product.brand }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.adCopy })] })] }) }, product.id)) }), _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-900 mint-p-5 mint-text-white mint-shadow-sm lg:mint-col-span-1", children: [_jsx(_components.p, { className: "mint-text-xs mint-uppercase mint-tracking-widest mint-text-slate-300", children: "Wishlist actions" }), _jsx(_components.p, { className: "mint-mt-3 mint-text-lg mint-font-semibold", children: "Save the shortlist for later" }), _jsxs(_components.div, { className: "mint-mt-5 mint-grid mint-gap-3", children: [_jsx(_components.button, { className: "mint-rounded-full mint-bg-white mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-slate-900", type: "button", children: "Save list" }), _jsx(_components.button, { className: "mint-rounded-full mint-border mint-border-white/20 mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-white", type: "button", children: "Share with a friend" }), _jsx(_components.button, { className: "mint-rounded-full mint-border mint-border-white/20 mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-white", type: "button", children: "Copy summary" })] })] })] }) }); const NextStepActionSheetPreview = () => previewFrame({ footer: _jsx(_components.p, { className: "mint-text-xs mint-leading-5 mint-text-slate-500", children: "Action sheets make the transition from recommendation to next step explicit and compact." }), children: _jsxs(_Fragment, { children: [answerList({}), _jsx(_components.div, { className: "mint-grid mint-gap-4 lg:mint-grid-cols-3", children: products.map(product => _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-base mint-font-semibold mint-text-slate-900", children: product.name }), _jsx(_components.p, { className: "mint-mt-2 mint-text-sm mint-leading-6 mint-text-slate-600", children: product.matchReason })] }, product.id)) }), _jsx(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-900 mint-p-4 mint-text-white mint-shadow-sm", children: _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-3 lg:mint-flex-row lg:mint-items-center lg:mint-justify-between", children: [_jsx(_components.p, { className: "mint-text-sm mint-text-slate-200", children: "What do you want to do next with these recommendations?" }), _jsxs(_components.div, { className: "mint-flex mint-flex-wrap mint-gap-2", children: [_jsx(_components.button, { className: "mint-rounded-full mint-bg-white mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-slate-900", type: "button", children: "View details" }), _jsx(_components.button, { className: "mint-rounded-full mint-border mint-border-white/20 mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-white", type: "button", children: "Compare now" }), _jsx(_components.button, { className: "mint-rounded-full mint-border mint-border-white/20 mint-px-4 mint-py-2 mint-text-sm mint-font-semibold mint-text-white", type: "button", children: "Add service" })] })] }) })] }) }); const renderPreview = demoId => { switch (demoId) { case "soft-mention": return _jsx(SoftMentionPreview, {}); case "contextual-entity-links": return _jsx(ContextualEntityLinksPreview, {}); case "contextual-links-with-ad-hover": return _jsx(ContextualLinksWithAdHoverPreview, {}); case "clickable-recommendation-block": return _jsx(ClickableRecommendationBlockPreview, {}); case "inline-recommendation-insert": return _jsx(InlineRecommendationInsertPreview, {}); case "text-links": return _jsx(TextLinksPreview, {}); case "inline-cards": return _jsx(InlineCardsPreview, {}); case "reason-chips": return _jsx(ReasonChipsPreview, {}); case "expandable-picks": return _jsx(ExpandablePicksPreview, {}); case "hover-sync-answer": return _jsx(HoverSyncPreview, {}); case "chat-carousel": return _jsx(ChatCarouselPreview, {}); case "product-gallery": return _jsx(GalleryPreview, {}); case "editorial-spotlight": return _jsx(EditorialSpotlightPreview, {}); case "bento-discovery-grid": return _jsx(BentoDiscoveryPreview, {}); case "lookbook-strip": return _jsx(LookbookStripPreview, {}); case "compact-result-shelf": return _jsx(CompactShelfPreview, {}); case "comparison-table": return _jsx(ComparisonTablePreview, {}); case "attribute-scorecards": return _jsx(AttributeScorecardsPreview, {}); case "persona-matcher": return _jsx(PersonaMatcherPreview, {}); case "occasion-switcher": return _jsx(OccasionSwitcherPreview, {}); case "shortlist-compare-tray": return _jsx(ShortlistCompareTrayPreview, {}); case "follow-up-service-card": return _jsx(FollowUpServiceCardPreview, {}); case "gift-bundle-builder": return _jsx(GiftBundleBuilderPreview, {}); case "save-or-share-wishlist": return _jsx(SaveOrShareWishlistPreview, {}); case "next-step-action-sheet": return _jsx(NextStepActionSheetPreview, {}); default: return _jsx(TextLinksPreview, {}); } }; const initialDemo = demos.find(demo => demo.id === defaultExampleId) || demos[0]; const [activeCategoryId, setActiveCategoryId] = useState(initialDemo.categoryId); const [activeDemoId, setActiveDemoId] = useState(initialDemo.id); const activeDemo = demos.find(demo => demo.id === activeDemoId) || demos[0]; const activeCategory = categories.find(category => category.id === activeDemo.categoryId) || categories[0]; const supportingCode = supportingCodeByDemoId[activeDemo.id]; const demosInActiveCategory = getDemosByCategory(activeCategoryId); const activeDemoIndex = demos.findIndex(demo => demo.id === activeDemo.id) + 1; const handleCategoryChange = categoryId => { setActiveCategoryId(categoryId); const nextDemo = getDemosByCategory(categoryId)[0]; if (nextDemo) { setActiveDemoId(nextDemo.id); } }; const handleDemoChange = demo => { setActiveCategoryId(demo.categoryId); setActiveDemoId(demo.id); }; return _jsxs(_components.div, { className: `mint-my-8 mint-grid mint-gap-6 ${showCatalog ? "lg:mint-grid-cols-4" : ""}`, children: [showCatalog ? _jsxs(_components.aside, { className: "mint-space-y-4 lg:mint-sticky lg:mint-top-24 lg:mint-col-span-1 lg:mint-self-start", children: [_jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Demo catalog" }), _jsxs(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-6 mint-text-slate-600", children: [demos.length, " demos across ", categories.length, " categories. Select a category first, then switch among the specific layouts."] })] }), _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Categories" }), _jsx(_components.div, { className: "mint-mt-4 mint-grid mint-gap-3", children: categories.map(category => { const isActive = category.id === activeCategoryId; const count = getDemosByCategory(category.id).length; return _jsxs(_components.button, { className: `mint-rounded-2xl mint-border mint-px-4 mint-py-3 mint-text-left mint-transition ${isActive ? accentByCategory[category.id] : "mint-border-slate-200 mint-bg-slate-50 mint-text-slate-700 hover:mint-border-slate-300 hover:mint-bg-white"}`, onClick: () => handleCategoryChange(category.id), type: "button", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between mint-gap-3", children: [_jsx(_components.p, { className: "mint-text-sm mint-font-semibold", children: category.label }), _jsx(_components.span, { className: `mint-rounded-full mint-px-2.5 mint-py-1 mint-text-xs mint-font-semibold ${isActive ? "mint-bg-white/15 mint-text-white" : "mint-bg-white mint-text-slate-500"}`, children: count })] }), _jsx(_components.p, { className: `mint-mt-2 mint-text-xs mint-leading-5 ${isActive ? "mint-text-slate-100" : "mint-text-slate-500"}`, children: category.description })] }, category.id); }) })] }), _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-4 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Demos in this category" }), _jsx(_components.div, { className: "mint-mt-4 mint-grid mint-gap-3", children: demosInActiveCategory.map(demo => { const isActive = demo.id === activeDemoId; return _jsxs(_components.button, { className: `mint-rounded-2xl mint-border mint-px-4 mint-py-3 mint-text-left mint-transition ${isActive ? "mint-border-slate-900 mint-bg-slate-900 mint-text-white mint-shadow-sm" : "mint-border-slate-200 mint-bg-slate-50 mint-text-slate-700 hover:mint-border-slate-300 hover:mint-bg-white"}`, onClick: () => handleDemoChange(demo), type: "button", children: [_jsx(_components.p, { className: "mint-text-sm mint-font-semibold", children: demo.label }), _jsx(_components.p, { className: `mint-mt-1 mint-text-xs mint-leading-5 ${isActive ? "mint-text-slate-300" : "mint-text-slate-500"}`, children: demo.eyebrow })] }, demo.id); }) })] })] }) : null, _jsxs(_components.section, { className: `mint-space-y-5 ${showCatalog ? "lg:mint-col-span-3" : ""}`, children: [_jsx(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-6 mint-shadow-sm", children: _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-3 lg:mint-flex-row lg:mint-items-start lg:mint-justify-between", children: [_jsxs(_components.div, { className: "mint-max-w-3xl", children: [_jsxs(_components.div, { className: "mint-flex mint-flex-wrap mint-items-center mint-gap-2", children: [tag(activeCategory.label, "subtle"), tag(`Demo ${activeDemoIndex} of ${demos.length}`, "warm")] }), _jsx(_components.h2, { className: "mint-mt-3 mint-text-2xl mint-font-semibold mint-text-slate-900", children: activeDemo.title }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-leading-7 mint-text-slate-600", children: activeDemo.description })] }), _jsx(_components.div, { className: "mint-rounded-2xl mint-bg-slate-50 mint-px-4 mint-py-3 mint-text-sm mint-text-slate-600", children: activeDemo.label })] }) }), renderPreview(activeDemo.id), _jsxs(_components.div, { className: "mint-space-y-5", children: [_jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-6 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Implementation sketch" }), _jsx(_components.pre, { className: "mint-mt-4 mint-overflow-x-auto mint-rounded-2xl mint-bg-slate-950 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-100", children: _jsx(_components.code, { children: activeDemo.code }) })] }), supportingCode ? _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-white mint-p-6 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Supporting component" }), _jsx(_components.p, { className: "mint-mt-3 mint-text-sm mint-font-medium mint-text-slate-700", children: supportingCode.title }), _jsx(_components.pre, { className: "mint-mt-4 mint-overflow-x-auto mint-rounded-2xl mint-bg-slate-950 mint-p-4 mint-text-sm mint-leading-6 mint-text-slate-100", children: _jsx(_components.code, { children: supportingCode.code }) })] }) : null, _jsxs(_components.div, { className: "mint-rounded-3xl mint-border mint-border-slate-200 mint-bg-slate-50 mint-p-6 mint-shadow-sm", children: [_jsx(_components.p, { className: "mint-text-xs mint-font-semibold mint-uppercase mint-tracking-widest mint-text-slate-500", children: "Why use it" }), _jsx(_components.div, { className: "mint-mt-4 mint-space-y-3", children: activeDemo.notes.map(note => _jsx(_components.div, { className: "mint-rounded-2xl mint-border mint-border-slate-200 mint-bg-white mint-px-4 mint-py-3 mint-text-sm mint-leading-6 mint-text-slate-600", children: note }, note)) })] })] })] })] }); }; function _createMdxContent(props) { const _components = { p: "p", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "This example syncs the answer and the product panel, showing how one item can be emphasized as the user explores the reasoning." }), "\n", _jsx(ExampleShowcase, { defaultExampleId: "hover-sync-answer", showCatalog: false })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { ExampleShowcase, default: MDXContent };

Overview

Soft placement

Answer-native

Browsing-native

Decision-support

Action-extensions