2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T1669,import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { groundsOf } from "../_shared/grounds"; import { hasPriceRange, imageSize, imageSrcSet, primaryImage, productHref } from "../_shared/product-utils"; export type ProductBentoVariant = "2x3" | "3x3"; export type ProductBentoProps = { /** 6 products for `2x3`, 8 for `3x3`. Extra products are ignored. */ products: Product[]; variant?: ProductBentoVariant; getHref?: (product: Product) => string; /** Captions of the two-grounds tile. */ lightLabel?: string; darkLabel?: string; className?: string; }; const SPAN = { "3x3": ["col-span-2 aspect-[4/3] lg:row-span-2 lg:aspect-auto", "", "", "", "", "GROUNDS", "", ""], "2x3": ["col-span-2 aspect-[4/3] lg:col-span-1 lg:row-span-2 lg:aspect-auto", "", "", "", "", "GROUNDS"], } as const; const GROUNDS_SPAN = "col-span-2 aspect-[2/1] lg:aspect-auto"; function Caption({ product }: { product: Product }) { return ( {product.title} ); } /** Asymmetric bento of products; one tile shows the same product on a light and a dark ground. */ export function ProductBento({ products, variant = "3x3", getHref = productHref, lightLabel = "on light", darkLabel = "on dark", className, }: ProductBentoProps) { const spans = SPAN[variant]; const split = products.find((p) => groundsOf(p)); const rest = products.filter((p) => p !== split); const slots = spans.length; const sequence: (Product | "GROUNDS")[] = []; let next = 0; for (let i = 0; i < slots && (next < rest.length || spans[i] === "GROUNDS"); i++) { if (spans[i] === "GROUNDS") { if (split) sequence.push("GROUNDS"); else if (next < rest.length) sequence.push(rest[next++]); } else { sequence.push(rest[next++]); } } return (

{[ { image: grounds.light, label: lightLabel, ground: "bg-surface text-ink" }, { image: grounds.dark, label: darkLabel, ground: "bg-ink text-canvas" }, ].map(({ image, label, ground }) => ( {label} ))}

); } export default ProductBento; 31:Tb33,import type { Collection, Product, ProductImage } from "../../../lib/commerce/types"; import type { ProductBadgeKind } from "../../ui/product-badge/product-badge"; /** Kobra house curves, written out so Tailwind sees the full class names. */ export const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; export const EASE_EXIT = "ease-[cubic-bezier(0.4,0,0.6,1)]"; export const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"; export const productHref = (product: Product) => `/products/${product.handle}`; export const collectionHref = (collection: Collection) => `/collections/${collection.handle}`; export function isSoldOut(product: Product): boolean { return product.variants.length > 0 && product.variants.every((v) => !v.available); } const BLANK = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'/%3E"; /** Featured image, else the first image, else a transparent placeholder so a product with no art still lays out (the well shows). */ export function primaryImage(product: Product): ProductImage { return product.featuredImage ?? product.images?.[0] ?? { src: BLANK, alt: product.title, width: 1200, height: 1200, hasArt: false }; } /** Second image for hover swaps and gallery insets: skips blank (hasArt === false) and same-view images. */ export function secondaryImage(product: Product, images: ProductImage[] = product.images): ProductImage | undefined { const first = images[0] ?? primaryImage(product); const pool = images.filter((i) => i.src !== first.src && i.hasArt !== false && (i.view ?? "front") !== (first.view ?? "front")); return ( pool.find((i) => i.view === "back") ?? pool.find((i) => i.view === "lifestyle") ?? pool[0] ); } /** Image shown on hover: the first art-bearing image of another view, else no swap. */ export function hoverImage(product: Product): ProductImage | undefined { return secondaryImage(product, [primaryImage(product), ...product.images]); } export function imageSize(image: ProductImage): { width: number; height: number } { return { width: image.width ?? 1200, height: image.height ?? 1200 }; } /** 600w twin + full size when both exist. */ export function imageSrcSet(image: ProductImage): string | undefined { return image.thumb && image.thumb !== image.src ? `${image.thumb} 600w, ${image.src} 1200w` : undefined; } export function hasBackPrint(product: Product): boolean { return product.images.some((i) => i.view === "back"); } export function badgeKindFor(product: Product): ProductBadgeKind | undefined { if (isSoldOut(product)) return "sold-out"; if (product.tags.includes("new")) return "new"; if (hasBackPrint(product)) return "back-print"; return undefined; } export const hasPriceRange = (product: Product) => product.priceRange.min.amount !== product.priceRange.max.amount; 32:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 33:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 34:T47f,import type { BlockMeta } from "../../../lib/block-meta"; export const productBentoMeta: BlockMeta = { slug: "product-bento", title: "Product bento", description: "Six to eight products in an asymmetric bento; one tile shows the same product on a light and a dark ground. 2x3 and 3x3.", group: "product", kobraDeps: [], files: [ "blocks/product/product-bento/product-bento.tsx", "blocks/product/_shared/product-utils.ts", "blocks/ui/price/price.tsx", "blocks/ui/swatch/colors.ts", "lib/commerce/select.ts", ], props: [ { name: "products", type: "Product[]", description: "6 for 2x3, 8 for 3x3." }, { name: "variant", type: "'2x3' | '3x3'", default: "'3x3'", description: "Layout." }, { name: "getHref", type: "(product: Product) => string", default: "`/products/${handle}`", description: "Tile link builder." }, { name: "lightLabel", type: "string", default: "'on light'", description: "Caption of the light ground." }, { name: "darkLabel", type: "string", default: "'on dark'", description: "Caption of the dark ground." }, ], tags: ["bento", "grid", "feature"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#product","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Product"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Product bento"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Product bento"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Six to eight products in an asymmetric bento; one tile shows the same product on a light and a dark ground. 2x3 and 3x3."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"product-bento","group":"product","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/product/product-bento/product-bento.tsx","code":"$30"},{"path":"blocks/product/_shared/product-utils.ts","code":"$31"},{"path":"blocks/ui/price/price.tsx","code":"$32"},{"path":"blocks/ui/swatch/colors.ts","code":"// Garment color name -> CSS color for swatch dots. Unknown names fall back to a\n// neutral so a new Printify color never renders as an invisible dot.\nconst COLORS: Record = {\n black: \"#101010\",\n white: \"#ffffff\",\n navy: \"#1b2a49\",\n \"forest green\": \"#1f3d2b\",\n green: \"#2f6b3f\",\n red: \"#b3262d\",\n maroon: \"#5e1b26\",\n royal: \"#2a4aa8\",\n blue: \"#2f5fb3\",\n \"light blue\": \"#a9c1e8\",\n grey: \"#8a8a8a\",\n gray: \"#8a8a8a\",\n \"sport grey\": \"#9a9a9a\",\n charcoal: \"#3a3a3a\",\n \"dark heather\": \"#3b3d42\",\n heather: \"#b5b5b5\",\n sand: \"#d8cdb4\",\n natural: \"#e8dfcb\",\n cream: \"#f1ead8\",\n tan: \"#c2a67c\",\n brown: \"#5b3d2a\",\n pink: \"#e8a5b8\",\n purple: \"#5b3a8c\",\n yellow: \"#e8c935\",\n gold: \"#c79a2b\",\n orange: \"#d9692b\",\n \"stone blue\": \"#7d93a6\",\n pepper: \"#4a4a48\",\n \"washed black\": \"#2b2b2b\",\n};\n\nexport function colorValue(name: string): string {\n return COLORS[name.trim().toLowerCase()] ?? \"#c8c6c0\";\n}\n"},{"path":"lib/commerce/select.ts","code":"$33"},{"path":"blocks/product/product-bento/demo.tsx","code":"import { ProductBento } from \"./product-bento\";\nimport { DemoPage, DemoSection } from \"../_shared/demo-frame\";\nimport { productFixture } from \"../../../lib/commerce/fixtures/product\";\n\nexport function ProductBentoDemo({ brand }: { brand?: string }) {\n const fx = productFixture(brand);\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default ProductBentoDemo;\n"},{"path":"blocks/product/product-bento/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]