@enadhq/enad-react-sdk 1.1.0 → 1.3.0

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

@@ -1,108 +1,111 @@
 "use client";
 import { cn } from "../../ui/utils.mjs";
-import { StorefrontButton } from "../primitives/button.mjs";
-import { StorefrontTextLink } from "../primitives/text-link.mjs";
+import { defineSlotRecipe } from "../../ui-resolver/recipe.mjs";
+import { BlockHeading } from "../primitives/block-heading.mjs";
+import { CTAGroup } from "../primitives/cta-group.mjs";
 import { colorThemeClasses, isThemeDark } from "../types.mjs";
 import "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { 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 textContentWithImageRecipe = defineSlotRecipe({
+	slots: [
+		"root",
+		"inner",
+		"imageArea",
+		"image",
+		"textArea"
+	],
+	base: {
+		root: "",
+		inner: "",
+		imageArea: "relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted",
+		image: "size-full object-cover",
+		textArea: "min-w-0"
+	},
+	variants: {
+		variant: {
+			"side-by-side": { imageArea: "aspect-[4/5]" },
+			stacked: {
+				imageArea: "aspect-[16/9] w-full",
+				textArea: "py-8"
+			},
+			overlap: {
+				imageArea: "lg:w-3/5",
+				textArea: "relative z-10 min-w-0 rounded-[var(--enad-card-radius)] p-8 shadow-[var(--enad-card-shadow)] lg:p-10"
+			}
+		},
+		fullWidth: {
+			true: {},
+			false: {}
+		},
+		imagePosition: {
+			first: {},
+			last: {}
+		}
+	},
+	defaultVariants: {
+		variant: "side-by-side",
+		fullWidth: "false",
+		imagePosition: "first"
+	},
+	compoundVariants: [
+		{
+			variant: "side-by-side",
+			fullWidth: "true",
+			css: {
+				inner: "grid lg:grid-cols-2",
+				textArea: "px-8 py-12 lg:px-16 lg:py-20"
+			}
+		},
+		{
+			variant: "side-by-side",
+			fullWidth: "false",
+			css: {
+				inner: "mx-auto grid max-w-7xl gap-[var(--enad-text-content-gap,2rem)] px-4 py-12 md:px-8 lg:items-center lg:gap-[calc(var(--enad-text-content-gap,2rem)*1.5)] lg:grid-cols-2",
+				textArea: "py-8 lg:py-0"
+			}
+		},
+		{
+			variant: "stacked",
+			fullWidth: "true",
+			css: { textArea: "px-8 lg:px-16" }
+		},
+		{
+			variant: "stacked",
+			fullWidth: "false",
+			css: { inner: "mx-auto max-w-7xl px-4 py-12 md:px-8" }
+		},
+		{
+			variant: "overlap",
+			css: { inner: "mx-auto max-w-7xl px-4 py-12 md:px-8" }
+		}
+	]
+});
+function StandardLayout({ image, imagePosition = "first", fullWidth = false, variant, 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
-				})]
-			})]
-		})
+	const classes = textContentWithImageRecipe({
+		variant,
+		fullWidth: fullWidth ? "true" : "false",
+		imagePosition
 	});
-}
-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, {
+	const imageEl = hasImage ? /* @__PURE__ */ jsx("div", {
+		className: cn(classes.imageArea, fullWidth && variant === "side-by-side" && "lg:aspect-auto"),
+		children: /* @__PURE__ */ jsx("img", {
+			src: image?.src,
+			alt: image?.alt ?? "",
+			loading: "lazy",
+			className: classes.image
+		})
+	}) : null;
+	const textEl = /* @__PURE__ */ jsxs("div", {
+		className: cn(classes.textArea, "flex flex-col justify-center"),
+		children: [/* @__PURE__ */ jsx(BlockHeading, {
 			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, {
+			bodyMaxWidth: variant === "side-by-side" ? "max-w-lg" : "max-w-2xl"
+		}), /* @__PURE__ */ jsx(CTAGroup, {
 			buttonLabel,
 			buttonHref,
 			textLinkLabel,
@@ -110,109 +113,83 @@ function OverlapTextCard({ preheader, heading, body, buttonLabel, buttonHref, te
 			dark
 		})]
 	});
+	const showImageFirst = hasImage && imagePosition === "first";
+	const showImageLast = hasImage && imagePosition === "last";
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(themeClasses, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(classes.inner, hasImage && variant === "side-by-side" && fullWidth && "lg:grid-cols-2"),
+			children: [
+				showImageFirst && imageEl,
+				textEl,
+				showImageLast && imageEl,
+				!hasImage && null
+			]
+		})
+	});
 }
-function OverlapVariant({ image, imagePosition = "first", preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
+function OverlapLayout({ image, imagePosition = "first", preheader, heading, body, buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark, themeClasses, className }) {
 	const hasImage = Boolean(image?.src);
+	const classes = textContentWithImageRecipe({ variant: "overlap" });
 	const overlapPositionClass = (() => {
-		if (!hasImage) return "";
-		if (imagePosition === "last") return "lg:order-1 lg:-me-16";
-		return "lg:-ms-16";
+		if (!hasImage) return "w-full";
+		if (imagePosition === "last") return "lg:order-1 lg:-me-16 lg:w-2/5";
+		return "lg:-ms-16 lg:w-2/5";
 	})();
 	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",
+			className: classes.inner,
 			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" : ""),
+					className: cn(classes.imageArea, 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"
+							className: classes.image
 						})
 					})
-				}), /* @__PURE__ */ jsx(OverlapTextCard, {
-					preheader,
-					heading,
-					body,
-					buttonLabel,
-					buttonHref,
-					textLinkLabel,
-					textLinkHref,
-					dark,
-					hasImage,
-					overlapPositionClass
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn(classes.textArea, hasImage ? overlapPositionClass : "w-full", hasImage ? "-mt-16 mx-4 lg:mt-0 lg:mx-0" : "", dark ? "bg-foreground text-background" : "bg-background"),
+					children: [/* @__PURE__ */ jsx(BlockHeading, {
+						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(CTAGroup, {
+						buttonLabel,
+						buttonHref,
+						textLinkLabel,
+						textLinkHref,
+						dark
+					})]
 				})]
 			})
 		})
 	});
 }
-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 = {
+	const layoutProps = {
 		...props,
+		variant,
 		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 });
-	}
+	if (variant === "overlap") return /* @__PURE__ */ jsx(OverlapLayout, { ...layoutProps });
+	return /* @__PURE__ */ jsx(StandardLayout, { ...layoutProps });
 }
 //#endregion
-export { TextContentWithImage };
+export { TextContentWithImage, textContentWithImageRecipe };
 
 //# sourceMappingURL=text-content-with-image.mjs.map

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

@@ -1 +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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"}
+{"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 { defineSlotRecipe } from \"../../ui-resolver/recipe\";\nimport { colorThemeClasses, isThemeDark, type TextContentWithImageProps } from \"../types\";\nimport { BlockHeading } from \"../primitives/block-heading\";\nimport { CTAGroup } from \"../primitives/cta-group\";\n\n/* ─── Recipe ─── */\n\nconst textContentWithImageRecipe = defineSlotRecipe({\n  slots: [\"root\", \"inner\", \"imageArea\", \"image\", \"textArea\"] as const,\n  base: {\n    root: \"\",\n    inner: \"\",\n    imageArea: \"relative overflow-hidden rounded-[var(--enad-image-radius)] bg-muted\",\n    image: \"size-full object-cover\",\n    textArea: \"min-w-0\",\n  },\n  variants: {\n    variant: {\n      \"side-by-side\": {\n        imageArea: \"aspect-[4/5]\",\n      },\n      stacked: {\n        imageArea: \"aspect-[16/9] w-full\",\n        textArea: \"py-8\",\n      },\n      overlap: {\n        imageArea: \"lg:w-3/5\",\n        textArea:\n          \"relative z-10 min-w-0 rounded-[var(--enad-card-radius)] p-8 shadow-[var(--enad-card-shadow)] lg:p-10\",\n      },\n    },\n    fullWidth: {\n      true: {},\n      false: {},\n    },\n    imagePosition: {\n      first: {},\n      last: {},\n    },\n  },\n  defaultVariants: {\n    variant: \"side-by-side\",\n    fullWidth: \"false\",\n    imagePosition: \"first\",\n  },\n  compoundVariants: [\n    {\n      variant: \"side-by-side\",\n      fullWidth: \"true\",\n      css: {\n        inner: \"grid lg:grid-cols-2\",\n        textArea: \"px-8 py-12 lg:px-16 lg:py-20\",\n      },\n    },\n    {\n      variant: \"side-by-side\",\n      fullWidth: \"false\",\n      css: {\n        inner:\n          \"mx-auto grid max-w-7xl gap-[var(--enad-text-content-gap,2rem)] px-4 py-12 md:px-8 lg:items-center lg:gap-[calc(var(--enad-text-content-gap,2rem)*1.5)] lg:grid-cols-2\",\n        textArea: \"py-8 lg:py-0\",\n      },\n    },\n    {\n      variant: \"stacked\",\n      fullWidth: \"true\",\n      css: {\n        textArea: \"px-8 lg:px-16\",\n      },\n    },\n    {\n      variant: \"stacked\",\n      fullWidth: \"false\",\n      css: {\n        inner: \"mx-auto max-w-7xl px-4 py-12 md:px-8\",\n      },\n    },\n    {\n      variant: \"overlap\",\n      css: {\n        inner: \"mx-auto max-w-7xl px-4 py-12 md:px-8\",\n      },\n    },\n  ],\n});\n\n/* ─── Standard layout (side-by-side + stacked) ─── */\n\nfunction StandardLayout({\n  image,\n  imagePosition = \"first\",\n  fullWidth = false,\n  variant,\n  preheader,\n  heading,\n  body,\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark,\n  themeClasses,\n  className,\n}: LayoutProps) {\n  const hasImage = Boolean(image?.src);\n  const classes = textContentWithImageRecipe({\n    variant,\n    fullWidth: fullWidth ? \"true\" : \"false\",\n    imagePosition: imagePosition,\n  });\n\n  const imageEl = hasImage ? (\n    <div\n      className={cn(classes.imageArea, fullWidth && variant === \"side-by-side\" && \"lg:aspect-auto\")}\n    >\n      <img src={image?.src} alt={image?.alt ?? \"\"} loading=\"lazy\" className={classes.image} />\n    </div>\n  ) : null;\n\n  const textEl = (\n    <div className={cn(classes.textArea, \"flex flex-col justify-center\")}>\n      <BlockHeading\n        preheader={preheader}\n        heading={heading}\n        body={body}\n        dark={dark}\n        bodyMaxWidth={variant === \"side-by-side\" ? \"max-w-lg\" : \"max-w-2xl\"}\n      />\n      <CTAGroup\n        buttonLabel={buttonLabel}\n        buttonHref={buttonHref}\n        textLinkLabel={textLinkLabel}\n        textLinkHref={textLinkHref}\n        dark={dark}\n      />\n    </div>\n  );\n\n  const showImageFirst = hasImage && imagePosition === \"first\";\n  const showImageLast = hasImage && imagePosition === \"last\";\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div\n        className={cn(\n          classes.inner,\n          hasImage && variant === \"side-by-side\" && fullWidth && \"lg:grid-cols-2\",\n        )}\n      >\n        {showImageFirst && imageEl}\n        {textEl}\n        {showImageLast && imageEl}\n        {!hasImage && null}\n      </div>\n    </section>\n  );\n}\n\n/* ─── Overlap layout ─── */\n\nfunction OverlapLayout({\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}: LayoutProps) {\n  const hasImage = Boolean(image?.src);\n  const classes = textContentWithImageRecipe({ variant: \"overlap\" });\n\n  const overlapPositionClass = (() => {\n    if (!hasImage) return \"w-full\";\n    if (imagePosition === \"last\") return \"lg:order-1 lg:-me-16 lg:w-2/5\";\n    return \"lg:-ms-16 lg:w-2/5\";\n  })();\n\n  return (\n    <section className={cn(themeClasses, className)}>\n      <div className={classes.inner}>\n        <div className={cn(\"relative\", hasImage && \"lg:flex lg:items-center\")}>\n          {hasImage && (\n            <div className={cn(classes.imageArea, imagePosition === \"last\" ? \"lg:order-2\" : \"\")}>\n              <div className=\"aspect-[4/5] lg:aspect-[3/2]\">\n                <img\n                  src={image?.src}\n                  alt={image?.alt ?? \"\"}\n                  loading=\"lazy\"\n                  className={classes.image}\n                />\n              </div>\n            </div>\n          )}\n\n          <div\n            className={cn(\n              classes.textArea,\n              hasImage ? overlapPositionClass : \"w-full\",\n              hasImage ? \"-mt-16 mx-4 lg:mt-0 lg:mx-0\" : \"\",\n              dark ? \"bg-foreground text-background\" : \"bg-background\",\n            )}\n          >\n            <BlockHeading\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            <CTAGroup\n              buttonLabel={buttonLabel}\n              buttonHref={buttonHref}\n              textLinkLabel={textLinkLabel}\n              textLinkHref={textLinkHref}\n              dark={dark}\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/* ─── Internal layout prop type ─── */\n\ntype LayoutProps = TextContentWithImageProps & {\n  variant: \"side-by-side\" | \"stacked\" | \"overlap\";\n  dark: boolean;\n  themeClasses: string;\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 layoutProps: LayoutProps = {\n    ...props,\n    variant,\n    dark,\n    themeClasses,\n    className,\n  };\n\n  if (variant === \"overlap\") {\n    return <OverlapLayout {...layoutProps} />;\n  }\n\n  return <StandardLayout {...layoutProps} />;\n}\n\nexport { TextContentWithImage, textContentWithImageRecipe, type TextContentWithImageProps };\n"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { CarouselWheelAxis } from "../../ui/carousel.js";
 import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -11,6 +12,8 @@ interface SwipeableCarouselProps {
   dotsClassName?: string;
   activeSlide?: number;
   onSlideChange?: (index: number) => void;
+  /** Controls which wheel/trackpad axes scroll the carousel. Defaults to "vertical". */
+  wheelAxis?: CarouselWheelAxis;
 }
 declare function SwipeableCarousel({
   items,
@@ -19,7 +22,8 @@ declare function SwipeableCarousel({
   showDots,
   dotsClassName,
   activeSlide,
-  onSlideChange
+  onSlideChange,
+  wheelAxis
 }: SwipeableCarouselProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { SwipeableCarousel, type SwipeableCarouselProps };

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

@@ -1 +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"}
+{"version":3,"file":"swipeable-carousel.d.ts","names":[],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"mappings":";;;;;UAcU,sBAAA;EACR,KAAA,EAAO,OAAA,CAAM,SAAA;EACb,SAAA;EAFQ;EAIR,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA,IAAiB,KAAA;EAPJ;EASb,SAAA,GAAY,iBAAA;AAAA;AAAA,iBAGL,iBAAA,CAAA;EACP,KAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,aAAA;EACA,WAAA;EACA,aAAA;EACA;AAAA,GACC,sBAAA,GAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/carousel/swipeable-carousel.mjs

@@ -4,7 +4,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/carousel/swipeable-carousel.tsx
-function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClassName, activeSlide, onSlideChange }) {
+function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClassName, activeSlide, onSlideChange, wheelAxis }) {
 	const [api, setApi] = React$1.useState();
 	const [current, setCurrent] = React$1.useState(0);
 	const [count, setCount] = React$1.useState(0);
@@ -29,6 +29,7 @@ function SwipeableCarousel({ items, className, arrows, showDots = true, dotsClas
 		children: [/* @__PURE__ */ jsxs(Carousel, {
 			setApi,
 			opts: { loop: !singleItem },
+			wheelAxis,
 			children: [/* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { children: item }, index)) }), arrows && !singleItem && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CarouselPrevious, { className: arrows === "inset" ? "left-3 -translate-x-0" : void 0 }), /* @__PURE__ */ jsx(CarouselNext, { className: arrows === "inset" ? "right-3 translate-x-0" : void 0 })] })]
 		}), showDots && !singleItem && count > 1 && /* @__PURE__ */ jsx("div", {
 			className: cn("absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5", dotsClassName),

package/dist/client/storefront/carousel/swipeable-carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"swipeable-carousel.mjs","names":["React"],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\"\nimport { cn } from \"../../ui/utils\"\n\ninterface SwipeableCarouselProps {\n  items: React.ReactNode[]\n  className?: string\n  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */\n  arrows?: \"inset\" | \"outset\"\n  showDots?: boolean\n  dotsClassName?: string\n  activeSlide?: number\n  onSlideChange?: (index: number) => void\n}\n\nfunction SwipeableCarousel({\n  items,\n  className,\n  arrows,\n  showDots = true,\n  dotsClassName,\n  activeSlide,\n  onSlideChange,\n}: SwipeableCarouselProps) {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) return\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap())\n\n    api.on(\"select\", () => {\n      const idx = api.selectedScrollSnap()\n      setCurrent(idx)\n      onSlideChange?.(idx)\n    })\n  }, [api, onSlideChange])\n\n  React.useEffect(() => {\n    if (!api || activeSlide === undefined) return\n    if (api.selectedScrollSnap() !== activeSlide) {\n      api.scrollTo(activeSlide)\n    }\n  }, [api, activeSlide])\n\n  if (items.length === 0) return null\n\n  const singleItem = items.length === 1\n\n  return (\n    <div className={cn(\"relative\", arrows === \"outset\" && \"mx-12\", className)}>\n      <Carousel setApi={setApi} opts={{ loop: !singleItem }}>\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index}>{item}</CarouselItem>\n          ))}\n        </CarouselContent>\n\n        {arrows && !singleItem && (\n          <>\n            <CarouselPrevious\n              className={arrows === \"inset\" ? \"left-3 -translate-x-0\" : undefined}\n            />\n            <CarouselNext\n              className={arrows === \"inset\" ? \"right-3 translate-x-0\" : undefined}\n            />\n          </>\n        )}\n      </Carousel>\n\n      {showDots && !singleItem && count > 1 && (\n        <div className={cn(\"absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5\", dotsClassName)} role=\"tablist\">\n          {Array.from({ length: count }).map((_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === current}\n              aria-label={`Go to slide ${index + 1}`}\n              onClick={() => api?.scrollTo(index)}\n              className={cn(\n                \"size-2 rounded-full transition-all shadow-sm\",\n                index === current\n                  ? \"bg-primary\"\n                  : \"bg-background/70 hover:bg-background/90\"\n              )}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SwipeableCarousel, type SwipeableCarouselProps }\n"],"mappings":";;;;;;AAwBA,SAAS,kBAAkB,EACzB,OACA,WACA,QACA,WAAW,MACX,eACA,aACA,iBACyB;CACzB,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,EAAE;AAE3C,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;AAEV,WAAS,IAAI,gBAAgB,CAAC,OAAO;AACrC,aAAW,IAAI,oBAAoB,CAAC;AAEpC,MAAI,GAAG,gBAAgB;GACrB,MAAM,MAAM,IAAI,oBAAoB;AACpC,cAAW,IAAI;AACf,mBAAgB,IAAI;IACpB;IACD,CAAC,KAAK,cAAc,CAAC;AAExB,SAAM,gBAAgB;AACpB,MAAI,CAAC,OAAO,gBAAgB,KAAA,EAAW;AACvC,MAAI,IAAI,oBAAoB,KAAK,YAC/B,KAAI,SAAS,YAAY;IAE1B,CAAC,KAAK,YAAY,CAAC;AAEtB,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,aAAa,MAAM,WAAW;AAEpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,YAAY,SAAS,UAAU;YAAzE,CACE,qBAAC,UAAD;GAAkB;GAAQ,MAAM,EAAE,MAAM,CAAC,YAAY;aAArD,CACE,oBAAC,iBAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAAA,UAA2B,MAAoB,EAA5B,MAA4B,CAC/C,EACc,CAAA,EAEjB,UAAU,CAAC,cACV,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,EACF,oBAAC,cAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,CACD,EAAA,CAAA,CAEI;MAEV,YAAY,CAAC,cAAc,QAAQ,KAClC,oBAAC,OAAD;GAAK,WAAW,GAAG,6EAA6E,cAAc;GAAE,MAAK;aAClH,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe,UAAU;IACzB,cAAY,eAAe,QAAQ;IACnC,eAAe,KAAK,SAAS,MAAM;IACnC,WAAW,GACT,gDACA,UAAU,UACN,eACA,0CACL;IACD,EAZK,MAYL,CACF;GACE,CAAA,CAEJ"}
+{"version":3,"file":"swipeable-carousel.mjs","names":["React"],"sources":["../../../../src/client/storefront/carousel/swipeable-carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\";\nimport { type CarouselWheelAxis } from \"../../ui/carousel\";\nimport { cn } from \"../../ui/utils\";\n\ninterface SwipeableCarouselProps {\n  items: React.ReactNode[];\n  className?: string;\n  /** 'inset' — arrows float over the image edges; 'outset' — arrows sit outside the image bounds */\n  arrows?: \"inset\" | \"outset\";\n  showDots?: boolean;\n  dotsClassName?: string;\n  activeSlide?: number;\n  onSlideChange?: (index: number) => void;\n  /** Controls which wheel/trackpad axes scroll the carousel. Defaults to \"vertical\". */\n  wheelAxis?: CarouselWheelAxis;\n}\n\nfunction SwipeableCarousel({\n  items,\n  className,\n  arrows,\n  showDots = true,\n  dotsClassName,\n  activeSlide,\n  onSlideChange,\n  wheelAxis,\n}: SwipeableCarouselProps) {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [current, setCurrent] = React.useState(0);\n  const [count, setCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) return;\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap());\n\n    api.on(\"select\", () => {\n      const idx = api.selectedScrollSnap();\n      setCurrent(idx);\n      onSlideChange?.(idx);\n    });\n  }, [api, onSlideChange]);\n\n  React.useEffect(() => {\n    if (!api || activeSlide === undefined) return;\n    if (api.selectedScrollSnap() !== activeSlide) {\n      api.scrollTo(activeSlide);\n    }\n  }, [api, activeSlide]);\n\n  if (items.length === 0) return null;\n\n  const singleItem = items.length === 1;\n\n  return (\n    <div className={cn(\"relative\", arrows === \"outset\" && \"mx-12\", className)}>\n      <Carousel setApi={setApi} opts={{ loop: !singleItem }} wheelAxis={wheelAxis}>\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index}>{item}</CarouselItem>\n          ))}\n        </CarouselContent>\n\n        {arrows && !singleItem && (\n          <>\n            <CarouselPrevious\n              className={arrows === \"inset\" ? \"left-3 -translate-x-0\" : undefined}\n            />\n            <CarouselNext className={arrows === \"inset\" ? \"right-3 translate-x-0\" : undefined} />\n          </>\n        )}\n      </Carousel>\n\n      {showDots && !singleItem && count > 1 && (\n        <div\n          className={cn(\n            \"absolute inset-x-0 bottom-3 z-10 flex items-center justify-center gap-1.5\",\n            dotsClassName,\n          )}\n          role=\"tablist\"\n        >\n          {Array.from({ length: count }).map((_, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={index === current}\n              aria-label={`Go to slide ${index + 1}`}\n              onClick={() => api?.scrollTo(index)}\n              className={cn(\n                \"size-2 rounded-full transition-all shadow-sm\",\n                index === current ? \"bg-primary\" : \"bg-background/70 hover:bg-background/90\",\n              )}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport { SwipeableCarousel, type SwipeableCarouselProps };\n"],"mappings":";;;;;;AA2BA,SAAS,kBAAkB,EACzB,OACA,WACA,QACA,WAAW,MACX,eACA,aACA,eACA,aACyB;CACzB,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,EAAE;CAC/C,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,EAAE;AAE3C,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;AAEV,WAAS,IAAI,gBAAgB,CAAC,OAAO;AACrC,aAAW,IAAI,oBAAoB,CAAC;AAEpC,MAAI,GAAG,gBAAgB;GACrB,MAAM,MAAM,IAAI,oBAAoB;AACpC,cAAW,IAAI;AACf,mBAAgB,IAAI;IACpB;IACD,CAAC,KAAK,cAAc,CAAC;AAExB,SAAM,gBAAgB;AACpB,MAAI,CAAC,OAAO,gBAAgB,KAAA,EAAW;AACvC,MAAI,IAAI,oBAAoB,KAAK,YAC/B,KAAI,SAAS,YAAY;IAE1B,CAAC,KAAK,YAAY,CAAC;AAEtB,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,aAAa,MAAM,WAAW;AAEpC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,YAAY,SAAS,UAAU;YAAzE,CACE,qBAAC,UAAD;GAAkB;GAAQ,MAAM,EAAE,MAAM,CAAC,YAAY;GAAa;aAAlE,CACE,oBAAC,iBAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD,EAAA,UAA2B,MAAoB,EAA5B,MAA4B,CAC/C,EACc,CAAA,EAEjB,UAAU,CAAC,cACV,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,EACE,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAC1D,CAAA,EACF,oBAAC,cAAD,EAAc,WAAW,WAAW,UAAU,0BAA0B,KAAA,GAAa,CAAA,CACpF,EAAA,CAAA,CAEI;MAEV,YAAY,CAAC,cAAc,QAAQ,KAClC,oBAAC,OAAD;GACE,WAAW,GACT,6EACA,cACD;GACD,MAAK;aAEJ,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UACrC,oBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,iBAAe,UAAU;IACzB,cAAY,eAAe,QAAQ;IACnC,eAAe,KAAK,SAAS,MAAM;IACnC,WAAW,GACT,gDACA,UAAU,UAAU,eAAe,0CACpC;IACD,EAVK,MAUL,CACF;GACE,CAAA,CAEJ"}

package/dist/client/storefront/checkout/cart-summary.mjs

@@ -75,7 +75,7 @@ function CartSummary({ items, subtotal, tax, shipping, total, currency = "SEK",
 						className: "flex-1",
 						"aria-label": promoPlaceholder
 					}), /* @__PURE__ */ jsx(Button, {
-						variant: "outline",
+						variant: "outlined",
 						onClick: () => onPromoApply(promoInput),
 						disabled: !promoInput.trim(),
 						children: promoApply

package/dist/client/storefront/checkout/cart-summary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cart-summary.mjs","names":["React"],"sources":["../../../../src/client/storefront/checkout/cart-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Price } from \"../components/price\";\nimport { QuantityPicker } from \"../product/quantity-picker\";\nimport { Button } from \"../../ui-resolver/button\";\nimport { Input } from \"../../ui-resolver/input\";\n\nexport interface CartLineItem {\n  id: string;\n  name: string;\n  variant?: string;\n  imageUrl?: string;\n  price: number;\n  originalPrice?: number;\n  quantity: number;\n  maxQuantity?: number;\n  currency?: string;\n}\n\nexport interface CartSummaryProps {\n  items: CartLineItem[];\n  subtotal: number;\n  tax?: number;\n  shipping?: number;\n  total: number;\n  currency?: string;\n  locale?: string;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  onRemoveItem?: (itemId: string) => void;\n  onPromoApply?: (code: string) => void;\n  promoCode?: string;\n  promoError?: string;\n  promoDiscount?: number;\n  className?: string;\n  labels?: {\n    subtotal?: string;\n    tax?: string;\n    shipping?: string;\n    total?: string;\n    discount?: string;\n    promoPlaceholder?: string;\n    promoApply?: string;\n    freeShipping?: string;\n    remove?: string;\n  };\n}\n\nexport function CartSummary({\n  items,\n  subtotal,\n  tax,\n  shipping,\n  total,\n  currency = \"SEK\",\n  locale,\n  onQuantityChange,\n  onRemoveItem,\n  onPromoApply,\n  promoCode: initialPromo = \"\",\n  promoError,\n  promoDiscount,\n  className,\n  labels = {},\n}: CartSummaryProps) {\n  const {\n    subtotal: subtotalLabel = \"Subtotal\",\n    tax: taxLabel = \"Tax\",\n    shipping: shippingLabel = \"Shipping\",\n    total: totalLabel = \"Total\",\n    discount: discountLabel = \"Discount\",\n    promoPlaceholder = \"Promo code\",\n    promoApply = \"Apply\",\n    freeShipping = \"Free\",\n    remove: removeLabel = \"Remove\",\n  } = labels;\n\n  const [promoInput, setPromoInput] = React.useState(initialPromo);\n  const CloseIcon = useIcon(\"close\");\n\n  return (\n    <div className={cn(\"font-enad space-y-4\", className)}>\n      {/* Line items */}\n      <ul className=\"divide-y divide-(--enad-border-color)\">\n        {items.map((item) => (\n          <li key={item.id} className=\"flex gap-4 py-4 first:pt-0 last:pb-0\">\n            {item.imageUrl && (\n              <img\n                src={item.imageUrl}\n                alt={item.name}\n                className=\"size-16 shrink-0 rounded-(--enad-card-radius) object-cover\"\n              />\n            )}\n\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <div className=\"flex items-start justify-between gap-2\">\n                <div>\n                  <p className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                    {item.name}\n                  </p>\n                  {item.variant && (\n                    <p className=\"text-xs text-(--enad-text-muted-color)\">{item.variant}</p>\n                  )}\n                </div>\n                <Price\n                  amount={item.price * item.quantity}\n                  original={item.originalPrice ? item.originalPrice * item.quantity : undefined}\n                  currency={item.currency ?? currency}\n                  locale={locale}\n                  className=\"text-sm font-medium\"\n                />\n              </div>\n\n              <div className=\"flex items-center gap-3\">\n                {onQuantityChange && (\n                  <QuantityPicker\n                    value={item.quantity}\n                    onChange={(qty) => onQuantityChange(item.id, qty)}\n                    min={1}\n                    max={item.maxQuantity}\n                  />\n                )}\n                {onRemoveItem && (\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemoveItem(item.id)}\n                    className=\"rounded-sm text-xs text-(--enad-text-muted-color) hover:text-(--enad-error-color) transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\"\n                    aria-label={`${removeLabel} ${item.name}`}\n                  >\n                    <CloseIcon className=\"size-4\" />\n                  </button>\n                )}\n              </div>\n            </div>\n          </li>\n        ))}\n      </ul>\n\n      {/* Promo code */}\n      {onPromoApply && (\n        <div className=\"space-y-1\">\n          <div className=\"flex gap-2\">\n            <Input\n              value={promoInput}\n              onChange={(e) => setPromoInput(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" && promoInput.trim()) {\n                  e.preventDefault();\n                  onPromoApply(promoInput);\n                }\n              }}\n              placeholder={promoPlaceholder}\n              className=\"flex-1\"\n              aria-label={promoPlaceholder}\n            />\n            <Button\n              variant=\"outline\"\n              onClick={() => onPromoApply(promoInput)}\n              disabled={!promoInput.trim()}\n            >\n              {promoApply}\n            </Button>\n          </div>\n          {promoError && <p className=\"text-xs text-(--enad-error-color)\">{promoError}</p>}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div className=\"space-y-2 border-t border-(--enad-border-color) pt-4\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{subtotalLabel}</span>\n          <Price amount={subtotal} currency={currency} locale={locale} />\n        </div>\n\n        {promoDiscount != null && promoDiscount > 0 && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{discountLabel}</span>\n            <span className=\"text-(--enad-error-color)\">\n              -<Price amount={promoDiscount} currency={currency} locale={locale} />\n            </span>\n          </div>\n        )}\n\n        {tax != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{taxLabel}</span>\n            <Price amount={tax} currency={currency} locale={locale} />\n          </div>\n        )}\n\n        {shipping != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{shippingLabel}</span>\n            {shipping === 0 ? (\n              <span className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                {freeShipping}\n              </span>\n            ) : (\n              <Price amount={shipping} currency={currency} locale={locale} />\n            )}\n          </div>\n        )}\n\n        <div className=\"flex justify-between border-t border-(--enad-border-color) pt-2 text-base font-semibold\">\n          <span className=\"text-(--enad-text-primary-color)\">{totalLabel}</span>\n          <Price amount={total} currency={currency} locale={locale} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"cart-summary.mjs","names":["React"],"sources":["../../../../src/client/storefront/checkout/cart-summary.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Price } from \"../components/price\";\nimport { QuantityPicker } from \"../product/quantity-picker\";\nimport { Button } from \"../../ui-resolver/button\";\nimport { Input } from \"../../ui-resolver/input\";\n\nexport interface CartLineItem {\n  id: string;\n  name: string;\n  variant?: string;\n  imageUrl?: string;\n  price: number;\n  originalPrice?: number;\n  quantity: number;\n  maxQuantity?: number;\n  currency?: string;\n}\n\nexport interface CartSummaryProps {\n  items: CartLineItem[];\n  subtotal: number;\n  tax?: number;\n  shipping?: number;\n  total: number;\n  currency?: string;\n  locale?: string;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  onRemoveItem?: (itemId: string) => void;\n  onPromoApply?: (code: string) => void;\n  promoCode?: string;\n  promoError?: string;\n  promoDiscount?: number;\n  className?: string;\n  labels?: {\n    subtotal?: string;\n    tax?: string;\n    shipping?: string;\n    total?: string;\n    discount?: string;\n    promoPlaceholder?: string;\n    promoApply?: string;\n    freeShipping?: string;\n    remove?: string;\n  };\n}\n\nexport function CartSummary({\n  items,\n  subtotal,\n  tax,\n  shipping,\n  total,\n  currency = \"SEK\",\n  locale,\n  onQuantityChange,\n  onRemoveItem,\n  onPromoApply,\n  promoCode: initialPromo = \"\",\n  promoError,\n  promoDiscount,\n  className,\n  labels = {},\n}: CartSummaryProps) {\n  const {\n    subtotal: subtotalLabel = \"Subtotal\",\n    tax: taxLabel = \"Tax\",\n    shipping: shippingLabel = \"Shipping\",\n    total: totalLabel = \"Total\",\n    discount: discountLabel = \"Discount\",\n    promoPlaceholder = \"Promo code\",\n    promoApply = \"Apply\",\n    freeShipping = \"Free\",\n    remove: removeLabel = \"Remove\",\n  } = labels;\n\n  const [promoInput, setPromoInput] = React.useState(initialPromo);\n  const CloseIcon = useIcon(\"close\");\n\n  return (\n    <div className={cn(\"font-enad space-y-4\", className)}>\n      {/* Line items */}\n      <ul className=\"divide-y divide-(--enad-border-color)\">\n        {items.map((item) => (\n          <li key={item.id} className=\"flex gap-4 py-4 first:pt-0 last:pb-0\">\n            {item.imageUrl && (\n              <img\n                src={item.imageUrl}\n                alt={item.name}\n                className=\"size-16 shrink-0 rounded-(--enad-card-radius) object-cover\"\n              />\n            )}\n\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <div className=\"flex items-start justify-between gap-2\">\n                <div>\n                  <p className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                    {item.name}\n                  </p>\n                  {item.variant && (\n                    <p className=\"text-xs text-(--enad-text-muted-color)\">{item.variant}</p>\n                  )}\n                </div>\n                <Price\n                  amount={item.price * item.quantity}\n                  original={item.originalPrice ? item.originalPrice * item.quantity : undefined}\n                  currency={item.currency ?? currency}\n                  locale={locale}\n                  className=\"text-sm font-medium\"\n                />\n              </div>\n\n              <div className=\"flex items-center gap-3\">\n                {onQuantityChange && (\n                  <QuantityPicker\n                    value={item.quantity}\n                    onChange={(qty) => onQuantityChange(item.id, qty)}\n                    min={1}\n                    max={item.maxQuantity}\n                  />\n                )}\n                {onRemoveItem && (\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemoveItem(item.id)}\n                    className=\"rounded-sm text-xs text-(--enad-text-muted-color) hover:text-(--enad-error-color) transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none\"\n                    aria-label={`${removeLabel} ${item.name}`}\n                  >\n                    <CloseIcon className=\"size-4\" />\n                  </button>\n                )}\n              </div>\n            </div>\n          </li>\n        ))}\n      </ul>\n\n      {/* Promo code */}\n      {onPromoApply && (\n        <div className=\"space-y-1\">\n          <div className=\"flex gap-2\">\n            <Input\n              value={promoInput}\n              onChange={(e) => setPromoInput(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" && promoInput.trim()) {\n                  e.preventDefault();\n                  onPromoApply(promoInput);\n                }\n              }}\n              placeholder={promoPlaceholder}\n              className=\"flex-1\"\n              aria-label={promoPlaceholder}\n            />\n            <Button\n              variant=\"outlined\"\n              onClick={() => onPromoApply(promoInput)}\n              disabled={!promoInput.trim()}\n            >\n              {promoApply}\n            </Button>\n          </div>\n          {promoError && <p className=\"text-xs text-(--enad-error-color)\">{promoError}</p>}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div className=\"space-y-2 border-t border-(--enad-border-color) pt-4\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-(--enad-text-muted-color)\">{subtotalLabel}</span>\n          <Price amount={subtotal} currency={currency} locale={locale} />\n        </div>\n\n        {promoDiscount != null && promoDiscount > 0 && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{discountLabel}</span>\n            <span className=\"text-(--enad-error-color)\">\n              -<Price amount={promoDiscount} currency={currency} locale={locale} />\n            </span>\n          </div>\n        )}\n\n        {tax != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{taxLabel}</span>\n            <Price amount={tax} currency={currency} locale={locale} />\n          </div>\n        )}\n\n        {shipping != null && (\n          <div className=\"flex justify-between text-sm\">\n            <span className=\"text-(--enad-text-muted-color)\">{shippingLabel}</span>\n            {shipping === 0 ? (\n              <span className=\"text-sm font-medium text-(--enad-text-primary-color)\">\n                {freeShipping}\n              </span>\n            ) : (\n              <Price amount={shipping} currency={currency} locale={locale} />\n            )}\n          </div>\n        )}\n\n        <div className=\"flex justify-between border-t border-(--enad-border-color) pt-2 text-base font-semibold\">\n          <span className=\"text-(--enad-text-primary-color)\">{totalLabel}</span>\n          <Price amount={total} currency={currency} locale={locale} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkDA,SAAgB,YAAY,EAC1B,OACA,UACA,KACA,UACA,OACA,WAAW,OACX,QACA,kBACA,cACA,cACA,WAAW,eAAe,IAC1B,YACA,eACA,WACA,SAAS,EAAE,IACQ;CACnB,MAAM,EACJ,UAAU,gBAAgB,YAC1B,KAAK,WAAW,OAChB,UAAU,gBAAgB,YAC1B,OAAO,aAAa,SACpB,UAAU,gBAAgB,YAC1B,mBAAmB,cACnB,aAAa,SACb,eAAe,QACf,QAAQ,cAAc,aACpB;CAEJ,MAAM,CAAC,YAAY,iBAAiBA,QAAM,SAAS,aAAa;CAChE,MAAM,YAAY,QAAQ,QAAQ;AAElC,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAApD;GAEE,oBAAC,MAAD;IAAI,WAAU;cACX,MAAM,KAAK,SACV,qBAAC,MAAD;KAAkB,WAAU;eAA5B,CACG,KAAK,YACJ,oBAAC,OAAD;MACE,KAAK,KAAK;MACV,KAAK,KAAK;MACV,WAAU;MACV,CAAA,EAGJ,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;QAAG,WAAU;kBACV,KAAK;QACJ,CAAA,EACH,KAAK,WACJ,oBAAC,KAAD;QAAG,WAAU;kBAA0C,KAAK;QAAY,CAAA,CAEtE,EAAA,CAAA,EACN,oBAAC,OAAD;QACE,QAAQ,KAAK,QAAQ,KAAK;QAC1B,UAAU,KAAK,gBAAgB,KAAK,gBAAgB,KAAK,WAAW,KAAA;QACpE,UAAU,KAAK,YAAY;QACnB;QACR,WAAU;QACV,CAAA,CACE;UAEN,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,oBACC,oBAAC,gBAAD;QACE,OAAO,KAAK;QACZ,WAAW,QAAQ,iBAAiB,KAAK,IAAI,IAAI;QACjD,KAAK;QACL,KAAK,KAAK;QACV,CAAA,EAEH,gBACC,oBAAC,UAAD;QACE,MAAK;QACL,eAAe,aAAa,KAAK,GAAG;QACpC,WAAU;QACV,cAAY,GAAG,YAAY,GAAG,KAAK;kBAEnC,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;QACzB,CAAA,CAEP;SACF;QACH;OAjDI,KAAK,GAiDT,CACL;IACC,CAAA;GAGJ,gBACC,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,OAAO;MACP,WAAW,MAAM,cAAc,EAAE,OAAO,MAAM;MAC9C,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,WAAW,MAAM,EAAE;AAC1C,UAAE,gBAAgB;AAClB,qBAAa,WAAW;;;MAG5B,aAAa;MACb,WAAU;MACV,cAAY;MACZ,CAAA,EACF,oBAAC,QAAD;MACE,SAAQ;MACR,eAAe,aAAa,WAAW;MACvC,UAAU,CAAC,WAAW,MAAM;gBAE3B;MACM,CAAA,CACL;QACL,cAAc,oBAAC,KAAD;KAAG,WAAU;eAAqC;KAAe,CAAA,CAC5E;;GAIR,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAkC;OAAqB,CAAA,EACvE,oBAAC,OAAD;OAAO,QAAQ;OAAoB;OAAkB;OAAU,CAAA,CAC3D;;KAEL,iBAAiB,QAAQ,gBAAgB,KACxC,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAkC;OAAqB,CAAA,EACvE,qBAAC,QAAD;OAAM,WAAU;iBAAhB,CAA4C,KACzC,oBAAC,OAAD;QAAO,QAAQ;QAAyB;QAAkB;QAAU,CAAA,CAChE;SACH;;KAGP,OAAO,QACN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAkC;OAAgB,CAAA,EAClE,oBAAC,OAAD;OAAO,QAAQ;OAAe;OAAkB;OAAU,CAAA,CACtD;;KAGP,YAAY,QACX,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAkC;OAAqB,CAAA,EACtE,aAAa,IACZ,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA,GAEP,oBAAC,OAAD;OAAO,QAAQ;OAAoB;OAAkB;OAAU,CAAA,CAE7D;;KAGR,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD;OAAM,WAAU;iBAAoC;OAAkB,CAAA,EACtE,oBAAC,OAAD;OAAO,QAAQ;OAAiB;OAAkB;OAAU,CAAA,CACxD;;KACF;;GACF"}

package/dist/client/storefront/components/language-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"language-selector.d.ts","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"mappings":";;;;iBAmCS,gBAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,aAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"language-selector.d.ts","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"mappings":";;;;iBA6BS,gBAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,aAAA;EACA,OAAA;EACA,IAAA;EACA,SAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/language-selector.mjs

@@ -15,7 +15,7 @@ function LanguageItemContent({ language, variant }) {
 		}), language.label]
 	});
 }
-function LanguageSelector({ languages, value, onValueChange, variant = "full", size = "default", className, labels }) {
+function LanguageSelector({ languages, value, onValueChange, variant = "full", size = "md", className, labels }) {
 	const GlobeIcon = useIcon("globe");
 	const selected = languages.find((l) => l.code === value);
 	return /* @__PURE__ */ jsxs(Select, {

package/dist/client/storefront/components/language-selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"language-selector.mjs","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../ui/select\"\nimport { cn } from \"../../ui/utils\"\nimport type { LanguageSelectorProps, LanguageOption } from \"../types\"\n\nfunction LanguageItemContent({\n  language,\n  variant,\n}: {\n  language: LanguageOption\n  variant: \"code\" | \"full\" | \"icon\"\n}) {\n  if (variant === \"code\") {\n    return <span>{language.code.toUpperCase()}</span>\n  }\n\n  return (\n    <span className=\"flex items-center gap-2\">\n      {variant === \"icon\" && language.icon && (\n        <span className=\"inline-flex shrink-0\">{language.icon}</span>\n      )}\n      {language.label}\n    </span>\n  )\n}\n\nfunction LanguageSelector({\n  languages,\n  value,\n  onValueChange,\n  variant = \"full\",\n  size = \"default\",\n  className,\n  labels,\n}: LanguageSelectorProps) {\n  const GlobeIcon = useIcon(\"globe\")\n\n  const selected = languages.find((l) => l.code === value)\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn(\n          variant === \"code\" && \"border-none shadow-none bg-transparent px-1.5 gap-1\",\n          className,\n        )}\n        aria-label={labels?.changeLanguage ?? \"Change language\"}\n      >\n        <SelectValue>\n          {selected && (\n            <span className=\"flex items-center gap-2\">\n              {variant === \"icon\" && selected.icon && (\n                <span className=\"inline-flex shrink-0\">{selected.icon}</span>\n              )}\n              {variant === \"code\" && (\n                <GlobeIcon className=\"size-4\" />\n              )}\n              {variant === \"code\" ? selected.code.toUpperCase() : selected.label}\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent position=\"popper\" align=\"end\">\n        {languages.map((lang) => (\n          <SelectItem key={lang.code} value={lang.code}>\n            <LanguageItemContent language={lang} variant={variant} />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport { LanguageSelector }\nexport type { LanguageSelectorProps, LanguageOption }\n"],"mappings":";;;;;;;AAcA,SAAS,oBAAoB,EAC3B,UACA,WAIC;AACD,KAAI,YAAY,OACd,QAAO,oBAAC,QAAD,EAAA,UAAO,SAAS,KAAK,aAAa,EAAQ,CAAA;AAGnD,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;GAAM,WAAU;aAAwB,SAAS;GAAY,CAAA,EAE9D,SAAS,MACL;;;AAIX,SAAS,iBAAiB,EACxB,WACA,OACA,eACA,UAAU,QACV,OAAO,WACP,WACA,UACwB;CACxB,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,WAAW,UAAU,MAAM,MAAM,EAAE,SAAS,MAAM;AAExD,QACE,qBAAC,QAAD;EAAe;EAAsB;YAArC,CACE,oBAAC,eAAD;GACQ;GACN,WAAW,GACT,YAAY,UAAU,uDACtB,UACD;GACD,cAAY,QAAQ,kBAAkB;aAEtC,oBAAC,aAAD,EAAA,UACG,YACC,qBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;MAAM,WAAU;gBAAwB,SAAS;MAAY,CAAA;KAE9D,YAAY,UACX,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;KAEjC,YAAY,SAAS,SAAS,KAAK,aAAa,GAAG,SAAS;KACxD;OAEG,CAAA;GACA,CAAA,EAChB,oBAAC,eAAD;GAAe,UAAS;GAAS,OAAM;aACpC,UAAU,KAAK,SACd,oBAAC,YAAD;IAA4B,OAAO,KAAK;cACtC,oBAAC,qBAAD;KAAqB,UAAU;KAAe;KAAW,CAAA;IAC9C,EAFI,KAAK,KAET,CACb;GACY,CAAA,CACT"}
+{"version":3,"file":"language-selector.mjs","names":[],"sources":["../../../../src/client/storefront/components/language-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../ui/select\";\nimport { cn } from \"../../ui/utils\";\nimport type { LanguageSelectorProps, LanguageOption } from \"../types\";\n\nfunction LanguageItemContent({\n  language,\n  variant,\n}: {\n  language: LanguageOption;\n  variant: \"code\" | \"full\" | \"icon\";\n}) {\n  if (variant === \"code\") {\n    return <span>{language.code.toUpperCase()}</span>;\n  }\n\n  return (\n    <span className=\"flex items-center gap-2\">\n      {variant === \"icon\" && language.icon && (\n        <span className=\"inline-flex shrink-0\">{language.icon}</span>\n      )}\n      {language.label}\n    </span>\n  );\n}\n\nfunction LanguageSelector({\n  languages,\n  value,\n  onValueChange,\n  variant = \"full\",\n  size = \"md\",\n  className,\n  labels,\n}: LanguageSelectorProps) {\n  const GlobeIcon = useIcon(\"globe\");\n\n  const selected = languages.find((l) => l.code === value);\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn(\n          variant === \"code\" && \"border-none shadow-none bg-transparent px-1.5 gap-1\",\n          className,\n        )}\n        aria-label={labels?.changeLanguage ?? \"Change language\"}\n      >\n        <SelectValue>\n          {selected && (\n            <span className=\"flex items-center gap-2\">\n              {variant === \"icon\" && selected.icon && (\n                <span className=\"inline-flex shrink-0\">{selected.icon}</span>\n              )}\n              {variant === \"code\" && <GlobeIcon className=\"size-4\" />}\n              {variant === \"code\" ? selected.code.toUpperCase() : selected.label}\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent position=\"popper\" align=\"end\">\n        {languages.map((lang) => (\n          <SelectItem key={lang.code} value={lang.code}>\n            <LanguageItemContent language={lang} variant={variant} />\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n\nexport { LanguageSelector };\nexport type { LanguageSelectorProps, LanguageOption };\n"],"mappings":";;;;;;;AAQA,SAAS,oBAAoB,EAC3B,UACA,WAIC;AACD,KAAI,YAAY,OACd,QAAO,oBAAC,QAAD,EAAA,UAAO,SAAS,KAAK,aAAa,EAAQ,CAAA;AAGnD,QACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;GAAM,WAAU;aAAwB,SAAS;GAAY,CAAA,EAE9D,SAAS,MACL;;;AAIX,SAAS,iBAAiB,EACxB,WACA,OACA,eACA,UAAU,QACV,OAAO,MACP,WACA,UACwB;CACxB,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,WAAW,UAAU,MAAM,MAAM,EAAE,SAAS,MAAM;AAExD,QACE,qBAAC,QAAD;EAAe;EAAsB;YAArC,CACE,oBAAC,eAAD;GACQ;GACN,WAAW,GACT,YAAY,UAAU,uDACtB,UACD;GACD,cAAY,QAAQ,kBAAkB;aAEtC,oBAAC,aAAD,EAAA,UACG,YACC,qBAAC,QAAD;IAAM,WAAU;cAAhB;KACG,YAAY,UAAU,SAAS,QAC9B,oBAAC,QAAD;MAAM,WAAU;gBAAwB,SAAS;MAAY,CAAA;KAE9D,YAAY,UAAU,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;KACtD,YAAY,SAAS,SAAS,KAAK,aAAa,GAAG,SAAS;KACxD;OAEG,CAAA;GACA,CAAA,EAChB,oBAAC,eAAD;GAAe,UAAS;GAAS,OAAM;aACpC,UAAU,KAAK,SACd,oBAAC,YAAD;IAA4B,OAAO,KAAK;cACtC,oBAAC,qBAAD;KAAqB,UAAU;KAAe;KAAW,CAAA;IAC9C,EAFI,KAAK,KAET,CACb;GACY,CAAA,CACT"}

package/dist/client/storefront/components/product-recommendations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-recommendations.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"mappings":";;;;UAUiB,2BAAA;EACf,KAAA;;EAEA,OAAA;EAH0C;EAK1C,QAAA,EAAU,OAAA,CAAM,SAAA;EAAS;EAEzB,WAAA;EACA,YAAA;EAHA;EAKA,UAAA;EALgB;EAOhB,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,sBAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,OAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"product-recommendations.d.ts","names":[],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"mappings":";;;;UAgBiB,2BAAA;EACf,KAAA;;EAEA,OAAA;EAH0C;EAK1C,QAAA,EAAU,OAAA,CAAM,SAAA;EAAS;EAEzB,WAAA;EACA,YAAA;EAHA;EAKA,UAAA;EALgB;EAOhB,OAAA;EACA,SAAA;AAAA;AAAA,iBAKc,sBAAA,CAAA;EACd,KAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;EACA,UAAA;EACA,OAAA;EACA;AAAA,GACC,2BAAA,GAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA"}