@enadhq/enad-react-sdk 1.0.0 → 1.0.2

package/dist/client/storefront/blocks/hero.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { StorefrontButton } from \"../primitives/button\"\nimport { StorefrontTextLink } from \"../primitives/text-link\"\nimport { colorThemeClasses, isThemeDark, type HeroProps, type HeroContentPosition, type HeroContentWidth, type HeroTextAlign } from \"../types\"\n\nconst aspectClasses: Record<string, string> = {\n  \"9:16\": \"aspect-[9/16]\",\n  \"4:5\": \"aspect-[4/5]\",\n  \"1:1\": \"aspect-square\",\n  \"16:9\": \"aspect-video\",\n}\n\nconst contentWidthClasses: Record<HeroContentWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-xl\",\n  lg: \"max-w-3xl\",\n}\n\n/* ─── 3×3 content positioning (overlay only) ─── */\n\nconst alignItemsMap: Record<string, string> = {\n  top: \"items-start\",\n  center: \"items-center\",\n  bottom: \"items-end\",\n}\n\nconst justifyMap: Record<string, string> = {\n  left: \"justify-start\",\n  center: \"justify-center\",\n  right: \"justify-end\",\n}\n\nfunction getPositionClasses(position: HeroContentPosition): string {\n  const [vertical, horizontal] = position.split(\"-\") as [string, string]\n  return cn(\n    \"absolute inset-0 flex p-8 md:p-12 lg:p-16\",\n    alignItemsMap[vertical],\n    justifyMap[horizontal],\n  )\n}\n\nfunction getTextAlign(position: HeroContentPosition): \"left\" | \"center\" | \"right\" {\n  const horizontal = position.split(\"-\")[1]\n  if (horizontal === \"center\") return \"center\"\n  if (horizontal === \"right\") return \"right\"\n  return \"left\"\n}\n\n/* ─── Directional gradient based on content position ─── */\n\nconst overlayGradientStyle = (direction: string): React.CSSProperties => ({\n  background: `linear-gradient(${direction}, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))`,\n})\n\nfunction getGradientDirection(position: HeroContentPosition): string | null {\n  const [vertical, horizontal] = position.split(\"-\") as [string, string]\n\n  if (vertical === \"bottom\") return \"to top\"\n  if (vertical === \"top\") return \"to bottom\"\n  if (horizontal === \"left\") return \"to right\"\n  if (horizontal === \"right\") return \"to left\"\n\n  return null // center-center fallback\n}\n\nconst centerOverlayStyle: React.CSSProperties = {\n  background: \"color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)\",\n}\n\nconst headingStyle = { fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties\n\n/* ─── Shared sub-components ─── */\n\nfunction HeroCTA({\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n}: {\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  dark?: boolean\n}) {\n  if (!buttonLabel && !textLinkLabel) return null\n  return (\n    <div className=\"mt-6 flex flex-wrap items-center gap-4\">\n      {buttonLabel && buttonHref && (\n        <StorefrontButton href={buttonHref} variant={dark ? \"outline\" : \"primary\"}>\n          {buttonLabel}\n        </StorefrontButton>\n      )}\n      {textLinkLabel && textLinkHref && (\n        <StorefrontTextLink href={textLinkHref} className={dark ? \"text-white\" : undefined}>\n          {textLinkLabel}\n        </StorefrontTextLink>\n      )}\n    </div>\n  )\n}\n\nfunction HeroTextBlock({\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  contentWidth = \"md\",\n  dark = false,\n  align = \"left\",\n  headingClamp,\n}: {\n  preheader?: string\n  heading?: string\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  contentWidth?: HeroContentWidth\n  dark?: boolean\n  align?: \"left\" | \"center\" | \"right\"\n  headingClamp?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-col\",\n        contentWidthClasses[contentWidth],\n        align === \"center\" && \"items-center text-center\",\n        align === \"right\" && \"items-end text-end\",\n        align === \"left\" && \"items-start text-start\",\n      )}\n    >\n      {preheader && (\n        <p\n          className={cn(\n            \"mb-2 text-sm uppercase tracking-widest line-clamp-2\",\n            dark ? \"text-white/70\" : \"text-muted-foreground\",\n          )}\n        >\n          {preheader}\n        </p>\n      )}\n      {heading && (\n        <h1\n          className={cn(\n            \"text-3xl font-heading md:text-4xl lg:text-5xl\",\n            dark ? \"text-white\" : \"text-foreground\",\n            headingClamp,\n          )}\n          style={headingStyle}\n        >\n          {heading}\n        </h1>\n      )}\n      <HeroCTA\n        buttonLabel={buttonLabel}\n        buttonHref={buttonHref}\n        textLinkLabel={textLinkLabel}\n        textLinkHref={textLinkHref}\n        dark={dark}\n      />\n    </div>\n  )\n}\n\n/* ─── Shared layout prop types ─── */\n\ntype HeroLayoutProps = HeroProps & {\n  dark: boolean\n  themeClasses: string\n  align: HeroTextAlign\n}\n\n/* ─── Layout: Minimal ─── */\n\nfunction HeroMinimal({\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: HeroLayoutProps) {\n  return (\n    <section className={cn(\"px-8 py-16 md:py-24 lg:py-32\", themeClasses || \"bg-background\", className)}>\n      <div className=\"mx-auto flex max-w-4xl flex-col items-center text-center\">\n        {preheader && (\n          <p className={cn(\"mb-2 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n            {preheader}\n          </p>\n        )}\n        {heading && (\n          <h1\n            className={cn(\"max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl\", dark ? \"text-white\" : \"text-foreground\")}\n            style={headingStyle}\n          >\n            {heading}\n          </h1>\n        )}\n        <HeroCTA\n          buttonLabel={buttonLabel}\n          buttonHref={buttonHref}\n          textLinkLabel={textLinkLabel}\n          textLinkHref={textLinkHref}\n          dark={dark}\n        />\n      </div>\n    </section>\n  )\n}\n\n/* ─── Layout: Banner ─── */\n\nfunction HeroBanner({\n  image,\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  themeClasses,\n  className,\n}: HeroLayoutProps) {\n  return (\n    <section\n      className={cn(\"relative max-h-64 overflow-hidden\", image?.src ? \"bg-muted\" : \"bg-primary\", themeClasses, className)}\n    >\n      {image?.src && (\n        <img src={image?.src} alt={image?.alt ?? \"\"} className=\"size-full object-cover\" loading=\"lazy\" />\n      )}\n      <div\n        className=\"absolute inset-0\"\n        style={overlayGradientStyle(\"to right\")}\n      />\n      <div className=\"absolute inset-0 flex items-center px-8 md:px-12 lg:px-16\">\n        <div className=\"flex w-full min-w-0 flex-wrap items-center justify-between gap-4\">\n          <div className=\"flex min-w-0 items-center gap-4\">\n            {preheader && (\n              <span className=\"shrink-0 text-sm uppercase tracking-widest text-white/70\">\n                {preheader}\n              </span>\n            )}\n            {heading && (\n              <h2\n                className=\"min-w-0 truncate text-xl font-heading text-white md:text-2xl lg:text-3xl\"\n                style={headingStyle}\n              >\n                {heading}\n              </h2>\n            )}\n          </div>\n          <HeroCTA\n            buttonLabel={buttonLabel}\n            buttonHref={buttonHref}\n            textLinkLabel={textLinkLabel}\n            textLinkHref={textLinkHref}\n            dark\n          />\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ─── Layout: Split ─── */\n\nfunction HeroSplit({\n  image,\n  aspectRatio = \"16:9\",\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  contentWidth = \"md\",\n  dark,\n  themeClasses,\n  align,\n  className,\n}: HeroLayoutProps) {\n  const hasImage = Boolean(image?.src)\n  return (\n    <section className={cn(\"grid\", hasImage && \"lg:grid-cols-2\", themeClasses, className)}>\n      <div className=\"flex min-w-0 items-center px-8 py-12 lg:px-16 lg:py-20\">\n        <HeroTextBlock\n          preheader={preheader}\n          heading={heading}\n          buttonLabel={buttonLabel}\n          buttonHref={buttonHref}\n          textLinkLabel={textLinkLabel}\n          textLinkHref={textLinkHref}\n          contentWidth={contentWidth}\n          dark={dark}\n          align={align}\n          headingClamp=\"line-clamp-4\"\n        />\n      </div>\n      {hasImage && (\n        <div className={cn(\"relative overflow-hidden bg-muted\", aspectClasses[aspectRatio])}>\n          <img src={image?.src} alt={image?.alt ?? \"\"} className=\"size-full object-cover\" loading=\"lazy\" />\n        </div>\n      )}\n    </section>\n  )\n}\n\n/* ─── Layout: Image only ─── */\n\nfunction HeroImageOnly({\n  image,\n  aspectRatio = \"16:9\",\n  className,\n}: HeroLayoutProps) {\n  return (\n    <section\n      className={cn(\"relative overflow-hidden bg-muted\", aspectClasses[aspectRatio], className)}\n    >\n      {image?.src && (\n        <img src={image?.src} alt={image?.alt ?? \"\"} className=\"size-full object-cover\" loading=\"lazy\" />\n      )}\n    </section>\n  )\n}\n\n/* ─── Overlay background helper ─── */\n\nfunction resolveOverlayGradient(position: HeroContentPosition): React.CSSProperties {\n  const direction = getGradientDirection(position)\n  return direction ? overlayGradientStyle(direction) : centerOverlayStyle\n}\n\nfunction resolveOverlayBg(imageSrc?: string): string {\n  return imageSrc ? \"bg-muted\" : \"bg-primary\"\n}\n\n/* ─── Layout: Overlay ─── */\n\nfunction HeroOverlay({\n  image,\n  aspectRatio = \"16:9\",\n  contentPosition = \"bottom-center\",\n  contentWidth = \"md\",\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  align,\n  className,\n}: HeroLayoutProps) {\n  const hasContent = preheader || heading || buttonLabel || textLinkLabel\n  const position = contentPosition ?? \"bottom-center\"\n\n  return (\n    <section\n      className={cn(\n        \"relative overflow-hidden\",\n        resolveOverlayBg(image?.src),\n        aspectClasses[aspectRatio],\n        themeClasses,\n        className,\n      )}\n    >\n      {image?.src && (\n        <img src={image?.src} alt={image?.alt ?? \"\"} className=\"size-full object-cover\" loading=\"lazy\" />\n      )}\n      <div\n        className=\"absolute inset-0\"\n        style={resolveOverlayGradient(position)}\n      />\n      {hasContent && (\n        <div className={getPositionClasses(position)}>\n          <HeroTextBlock\n            preheader={preheader}\n            heading={heading}\n            buttonLabel={buttonLabel}\n            buttonHref={buttonHref}\n            textLinkLabel={textLinkLabel}\n            textLinkHref={textLinkHref}\n            contentWidth={contentWidth}\n            dark={dark}\n            align={align}\n            headingClamp=\"line-clamp-3\"\n          />\n        </div>\n      )}\n    </section>\n  )\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction Hero(props: HeroProps) {\n  const {\n    layout = \"overlay\",\n    contentPosition = \"bottom-center\",\n    textAlign,\n    colorTheme,\n  } = props\n\n  const dark = isThemeDark(colorTheme) || layout === \"overlay\"\n  const themeClasses = colorThemeClasses(colorTheme)\n  const defaultAlign: HeroTextAlign =\n    layout === \"overlay\" ? getTextAlign(contentPosition ?? \"bottom-center\") : \"left\"\n  const align = textAlign ?? defaultAlign\n\n  const layoutProps: HeroLayoutProps = {\n    ...props,\n    dark,\n    themeClasses,\n    align,\n  }\n\n  switch (layout) {\n    case \"minimal\":\n      return <HeroMinimal {...layoutProps} />\n    case \"banner\":\n      return <HeroBanner {...layoutProps} />\n    case \"split\":\n      return <HeroSplit {...layoutProps} />\n    case \"image-only\":\n      return <HeroImageOnly {...layoutProps} />\n    default:\n      return <HeroOverlay {...layoutProps} />\n  }\n}\n\nexport { Hero, type HeroProps }\n"],"mappings":"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","names":[]}

package/dist/client/storefront/blocks/image-block.d.ts

@@ -0,0 +1,4 @@
+import type { ImageBlockProps } from "../types";
+declare function ImageBlock({ image, aspectRatio, caption, className, }: ImageBlockProps): import("react/jsx-runtime").JSX.Element;
+export { ImageBlock, type ImageBlockProps };
+//# sourceMappingURL=image-block.d.ts.map

package/dist/client/storefront/blocks/image-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-block.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/image-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAQ/C,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,WAAmB,EACnB,OAAO,EACP,SAAS,GACV,EAAE,eAAe,2CAqBjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,CAAA"}

package/dist/client/storefront/blocks/image-block.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+const aspectClasses = {
+  "4:5": "aspect-[4/5]",
+  "16:9": "aspect-[16/9]",
+  "1:1": "aspect-square"
+};
+function ImageBlock({
+  image,
+  aspectRatio = "4:5",
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx("div", { className: cn("relative bg-muted", aspectClasses[aspectRatio]), children: image?.src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt ?? "",
+        className: "size-full object-cover"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }) }),
+    caption && /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-sm text-muted-foreground", children: caption })
+  ] });
+}
+export {
+  ImageBlock
+};
+//# sourceMappingURL=image-block.mjs.map

package/dist/client/storefront/blocks/image-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/image-block.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { ImageBlockProps } from \"../types\"\n\nconst aspectClasses: Record<string, string> = {\n  \"4:5\": \"aspect-[4/5]\",\n  \"16:9\": \"aspect-[16/9]\",\n  \"1:1\": \"aspect-square\",\n}\n\nfunction ImageBlock({\n  image,\n  aspectRatio = \"4:5\",\n  caption,\n  className,\n}: ImageBlockProps) {\n  return (\n    <figure className={cn(\"overflow-hidden\", className)}>\n      <div className={cn(\"relative bg-muted\", aspectClasses[aspectRatio])}>\n        {image?.src ? (\n          <img\n            src={image.src}\n            alt={image.alt ?? \"\"}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"size-full bg-muted\" />\n        )}\n      </div>\n      {caption && (\n        <figcaption className=\"mt-2 text-sm text-muted-foreground\">\n          {caption}\n        </figcaption>\n      )}\n    </figure>\n  )\n}\n\nexport { ImageBlock, type ImageBlockProps }\n"],"mappings":"AAiBI,SAGM,KAHN;AAhBJ,SAAS,UAAU;AAGnB,MAAM,gBAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAoB;AAClB,SACE,qBAAC,YAAO,WAAW,GAAG,mBAAmB,SAAS,GAChD;AAAA,wBAAC,SAAI,WAAW,GAAG,qBAAqB,cAAc,WAAW,CAAC,GAC/D,iBAAO,MACN;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM;AAAA,QACX,KAAK,MAAM,OAAO;AAAA,QAClB,WAAU;AAAA;AAAA,IACZ,IAEA,oBAAC,SAAI,WAAU,sBAAqB,GAExC;AAAA,IACC,WACC,oBAAC,gBAAW,WAAU,sCACnB,mBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/client/storefront/blocks/index.d.ts

@@ -0,0 +1,20 @@
+export { Spacer, type SpacerProps } from "./spacer";
+export { ImageBlock, type ImageBlockProps } from "./image-block";
+export { CardImageWithCaption, type CardImageWithCaptionProps } from "./card-image-with-caption";
+export { TextContent, type TextContentProps } from "./text-content";
+export { VariableTextContent, type VariableTextContentProps } from "./variable-text-content";
+export { TextContentWithImage, type TextContentWithImageProps } from "./text-content-with-image";
+export { LinkBlock, type LinkBlockProps } from "./link-block";
+export { LinkBlockSmall, type LinkBlockSmallProps } from "./link-block-small";
+export { CardVideo, type CardVideoProps } from "./card-video";
+export { AccordionBlock, type AccordionBlockProps } from "./accordion-block";
+export { TruncatedText, type TruncatedTextProps } from "./truncated-text";
+export { Hero, type HeroProps } from "./hero";
+export { ProductCard, type ProductCardProps } from "./product-card";
+export { ProductImage, type ProductImageProps } from "./product-image";
+export { Gallery, type GalleryProps } from "./gallery";
+export { GalleryWithCaption, type GalleryWithCaptionProps } from "./gallery-with-caption";
+export { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps } from "./gallery-with-link-blocks";
+export { ContentWithGallery, type ContentWithGalleryProps } from "./content-with-gallery";
+export { ContentWithImageProductData, type ContentWithImageProductDataProps } from "./content-with-image-product-data";
+//# sourceMappingURL=index.d.ts.map

package/dist/client/storefront/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAA;AAC5F,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAC7E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACzE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AACzF,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AACnG,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AACzF,OAAO,EAAE,2BAA2B,EAAE,KAAK,gCAAgC,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/client/storefront/blocks/index.mjs

@@ -0,0 +1,41 @@
+import { Spacer } from "./spacer";
+import { ImageBlock } from "./image-block";
+import { CardImageWithCaption } from "./card-image-with-caption";
+import { TextContent } from "./text-content";
+import { VariableTextContent } from "./variable-text-content";
+import { TextContentWithImage } from "./text-content-with-image";
+import { LinkBlock } from "./link-block";
+import { LinkBlockSmall } from "./link-block-small";
+import { CardVideo } from "./card-video";
+import { AccordionBlock } from "./accordion-block";
+import { TruncatedText } from "./truncated-text";
+import { Hero } from "./hero";
+import { ProductCard } from "./product-card";
+import { ProductImage } from "./product-image";
+import { Gallery } from "./gallery";
+import { GalleryWithCaption } from "./gallery-with-caption";
+import { GalleryWithLinkBlocks } from "./gallery-with-link-blocks";
+import { ContentWithGallery } from "./content-with-gallery";
+import { ContentWithImageProductData } from "./content-with-image-product-data";
+export {
+  AccordionBlock,
+  CardImageWithCaption,
+  CardVideo,
+  ContentWithGallery,
+  ContentWithImageProductData,
+  Gallery,
+  GalleryWithCaption,
+  GalleryWithLinkBlocks,
+  Hero,
+  ImageBlock,
+  LinkBlock,
+  LinkBlockSmall,
+  ProductCard,
+  ProductImage,
+  Spacer,
+  TextContent,
+  TextContentWithImage,
+  TruncatedText,
+  VariableTextContent
+};
+//# sourceMappingURL=index.mjs.map

package/dist/client/storefront/blocks/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/index.ts"],"sourcesContent":["export { Spacer, type SpacerProps } from \"./spacer\"\nexport { ImageBlock, type ImageBlockProps } from \"./image-block\"\nexport { CardImageWithCaption, type CardImageWithCaptionProps } from \"./card-image-with-caption\"\nexport { TextContent, type TextContentProps } from \"./text-content\"\nexport { VariableTextContent, type VariableTextContentProps } from \"./variable-text-content\"\nexport { TextContentWithImage, type TextContentWithImageProps } from \"./text-content-with-image\"\nexport { LinkBlock, type LinkBlockProps } from \"./link-block\"\nexport { LinkBlockSmall, type LinkBlockSmallProps } from \"./link-block-small\"\nexport { CardVideo, type CardVideoProps } from \"./card-video\"\nexport { AccordionBlock, type AccordionBlockProps } from \"./accordion-block\"\nexport { TruncatedText, type TruncatedTextProps } from \"./truncated-text\"\nexport { Hero, type HeroProps } from \"./hero\"\nexport { ProductCard, type ProductCardProps } from \"./product-card\"\nexport { ProductImage, type ProductImageProps } from \"./product-image\"\nexport { Gallery, type GalleryProps } from \"./gallery\"\nexport { GalleryWithCaption, type GalleryWithCaptionProps } from \"./gallery-with-caption\"\nexport { GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps } from \"./gallery-with-link-blocks\"\nexport { ContentWithGallery, type ContentWithGalleryProps } from \"./content-with-gallery\"\nexport { ContentWithImageProductData, type ContentWithImageProductDataProps } from \"./content-with-image-product-data\"\n"],"mappings":"AAAA,SAAS,cAAgC;AACzC,SAAS,kBAAwC;AACjD,SAAS,4BAA4D;AACrE,SAAS,mBAA0C;AACnD,SAAS,2BAA0D;AACnE,SAAS,4BAA4D;AACrE,SAAS,iBAAsC;AAC/C,SAAS,sBAAgD;AACzD,SAAS,iBAAsC;AAC/C,SAAS,sBAAgD;AACzD,SAAS,qBAA8C;AACvD,SAAS,YAA4B;AACrC,SAAS,mBAA0C;AACnD,SAAS,oBAA4C;AACrD,SAAS,eAAkC;AAC3C,SAAS,0BAAwD;AACjE,SAAS,6BAA8D;AACvE,SAAS,0BAAwD;AACjE,SAAS,mCAA0E;","names":[]}

package/dist/client/storefront/blocks/link-block-small.d.ts

@@ -0,0 +1,4 @@
+import type { LinkBlockSmallProps } from "../types";
+declare function LinkBlockSmall({ image, title, href, className, }: LinkBlockSmallProps): import("react/jsx-runtime").JSX.Element;
+export { LinkBlockSmall, type LinkBlockSmallProps };
+//# sourceMappingURL=link-block-small.d.ts.map

package/dist/client/storefront/blocks/link-block-small.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-block-small.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/link-block-small.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAEnD,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,SAAS,GACV,EAAE,mBAAmB,2CA6BrB;AAED,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAA"}

package/dist/client/storefront/blocks/link-block-small.mjs

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+function LinkBlockSmall({
+  image,
+  title,
+  href,
+  className
+}) {
+  const card = /* @__PURE__ */ jsxs("div", { className: cn("enad-interactive group relative aspect-[3/4] overflow-hidden rounded-[var(--enad-card-radius)]", className), children: [
+    image?.src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt ?? title ?? "",
+        className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: { background: "linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))" }
+      }
+    ),
+    title && /* @__PURE__ */ jsx("p", { className: "absolute inset-x-0 bottom-0 p-3 text-sm font-medium text-white", children: title })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { href, className: "block", children: card });
+  }
+  return card;
+}
+export {
+  LinkBlockSmall
+};
+//# sourceMappingURL=link-block-small.mjs.map

package/dist/client/storefront/blocks/link-block-small.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/link-block-small.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { LinkBlockSmallProps } from \"../types\"\n\nfunction LinkBlockSmall({\n  image,\n  title,\n  href,\n  className,\n}: LinkBlockSmallProps) {\n  const card = (\n    <div className={cn(\"enad-interactive group relative aspect-[3/4] overflow-hidden rounded-[var(--enad-card-radius)]\", className)}>\n      {image?.src ? (\n        <img\n          src={image.src}\n          alt={image.alt ?? title ?? \"\"}\n          className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n        />\n      ) : (\n        <div className=\"size-full bg-muted\" />\n      )}\n      <div\n        className=\"absolute inset-0\"\n        style={{ background: \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))\" }}\n      />\n      {title && (\n        <p className=\"absolute inset-x-0 bottom-0 p-3 text-sm font-medium text-white\">\n          {title}\n        </p>\n      )}\n    </div>\n  )\n\n  if (href) {\n    return <a href={href} className=\"block\">{card}</a>\n  }\n\n  return card\n}\n\nexport { LinkBlockSmall, type LinkBlockSmallProps }\n"],"mappings":"AAWI,SAEI,KAFJ;AAVJ,SAAS,UAAU;AAGnB,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,OACJ,qBAAC,SAAI,WAAW,GAAG,kGAAkG,SAAS,GAC3H;AAAA,WAAO,MACN;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM;AAAA,QACX,KAAK,MAAM,OAAO,SAAS;AAAA,QAC3B,WAAU;AAAA;AAAA,IACZ,IAEA,oBAAC,SAAI,WAAU,sBAAqB;AAAA,IAEtC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,YAAY,8OAA8O;AAAA;AAAA,IACrQ;AAAA,IACC,SACC,oBAAC,OAAE,WAAU,kEACV,iBACH;AAAA,KAEJ;AAGF,MAAI,MAAM;AACR,WAAO,oBAAC,OAAE,MAAY,WAAU,SAAS,gBAAK;AAAA,EAChD;AAEA,SAAO;AACT;","names":[]}

package/dist/client/storefront/blocks/link-block.d.ts

@@ -0,0 +1,4 @@
+import { type LinkBlockProps } from "../types";
+declare function LinkBlock(props: LinkBlockProps): import("react/jsx-runtime").JSX.Element;
+export { LinkBlock, type LinkBlockProps };
+//# sourceMappingURL=link-block.d.ts.map

package/dist/client/storefront/blocks/link-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-block.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AA8M9E,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAavC;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAA"}

package/dist/client/storefront/blocks/link-block.mjs

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../ui/utils";
+import { colorThemeClasses, isThemeDark } from "../types";
+const headingStyle = { fontWeight: "var(--enad-heading-weight)", letterSpacing: "var(--enad-heading-tracking)", textTransform: "var(--enad-heading-transform)" };
+function OptionalLink({
+  href,
+  radiusClass,
+  children
+}) {
+  if (!href) return children;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: cn("block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", radiusClass),
+      children
+    }
+  );
+}
+function CardVariant({
+  image,
+  eyebrow,
+  title,
+  buttonLabel,
+  buttonHref,
+  dark,
+  themeClasses,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]",
+        "shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]",
+        themeClasses || "bg-background",
+        className
+      ),
+      children: [
+        image?.src ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-t-[var(--enad-image-radius)] bg-muted", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image.src,
+            alt: image.alt ?? title ?? "",
+            loading: "lazy",
+            className: "aspect-[3/2] w-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "aspect-[3/2] w-full bg-muted", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 p-6", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: cn("mb-1 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"), children: eyebrow }),
+          title && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn("line-clamp-2 text-xl font-heading", dark ? "text-white" : "text-foreground"),
+              style: headingStyle,
+              children: title
+            }
+          ),
+          buttonLabel && /* @__PURE__ */ jsx("span", { className: cn("mt-3 inline-block text-sm font-medium line-clamp-3", dark ? "text-white/80" : "text-foreground"), children: buttonLabel })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(OptionalLink, { href: buttonHref, radiusClass: "rounded-[var(--enad-card-radius)]", children: content });
+}
+function TextOnlyVariant({
+  eyebrow,
+  title,
+  buttonLabel,
+  buttonHref,
+  dark,
+  themeClasses,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "enad-interactive group rounded-[var(--enad-card-radius)] border transition-colors duration-[var(--enad-motion-duration)]",
+        "border-[length:var(--enad-border-width)] px-6 py-5",
+        dark ? "border-white/20 hover:bg-white/10" : "border-border hover:bg-accent",
+        themeClasses,
+        className
+      ),
+      children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: cn("mb-1 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"), children: eyebrow }),
+        title && /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: cn("truncate text-lg font-heading", dark ? "text-white" : "text-foreground"),
+            style: headingStyle,
+            children: title
+          }
+        ),
+        buttonLabel && /* @__PURE__ */ jsx("span", { className: cn("mt-2 inline-block text-sm font-medium", dark ? "text-white/80" : "text-muted-foreground"), children: buttonLabel })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(OptionalLink, { href: buttonHref, radiusClass: "rounded-[var(--enad-card-radius)]", children: content });
+}
+function OverlayVariant({
+  image,
+  eyebrow,
+  title,
+  buttonLabel,
+  buttonHref,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("enad-interactive group relative aspect-[3/4] overflow-hidden md:aspect-[2/1]", className), children: [
+    image?.src ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.src,
+        alt: image.alt ?? title ?? "",
+        loading: "lazy",
+        className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "size-full bg-primary", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: { background: "linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))" }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0 min-w-0 p-6 md:p-8", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm uppercase tracking-widest text-white/70", children: eyebrow }),
+      title && /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 text-xl font-heading text-white md:text-2xl", style: headingStyle, children: title }),
+      buttonLabel && /* @__PURE__ */ jsx("span", { className: "mt-3 inline-block border-b border-white/50 pb-0.5 text-sm text-white transition-colors group-hover:border-white", children: buttonLabel })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(OptionalLink, { href: buttonHref, children: content });
+}
+function LinkBlock(props) {
+  const dark = isThemeDark(props.colorTheme);
+  const themeClasses = colorThemeClasses(props.colorTheme);
+  const variantProps = { ...props, dark, themeClasses };
+  switch (props.variant ?? "overlay") {
+    case "card":
+      return /* @__PURE__ */ jsx(CardVariant, { ...variantProps });
+    case "text-only":
+      return /* @__PURE__ */ jsx(TextOnlyVariant, { ...variantProps });
+    default:
+      return /* @__PURE__ */ jsx(OverlayVariant, { ...variantProps });
+  }
+}
+export {
+  LinkBlock
+};
+//# sourceMappingURL=link-block.mjs.map

package/dist/client/storefront/blocks/link-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { colorThemeClasses, isThemeDark, type LinkBlockProps } from \"../types\"\n\n/* ─── Shared types ─── */\n\ntype VariantProps = LinkBlockProps & {\n  dark: boolean\n  themeClasses: string\n}\n\nconst headingStyle = { fontWeight: \"var(--enad-heading-weight)\", letterSpacing: \"var(--enad-heading-tracking)\", textTransform: \"var(--enad-heading-transform)\" } as unknown as React.CSSProperties\n\n/* ─── Shared link wrapper ─── */\n\nfunction OptionalLink({\n  href,\n  radiusClass,\n  children,\n}: {\n  href?: string\n  radiusClass?: string\n  children: React.ReactNode\n}) {\n  if (!href) return children\n  return (\n    <a\n      href={href}\n      className={cn(\"block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\", radiusClass)}\n    >\n      {children}\n    </a>\n  )\n}\n\n/* ─── Card variant ─── */\n\nfunction CardVariant({\n  image,\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const content = (\n    <div\n      className={cn(\n        \"enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]\",\n        \"shadow-[var(--enad-card-shadow)] transition-shadow duration-[var(--enad-motion-duration)] hover:shadow-[var(--enad-card-hover-shadow)]\",\n        themeClasses || \"bg-background\",\n        className,\n      )}\n    >\n      {/* Image top */}\n      {image?.src ? (\n        <div className=\"overflow-hidden rounded-t-[var(--enad-image-radius)] bg-muted\">\n          <img\n            src={image.src}\n            alt={image.alt ?? title ?? \"\"}\n            loading=\"lazy\"\n            className=\"aspect-[3/2] w-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n          />\n        </div>\n      ) : (\n        <div className=\"aspect-[3/2] w-full bg-muted\" aria-hidden=\"true\" />\n      )}\n\n      {/* Text content below */}\n      <div className=\"min-w-0 p-6\">\n        {eyebrow && (\n          <p className={cn(\"mb-1 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n            {eyebrow}\n          </p>\n        )}\n        {title && (\n          <h3\n            className={cn(\"line-clamp-2 text-xl font-heading\", dark ? \"text-white\" : \"text-foreground\")}\n            style={headingStyle}\n          >\n            {title}\n          </h3>\n        )}\n        {buttonLabel && (\n          <span className={cn(\"mt-3 inline-block text-sm font-medium line-clamp-3\", dark ? \"text-white/80\" : \"text-foreground\")}>\n            {buttonLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n\n  return (\n    <OptionalLink href={buttonHref} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  )\n}\n\n/* ─── Text-only variant ─── */\n\nfunction TextOnlyVariant({\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const content = (\n    <div\n      className={cn(\n        \"enad-interactive group rounded-[var(--enad-card-radius)] border transition-colors duration-[var(--enad-motion-duration)]\",\n        \"border-[length:var(--enad-border-width)] px-6 py-5\",\n        dark\n          ? \"border-white/20 hover:bg-white/10\"\n          : \"border-border hover:bg-accent\",\n        themeClasses,\n        className,\n      )}\n    >\n      {eyebrow && (\n        <p className={cn(\"mb-1 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n          {eyebrow}\n        </p>\n      )}\n      {title && (\n        <h3\n          className={cn(\"truncate text-lg font-heading\", dark ? \"text-white\" : \"text-foreground\")}\n          style={headingStyle}\n        >\n          {title}\n        </h3>\n      )}\n      {buttonLabel && (\n        <span className={cn(\"mt-2 inline-block text-sm font-medium\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n          {buttonLabel}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <OptionalLink href={buttonHref} radiusClass=\"rounded-[var(--enad-card-radius)]\">\n      {content}\n    </OptionalLink>\n  )\n}\n\n/* ─── Overlay variant (default) ─── */\n\nfunction OverlayVariant({\n  image,\n  eyebrow,\n  title,\n  buttonLabel,\n  buttonHref,\n  className,\n}: VariantProps) {\n  const content = (\n    <div className={cn(\"enad-interactive group relative aspect-[3/4] overflow-hidden md:aspect-[2/1]\", className)}>\n      {/* Background image */}\n      {image?.src ? (\n        <img\n          src={image.src}\n          alt={image.alt ?? title ?? \"\"}\n          loading=\"lazy\"\n          className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n        />\n      ) : (\n        <div className=\"size-full bg-primary\" aria-hidden=\"true\" />\n      )}\n\n      {/* Gradient overlay */}\n      <div\n        className=\"absolute inset-0\"\n        style={{ background: \"linear-gradient(to top, color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-from-opacity) * 100%), transparent), color-mix(in oklch, var(--enad-overlay-color) calc(var(--enad-overlay-to-opacity) * 100%), transparent))\" }}\n      />\n\n      {/* Text content */}\n      <div className=\"absolute inset-x-0 bottom-0 min-w-0 p-6 md:p-8\">\n        {eyebrow && (\n          <p className=\"mb-1 text-sm uppercase tracking-widest text-white/70\">\n            {eyebrow}\n          </p>\n        )}\n        {title && (\n          <h3 className=\"line-clamp-2 text-xl font-heading text-white md:text-2xl\" style={headingStyle}>\n            {title}\n          </h3>\n        )}\n        {buttonLabel && (\n          <span className=\"mt-3 inline-block border-b border-white/50 pb-0.5 text-sm text-white transition-colors group-hover:border-white\">\n            {buttonLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n\n  return <OptionalLink href={buttonHref}>{content}</OptionalLink>\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction LinkBlock(props: LinkBlockProps) {\n  const dark = isThemeDark(props.colorTheme)\n  const themeClasses = colorThemeClasses(props.colorTheme)\n  const variantProps: VariantProps = { ...props, dark, themeClasses }\n\n  switch (props.variant ?? \"overlay\") {\n    case \"card\":\n      return <CardVariant {...variantProps} />\n    case \"text-only\":\n      return <TextOnlyVariant {...variantProps} />\n    default:\n      return <OverlayVariant {...variantProps} />\n  }\n}\n\nexport { LinkBlock, type LinkBlockProps }\n"],"mappings":"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","names":[]}

package/dist/client/storefront/blocks/product-card.d.ts

@@ -0,0 +1,4 @@
+import type { ProductCardProps } from "../types";
+declare function ProductCard(props: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export { ProductCard, type ProductCardProps };
+//# sourceMappingURL=product-card.d.ts.map

package/dist/client/storefront/blocks/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../../src/client/storefront/blocks/product-card.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AA8RhD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAgB3C;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAA"}