@enadhq/enad-react-sdk 1.1.0 → 1.3.0

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

@@ -1,23 +1,53 @@
 "use client";
 import { cn } from "../../ui/utils.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
 import { useVariantDefault } from "../../ui-resolver/context.mjs";
-import { StorefrontButton } from "../primitives/button.mjs";
-import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { BlockHeading } from "../primitives/block-heading.mjs";
+import { CTAGroup } from "../primitives/cta-group.mjs";
 import { colorThemeClasses, isThemeDark } from "../types.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/hero.tsx
+const heroRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"background",
+		"overlay",
+		"content"
+	],
+	base: {
+		root: "",
+		background: "size-full object-cover",
+		overlay: "absolute inset-0",
+		content: ""
+	},
+	variants: {
+		layout: {
+			overlay: { root: "relative overflow-hidden" },
+			split: { root: "grid" },
+			minimal: { root: "px-[var(--enad-hero-px,2rem)] py-[var(--enad-hero-py,4rem)] md:py-[calc(var(--enad-hero-py,4rem)*1.5)] lg:py-[calc(var(--enad-hero-py,4rem)*2)]" },
+			banner: { root: "relative max-h-64 overflow-hidden" },
+			"image-only": { root: "relative overflow-hidden bg-muted" }
+		},
+		contentWidth: {
+			sm: { content: "max-w-sm" },
+			md: { content: "max-w-xl" },
+			lg: { content: "max-w-3xl" }
+		}
+	},
+	defaultVariants: {
+		layout: "overlay",
+		contentWidth: "md"
+	}
+});
 const aspectClasses = {
 	"9:16": "aspect-[9/16]",
 	"4:5": "aspect-[4/5]",
 	"1:1": "aspect-square",
 	"16:9": "aspect-video"
 };
-const contentWidthClasses = {
-	sm: "max-w-sm",
-	md: "max-w-xl",
-	lg: "max-w-3xl"
-};
+const overlayGradientStyle = (direction) => ({ 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))` });
+const centerOverlayStyle = { background: "color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)" };
 const alignItemsMap = {
 	top: "items-start",
 	center: "items-center",
@@ -38,7 +68,6 @@ function getTextAlign(position) {
 	if (horizontal === "right") return "right";
 	return "left";
 }
-const overlayGradientStyle = (direction) => ({ 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))` });
 function getGradientDirection(position) {
 	const [vertical, horizontal] = position.split("-");
 	if (vertical === "bottom") return "to top";
@@ -47,88 +76,120 @@ function getGradientDirection(position) {
 	if (horizontal === "right") return "to left";
 	return null;
 }
-const centerOverlayStyle = { background: "color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)" };
-const headingStyle = {
-	fontWeight: "var(--enad-heading-weight)",
-	letterSpacing: "var(--enad-heading-tracking)",
-	textTransform: "var(--enad-heading-transform)"
-};
-function HeroCTA({ buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark }) {
-	if (!buttonLabel && !textLinkLabel) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-6 flex flex-wrap items-center gap-4",
-		children: [buttonLabel && buttonHref && /* @__PURE__ */ jsx(StorefrontButton, {
-			href: buttonHref,
-			variant: dark ? "outline" : "primary",
-			children: buttonLabel
-		}), textLinkLabel && textLinkHref && /* @__PURE__ */ jsx(StorefrontTextLink, {
-			href: textLinkHref,
-			className: dark ? "text-white" : void 0,
-			children: textLinkLabel
-		})]
+function HeroWithImage({ layout, image, aspectRatio = "16:9", contentPosition = "bottom-center", contentWidth = "md", preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, align, className }) {
+	const classes = heroRecipe({
+		layout,
+		contentWidth
 	});
-}
-function HeroTextBlock({ preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, contentWidth = "md", dark = false, align = "left", headingClamp }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex min-w-0 flex-col", contentWidthClasses[contentWidth], align === "center" && "items-center text-center", align === "right" && "items-end text-end", align === "left" && "items-start text-start"),
-		children: [
-			preheader && /* @__PURE__ */ jsx("p", {
-				className: cn("mb-2 text-sm uppercase tracking-widest line-clamp-2", dark ? "text-white/70" : "text-muted-foreground"),
-				children: preheader
-			}),
-			heading && /* @__PURE__ */ jsx("h1", {
-				className: cn("text-3xl font-heading md:text-4xl lg:text-5xl", dark ? "text-white" : "text-foreground", headingClamp),
-				style: headingStyle,
-				children: heading
-			}),
-			/* @__PURE__ */ jsx(HeroCTA, {
+	const hasImage = Boolean(image?.src);
+	const hasContent = preheader || heading || buttonLabel || textLinkLabel;
+	const position = contentPosition ?? "bottom-center";
+	if (layout === "split") return /* @__PURE__ */ jsxs("section", {
+		className: cn(classes.root, hasImage && "lg:grid-cols-2", themeClasses, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col justify-center px-8 py-12 lg:px-16 lg:py-20",
+			children: [/* @__PURE__ */ jsx(BlockHeading, {
+				preheader,
+				heading,
+				dark,
+				align,
+				headingTag: "h1",
+				headingSize: "lg",
+				headingClamp: "line-clamp-4",
+				className: classes.content
+			}), /* @__PURE__ */ jsx(CTAGroup, {
 				buttonLabel,
 				buttonHref,
 				textLinkLabel,
 				textLinkHref,
 				dark
+			})]
+		}), hasImage && /* @__PURE__ */ jsx("div", {
+			className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio]),
+			children: /* @__PURE__ */ jsx("img", {
+				src: image?.src,
+				alt: image?.alt ?? "",
+				className: classes.background,
+				loading: "lazy"
+			})
+		})]
+	});
+	const gradientDirection = getGradientDirection(position);
+	const overlayStyle = gradientDirection ? overlayGradientStyle(gradientDirection) : centerOverlayStyle;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn(classes.root, hasImage ? "bg-muted" : "bg-primary", aspectClasses[aspectRatio], themeClasses, className),
+		children: [
+			hasImage && /* @__PURE__ */ jsx("img", {
+				src: image?.src,
+				alt: image?.alt ?? "",
+				className: classes.background,
+				loading: "lazy"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classes.overlay,
+				style: overlayStyle
+			}),
+			hasContent && /* @__PURE__ */ jsx("div", {
+				className: getPositionClasses(position),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("flex min-w-0 flex-col", classes.content),
+					children: [/* @__PURE__ */ jsx(BlockHeading, {
+						preheader,
+						heading,
+						dark,
+						align,
+						headingTag: "h1",
+						headingSize: "lg",
+						headingClamp: "line-clamp-3"
+					}), /* @__PURE__ */ jsx(CTAGroup, {
+						buttonLabel,
+						buttonHref,
+						textLinkLabel,
+						textLinkHref,
+						dark
+					})]
+				})
 			})
 		]
 	});
 }
-function HeroMinimal({ preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+function HeroTextOnly({ preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
 	return /* @__PURE__ */ jsx("section", {
-		className: cn("px-8 py-16 md:py-24 lg:py-32", themeClasses || "bg-background", className),
+		className: cn(heroRecipe({ layout: "minimal" }).root, themeClasses || "bg-background", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "mx-auto flex max-w-4xl flex-col items-center text-center",
-			children: [
-				preheader && /* @__PURE__ */ jsx("p", {
-					className: cn("mb-2 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"),
-					children: preheader
-				}),
-				heading && /* @__PURE__ */ jsx("h1", {
-					className: cn("max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl", dark ? "text-white" : "text-foreground"),
-					style: headingStyle,
-					children: heading
-				}),
-				/* @__PURE__ */ jsx(HeroCTA, {
-					buttonLabel,
-					buttonHref,
-					textLinkLabel,
-					textLinkHref,
-					dark
-				})
-			]
+			children: [/* @__PURE__ */ jsx(BlockHeading, {
+				preheader,
+				heading,
+				dark,
+				align: "center",
+				headingTag: "h1",
+				headingSize: "xl",
+				headingClamp: "line-clamp-3",
+				className: "max-w-prose"
+			}), /* @__PURE__ */ jsx(CTAGroup, {
+				buttonLabel,
+				buttonHref,
+				textLinkLabel,
+				textLinkHref,
+				dark
+			})]
 		})
 	});
 }
-function HeroBanner({ image, preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, themeClasses, className }) {
+function HeroCompact({ image, preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, themeClasses, className }) {
+	const classes = heroRecipe({ layout: "banner" });
 	return /* @__PURE__ */ jsxs("section", {
-		className: cn("relative max-h-64 overflow-hidden", image?.src ? "bg-muted" : "bg-primary", themeClasses, className),
+		className: cn(classes.root, image?.src ? "bg-muted" : "bg-primary", themeClasses, className),
 		children: [
 			image?.src && /* @__PURE__ */ jsx("img", {
 				src: image?.src,
 				alt: image?.alt ?? "",
-				className: "size-full object-cover",
+				className: classes.background,
 				loading: "lazy"
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0",
+				className: classes.overlay,
 				style: overlayGradientStyle("to right")
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -142,10 +203,14 @@ function HeroBanner({ image, preheader, heading, buttonLabel, buttonHref, textLi
 							children: preheader
 						}), heading && /* @__PURE__ */ jsx("h2", {
 							className: "min-w-0 truncate text-xl font-heading text-white md:text-2xl lg:text-3xl",
-							style: headingStyle,
+							style: {
+								fontWeight: "var(--enad-heading-weight)",
+								letterSpacing: "var(--enad-heading-tracking)",
+								textTransform: "var(--enad-heading-transform)"
+							},
 							children: heading
 						})]
-					}), /* @__PURE__ */ jsx(HeroCTA, {
+					}), /* @__PURE__ */ jsx(CTAGroup, {
 						buttonLabel,
 						buttonHref,
 						textLinkLabel,
@@ -157,87 +222,18 @@ function HeroBanner({ image, preheader, heading, buttonLabel, buttonHref, textLi
 		]
 	});
 }
-function HeroSplit({ image, aspectRatio = "16:9", preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, contentWidth = "md", dark, themeClasses, align, className }) {
-	const hasImage = Boolean(image?.src);
-	return /* @__PURE__ */ jsxs("section", {
-		className: cn("grid", hasImage && "lg:grid-cols-2", themeClasses, className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 items-center px-8 py-12 lg:px-16 lg:py-20",
-			children: /* @__PURE__ */ jsx(HeroTextBlock, {
-				preheader,
-				heading,
-				buttonLabel,
-				buttonHref,
-				textLinkLabel,
-				textLinkHref,
-				contentWidth,
-				dark,
-				align,
-				headingClamp: "line-clamp-4"
-			})
-		}), hasImage && /* @__PURE__ */ jsx("div", {
-			className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio]),
-			children: /* @__PURE__ */ jsx("img", {
-				src: image?.src,
-				alt: image?.alt ?? "",
-				className: "size-full object-cover",
-				loading: "lazy"
-			})
-		})]
-	});
-}
 function HeroImageOnly({ image, aspectRatio = "16:9", className }) {
+	const classes = heroRecipe({ layout: "image-only" });
 	return /* @__PURE__ */ jsx("section", {
-		className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], className),
+		className: cn(classes.root, aspectClasses[aspectRatio], className),
 		children: image?.src && /* @__PURE__ */ jsx("img", {
 			src: image?.src,
 			alt: image?.alt ?? "",
-			className: "size-full object-cover",
+			className: classes.background,
 			loading: "lazy"
 		})
 	});
 }
-function resolveOverlayGradient(position) {
-	const direction = getGradientDirection(position);
-	return direction ? overlayGradientStyle(direction) : centerOverlayStyle;
-}
-function resolveOverlayBg(imageSrc) {
-	return imageSrc ? "bg-muted" : "bg-primary";
-}
-function HeroOverlay({ image, aspectRatio = "16:9", contentPosition = "bottom-center", contentWidth = "md", preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, align, className }) {
-	const hasContent = preheader || heading || buttonLabel || textLinkLabel;
-	const position = contentPosition ?? "bottom-center";
-	return /* @__PURE__ */ jsxs("section", {
-		className: cn("relative overflow-hidden", resolveOverlayBg(image?.src), aspectClasses[aspectRatio], themeClasses, className),
-		children: [
-			image?.src && /* @__PURE__ */ jsx("img", {
-				src: image?.src,
-				alt: image?.alt ?? "",
-				className: "size-full object-cover",
-				loading: "lazy"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0",
-				style: resolveOverlayGradient(position)
-			}),
-			hasContent && /* @__PURE__ */ jsx("div", {
-				className: getPositionClasses(position),
-				children: /* @__PURE__ */ jsx(HeroTextBlock, {
-					preheader,
-					heading,
-					buttonLabel,
-					buttonHref,
-					textLinkLabel,
-					textLinkHref,
-					contentWidth,
-					dark,
-					align,
-					headingClamp: "line-clamp-3"
-				})
-			})
-		]
-	});
-}
 function Hero(props) {
 	const heroDefault = useVariantDefault("hero");
 	const { layout = heroDefault ?? "overlay", contentPosition = "bottom-center", textAlign, colorTheme } = props;
@@ -252,14 +248,16 @@ function Hero(props) {
 		align
 	};
 	switch (layout) {
-		case "minimal": return /* @__PURE__ */ jsx(HeroMinimal, { ...layoutProps });
-		case "banner": return /* @__PURE__ */ jsx(HeroBanner, { ...layoutProps });
-		case "split": return /* @__PURE__ */ jsx(HeroSplit, { ...layoutProps });
+		case "minimal": return /* @__PURE__ */ jsx(HeroTextOnly, { ...layoutProps });
+		case "banner": return /* @__PURE__ */ jsx(HeroCompact, { ...layoutProps });
 		case "image-only": return /* @__PURE__ */ jsx(HeroImageOnly, { ...layoutProps });
-		default: return /* @__PURE__ */ jsx(HeroOverlay, { ...layoutProps });
+		default: return /* @__PURE__ */ jsx(HeroWithImage, {
+			...layoutProps,
+			layout
+		});
 	}
 }
 //#endregion
-export { Hero };
+export { Hero, heroRecipe };
 
 //# sourceMappingURL=hero.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"hero.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport { StorefrontButton } from \"../primitives/button\";\nimport { StorefrontTextLink } from \"../primitives/text-link\";\nimport {\n  colorThemeClasses,\n  isThemeDark,\n  type HeroProps,\n  type HeroContentPosition,\n  type HeroContentWidth,\n  type HeroTextAlign,\n} 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 = {\n  fontWeight: \"var(--enad-heading-weight)\",\n  letterSpacing: \"var(--enad-heading-tracking)\",\n  textTransform: \"var(--enad-heading-transform)\",\n} 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\n      className={cn(\"px-8 py-16 md:py-24 lg:py-32\", themeClasses || \"bg-background\", className)}\n    >\n      <div className=\"mx-auto flex max-w-4xl flex-col items-center text-center\">\n        {preheader && (\n          <p\n            className={cn(\n              \"mb-2 text-sm uppercase tracking-widest\",\n              dark ? \"text-white/70\" : \"text-muted-foreground\",\n            )}\n          >\n            {preheader}\n          </p>\n        )}\n        {heading && (\n          <h1\n            className={cn(\n              \"max-w-prose text-3xl font-heading line-clamp-3 md:text-5xl lg:text-6xl\",\n              dark ? \"text-white\" : \"text-foreground\",\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    </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(\n        \"relative max-h-64 overflow-hidden\",\n        image?.src ? \"bg-muted\" : \"bg-primary\",\n        themeClasses,\n        className,\n      )}\n    >\n      {image?.src && (\n        <img\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className=\"size-full object-cover\"\n          loading=\"lazy\"\n        />\n      )}\n      <div className=\"absolute inset-0\" style={overlayGradientStyle(\"to right\")} />\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\n            src={image?.src}\n            alt={image?.alt ?? \"\"}\n            className=\"size-full object-cover\"\n            loading=\"lazy\"\n          />\n        </div>\n      )}\n    </section>\n  );\n}\n\n/* ─── Layout: Image only ─── */\n\nfunction HeroImageOnly({ image, aspectRatio = \"16:9\", className }: HeroLayoutProps) {\n  return (\n    <section\n      className={cn(\"relative overflow-hidden bg-muted\", aspectClasses[aspectRatio], className)}\n    >\n      {image?.src && (\n        <img\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className=\"size-full object-cover\"\n          loading=\"lazy\"\n        />\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\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className=\"size-full object-cover\"\n          loading=\"lazy\"\n        />\n      )}\n      <div className=\"absolute inset-0\" style={resolveOverlayGradient(position)} />\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 heroDefault = useVariantDefault(\"hero\");\n  const {\n    layout = heroDefault ?? \"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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"}
+{"version":3,"file":"hero.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/hero.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { useVariantDefault } from \"../../ui-resolver/context\";\nimport { BlockHeading } from \"../primitives/block-heading\";\nimport { CTAGroup } from \"../primitives/cta-group\";\nimport {\n  colorThemeClasses,\n  isThemeDark,\n  type HeroProps,\n  type HeroContentPosition,\n  type HeroTextAlign,\n} from \"../types\";\n\n/* ─── Recipe ─── */\n\nconst heroRecipe = defineSlotRecipe({\n  slots: [\"root\", \"background\", \"overlay\", \"content\"] as const,\n  base: {\n    root: \"\",\n    background: \"size-full object-cover\",\n    overlay: \"absolute inset-0\",\n    content: \"\",\n  },\n  variants: {\n    layout: {\n      overlay: {\n        root: \"relative overflow-hidden\",\n      },\n      split: {\n        root: \"grid\",\n      },\n      minimal: {\n        root: \"px-[var(--enad-hero-px,2rem)] py-[var(--enad-hero-py,4rem)] md:py-[calc(var(--enad-hero-py,4rem)*1.5)] lg:py-[calc(var(--enad-hero-py,4rem)*2)]\",\n      },\n      banner: {\n        root: \"relative max-h-64 overflow-hidden\",\n      },\n      \"image-only\": {\n        root: \"relative overflow-hidden bg-muted\",\n      },\n    },\n    contentWidth: {\n      sm: { content: \"max-w-sm\" },\n      md: { content: \"max-w-xl\" },\n      lg: { content: \"max-w-3xl\" },\n    },\n  },\n  defaultVariants: {\n    layout: \"overlay\",\n    contentWidth: \"md\",\n  },\n});\n\n/* ─── Aspect ratio map ─── */\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\n/* ─── Overlay gradient ─── */\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\nconst centerOverlayStyle: React.CSSProperties = {\n  background: \"color-mix(in oklch, var(--enad-overlay-color) 30%, transparent)\",\n};\n\n/* ─── Position helpers ─── */\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\nfunction getGradientDirection(position: HeroContentPosition): string | null {\n  const [vertical, horizontal] = position.split(\"-\") as [string, string];\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  return null;\n}\n\n/* ─── Layout prop types ─── */\n\ntype HeroLayoutProps = HeroProps & {\n  dark: boolean;\n  themeClasses: string;\n  align: HeroTextAlign;\n};\n\n/* ─── Layout: WithImage (overlay + split) ─── */\n\nfunction HeroWithImage({\n  layout,\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 classes = heroRecipe({ layout, contentWidth });\n  const hasImage = Boolean(image?.src);\n  const hasContent = preheader || heading || buttonLabel || textLinkLabel;\n  const position = contentPosition ?? \"bottom-center\";\n\n  if (layout === \"split\") {\n    return (\n      <section className={cn(classes.root, hasImage && \"lg:grid-cols-2\", themeClasses, className)}>\n        <div className=\"flex min-w-0 flex-col justify-center px-8 py-12 lg:px-16 lg:py-20\">\n          <BlockHeading\n            preheader={preheader}\n            heading={heading}\n            dark={dark}\n            align={align}\n            headingTag=\"h1\"\n            headingSize=\"lg\"\n            headingClamp=\"line-clamp-4\"\n            className={classes.content}\n          />\n          <CTAGroup\n            buttonLabel={buttonLabel}\n            buttonHref={buttonHref}\n            textLinkLabel={textLinkLabel}\n            textLinkHref={textLinkHref}\n            dark={dark}\n          />\n        </div>\n        {hasImage && (\n          <div className={cn(\"relative overflow-hidden bg-muted\", aspectClasses[aspectRatio])}>\n            <img\n              src={image?.src}\n              alt={image?.alt ?? \"\"}\n              className={classes.background}\n              loading=\"lazy\"\n            />\n          </div>\n        )}\n      </section>\n    );\n  }\n\n  /* Overlay */\n  const gradientDirection = getGradientDirection(position);\n  const overlayStyle = gradientDirection\n    ? overlayGradientStyle(gradientDirection)\n    : centerOverlayStyle;\n\n  return (\n    <section\n      className={cn(\n        classes.root,\n        hasImage ? \"bg-muted\" : \"bg-primary\",\n        aspectClasses[aspectRatio],\n        themeClasses,\n        className,\n      )}\n    >\n      {hasImage && (\n        <img\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className={classes.background}\n          loading=\"lazy\"\n        />\n      )}\n      <div className={classes.overlay} style={overlayStyle} />\n      {hasContent && (\n        <div className={getPositionClasses(position)}>\n          <div className={cn(\"flex min-w-0 flex-col\", classes.content)}>\n            <BlockHeading\n              preheader={preheader}\n              heading={heading}\n              dark={dark}\n              align={align}\n              headingTag=\"h1\"\n              headingSize=\"lg\"\n              headingClamp=\"line-clamp-3\"\n            />\n            <CTAGroup\n              buttonLabel={buttonLabel}\n              buttonHref={buttonHref}\n              textLinkLabel={textLinkLabel}\n              textLinkHref={textLinkHref}\n              dark={dark}\n            />\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n\n/* ─── Layout: TextOnly (minimal) ─── */\n\nfunction HeroTextOnly({\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: HeroLayoutProps) {\n  const classes = heroRecipe({ layout: \"minimal\" });\n\n  return (\n    <section className={cn(classes.root, themeClasses || \"bg-background\", className)}>\n      <div className=\"mx-auto flex max-w-4xl flex-col items-center text-center\">\n        <BlockHeading\n          preheader={preheader}\n          heading={heading}\n          dark={dark}\n          align=\"center\"\n          headingTag=\"h1\"\n          headingSize=\"xl\"\n          headingClamp=\"line-clamp-3\"\n          className=\"max-w-prose\"\n        />\n        <CTAGroup\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: Compact (banner) ─── */\n\nfunction HeroCompact({\n  image,\n  preheader,\n  heading,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  themeClasses,\n  className,\n}: HeroLayoutProps) {\n  const classes = heroRecipe({ layout: \"banner\" });\n\n  return (\n    <section\n      className={cn(classes.root, image?.src ? \"bg-muted\" : \"bg-primary\", themeClasses, className)}\n    >\n      {image?.src && (\n        <img\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className={classes.background}\n          loading=\"lazy\"\n        />\n      )}\n      <div className={classes.overlay} style={overlayGradientStyle(\"to right\")} />\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={\n                  {\n                    fontWeight: \"var(--enad-heading-weight)\",\n                    letterSpacing: \"var(--enad-heading-tracking)\",\n                    textTransform: \"var(--enad-heading-transform)\",\n                  } as unknown as React.CSSProperties\n                }\n              >\n                {heading}\n              </h2>\n            )}\n          </div>\n          <CTAGroup\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: ImageOnly ─── */\n\nfunction HeroImageOnly({ image, aspectRatio = \"16:9\", className }: HeroLayoutProps) {\n  const classes = heroRecipe({ layout: \"image-only\" });\n\n  return (\n    <section className={cn(classes.root, aspectClasses[aspectRatio], className)}>\n      {image?.src && (\n        <img\n          src={image?.src}\n          alt={image?.alt ?? \"\"}\n          className={classes.background}\n          loading=\"lazy\"\n        />\n      )}\n    </section>\n  );\n}\n\n/* ─── Main component (dispatcher) ─── */\n\nfunction Hero(props: HeroProps) {\n  const heroDefault = useVariantDefault(\"hero\");\n  const {\n    layout = heroDefault ?? \"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 <HeroTextOnly {...layoutProps} />;\n    case \"banner\":\n      return <HeroCompact {...layoutProps} />;\n    case \"image-only\":\n      return <HeroImageOnly {...layoutProps} />;\n    case \"split\":\n    default:\n      return <HeroWithImage {...layoutProps} layout={layout} />;\n  }\n}\n\nexport { Hero, heroRecipe, type HeroProps };\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"link-block-small.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/link-block-small.tsx"],"mappings":";;;;iBAIS,cAAA,CAAA;EACP,KAAA;EACA,KAAA;EACA,IAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"link-block-small.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/link-block-small.tsx"],"mappings":";;;;iBAIS,cAAA,CAAA;EAAiB,KAAA;EAAO,KAAA;EAAO,IAAA;EAAM;AAAA,GAAa,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -9,7 +9,7 @@ function LinkBlockSmall({ image, title, href, className }) {
 			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)]"
+				className: "size-full object-cover"
 			}) : /* @__PURE__ */ jsx("div", { className: "size-full bg-muted" }),
 			/* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0",

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

@@ -1 +1 @@
-{"version":3,"file":"link-block-small.mjs","names":[],"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":";;;;AAIA,SAAS,eAAe,EACtB,OACA,OACA,MACA,aACsB;CACtB,MAAM,OACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,kGAAkG,UAAU;YAA/H;GACG,OAAO,MACN,oBAAC,OAAD;IACE,KAAK,MAAM;IACX,KAAK,MAAM,OAAO,SAAS;IAC3B,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA;GAExC,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,YAAY,+OAA+O;IACpQ,CAAA;GACD,SACC,oBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAEF;;AAGR,KAAI,KACF,QAAO,oBAAC,KAAD;EAAS;EAAM,WAAU;YAAS;EAAS,CAAA;AAGpD,QAAO"}
+{"version":3,"file":"link-block-small.mjs","names":[],"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({ image, title, href, className }: LinkBlockSmallProps) {\n  const card = (\n    <div\n      className={cn(\n        \"enad-interactive group relative aspect-[3/4] overflow-hidden rounded-[var(--enad-card-radius)]\",\n        className,\n      )}\n    >\n      {image?.src ? (\n        <img src={image.src} alt={image.alt ?? title ?? \"\"} className=\"size-full object-cover\" />\n      ) : (\n        <div className=\"size-full bg-muted\" />\n      )}\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          background:\n            \"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      {title && (\n        <p className=\"absolute inset-x-0 bottom-0 p-3 text-sm font-medium text-white\">{title}</p>\n      )}\n    </div>\n  );\n\n  if (href) {\n    return (\n      <a href={href} className=\"block\">\n        {card}\n      </a>\n    );\n  }\n\n  return card;\n}\n\nexport { LinkBlockSmall, type LinkBlockSmallProps };\n"],"mappings":";;;;AAIA,SAAS,eAAe,EAAE,OAAO,OAAO,MAAM,aAAkC;CAC9E,MAAM,OACJ,qBAAC,OAAD;EACE,WAAW,GACT,kGACA,UACD;YAJH;GAMG,OAAO,MACN,oBAAC,OAAD;IAAK,KAAK,MAAM;IAAK,KAAK,MAAM,OAAO,SAAS;IAAI,WAAU;IAA2B,CAAA,GAEzF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA;GAExC,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EACL,YACE,+OACH;IACD,CAAA;GACD,SACC,oBAAC,KAAD;IAAG,WAAU;cAAkE;IAAU,CAAA;GAEvF;;AAGR,KAAI,KACF,QACE,oBAAC,KAAD;EAAS;EAAM,WAAU;YACtB;EACC,CAAA;AAIR,QAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"link-block.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"mappings":";;;;iBAgNS,SAAA,CAAU,KAAA,EAAO,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"link-block.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"mappings":";;;;iBAqPS,SAAA,CAAU,KAAA,EAAO,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -21,14 +21,14 @@ function CardVariant({ image, eyebrow, title, buttonLabel, buttonHref, dark, the
 		href: buttonHref,
 		radiusClass: "rounded-[var(--enad-card-radius)]",
 		children: /* @__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),
+			className: cn("enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]", "shadow-[var(--enad-card-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)]"
+					className: "aspect-[3/2] w-full object-cover"
 				})
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "aspect-[3/2] w-full bg-muted",
@@ -59,7 +59,7 @@ function TextOnlyVariant({ eyebrow, title, buttonLabel, buttonHref, dark, themeC
 		href: buttonHref,
 		radiusClass: "rounded-[var(--enad-card-radius)]",
 		children: /* @__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),
+			className: cn("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"),
@@ -88,7 +88,7 @@ function OverlayVariant({ image, eyebrow, title, buttonLabel, buttonHref, classN
 					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)]"
+					className: "size-full object-cover"
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "size-full bg-primary",
 					"aria-hidden": "true"

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

@@ -1 +1 @@
-{"version":3,"file":"link-block.mjs","names":[],"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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"}
+{"version":3,"file":"link-block.mjs","names":[],"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 = {\n  fontWeight: \"var(--enad-heading-weight)\",\n  letterSpacing: \"var(--enad-heading-tracking)\",\n  textTransform: \"var(--enad-heading-transform)\",\n} 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(\n        \"block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        radiusClass,\n      )}\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)]\",\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\"\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\n            className={cn(\n              \"mb-1 text-sm uppercase tracking-widest\",\n              dark ? \"text-white/70\" : \"text-muted-foreground\",\n            )}\n          >\n            {eyebrow}\n          </p>\n        )}\n        {title && (\n          <h3\n            className={cn(\n              \"line-clamp-2 text-xl font-heading\",\n              dark ? \"text-white\" : \"text-foreground\",\n            )}\n            style={headingStyle}\n          >\n            {title}\n          </h3>\n        )}\n        {buttonLabel && (\n          <span\n            className={cn(\n              \"mt-3 inline-block text-sm font-medium line-clamp-3\",\n              dark ? \"text-white/80\" : \"text-foreground\",\n            )}\n          >\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        \"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 ? \"border-white/20 hover:bg-white/10\" : \"border-border hover:bg-accent\",\n        themeClasses,\n        className,\n      )}\n    >\n      {eyebrow && (\n        <p\n          className={cn(\n            \"mb-1 text-sm uppercase tracking-widest\",\n            dark ? \"text-white/70\" : \"text-muted-foreground\",\n          )}\n        >\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\n          className={cn(\n            \"mt-2 inline-block text-sm font-medium\",\n            dark ? \"text-white/80\" : \"text-muted-foreground\",\n          )}\n        >\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\n      className={cn(\n        \"enad-interactive group relative aspect-[3/4] overflow-hidden md:aspect-[2/1]\",\n        className,\n      )}\n    >\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\"\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={{\n          background:\n            \"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\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\">{eyebrow}</p>\n        )}\n        {title && (\n          <h3\n            className=\"line-clamp-2 text-xl font-heading text-white md:text-2xl\"\n            style={headingStyle}\n          >\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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"}

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

@@ -4,7 +4,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/client/storefront/blocks/product-card-parts.d.ts
 /**
  * Root container for a composable product card.
- * Provides group context for hover effects and overflow handling.
+ * Provides grouping and overflow handling for composed layouts.
  */
 declare function ProductCardRoot({
   className,

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

@@ -1 +1 @@
-{"version":3,"file":"product-card-parts.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-card-parts.tsx"],"mappings":";;;;;;;AAE+B;iBAStB,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAiBpE,oBAAA,CAAA;EAAuB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAazE,gBAAA,CAAA;EACP,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAgBrB,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAnDA;;;iBAoEpE,yBAAA,CAAA;EACP,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAuBxB,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAavE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAanE,mBAAA,CAAA;EAAsB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAxGG;;iBAqHzE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"product-card-parts.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/product-card-parts.tsx"],"mappings":";;;;;;;AAE+B;iBAStB,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAcpE,oBAAA,CAAA;EAAuB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAazE,gBAAA,CAAA;EACP,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;;iBAgBrB,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAhDA;;;iBAiEpE,yBAAA,CAAA;EACP,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAuBxB,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAavE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAanE,mBAAA,CAAA;EAAsB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;AAxGG;;iBAqHzE,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,WAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/product-card-parts.mjs

@@ -5,12 +5,12 @@ import { jsx } from "react/jsx-runtime";
 //#region src/client/storefront/blocks/product-card-parts.tsx
 /**
 * Root container for a composable product card.
-* Provides group context for hover effects and overflow handling.
+* Provides grouping and overflow handling for composed layouts.
 */
 function ProductCardRoot({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "product-card",
-		className: cn("enad-interactive group overflow-hidden rounded-[var(--enad-card-radius)]", className),
+		className: cn("group overflow-hidden rounded-[var(--enad-card-radius)]", className),
 		...props
 	});
 }