@enadhq/enad-react-sdk 1.0.0 → 1.1.0

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

@@ -0,0 +1,19 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/spacer.tsx
+const sizeClasses = {
+	sm: "py-2 md:py-3",
+	md: "py-4 md:py-6",
+	lg: "py-6 md:py-10"
+};
+function Spacer({ size = "md" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(sizeClasses[size]),
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+export { Spacer };
+
+//# sourceMappingURL=spacer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/spacer.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { SpacerProps } from \"../types\"\n\nconst sizeClasses: Record<string, string> = {\n  sm: \"py-2 md:py-3\",\n  md: \"py-4 md:py-6\",\n  lg: \"py-6 md:py-10\",\n}\n\nfunction Spacer({ size = \"md\" }: SpacerProps) {\n  return <div className={cn(sizeClasses[size])} aria-hidden=\"true\" />\n}\n\nexport { Spacer, type SpacerProps }\n"],"mappings":";;;;AAIA,MAAM,cAAsC;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAS,OAAO,EAAE,OAAO,QAAqB;AAC5C,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,MAAM;EAAE,eAAY;EAAS,CAAA"}

package/dist/client/storefront/blocks/text-content-with-image.d.ts

@@ -0,0 +1,8 @@
+import { TextContentWithImageProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/text-content-with-image.d.ts
+declare function TextContentWithImage(props: TextContentWithImageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TextContentWithImage, type TextContentWithImageProps };
+//# sourceMappingURL=text-content-with-image.d.ts.map

package/dist/client/storefront/blocks/text-content-with-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-content-with-image.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"mappings":";;;;iBA6VS,oBAAA,CAAqB,KAAA,EAAO,yBAAA,GAAyB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/text-content-with-image.mjs

@@ -0,0 +1,218 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { StorefrontButton } from "../primitives/button.mjs";
+import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { colorThemeClasses, isThemeDark } from "../types.mjs";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/text-content-with-image.tsx
+function CTAElement({ 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
+		})]
+	});
+}
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
+};
+function TextBlockContent({ preheader, heading, body, dark, preheaderColor = dark ? "text-white/70" : "text-muted-foreground", headingColor = dark ? "text-white" : "text-foreground", bodyColor = dark ? "text-white/80" : "text-muted-foreground", bodyMaxWidth = "" }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		preheader && /* @__PURE__ */ jsx("p", {
+			className: cn("mb-2 text-sm uppercase tracking-widest", preheaderColor),
+			children: preheader
+		}),
+		heading && /* @__PURE__ */ jsx("h2", {
+			className: cn("text-2xl font-heading md:text-3xl", headingColor),
+			style: headingStyle,
+			children: heading
+		}),
+		body && /* @__PURE__ */ jsx("p", {
+			className: cn("mt-4 text-base leading-relaxed", bodyColor, bodyMaxWidth),
+			children: body
+		})
+	] });
+}
+function StackedVariant({ image, fullWidth = false, preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	const hasImage = Boolean(image?.src);
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(fullWidth ? "" : "mx-auto max-w-7xl px-4 py-12 md:px-8"),
+			children: [hasImage && /* @__PURE__ */ jsx("div", {
+				className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted", "aspect-[16/9] w-full"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: image?.src,
+					alt: image?.alt ?? "",
+					loading: "lazy",
+					className: "size-full object-cover"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn("min-w-0 py-8", fullWidth && "px-8 lg:px-16"),
+				children: [/* @__PURE__ */ jsx(TextBlockContent, {
+					preheader,
+					heading,
+					body,
+					dark,
+					bodyMaxWidth: "max-w-2xl"
+				}), /* @__PURE__ */ jsx(CTAElement, {
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					dark
+				})]
+			})]
+		})
+	});
+}
+function OverlapCTA({ 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-background" : void 0,
+			children: textLinkLabel
+		})]
+	});
+}
+function OverlapTextCard({ preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, hasImage, overlapPositionClass }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative z-10 min-w-0 rounded-[var(--enad-card-radius)] shadow-[var(--enad-card-shadow)]", hasImage ? "lg:w-2/5" : "w-full", dark ? "bg-foreground text-background" : "bg-background", "p-8 lg:p-10", hasImage ? "-mt-16 mx-4 lg:mt-0 lg:mx-0" : "", overlapPositionClass),
+		children: [/* @__PURE__ */ jsx(TextBlockContent, {
+			preheader,
+			heading,
+			body,
+			dark,
+			preheaderColor: dark ? "text-background/70" : "text-muted-foreground",
+			headingColor: dark ? "text-background" : "text-foreground",
+			bodyColor: dark ? "text-background/80" : "text-muted-foreground"
+		}), /* @__PURE__ */ jsx(OverlapCTA, {
+			buttonLabel,
+			buttonHref,
+			textLinkLabel,
+			textLinkHref,
+			dark
+		})]
+	});
+}
+function OverlapVariant({ image, imagePosition = "first", preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	const hasImage = Boolean(image?.src);
+	const overlapPositionClass = (() => {
+		if (!hasImage) return "";
+		if (imagePosition === "last") return "lg:order-1 lg:-me-16";
+		return "lg:-ms-16";
+	})();
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(themeClasses, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-7xl px-4 py-12 md:px-8",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("relative", hasImage && "lg:flex lg:items-center"),
+				children: [hasImage && /* @__PURE__ */ jsx("div", {
+					className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:w-3/5", imagePosition === "last" ? "lg:order-2" : ""),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "aspect-[4/5] lg:aspect-[3/2]",
+						children: /* @__PURE__ */ jsx("img", {
+							src: image?.src,
+							alt: image?.alt ?? "",
+							loading: "lazy",
+							className: "size-full object-cover"
+						})
+					})
+				}), /* @__PURE__ */ jsx(OverlapTextCard, {
+					preheader,
+					heading,
+					body,
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					dark,
+					hasImage,
+					overlapPositionClass
+				})]
+			})
+		})
+	});
+}
+function SideBySideContent({ hasImage, imagePosition, imageEl, textEl }) {
+	if (!hasImage) return textEl;
+	if (imagePosition === "first") return /* @__PURE__ */ jsxs(Fragment, { children: [imageEl, textEl] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [textEl, imageEl] });
+}
+function SideBySideVariant({ image, imagePosition = "first", fullWidth = false, preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	const hasImage = Boolean(image?.src);
+	const imageEl = hasImage ? /* @__PURE__ */ jsx("div", {
+		className: cn("relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted", fullWidth ? "aspect-[4/5] lg:aspect-auto" : "aspect-[4/5]"),
+		children: /* @__PURE__ */ jsx("img", {
+			src: image?.src,
+			alt: image?.alt ?? "",
+			loading: "lazy",
+			className: "size-full object-cover"
+		})
+	}) : null;
+	const textEl = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col justify-center", fullWidth ? "px-8 py-12 lg:px-16 lg:py-20" : "py-8 lg:py-0"),
+		children: [/* @__PURE__ */ jsx(TextBlockContent, {
+			preheader,
+			heading,
+			body,
+			dark,
+			bodyMaxWidth: "max-w-lg"
+		}), /* @__PURE__ */ jsx(CTAElement, {
+			buttonLabel,
+			buttonHref,
+			textLinkLabel,
+			textLinkHref,
+			dark
+		})]
+	});
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(themeClasses, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(fullWidth ? cn("grid", hasImage && "lg:grid-cols-2") : cn("mx-auto grid max-w-7xl gap-8 px-4 py-12 md:px-8 lg:items-center lg:gap-12", hasImage && "lg:grid-cols-2")),
+			children: /* @__PURE__ */ jsx(SideBySideContent, {
+				hasImage,
+				imagePosition,
+				imageEl,
+				textEl
+			})
+		})
+	});
+}
+function TextContentWithImage(props) {
+	const { variant = "side-by-side", colorTheme, className } = props;
+	const dark = isThemeDark(colorTheme);
+	const themeClasses = colorThemeClasses(colorTheme);
+	const variantProps = {
+		...props,
+		dark,
+		themeClasses,
+		className
+	};
+	switch (variant) {
+		case "stacked": return /* @__PURE__ */ jsx(StackedVariant, { ...variantProps });
+		case "overlap": return /* @__PURE__ */ jsx(OverlapVariant, { ...variantProps });
+		default: return /* @__PURE__ */ jsx(SideBySideVariant, { ...variantProps });
+	}
+}
+//#endregion
+export { TextContentWithImage };
+
+//# sourceMappingURL=text-content-with-image.mjs.map

package/dist/client/storefront/blocks/text-content-with-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-content-with-image.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/text-content-with-image.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { StorefrontButton } from \"../primitives/button\"\nimport { StorefrontTextLink } from \"../primitives/text-link\"\nimport { colorThemeClasses, isThemeDark, type TextContentWithImageProps } from \"../types\"\n\n/* ─── Shared props for variant sub-components ─── */\n\ntype VariantProps = Omit<TextContentWithImageProps, \"variant\" | \"className\"> & {\n  dark: boolean\n  themeClasses: string\n  className?: string\n}\n\n/* ─── Shared CTA element builder ─── */\n\nfunction CTAElement({\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\n/* ─── Heading style constant ─── */\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 text block (preheader + heading + body) ─── */\n\nfunction TextBlockContent({\n  preheader,\n  heading,\n  body,\n  dark,\n  preheaderColor = dark ? \"text-white/70\" : \"text-muted-foreground\",\n  headingColor = dark ? \"text-white\" : \"text-foreground\",\n  bodyColor = dark ? \"text-white/80\" : \"text-muted-foreground\",\n  bodyMaxWidth = \"\",\n}: {\n  preheader?: string\n  heading?: string\n  body?: string\n  dark: boolean\n  preheaderColor?: string\n  headingColor?: string\n  bodyColor?: string\n  bodyMaxWidth?: string\n}) {\n  return (\n    <>\n      {preheader && (\n        <p className={cn(\"mb-2 text-sm uppercase tracking-widest\", preheaderColor)}>\n          {preheader}\n        </p>\n      )}\n      {heading && (\n        <h2\n          className={cn(\"text-2xl font-heading md:text-3xl\", headingColor)}\n          style={headingStyle}\n        >\n          {heading}\n        </h2>\n      )}\n      {body && (\n        <p className={cn(\"mt-4 text-base leading-relaxed\", bodyColor, bodyMaxWidth)}>\n          {body}\n        </p>\n      )}\n    </>\n  )\n}\n\n/* ─── Stacked variant ─── */\n\nfunction StackedVariant({\n  image,\n  fullWidth = false,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={cn(fullWidth ? \"\" : \"mx-auto max-w-7xl px-4 py-12 md:px-8\")}>\n        {hasImage && (\n          <div className={cn(\"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\", \"aspect-[16/9] w-full\")}>\n            <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n          </div>\n        )}\n        <div className={cn(\"min-w-0 py-8\", fullWidth && \"px-8 lg:px-16\")}>\n          <TextBlockContent preheader={preheader} heading={heading} body={body} dark={dark} bodyMaxWidth=\"max-w-2xl\" />\n          <CTAElement buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ─── Overlap text card (extracted to reduce complexity) ─── */\n\nfunction OverlapCTA({\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-background\" : undefined}>\n          {textLinkLabel}\n        </StorefrontTextLink>\n      )}\n    </div>\n  )\n}\n\nfunction OverlapTextCard({\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  hasImage,\n  overlapPositionClass,\n}: {\n  preheader?: string\n  heading?: string\n  body?: string\n  buttonLabel?: string\n  buttonHref?: string\n  textLinkLabel?: string\n  textLinkHref?: string\n  dark: boolean\n  hasImage: boolean\n  overlapPositionClass: string\n}) {\n  return (\n    <div className={cn(\n      \"relative z-10 min-w-0 rounded-[var(--enad-card-radius)] shadow-[var(--enad-card-shadow)]\",\n      hasImage ? \"lg:w-2/5\" : \"w-full\",\n      dark ? \"bg-foreground text-background\" : \"bg-background\",\n      \"p-8 lg:p-10\",\n      hasImage ? \"-mt-16 mx-4 lg:mt-0 lg:mx-0\" : \"\",\n      overlapPositionClass,\n    )}>\n      <TextBlockContent\n        preheader={preheader}\n        heading={heading}\n        body={body}\n        dark={dark}\n        preheaderColor={dark ? \"text-background/70\" : \"text-muted-foreground\"}\n        headingColor={dark ? \"text-background\" : \"text-foreground\"}\n        bodyColor={dark ? \"text-background/80\" : \"text-muted-foreground\"}\n      />\n      <OverlapCTA buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n    </div>\n  )\n}\n\n/* ─── Overlap variant ─── */\n\nfunction OverlapVariant({\n  image,\n  imagePosition = \"first\",\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  const overlapPositionClass = (() => {\n    if (!hasImage) return \"\"\n    if (imagePosition === \"last\") return \"lg:order-1 lg:-me-16\"\n    return \"lg:-ms-16\"\n  })()\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className=\"mx-auto max-w-7xl px-4 py-12 md:px-8\">\n        <div className={cn(\"relative\", hasImage && \"lg:flex lg:items-center\")}>\n          {hasImage && (\n            <div className={cn(\n              \"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted lg:w-3/5\",\n              imagePosition === \"last\" ? \"lg:order-2\" : \"\",\n            )}>\n              <div className=\"aspect-[4/5] lg:aspect-[3/2]\">\n                <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n              </div>\n            </div>\n          )}\n\n          <OverlapTextCard\n            preheader={preheader}\n            heading={heading}\n            body={body}\n            buttonLabel={buttonLabel}\n            buttonHref={buttonHref}\n            textLinkLabel={textLinkLabel}\n            textLinkHref={textLinkHref}\n            dark={dark}\n            hasImage={hasImage}\n            overlapPositionClass={overlapPositionClass}\n          />\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ─── Side-by-side content ordering helper ─── */\n\nfunction SideBySideContent({\n  hasImage,\n  imagePosition,\n  imageEl,\n  textEl,\n}: {\n  hasImage: boolean\n  imagePosition: string\n  imageEl: React.ReactNode\n  textEl: React.ReactNode\n}) {\n  if (!hasImage) return textEl\n  if (imagePosition === \"first\") {\n    return (\n      <>\n        {imageEl}\n        {textEl}\n      </>\n    )\n  }\n  return (\n    <>\n      {textEl}\n      {imageEl}\n    </>\n  )\n}\n\n/* ─── Side-by-side variant ─── */\n\nfunction SideBySideVariant({\n  image,\n  imagePosition = \"first\",\n  fullWidth = false,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const hasImage = Boolean(image?.src)\n\n  const imageEl = hasImage ? (\n    <div className={cn(\"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\", fullWidth ? \"aspect-[4/5] lg:aspect-auto\" : \"aspect-[4/5]\")}>\n      <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className=\"size-full object-cover\" />\n    </div>\n  ) : null\n\n  const textEl = (\n    <div className={cn(\"flex min-w-0 flex-col justify-center\", fullWidth ? \"px-8 py-12 lg:px-16 lg:py-20\" : \"py-8 lg:py-0\")}>\n      <TextBlockContent preheader={preheader} heading={heading} body={body} dark={dark} bodyMaxWidth=\"max-w-lg\" />\n      <CTAElement buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n    </div>\n  )\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={cn(\n        fullWidth\n          ? cn(\"grid\", hasImage && \"lg:grid-cols-2\")\n          : cn(\"mx-auto grid max-w-7xl gap-8 px-4 py-12 md:px-8 lg:items-center lg:gap-12\", hasImage && \"lg:grid-cols-2\"),\n      )}>\n        <SideBySideContent\n          hasImage={hasImage}\n          imagePosition={imagePosition}\n          imageEl={imageEl}\n          textEl={textEl}\n        />\n      </div>\n    </section>\n  )\n}\n\n/* ─── Main component ─── */\n\nfunction TextContentWithImage(props: TextContentWithImageProps) {\n  const { variant = \"side-by-side\", colorTheme, className } = props\n  const dark = isThemeDark(colorTheme)\n  const themeClasses = colorThemeClasses(colorTheme)\n\n  const variantProps: VariantProps = { ...props, dark, themeClasses, className }\n\n  switch (variant) {\n    case \"stacked\":\n      return <StackedVariant {...variantProps} />\n    case \"overlap\":\n      return <OverlapVariant {...variantProps} />\n    default:\n      return <SideBySideVariant {...variantProps} />\n  }\n}\n\nexport { TextContentWithImage, type TextContentWithImageProps }\n"],"mappings":"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"}

package/dist/client/storefront/blocks/text-content.d.ts

@@ -0,0 +1,8 @@
+import { TextContentProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/text-content.d.ts
+declare function TextContent(props: TextContentProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TextContent, type TextContentProps };
+//# sourceMappingURL=text-content.d.ts.map

package/dist/client/storefront/blocks/text-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-content.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/text-content.tsx"],"mappings":";;;;iBAqNS,WAAA,CAAY,KAAA,EAAO,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/text-content.mjs

@@ -0,0 +1,165 @@
+"use client";
+import { cn } from "../../ui/utils.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/text-content.tsx
+function CTAGroup({ 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
+		})]
+	});
+}
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
+};
+function PullQuoteVariant({ preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("px-8 py-12 md:px-16 md:py-20", themeClasses, className),
+		children: /* @__PURE__ */ jsxs("blockquote", {
+			className: "max-w-3xl border-s-4 ps-6 md:ps-10",
+			style: { borderColor: "var(--enad-accent-color, hsl(var(--primary)))" },
+			children: [
+				preheader && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-3 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"),
+					children: preheader
+				}),
+				heading && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-4 text-2xl font-heading leading-relaxed line-clamp-6 md:text-3xl lg:text-4xl", dark ? "text-white" : "text-foreground"),
+					style: headingStyle,
+					children: heading
+				}),
+				body && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-6 text-lg leading-relaxed md:text-xl", dark ? "text-white/80" : "text-muted-foreground"),
+					children: body
+				}),
+				/* @__PURE__ */ jsx(CTAGroup, {
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					dark
+				})
+			]
+		})
+	});
+}
+function ColumnsVariant({ preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("px-8 py-12 md:px-16 md:py-20", themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto max-w-5xl",
+			children: [
+				preheader && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-3 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"),
+					children: preheader
+				}),
+				heading && /* @__PURE__ */ jsx("h2", {
+					className: cn("mb-6 text-2xl font-heading md:text-3xl lg:text-4xl", dark ? "text-white" : "text-foreground"),
+					style: headingStyle,
+					children: heading
+				}),
+				body && /* @__PURE__ */ jsx("div", {
+					className: "columns-1 gap-8 md:columns-2 lg:columns-3 [&>p]:break-inside-avoid",
+					children: /* @__PURE__ */ jsx("p", {
+						className: cn("mb-6 text-base leading-relaxed", dark ? "text-white/80" : "text-muted-foreground"),
+						children: body
+					})
+				}),
+				/* @__PURE__ */ jsx(CTAGroup, {
+					buttonLabel,
+					buttonHref,
+					textLinkLabel,
+					textLinkHref,
+					dark
+				})
+			]
+		})
+	});
+}
+function DefaultVariant({ preheader, heading, body, layout = "default", buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+	const cta = /* @__PURE__ */ jsx(CTAGroup, {
+		buttonLabel,
+		buttonHref,
+		textLinkLabel,
+		textLinkHref,
+		dark
+	});
+	const preheaderEl = preheader ? /* @__PURE__ */ jsx("p", {
+		className: cn("mb-3 text-sm uppercase tracking-widest", dark ? "text-white/70" : "text-muted-foreground"),
+		children: preheader
+	}) : null;
+	const headingEl = heading ? /* @__PURE__ */ jsx("h2", {
+		className: cn("mb-4 text-2xl font-heading md:text-3xl lg:text-4xl", dark ? "text-white" : "text-foreground"),
+		style: headingStyle,
+		children: heading
+	}) : null;
+	const bodyEl = body ? /* @__PURE__ */ jsx("p", {
+		className: cn("mb-6 text-base leading-relaxed", dark ? "text-white/80" : "text-muted-foreground"),
+		children: body
+	}) : null;
+	if (layout === "text-indent") return /* @__PURE__ */ jsx("section", {
+		className: cn("px-8 py-12 md:px-16 md:py-20", themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-5xl",
+			children: [
+				preheaderEl && /* @__PURE__ */ jsx("div", {
+					className: "md:ps-44",
+					children: preheaderEl
+				}),
+				headingEl,
+				/* @__PURE__ */ jsxs("div", {
+					className: "md:ps-44",
+					children: [bodyEl, cta]
+				})
+			]
+		})
+	});
+	const maxWidthClass = layout === "wide" ? "max-w-4xl" : "max-w-2xl";
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("px-8 py-12 md:px-16 md:py-20", themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: maxWidthClass,
+			children: [
+				preheaderEl,
+				headingEl,
+				bodyEl,
+				cta
+			]
+		})
+	});
+}
+function TextContent(props) {
+	const { variant = "default", colorTheme, className } = props;
+	const dark = isThemeDark(colorTheme);
+	const themeClasses = colorThemeClasses(colorTheme);
+	if (!(props.preheader || props.heading || props.body || props.buttonLabel || props.textLinkLabel)) return null;
+	const variantProps = {
+		...props,
+		dark,
+		themeClasses,
+		className
+	};
+	switch (variant) {
+		case "pull-quote": return /* @__PURE__ */ jsx(PullQuoteVariant, { ...variantProps });
+		case "columns": return /* @__PURE__ */ jsx(ColumnsVariant, { ...variantProps });
+		default: return /* @__PURE__ */ jsx(DefaultVariant, { ...variantProps });
+	}
+}
+//#endregion
+export { TextContent };
+
+//# sourceMappingURL=text-content.mjs.map

package/dist/client/storefront/blocks/text-content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-content.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/text-content.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport { StorefrontButton } from \"../primitives/button\"\nimport { StorefrontTextLink } from \"../primitives/text-link\"\nimport { colorThemeClasses, isThemeDark, type TextContentProps } from \"../types\"\n\n/* ─── Shared sub-components ─── */\n\nfunction CTAGroup({\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\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 variant prop types ─── */\n\ntype VariantProps = TextContentProps & {\n  dark: boolean\n  themeClasses: string\n}\n\n/* ─── Pull-quote variant ─── */\n\nfunction PullQuoteVariant({\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  return (\n    <section className={cn(\"px-8 py-12 md:px-16 md:py-20\", themeClasses, className)}>\n      <blockquote\n        className=\"max-w-3xl border-s-4 ps-6 md:ps-10\"\n        style={{ borderColor: \"var(--enad-accent-color, hsl(var(--primary)))\" }}\n      >\n        {preheader && (\n          <p className={cn(\"mb-3 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n            {preheader}\n          </p>\n        )}\n        {heading && (\n          <p\n            className={cn(\"mb-4 text-2xl font-heading leading-relaxed line-clamp-6 md:text-3xl lg:text-4xl\", dark ? \"text-white\" : \"text-foreground\")}\n            style={headingStyle}\n          >\n            {heading}\n          </p>\n        )}\n        {body && (\n          <p className={cn(\"mb-6 text-lg leading-relaxed md:text-xl\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n            {body}\n          </p>\n        )}\n        <CTAGroup buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n      </blockquote>\n    </section>\n  )\n}\n\n/* ─── Columns variant ─── */\n\nfunction ColumnsVariant({\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  return (\n    <section className={cn(\"px-8 py-12 md:px-16 md:py-20\", themeClasses, className)}>\n      <div className=\"mx-auto max-w-5xl\">\n        {preheader && (\n          <p className={cn(\"mb-3 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n            {preheader}\n          </p>\n        )}\n        {heading && (\n          <h2\n            className={cn(\"mb-6 text-2xl font-heading md:text-3xl lg:text-4xl\", dark ? \"text-white\" : \"text-foreground\")}\n            style={headingStyle}\n          >\n            {heading}\n          </h2>\n        )}\n        {body && (\n          <div className=\"columns-1 gap-8 md:columns-2 lg:columns-3 [&>p]:break-inside-avoid\">\n            <p className={cn(\"mb-6 text-base leading-relaxed\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n              {body}\n            </p>\n          </div>\n        )}\n        <CTAGroup buttonLabel={buttonLabel} buttonHref={buttonHref} textLinkLabel={textLinkLabel} textLinkHref={textLinkHref} dark={dark} />\n      </div>\n    </section>\n  )\n}\n\n/* ─── Default variant (respects layout sub-options) ─── */\n\nfunction DefaultVariant({\n  preheader,\n  heading,\n  body,\n  layout = \"default\",\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: VariantProps) {\n  const cta = (\n    <CTAGroup\n      buttonLabel={buttonLabel}\n      buttonHref={buttonHref}\n      textLinkLabel={textLinkLabel}\n      textLinkHref={textLinkHref}\n      dark={dark}\n    />\n  )\n\n  const preheaderEl = preheader ? (\n    <p className={cn(\"mb-3 text-sm uppercase tracking-widest\", dark ? \"text-white/70\" : \"text-muted-foreground\")}>\n      {preheader}\n    </p>\n  ) : null\n\n  const headingEl = heading ? (\n    <h2\n      className={cn(\"mb-4 text-2xl font-heading md:text-3xl lg:text-4xl\", dark ? \"text-white\" : \"text-foreground\")}\n      style={headingStyle}\n    >\n      {heading}\n    </h2>\n  ) : null\n\n  const bodyEl = body ? (\n    <p className={cn(\"mb-6 text-base leading-relaxed\", dark ? \"text-white/80\" : \"text-muted-foreground\")}>\n      {body}\n    </p>\n  ) : null\n\n  if (layout === \"text-indent\") {\n    return (\n      <section className={cn(\"px-8 py-12 md:px-16 md:py-20\", themeClasses, className)}>\n        <div className=\"max-w-5xl\">\n          {preheaderEl && <div className=\"md:ps-44\">{preheaderEl}</div>}\n          {headingEl}\n          <div className=\"md:ps-44\">\n            {bodyEl}\n            {cta}\n          </div>\n        </div>\n      </section>\n    )\n  }\n\n  const maxWidthClass = layout === \"wide\" ? \"max-w-4xl\" : \"max-w-2xl\"\n\n  return (\n    <section className={cn(\"px-8 py-12 md:px-16 md:py-20\", themeClasses, className)}>\n      <div className={maxWidthClass}>\n        {preheaderEl}\n        {headingEl}\n        {bodyEl}\n        {cta}\n      </div>\n    </section>\n  )\n}\n\n/* ─── Main component ─── */\n\nfunction TextContent(props: TextContentProps) {\n  const { variant = \"default\", colorTheme, className } = props\n  const dark = isThemeDark(colorTheme)\n  const themeClasses = colorThemeClasses(colorTheme)\n  const hasContent = props.preheader || props.heading || props.body || props.buttonLabel || props.textLinkLabel\n\n  if (!hasContent) return null\n\n  const variantProps: VariantProps = { ...props, dark, themeClasses, className }\n\n  switch (variant) {\n    case \"pull-quote\":\n      return <PullQuoteVariant {...variantProps} />\n    case \"columns\":\n      return <ColumnsVariant {...variantProps} />\n    default:\n      return <DefaultVariant {...variantProps} />\n  }\n}\n\nexport { TextContent, type TextContentProps }\n"],"mappings":";;;;;;;;AAUA,SAAS,SAAS,EAChB,aACA,YACA,eACA,cACA,QAOC;AACD,KAAI,CAAC,eAAe,CAAC,cAAe,QAAO;AAC3C,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,eAAe,cACd,oBAAC,kBAAD;GAAkB,MAAM;GAAY,SAAS,OAAO,YAAY;aAC7D;GACgB,CAAA,EAEpB,iBAAiB,gBAChB,oBAAC,oBAAD;GAAoB,MAAM;GAAc,WAAW,OAAO,eAAe,KAAA;aACtE;GACkB,CAAA,CAEnB;;;AAIV,MAAM,eAAe;CAAE,YAAY;CAA8B,eAAe;CAAgC,eAAe;CAAiC;AAWhK,SAAS,iBAAiB,EACxB,WACA,SACA,MACA,aACA,YACA,eACA,cACA,MACA,cACA,aACe;AACf,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,gCAAgC,cAAc,UAAU;YAC7E,qBAAC,cAAD;GACE,WAAU;GACV,OAAO,EAAE,aAAa,iDAAiD;aAFzE;IAIG,aACC,oBAAC,KAAD;KAAG,WAAW,GAAG,0CAA0C,OAAO,kBAAkB,wBAAwB;eACzG;KACC,CAAA;IAEL,WACC,oBAAC,KAAD;KACE,WAAW,GAAG,mFAAmF,OAAO,eAAe,kBAAkB;KACzI,OAAO;eAEN;KACC,CAAA;IAEL,QACC,oBAAC,KAAD;KAAG,WAAW,GAAG,2CAA2C,OAAO,kBAAkB,wBAAwB;eAC1G;KACC,CAAA;IAEN,oBAAC,UAAD;KAAuB;KAAyB;KAA2B;KAA6B;KAAoB;KAAQ,CAAA;IACzH;;EACL,CAAA;;AAMd,SAAS,eAAe,EACtB,WACA,SACA,MACA,aACA,YACA,eACA,cACA,MACA,cACA,aACe;AACf,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,gCAAgC,cAAc,UAAU;YAC7E,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,aACC,oBAAC,KAAD;KAAG,WAAW,GAAG,0CAA0C,OAAO,kBAAkB,wBAAwB;eACzG;KACC,CAAA;IAEL,WACC,oBAAC,MAAD;KACE,WAAW,GAAG,sDAAsD,OAAO,eAAe,kBAAkB;KAC5G,OAAO;eAEN;KACE,CAAA;IAEN,QACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,KAAD;MAAG,WAAW,GAAG,kCAAkC,OAAO,kBAAkB,wBAAwB;gBACjG;MACC,CAAA;KACA,CAAA;IAER,oBAAC,UAAD;KAAuB;KAAyB;KAA2B;KAA6B;KAAoB;KAAQ,CAAA;IAChI;;EACE,CAAA;;AAMd,SAAS,eAAe,EACtB,WACA,SACA,MACA,SAAS,WACT,aACA,YACA,eACA,cACA,MACA,cACA,aACe;CACf,MAAM,MACJ,oBAAC,UAAD;EACe;EACD;EACG;EACD;EACR;EACN,CAAA;CAGJ,MAAM,cAAc,YAClB,oBAAC,KAAD;EAAG,WAAW,GAAG,0CAA0C,OAAO,kBAAkB,wBAAwB;YACzG;EACC,CAAA,GACF;CAEJ,MAAM,YAAY,UAChB,oBAAC,MAAD;EACE,WAAW,GAAG,sDAAsD,OAAO,eAAe,kBAAkB;EAC5G,OAAO;YAEN;EACE,CAAA,GACH;CAEJ,MAAM,SAAS,OACb,oBAAC,KAAD;EAAG,WAAW,GAAG,kCAAkC,OAAO,kBAAkB,wBAAwB;YACjG;EACC,CAAA,GACF;AAEJ,KAAI,WAAW,cACb,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,gCAAgC,cAAc,UAAU;YAC7E,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,eAAe,oBAAC,OAAD;KAAK,WAAU;eAAY;KAAkB,CAAA;IAC5D;IACD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,QACA,IACG;;IACF;;EACE,CAAA;CAId,MAAM,gBAAgB,WAAW,SAAS,cAAc;AAExD,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,gCAAgC,cAAc,UAAU;YAC7E,qBAAC,OAAD;GAAK,WAAW;aAAhB;IACG;IACA;IACA;IACA;IACG;;EACE,CAAA;;AAMd,SAAS,YAAY,OAAyB;CAC5C,MAAM,EAAE,UAAU,WAAW,YAAY,cAAc;CACvD,MAAM,OAAO,YAAY,WAAW;CACpC,MAAM,eAAe,kBAAkB,WAAW;AAGlD,KAAI,EAFe,MAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,MAAM,eAAe,MAAM,eAE/E,QAAO;CAExB,MAAM,eAA6B;EAAE,GAAG;EAAO;EAAM;EAAc;EAAW;AAE9E,SAAQ,SAAR;EACE,KAAK,aACH,QAAO,oBAAC,kBAAD,EAAkB,GAAI,cAAgB,CAAA;EAC/C,KAAK,UACH,QAAO,oBAAC,gBAAD,EAAgB,GAAI,cAAgB,CAAA;EAC7C,QACE,QAAO,oBAAC,gBAAD,EAAgB,GAAI,cAAgB,CAAA"}

package/dist/client/storefront/blocks/truncated-text.d.ts

@@ -0,0 +1,13 @@
+import { TruncatedTextProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/truncated-text.d.ts
+declare function TruncatedText({
+  html,
+  visibleLines,
+  labels,
+  className
+}: TruncatedTextProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TruncatedText, type TruncatedTextProps };
+//# sourceMappingURL=truncated-text.d.ts.map

package/dist/client/storefront/blocks/truncated-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/truncated-text.tsx"],"mappings":";;;;iBAOS,aAAA,CAAA;EAAgB,IAAA;EAAM,YAAA;EAAkB,MAAA;EAAQ;AAAA,GAAa,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/truncated-text.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui-resolver/collapsible.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/truncated-text.tsx
+function TruncatedText({ html, visibleLines = 4, labels, className }) {
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		className: cn("w-full", className),
+		children: [
+			!isOpen && /* @__PURE__ */ jsx("div", {
+				className: "prose prose-sm max-w-none",
+				style: {
+					display: "-webkit-box",
+					WebkitLineClamp: visibleLines,
+					WebkitBoxOrient: "vertical",
+					overflow: "hidden"
+				},
+				dangerouslySetInnerHTML: { __html: html }
+			}),
+			/* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "prose prose-sm max-w-none",
+				dangerouslySetInnerHTML: { __html: html }
+			}) }),
+			/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "mt-2 text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-muted-foreground",
+					children: isOpen ? labels?.showLess ?? "Show less" : labels?.showMore ?? "Read more"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { TruncatedText };
+
+//# sourceMappingURL=truncated-text.mjs.map

package/dist/client/storefront/blocks/truncated-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncated-text.mjs","names":["React"],"sources":["../../../../src/client/storefront/blocks/truncated-text.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"../../ui-resolver/collapsible\";\nimport { cn } from \"../../ui/utils\";\nimport type { TruncatedTextProps } from \"../types\";\n\nfunction TruncatedText({ html, visibleLines = 4, labels, className }: TruncatedTextProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Collapsible open={isOpen} onOpenChange={setIsOpen} className={cn(\"w-full\", className)}>\n      {/* Clamped preview */}\n      {!isOpen && (\n        <div\n          className=\"prose prose-sm max-w-none\"\n          style={{\n            display: \"-webkit-box\",\n            WebkitLineClamp: visibleLines,\n            WebkitBoxOrient: \"vertical\",\n            overflow: \"hidden\",\n          }}\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      )}\n\n      {/* Full content */}\n      <CollapsibleContent>\n        <div className=\"prose prose-sm max-w-none\" dangerouslySetInnerHTML={{ __html: html }} />\n      </CollapsibleContent>\n\n      <CollapsibleTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"mt-2 text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-muted-foreground\"\n        >\n          {isOpen ? (labels?.showLess ?? \"Show less\") : (labels?.showMore ?? \"Read more\")}\n        </button>\n      </CollapsibleTrigger>\n    </Collapsible>\n  );\n}\n\nexport { TruncatedText, type TruncatedTextProps };\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,MAAM,eAAe,GAAG,QAAQ,aAAiC;CACxF,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,MAAM;AAEjD,QACE,qBAAC,aAAD;EAAa,MAAM;EAAQ,cAAc;EAAW,WAAW,GAAG,UAAU,UAAU;YAAtF;GAEG,CAAC,UACA,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KACL,SAAS;KACT,iBAAiB;KACjB,iBAAiB;KACjB,UAAU;KACX;IACD,yBAAyB,EAAE,QAAQ,MAAM;IACzC,CAAA;GAIJ,oBAAC,oBAAD,EAAA,UACE,oBAAC,OAAD;IAAK,WAAU;IAA4B,yBAAyB,EAAE,QAAQ,MAAM;IAAI,CAAA,EACrE,CAAA;GAErB,oBAAC,oBAAD;IAAoB,SAAA;cAClB,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;eAET,SAAU,QAAQ,YAAY,cAAgB,QAAQ,YAAY;KAC5D,CAAA;IACU,CAAA;GACT"}

package/dist/client/storefront/blocks/variable-text-content.d.ts

@@ -0,0 +1,11 @@
+import { VariableTextContentProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/blocks/variable-text-content.d.ts
+declare function VariableTextContent({
+  html,
+  className
+}: VariableTextContentProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { VariableTextContent, type VariableTextContentProps };
+//# sourceMappingURL=variable-text-content.d.ts.map

package/dist/client/storefront/blocks/variable-text-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-text-content.d.ts","names":[],"sources":["../../../../src/client/storefront/blocks/variable-text-content.tsx"],"mappings":";;;;iBAIS,mBAAA,CAAA;EAAsB,IAAA;EAAM;AAAA,GAAa,wBAAA,GAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/blocks/variable-text-content.mjs

@@ -0,0 +1,17 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/blocks/variable-text-content.tsx
+function VariableTextContent({ html, className }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("px-4 py-12 md:px-8", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "prose prose-lg mx-auto max-w-3xl xl:prose-xl",
+			dangerouslySetInnerHTML: { __html: html }
+		})
+	});
+}
+//#endregion
+export { VariableTextContent };
+
+//# sourceMappingURL=variable-text-content.mjs.map

package/dist/client/storefront/blocks/variable-text-content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-text-content.mjs","names":[],"sources":["../../../../src/client/storefront/blocks/variable-text-content.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../../ui/utils\"\nimport type { VariableTextContentProps } from \"../types\"\n\nfunction VariableTextContent({ html, className }: VariableTextContentProps) {\n  return (\n    <section className={cn(\"px-4 py-12 md:px-8\", className)}>\n      <div\n        className=\"prose prose-lg mx-auto max-w-3xl xl:prose-xl\"\n        dangerouslySetInnerHTML={{ __html: html }}\n      />\n    </section>\n  )\n}\n\nexport { VariableTextContent, type VariableTextContentProps }\n"],"mappings":";;;;AAIA,SAAS,oBAAoB,EAAE,MAAM,aAAuC;AAC1E,QACE,oBAAC,WAAD;EAAS,WAAW,GAAG,sBAAsB,UAAU;YACrD,oBAAC,OAAD;GACE,WAAU;GACV,yBAAyB,EAAE,QAAQ,MAAM;GACzC,CAAA;EACM,CAAA"}

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

@@ -0,0 +1,2 @@
+import { SwipeableCarousel, SwipeableCarouselProps } from "./swipeable-carousel.js";
+export { SwipeableCarousel, type SwipeableCarouselProps };

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

@@ -0,0 +1,2 @@
+import { SwipeableCarousel } from "./swipeable-carousel.mjs";
+export { SwipeableCarousel };

package/dist/client/storefront/carousel/swipeable-carousel.d.ts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/carousel/swipeable-carousel.d.ts
+interface SwipeableCarouselProps {
+  items: React$1.ReactNode[];
+  className?: string;
+  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */
+  arrows?: "inset" | "outset";
+  showDots?: boolean;
+  dotsClassName?: string;
+  activeSlide?: number;
+  onSlideChange?: (index: number) => void;
+}
+declare function SwipeableCarousel({
+  items,
+  className,
+  arrows,
+  showDots,
+  dotsClassName,
+  activeSlide,
+  onSlideChange
+}: SwipeableCarouselProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { SwipeableCarousel, type SwipeableCarouselProps };
+//# sourceMappingURL=swipeable-carousel.d.ts.map

package/dist/client/storefront/carousel/swipeable-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipeable-carousel.d.ts","names":[],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"mappings":";;;;UAaU,sBAAA;EACR,KAAA,EAAO,OAAA,CAAM,SAAA;EACb,SAAA;EAFQ;EAIR,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA,IAAiB,KAAA;AAAA;AAAA,iBAGV,iBAAA,CAAA;EACP,KAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}