@enadhq/enad-react-sdk 1.0.0 → 1.1.0

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

@@ -0,0 +1,265 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { useVariantDefault } from "../../ui-resolver/context.mjs";
+import { StorefrontButton } from "../primitives/button.mjs";
+import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { colorThemeClasses, isThemeDark } from "../types.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/hero.tsx
+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 alignItemsMap = {
+	top: "items-start",
+	center: "items-center",
+	bottom: "items-end"
+};
+const justifyMap = {
+	left: "justify-start",
+	center: "justify-center",
+	right: "justify-end"
+};
+function getPositionClasses(position) {
+	const [vertical, horizontal] = position.split("-");
+	return cn("absolute inset-0 flex p-8 md:p-12 lg:p-16", alignItemsMap[vertical], justifyMap[horizontal]);
+}
+function getTextAlign(position) {
+	const horizontal = position.split("-")[1];
+	if (horizontal === "center") return "center";
+	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";
+	if (vertical === "top") return "to bottom";
+	if (horizontal === "left") return "to right";
+	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 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, {
+				buttonLabel,
+				buttonHref,
+				textLinkLabel,
+				textLinkHref,
+				dark
+			})
+		]
+	});
+}
+function HeroMinimal({ 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),
+		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
+				})
+			]
+		})
+	});
+}
+function HeroBanner({ image, preheader, heading, buttonLabel, buttonHref, textLinkLabel, textLinkHref, themeClasses, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("relative max-h-64 overflow-hidden", 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",
+				loading: "lazy"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				style: overlayGradientStyle("to right")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center px-8 md:px-12 lg:px-16",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full min-w-0 flex-wrap items-center justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-4",
+						children: [preheader && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-sm uppercase tracking-widest text-white/70",
+							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,
+							children: heading
+						})]
+					}), /* @__PURE__ */ jsx(HeroCTA, {
+						buttonLabel,
+						buttonHref,
+						textLinkLabel,
+						textLinkHref,
+						dark: true
+					})]
+				})
+			})
+		]
+	});
+}
+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 }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("relative overflow-hidden bg-muted", aspectClasses[aspectRatio], className),
+		children: image?.src && /* @__PURE__ */ jsx("img", {
+			src: image?.src,
+			alt: image?.alt ?? "",
+			className: "size-full object-cover",
+			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;
+	const dark = isThemeDark(colorTheme) || layout === "overlay";
+	const themeClasses = colorThemeClasses(colorTheme);
+	const defaultAlign = layout === "overlay" ? getTextAlign(contentPosition ?? "bottom-center") : "left";
+	const align = textAlign ?? defaultAlign;
+	const layoutProps = {
+		...props,
+		dark,
+		themeClasses,
+		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 "image-only": return /* @__PURE__ */ jsx(HeroImageOnly, { ...layoutProps });
+		default: return /* @__PURE__ */ jsx(HeroOverlay, { ...layoutProps });
+	}
+}
+//#endregion
+export { Hero };
+
+//# sourceMappingURL=hero.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,13 @@
+import { ImageBlockProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/image-block.d.ts
+declare function ImageBlock({
+  image,
+  aspectRatio,
+  caption,
+  className
+}: ImageBlockProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+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","names":[],"sources":["../../../../src/client/storefront/blocks/image-block.tsx"],"mappings":";;;;iBAUS,UAAA,CAAA;EACP,KAAA;EACA,WAAA;EACA,OAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,29 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/image-block.tsx
+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
+		})]
+	});
+}
+//#endregion
+export { ImageBlock };
+
+//# sourceMappingURL=image-block.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-block.mjs","names":[],"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":";;;;AAIA,MAAM,gBAAwC;CAC5C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,SAAS,WAAW,EAClB,OACA,cAAc,OACd,SACA,aACkB;AAClB,QACE,qBAAC,UAAD;EAAQ,WAAW,GAAG,mBAAmB,UAAU;YAAnD,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,qBAAqB,cAAc,aAAa;aAChE,OAAO,MACN,oBAAC,OAAD;IACE,KAAK,MAAM;IACX,KAAK,MAAM,OAAO;IAClB,WAAU;IACV,CAAA,GAEF,oBAAC,OAAD,EAAK,WAAU,sBAAuB,CAAA;GAEpC,CAAA,EACL,WACC,oBAAC,cAAD;GAAY,WAAU;aACnB;GACU,CAAA,CAER"}

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

@@ -0,0 +1,22 @@
+import { AccordionBlockProps, CardImageWithCaptionProps, CardVideoProps, ContentWithGalleryProps, ContentWithImageProductDataProps, GalleryProps, GalleryWithCaptionProps, GalleryWithLinkBlocksProps, HeroProps, ImageBlockProps, LinkBlockProps, LinkBlockSmallProps, ProductCardProps, ProductImageProps, SpacerProps, TextContentProps, TextContentWithImageProps, TruncatedTextProps, VariableTextContentProps } from "../types.js";
+import { AccordionBlock } from "./accordion-block.js";
+import { CardImageWithCaption } from "./card-image-with-caption.js";
+import { CardVideo } from "./card-video.js";
+import { ContentWithGallery } from "./content-with-gallery.js";
+import { ContentWithImageProductData } from "./content-with-image-product-data.js";
+import { GalleryWithCaption } from "./gallery-with-caption.js";
+import { GalleryWithLinkBlocks } from "./gallery-with-link-blocks.js";
+import { Gallery } from "./gallery.js";
+import { Hero } from "./hero.js";
+import { ImageBlock } from "./image-block.js";
+import { Spacer } from "./spacer.js";
+import { TextContent } from "./text-content.js";
+import { VariableTextContent } from "./variable-text-content.js";
+import { TextContentWithImage } from "./text-content-with-image.js";
+import { LinkBlock } from "./link-block.js";
+import { LinkBlockSmall } from "./link-block-small.js";
+import { TruncatedText } from "./truncated-text.js";
+import { ProductCard } from "./product-card.js";
+import { ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle } from "./product-card-parts.js";
+import { ProductImage } from "./product-image.js";
+export { AccordionBlock, type AccordionBlockProps, CardImageWithCaption, type CardImageWithCaptionProps, CardVideo, type CardVideoProps, ContentWithGallery, type ContentWithGalleryProps, ContentWithImageProductData, type ContentWithImageProductDataProps, Gallery, type GalleryProps, GalleryWithCaption, type GalleryWithCaptionProps, GalleryWithLinkBlocks, type GalleryWithLinkBlocksProps, Hero, type HeroProps, ImageBlock, type ImageBlockProps, LinkBlock, type LinkBlockProps, LinkBlockSmall, type LinkBlockSmallProps, ProductCard, ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, type ProductCardProps, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle, ProductImage, type ProductImageProps, Spacer, type SpacerProps, TextContent, type TextContentProps, TextContentWithImage, type TextContentWithImageProps, TruncatedText, type TruncatedTextProps, VariableTextContent, type VariableTextContentProps };

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

@@ -0,0 +1,21 @@
+import { AccordionBlock } from "./accordion-block.mjs";
+import { CardImageWithCaption } from "./card-image-with-caption.mjs";
+import { CardVideo } from "./card-video.mjs";
+import { ContentWithGallery } from "./content-with-gallery.mjs";
+import { ContentWithImageProductData } from "./content-with-image-product-data.mjs";
+import { GalleryWithCaption } from "./gallery-with-caption.mjs";
+import { GalleryWithLinkBlocks } from "./gallery-with-link-blocks.mjs";
+import { Gallery } from "./gallery.mjs";
+import { Hero } from "./hero.mjs";
+import { ImageBlock } from "./image-block.mjs";
+import { Spacer } from "./spacer.mjs";
+import { TextContent } from "./text-content.mjs";
+import { VariableTextContent } from "./variable-text-content.mjs";
+import { TextContentWithImage } from "./text-content-with-image.mjs";
+import { LinkBlock } from "./link-block.mjs";
+import { LinkBlockSmall } from "./link-block-small.mjs";
+import { TruncatedText } from "./truncated-text.mjs";
+import { ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle } from "./product-card-parts.mjs";
+import { ProductCard } from "./product-card.mjs";
+import { ProductImage } from "./product-image.mjs";
+export { AccordionBlock, CardImageWithCaption, CardVideo, ContentWithGallery, ContentWithImageProductData, Gallery, GalleryWithCaption, GalleryWithLinkBlocks, Hero, ImageBlock, LinkBlock, LinkBlockSmall, ProductCard, ProductCardContent, ProductCardFavoriteButton, ProductCardImage, ProductCardImageArea, ProductCardPrice, ProductCardRoot, ProductCardSubtitle, ProductCardTag, ProductCardTitle, ProductImage, Spacer, TextContent, TextContentWithImage, TruncatedText, VariableTextContent };

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

@@ -0,0 +1,13 @@
+import { LinkBlockSmallProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/link-block-small.d.ts
+declare function LinkBlockSmall({
+  image,
+  title,
+  href,
+  className
+}: LinkBlockSmallProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+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","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"}

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

@@ -0,0 +1,34 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/link-block-small.tsx
+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;
+}
+//#endregion
+export { LinkBlockSmall };
+
+//# sourceMappingURL=link-block-small.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+import { LinkBlockProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/link-block.d.ts
+declare function LinkBlock(props: LinkBlockProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+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","names":[],"sources":["../../../../src/client/storefront/blocks/link-block.tsx"],"mappings":";;;;iBAgNS,SAAA,CAAU,KAAA,EAAO,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,139 @@
+import { cn } from "../../ui/utils.mjs";
+import { colorThemeClasses, isThemeDark } from "../types.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/link-block.tsx
+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 }) {
+	return /* @__PURE__ */ jsx(OptionalLink, {
+		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),
+			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
+					})
+				]
+			})]
+		})
+	});
+}
+function TextOnlyVariant({ eyebrow, title, buttonLabel, buttonHref, dark, themeClasses, className }) {
+	return /* @__PURE__ */ jsx(OptionalLink, {
+		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),
+			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
+				})
+			]
+		})
+	});
+}
+function OverlayVariant({ image, eyebrow, title, buttonLabel, buttonHref, className }) {
+	return /* @__PURE__ */ jsx(OptionalLink, {
+		href: buttonHref,
+		children: /* @__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
+						})
+					]
+				})
+			]
+		})
+	});
+}
+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 });
+	}
+}
+//#endregion
+export { LinkBlock };
+
+//# sourceMappingURL=link-block.mjs.map