@enadhq/enad-react-sdk 1.1.0 → 1.3.0

package/dist/client/storefront/components/product-recommendations.mjs

@@ -3,43 +3,31 @@ import { useIcon } from "../../icons/icon-context.mjs";
 import { cn } from "../../ui/utils.mjs";
 import { getMotionConfig } from "../../motion/config.mjs";
 import { staggerChildStyle, staggerEntryClass } from "../../motion/stagger.mjs";
+import { Carousel, CarouselContent, CarouselItem } from "../../ui-resolver/carousel.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/components/product-recommendations.tsx
 function ProductRecommendations({ title, children, viewAllHref, viewAllLabel = "View all", showArrows = true, delight = 0, className }) {
-	const scrollRef = React$1.useRef(null);
+	const [api, setApi] = React$1.useState();
+	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
+	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
 	const motion = React$1.useMemo(() => getMotionConfig(delight), [delight]);
-	const [canScrollLeft, setCanScrollLeft] = React$1.useState(false);
-	const [canScrollRight, setCanScrollRight] = React$1.useState(false);
 	const ChevronLeftIcon = useIcon("chevronLeft");
 	const ChevronRightIcon = useIcon("chevronRight");
-	const updateScrollState = React$1.useCallback(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		setCanScrollLeft(el.scrollLeft > 1);
-		setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
-	}, []);
 	React$1.useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		updateScrollState();
-		el.addEventListener("scroll", updateScrollState, { passive: true });
-		const ro = new ResizeObserver(updateScrollState);
-		ro.observe(el);
+		if (!api) return;
+		const onSelect = () => {
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		};
+		onSelect();
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
 		return () => {
-			el.removeEventListener("scroll", updateScrollState);
-			ro.disconnect();
+			api.off("reInit", onSelect);
+			api.off("select", onSelect);
 		};
-	}, [updateScrollState]);
-	const scroll = (direction) => {
-		const el = scrollRef.current;
-		if (!el) return;
-		const distance = el.clientWidth * .8;
-		el.scrollBy({
-			left: direction === "left" ? -distance : distance,
-			behavior: "smooth"
-		});
-	};
+	}, [api]);
 	return /* @__PURE__ */ jsxs("section", {
 		className: cn("flex flex-col gap-4", className),
 		children: [(title || viewAllHref) && /* @__PURE__ */ jsxs("div", {
@@ -55,25 +43,29 @@ function ProductRecommendations({ title, children, viewAllHref, viewAllLabel = "
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative group/recs",
 			children: [
-				showArrows && canScrollLeft && /* @__PURE__ */ jsx("button", {
+				showArrows && canScrollPrev && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => scroll("left"),
+					onClick: () => api?.scrollPrev(),
 					className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
 					"aria-label": "Scroll left",
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-5" })
 				}),
-				/* @__PURE__ */ jsx("div", {
-					ref: scrollRef,
-					className: "flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-none pb-1",
-					children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx("div", {
-						className: cn("w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]", staggerEntryClass(motion)),
+				/* @__PURE__ */ jsx(Carousel, {
+					setApi,
+					opts: {
+						align: "start",
+						slidesToScroll: "auto",
+						containScroll: "trimSnaps"
+					},
+					children: /* @__PURE__ */ jsx(CarouselContent, { children: React$1.Children.map(children, (child, i) => /* @__PURE__ */ jsx(CarouselItem, {
+						className: cn("basis-auto w-[260px] sm:w-[280px] lg:w-[300px]", staggerEntryClass(motion)),
 						style: staggerChildStyle(i, motion),
 						children: child
-					}, i))
+					}, i)) })
 				}),
-				showArrows && canScrollRight && /* @__PURE__ */ jsx("button", {
+				showArrows && canScrollNext && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => scroll("right"),
+					onClick: () => api?.scrollNext(),
 					className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)",
 					"aria-label": "Scroll right",
 					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5" })

package/dist/client/storefront/components/product-recommendations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"product-recommendations.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { getMotionConfig } from \"../../motion/config\";\nimport { staggerEntryClass, staggerChildStyle } from \"../../motion/stagger\";\n\n/* ─── Types ─── */\n\nexport interface ProductRecommendationsProps {\n  title?: string;\n  /** Optional variant label for styling/semantics */\n  variant?: \"related\" | \"recent\" | \"complete-the-look\";\n  /** Product cards to render — pass <ProductCard> elements */\n  children: React.ReactNode;\n  /** \"View all\" link */\n  viewAllHref?: string;\n  viewAllLabel?: string;\n  /** Show navigation arrows on desktop */\n  showArrows?: boolean;\n  /** Delight level (0-100) for stagger entry animation. 0 = no animation. */\n  delight?: number;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ProductRecommendations({\n  title,\n  children,\n  viewAllHref,\n  viewAllLabel = \"View all\",\n  showArrows = true,\n  delight = 0,\n  className,\n}: ProductRecommendationsProps) {\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const motion = React.useMemo(() => getMotionConfig(delight), [delight]);\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const updateScrollState = React.useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    setCanScrollLeft(el.scrollLeft > 1);\n    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\n  }, []);\n\n  React.useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return;\n    updateScrollState();\n    el.addEventListener(\"scroll\", updateScrollState, { passive: true });\n    const ro = new ResizeObserver(updateScrollState);\n    ro.observe(el);\n    return () => {\n      el.removeEventListener(\"scroll\", updateScrollState);\n      ro.disconnect();\n    };\n  }, [updateScrollState]);\n\n  const scroll = (direction: \"left\" | \"right\") => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.clientWidth * 0.8;\n    el.scrollBy({\n      left: direction === \"left\" ? -distance : distance,\n      behavior: \"smooth\",\n    });\n  };\n\n  return (\n    <section className={cn(\"flex flex-col gap-4\", className)}>\n      {/* Header */}\n      {(title || viewAllHref) && (\n        <div className=\"flex items-center justify-between\">\n          {title && <h2 className=\"font-enad text-xl font-semibold\">{title}</h2>}\n          {viewAllHref && (\n            <a\n              href={viewAllHref}\n              className=\"text-sm font-medium underline underline-offset-4 hover:text-(--enad-button-bg) transition-colors\"\n            >\n              {viewAllLabel}\n            </a>\n          )}\n        </div>\n      )}\n\n      {/* Scrollable row */}\n      <div className=\"relative group/recs\">\n        {showArrows && canScrollLeft && (\n          <button\n            type=\"button\"\n            onClick={() => scroll(\"left\")}\n            className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll left\"\n          >\n            <ChevronLeftIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <div\n          ref={scrollRef}\n          className=\"flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-none pb-1\"\n        >\n          {React.Children.map(children, (child, i) => (\n            <div\n              key={i}\n              className={cn(\n                \"w-[260px] shrink-0 snap-start sm:w-[280px] lg:w-[300px]\",\n                staggerEntryClass(motion),\n              )}\n              style={staggerChildStyle(i, motion)}\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n\n        {showArrows && canScrollRight && (\n          <button\n            type=\"button\"\n            onClick={() => scroll(\"right\")}\n            className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll right\"\n          >\n            <ChevronRightIcon className=\"size-5\" />\n          </button>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AA4BA,SAAgB,uBAAuB,EACrC,OACA,UACA,aACA,eAAe,YACf,aAAa,MACb,UAAU,GACV,aAC8B;CAC9B,MAAM,YAAYA,QAAM,OAAuB,KAAK;CACpD,MAAM,SAASA,QAAM,cAAc,gBAAgB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvE,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,gBAAgB,qBAAqBA,QAAM,SAAS,MAAM;CACjE,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;CAEhD,MAAM,oBAAoBA,QAAM,kBAAkB;EAChD,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;AACT,mBAAiB,GAAG,aAAa,EAAE;AACnC,oBAAkB,GAAG,aAAa,GAAG,cAAc,GAAG,cAAc,EAAE;IACrE,EAAE,CAAC;AAEN,SAAM,gBAAgB;EACpB,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;AACT,qBAAmB;AACnB,KAAG,iBAAiB,UAAU,mBAAmB,EAAE,SAAS,MAAM,CAAC;EACnE,MAAM,KAAK,IAAI,eAAe,kBAAkB;AAChD,KAAG,QAAQ,GAAG;AACd,eAAa;AACX,MAAG,oBAAoB,UAAU,kBAAkB;AACnD,MAAG,YAAY;;IAEhB,CAAC,kBAAkB,CAAC;CAEvB,MAAM,UAAU,cAAgC;EAC9C,MAAM,KAAK,UAAU;AACrB,MAAI,CAAC,GAAI;EACT,MAAM,WAAW,GAAG,cAAc;AAClC,KAAG,SAAS;GACV,MAAM,cAAc,SAAS,CAAC,WAAW;GACzC,UAAU;GACX,CAAC;;AAGJ,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,uBAAuB,UAAU;YAAxD,EAEI,SAAS,gBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,MAAD;IAAI,WAAU;cAAmC;IAAW,CAAA,EACrE,eACC,oBAAC,KAAD;IACE,MAAM;IACN,WAAU;cAET;IACC,CAAA,CAEF;MAIR,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,cAAc,iBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,OAAO,OAAO;KAC7B,WAAU;KACV,cAAW;eAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;KAC/B,CAAA;IAGX,oBAAC,OAAD;KACE,KAAK;KACL,WAAU;eAETA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,OAAD;MAEE,WAAW,GACT,2DACA,kBAAkB,OAAO,CAC1B;MACD,OAAO,kBAAkB,GAAG,OAAO;gBAElC;MACG,EARC,EAQD,CACN;KACE,CAAA;IAEL,cAAc,kBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,OAAO,QAAQ;KAC9B,WAAU;KACV,cAAW;eAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;KAChC,CAAA;IAEP;KACE"}
+{"version":3,"file":"product-recommendations.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/product-recommendations.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { getMotionConfig } from \"../../motion/config\";\nimport { staggerEntryClass, staggerChildStyle } from \"../../motion/stagger\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  type CarouselApi,\n} from \"../../ui-resolver/carousel\";\n\n/* ─── Types ─── */\n\nexport interface ProductRecommendationsProps {\n  title?: string;\n  /** Optional variant label for styling/semantics */\n  variant?: \"related\" | \"recent\" | \"complete-the-look\";\n  /** Product cards to render — pass <ProductCard> elements */\n  children: React.ReactNode;\n  /** \"View all\" link */\n  viewAllHref?: string;\n  viewAllLabel?: string;\n  /** Show navigation arrows on desktop */\n  showArrows?: boolean;\n  /** Delight level (0-100) for stagger entry animation. 0 = no animation. */\n  delight?: number;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ProductRecommendations({\n  title,\n  children,\n  viewAllHref,\n  viewAllLabel = \"View all\",\n  showArrows = true,\n  delight = 0,\n  className,\n}: ProductRecommendationsProps) {\n  const [api, setApi] = React.useState<CarouselApi>();\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n  const motion = React.useMemo(() => getMotionConfig(delight), [delight]);\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  React.useEffect(() => {\n    if (!api) return;\n\n    const onSelect = () => {\n      setCanScrollPrev(api.canScrollPrev());\n      setCanScrollNext(api.canScrollNext());\n    };\n\n    onSelect();\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n    return () => {\n      api.off(\"reInit\", onSelect);\n      api.off(\"select\", onSelect);\n    };\n  }, [api]);\n\n  return (\n    <section className={cn(\"flex flex-col gap-4\", className)}>\n      {/* Header */}\n      {(title || viewAllHref) && (\n        <div className=\"flex items-center justify-between\">\n          {title && <h2 className=\"font-enad text-xl font-semibold\">{title}</h2>}\n          {viewAllHref && (\n            <a\n              href={viewAllHref}\n              className=\"text-sm font-medium underline underline-offset-4 hover:text-(--enad-button-bg) transition-colors\"\n            >\n              {viewAllLabel}\n            </a>\n          )}\n        </div>\n      )}\n\n      {/* Scrollable row */}\n      <div className=\"relative group/recs\">\n        {showArrows && canScrollPrev && (\n          <button\n            type=\"button\"\n            onClick={() => api?.scrollPrev()}\n            className=\"absolute left-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll left\"\n          >\n            <ChevronLeftIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <Carousel\n          setApi={setApi}\n          opts={{ align: \"start\", slidesToScroll: \"auto\", containScroll: \"trimSnaps\" }}\n        >\n          <CarouselContent>\n            {React.Children.map(children, (child, i) => (\n              <CarouselItem\n                key={i}\n                className={cn(\n                  \"basis-auto w-[260px] sm:w-[280px] lg:w-[300px]\",\n                  staggerEntryClass(motion),\n                )}\n                style={staggerChildStyle(i, motion)}\n              >\n                {child}\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n\n        {showArrows && canScrollNext && (\n          <button\n            type=\"button\"\n            onClick={() => api?.scrollNext()}\n            className=\"absolute right-0 top-1/2 -translate-y-1/2 z-10 hidden md:flex size-10 items-center justify-center rounded-full bg-(--enad-surface)/90 shadow-md border border-(--enad-border-color)/50 opacity-0 group-hover/recs:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-opacity hover:bg-(--enad-surface)\"\n            aria-label=\"Scroll right\"\n          >\n            <ChevronRightIcon className=\"size-5\" />\n          </button>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;AAkCA,SAAgB,uBAAuB,EACrC,OACA,UACA,aACA,eAAe,YACf,aAAa,MACb,UAAU,GACV,aAC8B;CAC9B,MAAM,CAAC,KAAK,UAAUA,QAAM,UAAuB;CACnD,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAS,MAAM;CAC/D,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAS,MAAM;CAC/D,MAAM,SAASA,QAAM,cAAc,gBAAgB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvE,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;AAEhD,SAAM,gBAAgB;AACpB,MAAI,CAAC,IAAK;EAEV,MAAM,iBAAiB;AACrB,oBAAiB,IAAI,eAAe,CAAC;AACrC,oBAAiB,IAAI,eAAe,CAAC;;AAGvC,YAAU;AACV,MAAI,GAAG,UAAU,SAAS;AAC1B,MAAI,GAAG,UAAU,SAAS;AAC1B,eAAa;AACX,OAAI,IAAI,UAAU,SAAS;AAC3B,OAAI,IAAI,UAAU,SAAS;;IAE5B,CAAC,IAAI,CAAC;AAET,QACE,qBAAC,WAAD;EAAS,WAAW,GAAG,uBAAuB,UAAU;YAAxD,EAEI,SAAS,gBACT,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SAAS,oBAAC,MAAD;IAAI,WAAU;cAAmC;IAAW,CAAA,EACrE,eACC,oBAAC,KAAD;IACE,MAAM;IACN,WAAU;cAET;IACC,CAAA,CAEF;MAIR,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,cAAc,iBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,KAAK,YAAY;KAChC,WAAU;KACV,cAAW;eAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;KAC/B,CAAA;IAGX,oBAAC,UAAD;KACU;KACR,MAAM;MAAE,OAAO;MAAS,gBAAgB;MAAQ,eAAe;MAAa;eAE5E,oBAAC,iBAAD,EAAA,UACGA,QAAM,SAAS,IAAI,WAAW,OAAO,MACpC,oBAAC,cAAD;MAEE,WAAW,GACT,kDACA,kBAAkB,OAAO,CAC1B;MACD,OAAO,kBAAkB,GAAG,OAAO;gBAElC;MACY,EARR,EAQQ,CACf,EACc,CAAA;KACT,CAAA;IAEV,cAAc,iBACb,oBAAC,UAAD;KACE,MAAK;KACL,eAAe,KAAK,YAAY;KAChC,WAAU;KACV,cAAW;eAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;KAChC,CAAA;IAEP;KACE"}

package/dist/client/storefront/filters/filter-chip.d.ts

@@ -1,19 +1,22 @@
+import * as React$1 from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/client/storefront/filters/filter-chip.d.ts
 interface FilterChipProps {
-  label: string;
+  label?: string;
   active: boolean;
   onClick: () => void;
   onRemove?: () => void;
   className?: string;
+  children?: React$1.ReactNode;
 }
 declare function FilterChip({
   label,
   active,
   onClick,
   onRemove,
-  className
+  className,
+  children
 }: FilterChipProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FilterChip, type FilterChipProps };

package/dist/client/storefront/filters/filter-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"mappings":";;;UAOU,eAAA;EACR,KAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAAA;AAAA,iBAGO,UAAA,CAAA;EAAa,KAAA;EAAO,MAAA;EAAQ,OAAA;EAAS,QAAA;EAAU;AAAA,GAAa,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"filter-chip.d.ts","names":[],"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"mappings":";;;;UAOU,eAAA;EACR,KAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,QAAA,GAAW,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGV,UAAA,CAAA;EAAa,KAAA;EAAO,MAAA;EAAQ,OAAA;EAAS,QAAA;EAAU,SAAA;EAAW;AAAA,GAAY,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/filters/filter-chip.mjs

@@ -5,15 +5,17 @@ import { Toggle } from "../../ui-resolver/toggle.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/filters/filter-chip.tsx
-function FilterChip({ label, active, onClick, onRemove, className }) {
+function FilterChip({ label, active, onClick, onRemove, className, children }) {
 	const CloseIcon = useIcon("close");
+	const content = label ?? children;
+	const accessibleLabel = label ?? (typeof children === "string" ? children : void 0);
 	return /* @__PURE__ */ jsxs(Toggle, {
 		pressed: active,
 		onPressedChange: () => active && onRemove ? onRemove() : onClick(),
-		variant: "outline",
+		variant: "outlined",
 		className: cn("enad-interactive rounded-[var(--enad-button-radius)] px-3 text-sm", active && "bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground", className),
-		"aria-label": active ? `Remove ${label}` : label,
-		children: [label, active && onRemove && /* @__PURE__ */ jsx(CloseIcon, { className: "relative size-3 hit-area-6" })]
+		"aria-label": accessibleLabel ? active ? `Remove ${accessibleLabel}` : accessibleLabel : void 0,
+		children: [content, active && onRemove && /* @__PURE__ */ jsx(CloseIcon, { className: "relative size-3 hit-area-6" })]
 	});
 }
 //#endregion

package/dist/client/storefront/filters/filter-chip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.mjs","names":[],"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Toggle } from \"../../ui-resolver/toggle\";\nimport { cn } from \"../../ui/utils\";\n\ninterface FilterChipProps {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  onRemove?: () => void;\n  className?: string;\n}\n\nfunction FilterChip({ label, active, onClick, onRemove, className }: FilterChipProps) {\n  const CloseIcon = useIcon(\"close\");\n  return (\n    <Toggle\n      pressed={active}\n      onPressedChange={() => (active && onRemove ? onRemove() : onClick())}\n      variant=\"outline\"\n      className={cn(\n        \"enad-interactive rounded-[var(--enad-button-radius)] px-3 text-sm\",\n        active &&\n          \"bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground\",\n        className,\n      )}\n      aria-label={active ? `Remove ${label}` : label}\n    >\n      {label}\n      {active && onRemove && <CloseIcon className=\"relative size-3 hit-area-6\" />}\n    </Toggle>\n  );\n}\n\nexport { FilterChip, type FilterChipProps };\n"],"mappings":";;;;;;;AAeA,SAAS,WAAW,EAAE,OAAO,QAAQ,SAAS,UAAU,aAA8B;CACpF,MAAM,YAAY,QAAQ,QAAQ;AAClC,QACE,qBAAC,QAAD;EACE,SAAS;EACT,uBAAwB,UAAU,WAAW,UAAU,GAAG,SAAS;EACnE,SAAQ;EACR,WAAW,GACT,qEACA,UACE,2FACF,UACD;EACD,cAAY,SAAS,UAAU,UAAU;YAV3C,CAYG,OACA,UAAU,YAAY,oBAAC,WAAD,EAAW,WAAU,8BAA+B,CAAA,CACpE"}
+{"version":3,"file":"filter-chip.mjs","names":[],"sources":["../../../../src/client/storefront/filters/filter-chip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Toggle } from \"../../ui-resolver/toggle\";\nimport { cn } from \"../../ui/utils\";\n\ninterface FilterChipProps {\n  label?: string;\n  active: boolean;\n  onClick: () => void;\n  onRemove?: () => void;\n  className?: string;\n  children?: React.ReactNode;\n}\n\nfunction FilterChip({ label, active, onClick, onRemove, className, children }: FilterChipProps) {\n  const CloseIcon = useIcon(\"close\");\n  const content = label ?? children;\n  const accessibleLabel = label ?? (typeof children === \"string\" ? children : undefined);\n  return (\n    <Toggle\n      pressed={active}\n      onPressedChange={() => (active && onRemove ? onRemove() : onClick())}\n      variant=\"outlined\"\n      className={cn(\n        \"enad-interactive rounded-[var(--enad-button-radius)] px-3 text-sm\",\n        active &&\n          \"bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground\",\n        className,\n      )}\n      aria-label={\n        accessibleLabel ? (active ? `Remove ${accessibleLabel}` : accessibleLabel) : undefined\n      }\n    >\n      {content}\n      {active && onRemove && <CloseIcon className=\"relative size-3 hit-area-6\" />}\n    </Toggle>\n  );\n}\n\nexport { FilterChip, type FilterChipProps };\n"],"mappings":";;;;;;;AAgBA,SAAS,WAAW,EAAE,OAAO,QAAQ,SAAS,UAAU,WAAW,YAA6B;CAC9F,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,UAAU,SAAS;CACzB,MAAM,kBAAkB,UAAU,OAAO,aAAa,WAAW,WAAW,KAAA;AAC5E,QACE,qBAAC,QAAD;EACE,SAAS;EACT,uBAAwB,UAAU,WAAW,UAAU,GAAG,SAAS;EACnE,SAAQ;EACR,WAAW,GACT,qEACA,UACE,2FACF,UACD;EACD,cACE,kBAAmB,SAAS,UAAU,oBAAoB,kBAAmB,KAAA;YAXjF,CAcG,SACA,UAAU,YAAY,oBAAC,WAAD,EAAW,WAAU,8BAA+B,CAAA,CACpE"}

package/dist/client/storefront/filters/filter-panel.mjs

@@ -2,8 +2,8 @@
 import { useIcon } from "../../icons/icon-context.mjs";
 import { cn } from "../../ui/utils.mjs";
 import { Button } from "../../ui/button.mjs";
-import { Separator } from "../../ui-resolver/separator.mjs";
 import { Sheet, SheetContent, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import { Separator } from "../../ui-resolver/separator.mjs";
 import { FilterGroup } from "./filter-group.mjs";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -34,7 +34,7 @@ function FilterPanelContent({ filters, activeFilters, onFilterChange, productCou
 						})
 					]
 				}), /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
+					variant: "plain",
 					size: "icon",
 					onClick: onClose,
 					"aria-label": "Close filters",

package/dist/client/storefront/filters/filter-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-panel.mjs","names":["React"],"sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { Sheet, SheetContent, SheetTitle } from \"../../ui-resolver/sheet\";\nimport { cn } from \"../../ui/utils\";\nimport { FilterGroup, type FilterOption } from \"./filter-group\";\n\ninterface FilterDefinition {\n  key: string;\n  title: string;\n  type: \"checkbox\" | \"color\" | \"price\";\n  options: FilterOption[];\n}\n\ntype ActiveFilters = Record<string, string[]>;\n\ninterface FilterPanelProps {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  labels?: {\n    title?: string;\n    clearAll?: string;\n    showResults?: string;\n  };\n  className?: string;\n}\n\nfunction FilterPanelContent({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  onClose,\n  labels,\n}: {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  onClose: () => void;\n  labels?: FilterPanelProps[\"labels\"];\n}) {\n  const SlidersIcon = useIcon(\"sliders\");\n  const CloseIcon = useIcon(\"close\");\n  const totalActive = Object.values(activeFilters).reduce(\n    (sum, arr) => sum + arr.filter(Boolean).length,\n    0,\n  );\n\n  const clearAll = () => {\n    for (const filter of filters) {\n      onFilterChange(filter.key, []);\n    }\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between p-4\">\n        <div className=\"flex items-center gap-2\">\n          <SlidersIcon className=\"size-5\" />\n          <span className=\"text-sm font-medium\">{labels?.title ?? \"Filter & Sort\"}</span>\n          {totalActive > 0 && (\n            <span className=\"flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground\">\n              {totalActive}\n            </span>\n          )}\n        </div>\n        <Button variant=\"ghost\" size=\"icon\" onClick={onClose} aria-label=\"Close filters\">\n          <CloseIcon />\n        </Button>\n      </div>\n\n      <Separator />\n\n      <div className=\"flex-1 overflow-y-auto p-4\">\n        {totalActive > 0 && (\n          <button\n            type=\"button\"\n            onClick={clearAll}\n            className=\"mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground\"\n          >\n            {labels?.clearAll ?? \"Clear all\"}\n          </button>\n        )}\n\n        {filters.map((filter) => (\n          <React.Fragment key={filter.key}>\n            <FilterGroup\n              title={filter.title}\n              type={filter.type}\n              options={filter.options}\n              selected={activeFilters[filter.key] ?? []}\n              onChange={(selected) => onFilterChange(filter.key, selected)}\n            />\n            <Separator />\n          </React.Fragment>\n        ))}\n      </div>\n\n      {productCount != null && (\n        <>\n          <Separator />\n          <div className=\"p-4\">\n            <Button className=\"w-full\" onClick={onClose}>\n              {labels?.showResults\n                ? labels.showResults.replace(\"{count}\", String(productCount))\n                : `Show ${productCount} results`}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction FilterPanel({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  open,\n  onOpenChange,\n  labels,\n  className,\n}: FilterPanelProps) {\n  return (\n    <>\n      {/* Mobile: Sheet */}\n      <div className={cn(\"md:hidden\", className)}>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent side=\"left\" className=\"w-full max-w-sm p-0\">\n            <SheetTitle className=\"sr-only\" showClose={false}>\n              {labels?.title ?? \"Filters\"}\n            </SheetTitle>\n            <FilterPanelContent\n              filters={filters}\n              activeFilters={activeFilters}\n              onFilterChange={onFilterChange}\n              productCount={productCount}\n              onClose={() => onOpenChange(false)}\n              labels={labels}\n            />\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      {/* Desktop: Sidebar */}\n      {open && (\n        <aside className={cn(\"hidden w-full max-w-[280px] md:block\", className)}>\n          <FilterPanelContent\n            filters={filters}\n            activeFilters={activeFilters}\n            onFilterChange={onFilterChange}\n            productCount={productCount}\n            onClose={() => onOpenChange(false)}\n            labels={labels}\n          />\n        </aside>\n      )}\n    </>\n  );\n}\n\nexport { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters };\n"],"mappings":";;;;;;;;;;AAkCA,SAAS,mBAAmB,EAC1B,SACA,eACA,gBACA,cACA,SACA,UAQC;CACD,MAAM,cAAc,QAAQ,UAAU;CACtC,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,cAAc,OAAO,OAAO,cAAc,CAAC,QAC9C,KAAK,QAAQ,MAAM,IAAI,OAAO,QAAQ,CAAC,QACxC,EACD;CAED,MAAM,iBAAiB;AACrB,OAAK,MAAM,UAAU,QACnB,gBAAe,OAAO,KAAK,EAAE,CAAC;;AAIlC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,aAAD,EAAa,WAAU,UAAW,CAAA;MAClC,oBAAC,QAAD;OAAM,WAAU;iBAAuB,QAAQ,SAAS;OAAuB,CAAA;MAC9E,cAAc,KACb,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA;MAEL;QACN,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAO,SAAS;KAAS,cAAW;eAC/D,oBAAC,WAAD,EAAa,CAAA;KACN,CAAA,CACL;;GAEN,oBAAC,WAAD,EAAa,CAAA;GAEb,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cAAc,KACb,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET,QAAQ,YAAY;KACd,CAAA,EAGV,QAAQ,KAAK,WACZ,qBAACA,QAAM,UAAP,EAAA,UAAA,CACE,oBAAC,aAAD;KACE,OAAO,OAAO;KACd,MAAM,OAAO;KACb,SAAS,OAAO;KAChB,UAAU,cAAc,OAAO,QAAQ,EAAE;KACzC,WAAW,aAAa,eAAe,OAAO,KAAK,SAAS;KAC5D,CAAA,EACF,oBAAC,WAAD,EAAa,CAAA,CACE,EAAA,EATI,OAAO,IASX,CACjB,CACE;;GAEL,gBAAgB,QACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KAAQ,WAAU;KAAS,SAAS;eACjC,QAAQ,cACL,OAAO,YAAY,QAAQ,WAAW,OAAO,aAAa,CAAC,GAC3D,QAAQ,aAAa;KAClB,CAAA;IACL,CAAA,CACL,EAAA,CAAA;GAED;;;AAIV,SAAS,YAAY,EACnB,SACA,eACA,gBACA,cACA,MACA,cACA,QACA,aACmB;AACnB,QACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACxC,oBAAC,OAAD;GAAa;GAAoB;aAC/B,qBAAC,cAAD;IAAc,MAAK;IAAO,WAAU;cAApC,CACE,oBAAC,YAAD;KAAY,WAAU;KAAU,WAAW;eACxC,QAAQ,SAAS;KACP,CAAA,EACb,oBAAC,oBAAD;KACW;KACM;KACC;KACF;KACd,eAAe,aAAa,MAAM;KAC1B;KACR,CAAA,CACW;;GACT,CAAA;EACJ,CAAA,EAGL,QACC,oBAAC,SAAD;EAAO,WAAW,GAAG,wCAAwC,UAAU;YACrE,oBAAC,oBAAD;GACW;GACM;GACC;GACF;GACd,eAAe,aAAa,MAAM;GAC1B;GACR,CAAA;EACI,CAAA,CAET,EAAA,CAAA"}
+{"version":3,"file":"filter-panel.mjs","names":["React"],"sources":["../../../../src/client/storefront/filters/filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { Sheet, SheetContent, SheetTitle } from \"../../ui-resolver/sheet\";\nimport { cn } from \"../../ui/utils\";\nimport { FilterGroup, type FilterOption } from \"./filter-group\";\n\ninterface FilterDefinition {\n  key: string;\n  title: string;\n  type: \"checkbox\" | \"color\" | \"price\";\n  options: FilterOption[];\n}\n\ntype ActiveFilters = Record<string, string[]>;\n\ninterface FilterPanelProps {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  labels?: {\n    title?: string;\n    clearAll?: string;\n    showResults?: string;\n  };\n  className?: string;\n}\n\nfunction FilterPanelContent({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  onClose,\n  labels,\n}: {\n  filters: FilterDefinition[];\n  activeFilters: ActiveFilters;\n  onFilterChange: (key: string, selected: string[]) => void;\n  productCount?: number;\n  onClose: () => void;\n  labels?: FilterPanelProps[\"labels\"];\n}) {\n  const SlidersIcon = useIcon(\"sliders\");\n  const CloseIcon = useIcon(\"close\");\n  const totalActive = Object.values(activeFilters).reduce(\n    (sum, arr) => sum + arr.filter(Boolean).length,\n    0,\n  );\n\n  const clearAll = () => {\n    for (const filter of filters) {\n      onFilterChange(filter.key, []);\n    }\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center justify-between p-4\">\n        <div className=\"flex items-center gap-2\">\n          <SlidersIcon className=\"size-5\" />\n          <span className=\"text-sm font-medium\">{labels?.title ?? \"Filter & Sort\"}</span>\n          {totalActive > 0 && (\n            <span className=\"flex size-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground\">\n              {totalActive}\n            </span>\n          )}\n        </div>\n        <Button variant=\"plain\" size=\"icon\" onClick={onClose} aria-label=\"Close filters\">\n          <CloseIcon />\n        </Button>\n      </div>\n\n      <Separator />\n\n      <div className=\"flex-1 overflow-y-auto p-4\">\n        {totalActive > 0 && (\n          <button\n            type=\"button\"\n            onClick={clearAll}\n            className=\"mb-4 text-sm text-muted-foreground underline underline-offset-4 hover:text-foreground\"\n          >\n            {labels?.clearAll ?? \"Clear all\"}\n          </button>\n        )}\n\n        {filters.map((filter) => (\n          <React.Fragment key={filter.key}>\n            <FilterGroup\n              title={filter.title}\n              type={filter.type}\n              options={filter.options}\n              selected={activeFilters[filter.key] ?? []}\n              onChange={(selected) => onFilterChange(filter.key, selected)}\n            />\n            <Separator />\n          </React.Fragment>\n        ))}\n      </div>\n\n      {productCount != null && (\n        <>\n          <Separator />\n          <div className=\"p-4\">\n            <Button className=\"w-full\" onClick={onClose}>\n              {labels?.showResults\n                ? labels.showResults.replace(\"{count}\", String(productCount))\n                : `Show ${productCount} results`}\n            </Button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nfunction FilterPanel({\n  filters,\n  activeFilters,\n  onFilterChange,\n  productCount,\n  open,\n  onOpenChange,\n  labels,\n  className,\n}: FilterPanelProps) {\n  return (\n    <>\n      {/* Mobile: Sheet */}\n      <div className={cn(\"md:hidden\", className)}>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent side=\"left\" className=\"w-full max-w-sm p-0\">\n            <SheetTitle className=\"sr-only\" showClose={false}>\n              {labels?.title ?? \"Filters\"}\n            </SheetTitle>\n            <FilterPanelContent\n              filters={filters}\n              activeFilters={activeFilters}\n              onFilterChange={onFilterChange}\n              productCount={productCount}\n              onClose={() => onOpenChange(false)}\n              labels={labels}\n            />\n          </SheetContent>\n        </Sheet>\n      </div>\n\n      {/* Desktop: Sidebar */}\n      {open && (\n        <aside className={cn(\"hidden w-full max-w-[280px] md:block\", className)}>\n          <FilterPanelContent\n            filters={filters}\n            activeFilters={activeFilters}\n            onFilterChange={onFilterChange}\n            productCount={productCount}\n            onClose={() => onOpenChange(false)}\n            labels={labels}\n          />\n        </aside>\n      )}\n    </>\n  );\n}\n\nexport { FilterPanel, type FilterPanelProps, type FilterDefinition, type ActiveFilters };\n"],"mappings":";;;;;;;;;;AAkCA,SAAS,mBAAmB,EAC1B,SACA,eACA,gBACA,cACA,SACA,UAQC;CACD,MAAM,cAAc,QAAQ,UAAU;CACtC,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,cAAc,OAAO,OAAO,cAAc,CAAC,QAC9C,KAAK,QAAQ,MAAM,IAAI,OAAO,QAAQ,CAAC,QACxC,EACD;CAED,MAAM,iBAAiB;AACrB,OAAK,MAAM,UAAU,QACnB,gBAAe,OAAO,KAAK,EAAE,CAAC;;AAIlC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,aAAD,EAAa,WAAU,UAAW,CAAA;MAClC,oBAAC,QAAD;OAAM,WAAU;iBAAuB,QAAQ,SAAS;OAAuB,CAAA;MAC9E,cAAc,KACb,oBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA;MAEL;QACN,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAO,SAAS;KAAS,cAAW;eAC/D,oBAAC,WAAD,EAAa,CAAA;KACN,CAAA,CACL;;GAEN,oBAAC,WAAD,EAAa,CAAA;GAEb,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cAAc,KACb,oBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAET,QAAQ,YAAY;KACd,CAAA,EAGV,QAAQ,KAAK,WACZ,qBAACA,QAAM,UAAP,EAAA,UAAA,CACE,oBAAC,aAAD;KACE,OAAO,OAAO;KACd,MAAM,OAAO;KACb,SAAS,OAAO;KAChB,UAAU,cAAc,OAAO,QAAQ,EAAE;KACzC,WAAW,aAAa,eAAe,OAAO,KAAK,SAAS;KAC5D,CAAA,EACF,oBAAC,WAAD,EAAa,CAAA,CACE,EAAA,EATI,OAAO,IASX,CACjB,CACE;;GAEL,gBAAgB,QACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD,EAAa,CAAA,EACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD;KAAQ,WAAU;KAAS,SAAS;eACjC,QAAQ,cACL,OAAO,YAAY,QAAQ,WAAW,OAAO,aAAa,CAAC,GAC3D,QAAQ,aAAa;KAClB,CAAA;IACL,CAAA,CACL,EAAA,CAAA;GAED;;;AAIV,SAAS,YAAY,EACnB,SACA,eACA,gBACA,cACA,MACA,cACA,QACA,aACmB;AACnB,QACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACxC,oBAAC,OAAD;GAAa;GAAoB;aAC/B,qBAAC,cAAD;IAAc,MAAK;IAAO,WAAU;cAApC,CACE,oBAAC,YAAD;KAAY,WAAU;KAAU,WAAW;eACxC,QAAQ,SAAS;KACP,CAAA,EACb,oBAAC,oBAAD;KACW;KACM;KACC;KACF;KACd,eAAe,aAAa,MAAM;KAC1B;KACR,CAAA,CACW;;GACT,CAAA;EACJ,CAAA,EAGL,QACC,oBAAC,SAAD;EAAO,WAAW,GAAG,wCAAwC,UAAU;YACrE,oBAAC,oBAAD;GACW;GACM;GACC;GACF;GACd,eAAe,aAAa,MAAM;GAC1B;GACR,CAAA;EACI,CAAA,CAET,EAAA,CAAA"}

package/dist/client/storefront/filters/toggle-list-view.mjs

@@ -14,7 +14,7 @@ function ToggleListView({ mode, onChange, className }) {
 		onValueChange: (value) => {
 			if (value) onChange(value);
 		},
-		variant: "outline",
+		variant: "outlined",
 		className: cn(className),
 		"aria-label": "View mode",
 		children: [/* @__PURE__ */ jsx(ToggleGroupItem, {

package/dist/client/storefront/filters/toggle-list-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-list-view.mjs","names":[],"sources":["../../../../src/client/storefront/filters/toggle-list-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { ToggleGroup, ToggleGroupItem } from \"../../ui-resolver/toggle-group\";\nimport { cn } from \"../../ui/utils\";\n\ninterface ToggleListViewProps {\n  mode: \"grid\" | \"list\";\n  onChange: (mode: \"grid\" | \"list\") => void;\n  className?: string;\n}\n\nfunction ToggleListView({ mode, onChange, className }: ToggleListViewProps) {\n  const GridIcon = useIcon(\"grid\");\n  const ListIcon = useIcon(\"list\");\n  return (\n    <ToggleGroup\n      type=\"single\"\n      value={mode}\n      onValueChange={(value) => {\n        if (value) onChange(value as \"grid\" | \"list\");\n      }}\n      variant=\"outline\"\n      className={cn(className)}\n      aria-label=\"View mode\"\n    >\n      <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\" className=\"relative hit-area-2\">\n        <GridIcon className=\"size-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"list\" aria-label=\"List view\" className=\"relative hit-area-2\">\n        <ListIcon className=\"size-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n\nexport { ToggleListView, type ToggleListViewProps };\n"],"mappings":";;;;;;;AAaA,SAAS,eAAe,EAAE,MAAM,UAAU,aAAkC;CAC1E,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,WAAW,QAAQ,OAAO;AAChC,QACE,qBAAC,aAAD;EACE,MAAK;EACL,OAAO;EACP,gBAAgB,UAAU;AACxB,OAAI,MAAO,UAAS,MAAyB;;EAE/C,SAAQ;EACR,WAAW,GAAG,UAAU;EACxB,cAAW;YARb,CAUE,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,EAClB,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,CACN"}
+{"version":3,"file":"toggle-list-view.mjs","names":[],"sources":["../../../../src/client/storefront/filters/toggle-list-view.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { ToggleGroup, ToggleGroupItem } from \"../../ui-resolver/toggle-group\";\nimport { cn } from \"../../ui/utils\";\n\ninterface ToggleListViewProps {\n  mode: \"grid\" | \"list\";\n  onChange: (mode: \"grid\" | \"list\") => void;\n  className?: string;\n}\n\nfunction ToggleListView({ mode, onChange, className }: ToggleListViewProps) {\n  const GridIcon = useIcon(\"grid\");\n  const ListIcon = useIcon(\"list\");\n  return (\n    <ToggleGroup\n      type=\"single\"\n      value={mode}\n      onValueChange={(value) => {\n        if (value) onChange(value as \"grid\" | \"list\");\n      }}\n      variant=\"outlined\"\n      className={cn(className)}\n      aria-label=\"View mode\"\n    >\n      <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\" className=\"relative hit-area-2\">\n        <GridIcon className=\"size-4\" />\n      </ToggleGroupItem>\n      <ToggleGroupItem value=\"list\" aria-label=\"List view\" className=\"relative hit-area-2\">\n        <ListIcon className=\"size-4\" />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n\nexport { ToggleListView, type ToggleListViewProps };\n"],"mappings":";;;;;;;AAaA,SAAS,eAAe,EAAE,MAAM,UAAU,aAAkC;CAC1E,MAAM,WAAW,QAAQ,OAAO;CAChC,MAAM,WAAW,QAAQ,OAAO;AAChC,QACE,qBAAC,aAAD;EACE,MAAK;EACL,OAAO;EACP,gBAAgB,UAAU;AACxB,OAAI,MAAO,UAAS,MAAyB;;EAE/C,SAAQ;EACR,WAAW,GAAG,UAAU;EACxB,cAAW;YARb,CAUE,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,EAClB,oBAAC,iBAAD;GAAiB,OAAM;GAAO,cAAW;GAAY,WAAU;aAC7D,oBAAC,UAAD,EAAU,WAAU,UAAW,CAAA;GACf,CAAA,CACN"}

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

@@ -3,17 +3,28 @@ import { SelectOption, StorefrontSelect, StorefrontSelectProps } from "./primiti
 import { AddressFieldGroup, AddressFieldGroupProps } from "./components/address-field-group.js";
 import { Badge, BadgeProps } from "./components/badge.js";
 import { CountryInfo, CountryRedirect, CountryRedirectProps } from "./components/country-redirect.js";
+import { EmptyState, EmptyStateProps } from "./components/empty-state.js";
+import { ImageLightbox, ImageLightboxProps } from "./components/image-lightbox.js";
+import { InfiniteScroll, InfiniteScrollProps, UseInfiniteScrollOptions, UseInfiniteScrollReturn, useInfiniteScroll } from "./components/infinite-scroll.js";
 import { LanguageSelector } from "./components/language-selector.js";
 import { NewsletterSignup, NewsletterSignupProps } from "./components/newsletter-signup.js";
 import { Price, PriceProps } from "./components/price.js";
+import { ProductRecommendations, ProductRecommendationsProps } from "./components/product-recommendations.js";
 import { ProductTab, ProductTabs, ProductTabsProps } from "./components/product-tabs.js";
+import { QuickView, QuickViewProduct, QuickViewProps } from "./components/quick-view.js";
+import { ReviewDistribution, ReviewSummary, ReviewSummaryProps } from "./components/review-summary.js";
+import { SearchAutocomplete, SearchAutocompleteProps, SearchSuggestion } from "./components/search-autocomplete.js";
 import { SectionLink, SectionNav, SectionNavProps } from "./components/section-nav.js";
+import { ShareButton, ShareButtonProps } from "./components/share-button.js";
 import { ProductCardSkeleton, Skeleton, SkeletonProps } from "./components/skeleton.js";
 import { StarRating, StarRatingProps } from "./components/star-rating.js";
+import { Testimonial, TestimonialGrid, TestimonialGridProps, TestimonialProps } from "./components/testimonial.js";
+import { TrustBadge, TrustBadges, TrustBadgesProps } from "./components/trust-badges.js";
 import { VariantAxis, VariantOption, VariantSelector, VariantSelectorProps } from "./components/variant-selector.js";
+import { WishlistToggle, WishlistToggleProps } from "./components/wishlist-toggle.js";
 import { StorefrontInput, StorefrontInputProps } from "./primitives/input.js";
 import { PasswordInput, PasswordInputProps } from "./primitives/password-input.js";
 import { StorefrontCheckbox, StorefrontCheckboxProps } from "./primitives/checkbox.js";
 import { CountrySelect, CountrySelectProps, NORDIC_COUNTRIES } from "./primitives/country-select.js";
 import { SimpleSelect, SimpleSelectOption, SimpleSelectProps } from "../ui/simple-select.js";
-export { AddressFieldGroup, type AddressFieldGroupProps, Badge, type BadgeProps, type ColorTheme, type CountryInfo, CountryRedirect, type CountryRedirectProps, CountrySelect, type CountrySelectProps, type GalleryVariant, type LanguageOption, LanguageSelector, type LanguageSelectorProps, type LinkBlockVariant, NORDIC_COUNTRIES, NewsletterSignup, type NewsletterSignupProps, PasswordInput, type PasswordInputProps, Price, type PriceProps, ProductCardSkeleton, type ProductTab, ProductTabs, type ProductTabsProps, type SectionLink, SectionNav, type SectionNavProps, type SelectOption, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, Skeleton, type SkeletonProps, StarRating, type StarRatingProps, StorefrontCheckbox, type StorefrontCheckboxProps, StorefrontInput, type StorefrontInputProps, StorefrontSelect, type StorefrontSelectProps, type TextContentVariant, type TextContentWithImageVariant, type VariantAxis, type VariantOption, VariantSelector, type VariantSelectorProps };
+export { AddressFieldGroup, type AddressFieldGroupProps, Badge, type BadgeProps, type ColorTheme, type CountryInfo, CountryRedirect, type CountryRedirectProps, CountrySelect, type CountrySelectProps, EmptyState, type EmptyStateProps, type GalleryVariant, ImageLightbox, type ImageLightboxProps, InfiniteScroll, type InfiniteScrollProps, type LanguageOption, LanguageSelector, type LanguageSelectorProps, type LinkBlockVariant, NORDIC_COUNTRIES, NewsletterSignup, type NewsletterSignupProps, PasswordInput, type PasswordInputProps, Price, type PriceProps, ProductCardSkeleton, ProductRecommendations, type ProductRecommendationsProps, type ProductTab, ProductTabs, type ProductTabsProps, QuickView, type QuickViewProduct, type QuickViewProps, type ReviewDistribution, ReviewSummary, type ReviewSummaryProps, SearchAutocomplete, type SearchAutocompleteProps, type SearchSuggestion, type SectionLink, SectionNav, type SectionNavProps, type SelectOption, ShareButton, type ShareButtonProps, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, Skeleton, type SkeletonProps, StarRating, type StarRatingProps, StorefrontCheckbox, type StorefrontCheckboxProps, StorefrontInput, type StorefrontInputProps, StorefrontSelect, type StorefrontSelectProps, Testimonial, TestimonialGrid, type TestimonialGridProps, type TestimonialProps, type TextContentVariant, type TextContentWithImageVariant, type TrustBadge, TrustBadges, type TrustBadgesProps, type UseInfiniteScrollOptions, type UseInfiniteScrollReturn, type VariantAxis, type VariantOption, VariantSelector, type VariantSelectorProps, WishlistToggle, type WishlistToggleProps, useInfiniteScroll };

package/dist/client/storefront/index.mjs

@@ -15,4 +15,15 @@ import { SimpleSelect } from "../ui/simple-select.mjs";
 import { LanguageSelector } from "./components/language-selector.mjs";
 import { CountryRedirect } from "./components/country-redirect.mjs";
 import { SectionNav } from "./components/section-nav.mjs";
-export { AddressFieldGroup, Badge, CountryRedirect, CountrySelect, LanguageSelector, NORDIC_COUNTRIES, NewsletterSignup, PasswordInput, Price, ProductCardSkeleton, ProductTabs, SectionNav, SimpleSelect, Skeleton, StarRating, StorefrontCheckbox, StorefrontInput, StorefrontSelect, VariantSelector };
+import { EmptyState } from "./components/empty-state.mjs";
+import { ImageLightbox } from "./components/image-lightbox.mjs";
+import { InfiniteScroll, useInfiniteScroll } from "./components/infinite-scroll.mjs";
+import { ProductRecommendations } from "./components/product-recommendations.mjs";
+import { QuickView } from "./components/quick-view.mjs";
+import { ReviewSummary } from "./components/review-summary.mjs";
+import { SearchAutocomplete } from "./components/search-autocomplete.mjs";
+import { ShareButton } from "./components/share-button.mjs";
+import { Testimonial, TestimonialGrid } from "./components/testimonial.mjs";
+import { TrustBadges } from "./components/trust-badges.mjs";
+import { WishlistToggle } from "./components/wishlist-toggle.mjs";
+export { AddressFieldGroup, Badge, CountryRedirect, CountrySelect, EmptyState, ImageLightbox, InfiniteScroll, LanguageSelector, NORDIC_COUNTRIES, NewsletterSignup, PasswordInput, Price, ProductCardSkeleton, ProductRecommendations, ProductTabs, QuickView, ReviewSummary, SearchAutocomplete, SectionNav, ShareButton, SimpleSelect, Skeleton, StarRating, StorefrontCheckbox, StorefrontInput, StorefrontSelect, Testimonial, TestimonialGrid, TrustBadges, VariantSelector, WishlistToggle, useInfiniteScroll };

package/dist/client/storefront/layout/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/header.tsx"],"mappings":";;;;iBA8US,MAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,IAAA;EACA,aAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"header.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/header.tsx"],"mappings":";;;;iBAsbS,MAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA,YAAA;EACA,gBAAA;EACA,iBAAA;EACA,IAAA;EACA,aAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA;AAAA,GACC,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/layout/header.mjs

@@ -80,7 +80,7 @@ function MegaMenuFeatured({ featured, ChevronRightIcon }) {
 				children: feat.image?.src && /* @__PURE__ */ jsx("img", {
 					src: feat.image.src,
 					alt: feat.image.alt ?? feat.label,
-					className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+					className: "size-full object-cover"
 				})
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-1 text-sm text-foreground transition-colors duration-200 group-hover:text-muted-foreground",

package/dist/client/storefront/layout/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/header.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\nimport { MobileMenuDrawer } from \"./mobile-menu-drawer\"\nimport { PromotionBar } from \"./promotion-bar\"\nimport type { HeaderProps, NavItem, NavChild } from \"../types\"\n\ntype IconComponent = React.ComponentType<{ className?: string }>\nconst CLOSE_DELAY = 150\nconst EMPTY_NAV: NavItem[] = []\nconst EMPTY_UTILITY: NavChild[] = []\nconst EMPTY_MESSAGES: string[] = []\n\nfunction CartElement({ cartHref, onCartClick, linkColor, label, CartIcon }: {\n  cartHref?: string; onCartClick?: () => void; linkColor: string; label: string; CartIcon: IconComponent\n}) {\n  if (cartHref) {\n    return (\n      <a href={cartHref} className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)} aria-label={label}>\n        <CartIcon className=\"size-5\" />\n      </a>\n    )\n  }\n  if (onCartClick) {\n    return (\n      <button onClick={onCartClick} className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)} aria-label={label}>\n        <CartIcon className=\"size-5\" />\n      </button>\n    )\n  }\n  return null\n}\n\nfunction MegaMenuPanel({ activeItem, showPanel, onMouseEnter, onMouseLeave, ChevronRightIcon }: {\n  activeItem: NavItem | null; showPanel: boolean; onMouseEnter: () => void; onMouseLeave: () => void; ChevronRightIcon: IconComponent\n}) {\n  const categories = activeItem?.megaMenuCategories\n  const featured = activeItem?.megaMenuFeatured\n\n  return (\n    <div\n      className={cn(\n        \"hidden overflow-hidden transition-all duration-300 ease-out lg:block\",\n        showPanel ? \"max-h-125 translate-y-0 opacity-100\" : \"max-h-0 -translate-y-1 opacity-0\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"region\"\n      aria-label=\"Submenu\"\n    >\n      <div className=\"border-b border-border bg-background p-8\">\n        {categories && categories.length > 0 ? (\n          <div className=\"flex gap-12\">\n            <MegaMenuCategories categories={categories} />\n            {featured && featured.length > 0 && (\n              <MegaMenuFeatured featured={featured} ChevronRightIcon={ChevronRightIcon} />\n            )}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nfunction MegaMenuCategories({ categories }: { categories: NonNullable<NavItem[\"megaMenuCategories\"]> }) {\n  const columnGroups: (typeof categories)[] = []\n  for (const cat of categories) {\n    if (cat.stackWithPrevious && columnGroups.length > 0) {\n      columnGroups[columnGroups.length - 1]!.push(cat)\n    } else {\n      columnGroups.push([cat])\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 justify-between gap-10\">\n      {columnGroups.map((group) => (\n        <div\n          key={group[0]!.id ?? group[0]!.title}\n          className=\"flex w-50 min-w-0 flex-col gap-6\"\n        >\n          {group.map((cat) => (\n            <div key={cat.id ?? cat.title}>\n              <a\n                href={cat.href}\n                className=\"mb-3 block text-sm font-normal text-foreground transition-colors duration-200 hover:text-muted-foreground\"\n              >\n                {cat.title}\n              </a>\n              <ul className=\"flex flex-col gap-1.5\">\n                {cat.items?.map((item) => (\n                  <li key={item.href}>\n                    <a\n                      href={item.href}\n                      className=\"text-sm text-muted-foreground transition-colors duration-200 hover:text-foreground\"\n                    >\n                      {item.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction MegaMenuFeatured({ featured, ChevronRightIcon }: {\n  featured: NonNullable<NavItem[\"megaMenuFeatured\"]>; ChevronRightIcon: IconComponent\n}) {\n  return (\n    <div className=\"flex shrink-0 gap-6\">\n      {featured.map((feat) => (\n        <a key={feat.id ?? feat.href} href={feat.href} className=\"group w-40\">\n          <div className=\"relative mb-2 aspect-[4/5] overflow-hidden rounded-[var(--enad-card-radius)] bg-muted\">\n            {feat.image?.src && (\n              <img\n                src={feat.image.src}\n                alt={feat.image.alt ?? feat.label}\n                className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n              />\n            )}\n          </div>\n          <span className=\"flex items-center gap-1 text-sm text-foreground transition-colors duration-200 group-hover:text-muted-foreground\">\n            {feat.label}\n            <ChevronRightIcon className=\"mt-px size-4\" />\n          </span>\n        </a>\n      ))}\n    </div>\n  )\n}\n\ninterface MobileHeaderProps {\n  logo: React.ReactNode; linkColor: string; onSearchClick?: () => void\n  cartHref?: string; onCartClick?: () => void; menuOpen: boolean\n  setMenuOpen: (open: boolean) => void; labels?: HeaderProps[\"labels\"]\n  SearchIcon: IconComponent; CartIcon: IconComponent; MenuIcon: IconComponent\n}\n\nfunction MobileHeader({ logo, linkColor, onSearchClick, cartHref, onCartClick, menuOpen, setMenuOpen, labels, SearchIcon, CartIcon, MenuIcon }: MobileHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 lg:hidden\">\n      <a href=\"/\" className=\"shrink-0\">{logo}</a>\n\n      <div className=\"flex items-center gap-3\">\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n        <button\n          onClick={() => setMenuOpen(true)}\n          className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n          aria-label={labels?.menu ?? \"Open menu\"}\n          aria-expanded={menuOpen}\n        >\n          <MenuIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\ninterface DesktopHeaderProps {\n  logo: React.ReactNode; navItems: NavItem[]; utilityLinks: NavChild[]\n  linkColor: string; navLinkClasses: string; hasBackground: boolean\n  activeIndex: number | null; onSearchClick?: () => void\n  cartHref?: string; onCartClick?: () => void; labels?: HeaderProps[\"labels\"]\n  handleTriggerEnter: (index: number) => void; scheduleClose: () => void\n  SearchIcon: IconComponent; CartIcon: IconComponent\n}\n\nfunction DesktopHeader({ logo, navItems, utilityLinks, linkColor, navLinkClasses, hasBackground, activeIndex, onSearchClick, cartHref, onCartClick, labels, handleTriggerEnter, scheduleClose, SearchIcon, CartIcon }: DesktopHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"hidden items-center justify-between px-8 py-4 lg:flex\",\n        hasBackground && \"border-b border-border\",\n      )}\n    >\n      <a href=\"/\" className=\"shrink-0\">{logo}</a>\n\n      <nav className=\"flex flex-1 items-center justify-center gap-6\">\n        {navItems.map((item, index) => {\n          const hasDropdown = (item.megaMenuCategories?.length ?? 0) > 0\n          return (\n            <a\n              key={item.id ?? item.label}\n              href={item.href ?? \"\"}\n              className={navLinkClasses}\n              onMouseEnter={() => handleTriggerEnter(index)}\n              onMouseLeave={scheduleClose}\n              onFocus={() => handleTriggerEnter(index)}\n              {...(hasDropdown && {\n                \"aria-expanded\": activeIndex === index,\n                \"aria-haspopup\": \"true\" as const,\n              })}\n            >\n              {item.label}\n            </a>\n          )\n        })}\n      </nav>\n\n      <div className=\"flex shrink-0 items-center gap-5\">\n        {utilityLinks.map((link) => (\n          <a key={link.label} href={link.href} className={navLinkClasses}>\n            {link.label}\n          </a>\n        ))}\n\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction useHeaderState(variant: HeaderProps[\"variant\"], navItems: NavItem[]) {\n  const [menuOpen, setMenuOpen] = React.useState(false)\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n  const [scrolled, setScrolled] = React.useState(false)\n  const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n  const headerRef = React.useRef<HTMLElement>(null)\n\n  const isTransparent = variant === \"transparent\"\n\n  React.useEffect(() => {\n    if (!isTransparent) return\n    const handleScroll = () => setScrolled(window.scrollY > 50)\n    handleScroll()\n    window.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => window.removeEventListener(\"scroll\", handleScroll)\n  }, [isTransparent])\n\n  const cancelClose = React.useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current)\n      closeTimer.current = null\n    }\n  }, [])\n\n  const scheduleClose = React.useCallback(() => {\n    cancelClose()\n    closeTimer.current = setTimeout(() => {\n      setActiveIndex(null)\n    }, CLOSE_DELAY)\n  }, [cancelClose])\n\n  const handleTriggerEnter = React.useCallback(\n    (index: number) => {\n      cancelClose()\n      const item = navItems[index]\n      if ((item?.megaMenuCategories?.length ?? 0) > 0) {\n        setActiveIndex(index)\n      } else {\n        setActiveIndex(null)\n      }\n    },\n    [cancelClose, navItems],\n  )\n\n  const handlePanelEnter = React.useCallback(() => cancelClose(), [cancelClose])\n  const handlePanelLeave = React.useCallback(() => scheduleClose(), [scheduleClose])\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setActiveIndex(null)\n    }\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [])\n\n  const handleFocusOut = React.useCallback((e: React.FocusEvent) => {\n    if (\n      headerRef.current &&\n      e.relatedTarget instanceof Node &&\n      !headerRef.current.contains(e.relatedTarget)\n    ) {\n      setActiveIndex(null)\n    }\n  }, [])\n\n  const activeItem = activeIndex !== null ? navItems[activeIndex] : null\n  const showPanel = activeItem !== null && (activeItem?.megaMenuCategories?.length ?? 0) > 0\n\n  return { menuOpen, setMenuOpen, activeIndex, scrolled, headerRef, isTransparent,\n    activeItem, showPanel, scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave, handleFocusOut }\n}\n\nfunction resolveLinkColor(variant: HeaderProps[\"variant\"], isTransparent: boolean, scrolled: boolean): string {\n  const isOverlay = variant === \"overlay\" || isTransparent\n  if (isOverlay && !(isTransparent && scrolled)) return \"text-white hover:text-white/70\"\n  return \"text-foreground hover:text-muted-foreground\"\n}\n\nfunction useMobileItems(navItems: NavItem[]) {\n  return React.useMemo(() => navItems.map((item) => ({\n    label: item.label, href: item.href ?? \"\",\n    children: item.megaMenuCategories?.map((cat) => ({ label: cat.title, href: cat.href })) ?? [],\n  })), [navItems])\n}\n\nfunction Header({\n  variant = \"default\",\n  navItems = EMPTY_NAV,\n  utilityLinks = EMPTY_UTILITY,\n  promotionEnabled = true,\n  promotionMessages = EMPTY_MESSAGES,\n  logo,\n  onSearchClick,\n  onCartClick,\n  cartHref,\n  labels,\n  className,\n}: HeaderProps) {\n  const MenuIcon = useIcon(\"menu\")\n  const SearchIcon = useIcon(\"search\")\n  const CartIcon = useIcon(\"cart\")\n  const ChevronRightIcon = useIcon(\"chevronRight\")\n\n  const state = useHeaderState(variant, navItems)\n  const { isTransparent, scrolled, menuOpen, setMenuOpen, activeIndex } = state\n  const { headerRef, activeItem, showPanel, handleFocusOut } = state\n  const { scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave } = state\n\n  const hasBackground = variant === \"default\" || (isTransparent && scrolled)\n  const linkColor = resolveLinkColor(variant, isTransparent, scrolled)\n  const navLinkClasses = `text-sm font-sans tracking-wide transition-colors duration-200 ${linkColor}`\n  const mobileItems = useMobileItems(navItems)\n\n  return (\n    <>\n      <header\n        ref={headerRef}\n        className={cn(\n          \"fixed inset-x-0 top-0 z-50 transition-colors duration-200\",\n          hasBackground ? \"bg-background\" : \"bg-transparent\",\n          className,\n        )}\n        onBlur={handleFocusOut}\n      >\n        <PromotionBar enabled={promotionEnabled} messages={promotionMessages} />\n\n        <MobileHeader\n          logo={logo}\n          linkColor={linkColor}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          menuOpen={menuOpen}\n          setMenuOpen={setMenuOpen}\n          labels={labels}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n          MenuIcon={MenuIcon}\n        />\n\n        <DesktopHeader\n          logo={logo}\n          navItems={navItems}\n          utilityLinks={utilityLinks}\n          linkColor={linkColor}\n          navLinkClasses={navLinkClasses}\n          hasBackground={hasBackground}\n          activeIndex={activeIndex}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          labels={labels}\n          handleTriggerEnter={handleTriggerEnter}\n          scheduleClose={scheduleClose}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n        />\n\n        <MegaMenuPanel\n          activeItem={activeItem ?? null}\n          showPanel={showPanel}\n          onMouseEnter={handlePanelEnter}\n          onMouseLeave={handlePanelLeave}\n          ChevronRightIcon={ChevronRightIcon}\n        />\n      </header>\n\n      <MobileMenuDrawer\n        open={menuOpen}\n        onOpenChange={setMenuOpen}\n        items={mobileItems}\n        labels={labels ? { close: labels.closeMenu, back: undefined } : undefined}\n      />\n    </>\n  )\n}\n\nexport { Header, type HeaderProps }\n"],"mappings":"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"}
+{"version":3,"file":"header.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/header.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { cn } from \"../../ui/utils\";\nimport { MobileMenuDrawer } from \"./mobile-menu-drawer\";\nimport { PromotionBar } from \"./promotion-bar\";\nimport type { HeaderProps, NavItem, NavChild } from \"../types\";\n\ntype IconComponent = React.ComponentType<{ className?: string }>;\nconst CLOSE_DELAY = 150;\nconst EMPTY_NAV: NavItem[] = [];\nconst EMPTY_UTILITY: NavChild[] = [];\nconst EMPTY_MESSAGES: string[] = [];\n\nfunction CartElement({\n  cartHref,\n  onCartClick,\n  linkColor,\n  label,\n  CartIcon,\n}: {\n  cartHref?: string;\n  onCartClick?: () => void;\n  linkColor: string;\n  label: string;\n  CartIcon: IconComponent;\n}) {\n  if (cartHref) {\n    return (\n      <a\n        href={cartHref}\n        className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n        aria-label={label}\n      >\n        <CartIcon className=\"size-5\" />\n      </a>\n    );\n  }\n  if (onCartClick) {\n    return (\n      <button\n        onClick={onCartClick}\n        className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n        aria-label={label}\n      >\n        <CartIcon className=\"size-5\" />\n      </button>\n    );\n  }\n  return null;\n}\n\nfunction MegaMenuPanel({\n  activeItem,\n  showPanel,\n  onMouseEnter,\n  onMouseLeave,\n  ChevronRightIcon,\n}: {\n  activeItem: NavItem | null;\n  showPanel: boolean;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  ChevronRightIcon: IconComponent;\n}) {\n  const categories = activeItem?.megaMenuCategories;\n  const featured = activeItem?.megaMenuFeatured;\n\n  return (\n    <div\n      className={cn(\n        \"hidden overflow-hidden transition-all duration-300 ease-out lg:block\",\n        showPanel ? \"max-h-125 translate-y-0 opacity-100\" : \"max-h-0 -translate-y-1 opacity-0\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"region\"\n      aria-label=\"Submenu\"\n    >\n      <div className=\"border-b border-border bg-background p-8\">\n        {categories && categories.length > 0 ? (\n          <div className=\"flex gap-12\">\n            <MegaMenuCategories categories={categories} />\n            {featured && featured.length > 0 && (\n              <MegaMenuFeatured featured={featured} ChevronRightIcon={ChevronRightIcon} />\n            )}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction MegaMenuCategories({\n  categories,\n}: {\n  categories: NonNullable<NavItem[\"megaMenuCategories\"]>;\n}) {\n  const columnGroups: (typeof categories)[] = [];\n  for (const cat of categories) {\n    if (cat.stackWithPrevious && columnGroups.length > 0) {\n      columnGroups[columnGroups.length - 1]!.push(cat);\n    } else {\n      columnGroups.push([cat]);\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 justify-between gap-10\">\n      {columnGroups.map((group) => (\n        <div key={group[0]!.id ?? group[0]!.title} className=\"flex w-50 min-w-0 flex-col gap-6\">\n          {group.map((cat) => (\n            <div key={cat.id ?? cat.title}>\n              <a\n                href={cat.href}\n                className=\"mb-3 block text-sm font-normal text-foreground transition-colors duration-200 hover:text-muted-foreground\"\n              >\n                {cat.title}\n              </a>\n              <ul className=\"flex flex-col gap-1.5\">\n                {cat.items?.map((item) => (\n                  <li key={item.href}>\n                    <a\n                      href={item.href}\n                      className=\"text-sm text-muted-foreground transition-colors duration-200 hover:text-foreground\"\n                    >\n                      {item.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction MegaMenuFeatured({\n  featured,\n  ChevronRightIcon,\n}: {\n  featured: NonNullable<NavItem[\"megaMenuFeatured\"]>;\n  ChevronRightIcon: IconComponent;\n}) {\n  return (\n    <div className=\"flex shrink-0 gap-6\">\n      {featured.map((feat) => (\n        <a key={feat.id ?? feat.href} href={feat.href} className=\"group w-40\">\n          <div className=\"relative mb-2 aspect-[4/5] overflow-hidden rounded-[var(--enad-card-radius)] bg-muted\">\n            {feat.image?.src && (\n              <img\n                src={feat.image.src}\n                alt={feat.image.alt ?? feat.label}\n                className=\"size-full object-cover\"\n              />\n            )}\n          </div>\n          <span className=\"flex items-center gap-1 text-sm text-foreground transition-colors duration-200 group-hover:text-muted-foreground\">\n            {feat.label}\n            <ChevronRightIcon className=\"mt-px size-4\" />\n          </span>\n        </a>\n      ))}\n    </div>\n  );\n}\n\ninterface MobileHeaderProps {\n  logo: React.ReactNode;\n  linkColor: string;\n  onSearchClick?: () => void;\n  cartHref?: string;\n  onCartClick?: () => void;\n  menuOpen: boolean;\n  setMenuOpen: (open: boolean) => void;\n  labels?: HeaderProps[\"labels\"];\n  SearchIcon: IconComponent;\n  CartIcon: IconComponent;\n  MenuIcon: IconComponent;\n}\n\nfunction MobileHeader({\n  logo,\n  linkColor,\n  onSearchClick,\n  cartHref,\n  onCartClick,\n  menuOpen,\n  setMenuOpen,\n  labels,\n  SearchIcon,\n  CartIcon,\n  MenuIcon,\n}: MobileHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 lg:hidden\">\n      <a href=\"/\" className=\"shrink-0\">\n        {logo}\n      </a>\n\n      <div className=\"flex items-center gap-3\">\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n        <button\n          onClick={() => setMenuOpen(true)}\n          className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n          aria-label={labels?.menu ?? \"Open menu\"}\n          aria-expanded={menuOpen}\n        >\n          <MenuIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n\ninterface DesktopHeaderProps {\n  logo: React.ReactNode;\n  navItems: NavItem[];\n  utilityLinks: NavChild[];\n  linkColor: string;\n  navLinkClasses: string;\n  hasBackground: boolean;\n  activeIndex: number | null;\n  onSearchClick?: () => void;\n  cartHref?: string;\n  onCartClick?: () => void;\n  labels?: HeaderProps[\"labels\"];\n  handleTriggerEnter: (index: number) => void;\n  scheduleClose: () => void;\n  SearchIcon: IconComponent;\n  CartIcon: IconComponent;\n}\n\nfunction DesktopHeader({\n  logo,\n  navItems,\n  utilityLinks,\n  linkColor,\n  navLinkClasses,\n  hasBackground,\n  activeIndex,\n  onSearchClick,\n  cartHref,\n  onCartClick,\n  labels,\n  handleTriggerEnter,\n  scheduleClose,\n  SearchIcon,\n  CartIcon,\n}: DesktopHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"hidden items-center justify-between px-8 py-4 lg:flex\",\n        hasBackground && \"border-b border-border\",\n      )}\n    >\n      <a href=\"/\" className=\"shrink-0\">\n        {logo}\n      </a>\n\n      <nav className=\"flex flex-1 items-center justify-center gap-6\">\n        {navItems.map((item, index) => {\n          const hasDropdown = (item.megaMenuCategories?.length ?? 0) > 0;\n          return (\n            <a\n              key={item.id ?? item.label}\n              href={item.href ?? \"\"}\n              className={navLinkClasses}\n              onMouseEnter={() => handleTriggerEnter(index)}\n              onMouseLeave={scheduleClose}\n              onFocus={() => handleTriggerEnter(index)}\n              {...(hasDropdown && {\n                \"aria-expanded\": activeIndex === index,\n                \"aria-haspopup\": \"true\" as const,\n              })}\n            >\n              {item.label}\n            </a>\n          );\n        })}\n      </nav>\n\n      <div className=\"flex shrink-0 items-center gap-5\">\n        {utilityLinks.map((link) => (\n          <a key={link.label} href={link.href} className={navLinkClasses}>\n            {link.label}\n          </a>\n        ))}\n\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction useHeaderState(variant: HeaderProps[\"variant\"], navItems: NavItem[]) {\n  const [menuOpen, setMenuOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);\n  const [scrolled, setScrolled] = React.useState(false);\n  const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const headerRef = React.useRef<HTMLElement>(null);\n\n  const isTransparent = variant === \"transparent\";\n\n  React.useEffect(() => {\n    if (!isTransparent) return;\n    const handleScroll = () => setScrolled(window.scrollY > 50);\n    handleScroll();\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [isTransparent]);\n\n  const cancelClose = React.useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current);\n      closeTimer.current = null;\n    }\n  }, []);\n\n  const scheduleClose = React.useCallback(() => {\n    cancelClose();\n    closeTimer.current = setTimeout(() => {\n      setActiveIndex(null);\n    }, CLOSE_DELAY);\n  }, [cancelClose]);\n\n  const handleTriggerEnter = React.useCallback(\n    (index: number) => {\n      cancelClose();\n      const item = navItems[index];\n      if ((item?.megaMenuCategories?.length ?? 0) > 0) {\n        setActiveIndex(index);\n      } else {\n        setActiveIndex(null);\n      }\n    },\n    [cancelClose, navItems],\n  );\n\n  const handlePanelEnter = React.useCallback(() => cancelClose(), [cancelClose]);\n  const handlePanelLeave = React.useCallback(() => scheduleClose(), [scheduleClose]);\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setActiveIndex(null);\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, []);\n\n  const handleFocusOut = React.useCallback((e: React.FocusEvent) => {\n    if (\n      headerRef.current &&\n      e.relatedTarget instanceof Node &&\n      !headerRef.current.contains(e.relatedTarget)\n    ) {\n      setActiveIndex(null);\n    }\n  }, []);\n\n  const activeItem = activeIndex !== null ? navItems[activeIndex] : null;\n  const showPanel = activeItem !== null && (activeItem?.megaMenuCategories?.length ?? 0) > 0;\n\n  return {\n    menuOpen,\n    setMenuOpen,\n    activeIndex,\n    scrolled,\n    headerRef,\n    isTransparent,\n    activeItem,\n    showPanel,\n    scheduleClose,\n    handleTriggerEnter,\n    handlePanelEnter,\n    handlePanelLeave,\n    handleFocusOut,\n  };\n}\n\nfunction resolveLinkColor(\n  variant: HeaderProps[\"variant\"],\n  isTransparent: boolean,\n  scrolled: boolean,\n): string {\n  const isOverlay = variant === \"overlay\" || isTransparent;\n  if (isOverlay && !(isTransparent && scrolled)) return \"text-white hover:text-white/70\";\n  return \"text-foreground hover:text-muted-foreground\";\n}\n\nfunction useMobileItems(navItems: NavItem[]) {\n  return React.useMemo(\n    () =>\n      navItems.map((item) => ({\n        label: item.label,\n        href: item.href ?? \"\",\n        children:\n          item.megaMenuCategories?.map((cat) => ({ label: cat.title, href: cat.href })) ?? [],\n      })),\n    [navItems],\n  );\n}\n\nfunction Header({\n  variant = \"default\",\n  navItems = EMPTY_NAV,\n  utilityLinks = EMPTY_UTILITY,\n  promotionEnabled = true,\n  promotionMessages = EMPTY_MESSAGES,\n  logo,\n  onSearchClick,\n  onCartClick,\n  cartHref,\n  labels,\n  className,\n}: HeaderProps) {\n  const MenuIcon = useIcon(\"menu\");\n  const SearchIcon = useIcon(\"search\");\n  const CartIcon = useIcon(\"cart\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const state = useHeaderState(variant, navItems);\n  const { isTransparent, scrolled, menuOpen, setMenuOpen, activeIndex } = state;\n  const { headerRef, activeItem, showPanel, handleFocusOut } = state;\n  const { scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave } = state;\n\n  const hasBackground = variant === \"default\" || (isTransparent && scrolled);\n  const linkColor = resolveLinkColor(variant, isTransparent, scrolled);\n  const navLinkClasses = `text-sm font-sans tracking-wide transition-colors duration-200 ${linkColor}`;\n  const mobileItems = useMobileItems(navItems);\n\n  return (\n    <>\n      <header\n        ref={headerRef}\n        className={cn(\n          \"fixed inset-x-0 top-0 z-50 transition-colors duration-200\",\n          hasBackground ? \"bg-background\" : \"bg-transparent\",\n          className,\n        )}\n        onBlur={handleFocusOut}\n      >\n        <PromotionBar enabled={promotionEnabled} messages={promotionMessages} />\n\n        <MobileHeader\n          logo={logo}\n          linkColor={linkColor}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          menuOpen={menuOpen}\n          setMenuOpen={setMenuOpen}\n          labels={labels}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n          MenuIcon={MenuIcon}\n        />\n\n        <DesktopHeader\n          logo={logo}\n          navItems={navItems}\n          utilityLinks={utilityLinks}\n          linkColor={linkColor}\n          navLinkClasses={navLinkClasses}\n          hasBackground={hasBackground}\n          activeIndex={activeIndex}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          labels={labels}\n          handleTriggerEnter={handleTriggerEnter}\n          scheduleClose={scheduleClose}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n        />\n\n        <MegaMenuPanel\n          activeItem={activeItem ?? null}\n          showPanel={showPanel}\n          onMouseEnter={handlePanelEnter}\n          onMouseLeave={handlePanelLeave}\n          ChevronRightIcon={ChevronRightIcon}\n        />\n      </header>\n\n      <MobileMenuDrawer\n        open={menuOpen}\n        onOpenChange={setMenuOpen}\n        items={mobileItems}\n        labels={labels ? { close: labels.closeMenu, back: undefined } : undefined}\n      />\n    </>\n  );\n}\n\nexport { Header, type HeaderProps };\n"],"mappings":"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"}

package/dist/client/storefront/layout/mobile-menu-drawer.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { useIcon } from "../../icons/icon-context.mjs";
 import { cn } from "../../ui/utils.mjs";
-import { Separator } from "../../ui-resolver/separator.mjs";
 import { Sheet, SheetContent, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import { Separator } from "../../ui-resolver/separator.mjs";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/client/storefront/layout/mobile-menu-drawer.tsx

package/dist/client/storefront/layout/promotion-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promotion-bar.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"mappings":";;;;iBAQS,YAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"promotion-bar.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"mappings":";;;;iBAQS,YAAA,CAAA;EAAe,OAAA;EAAgB,QAAA;EAAe,SAAA;EAAW;AAAA,GAAa,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/layout/promotion-bar.mjs

@@ -27,7 +27,7 @@ function PromotionBar({ enabled = true, messages = [], onDismiss, className }) {
 		className: cn("relative flex items-center justify-center bg-accent text-accent-foreground px-4 py-2 text-center text-sm", className),
 		children: [
 			hasMultiple && /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
+				variant: "plain",
 				size: "icon",
 				className: "absolute left-1 size-7 text-accent-foreground hover:bg-accent-foreground/10",
 				onClick: prev,
@@ -39,7 +39,7 @@ function PromotionBar({ enabled = true, messages = [], onDismiss, className }) {
 				children: messages[currentIndex]
 			}),
 			hasMultiple && /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
+				variant: "plain",
 				size: "icon",
 				className: "absolute right-8 size-7 text-accent-foreground hover:bg-accent-foreground/10",
 				onClick: next,
@@ -47,7 +47,7 @@ function PromotionBar({ enabled = true, messages = [], onDismiss, className }) {
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
 			}),
 			onDismiss && /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
+				variant: "plain",
 				size: "icon",
 				className: "absolute right-1 size-7 text-accent-foreground hover:bg-accent-foreground/10",
 				onClick: handleDismiss,

package/dist/client/storefront/layout/promotion-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"promotion-bar.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { Button } from \"../../ui/button\"\nimport { cn } from \"../../ui/utils\"\nimport type { PromotionBarProps } from \"../types\"\n\nfunction PromotionBar({\n  enabled = true,\n  messages = [],\n  onDismiss,\n  className,\n}: PromotionBarProps) {\n  const ChevronLeftIcon = useIcon(\"chevronLeft\")\n  const ChevronRightIcon = useIcon(\"chevronRight\")\n  const CloseIcon = useIcon(\"close\")\n\n  const [currentIndex, setCurrentIndex] = React.useState(0)\n  const [dismissed, setDismissed] = React.useState(false)\n\n  if (!enabled || dismissed || messages.length === 0) return null\n\n  const hasMultiple = messages.length > 1\n\n  const prev = () => {\n    setCurrentIndex((i) => (i - 1 + messages.length) % messages.length)\n  }\n\n  const next = () => {\n    setCurrentIndex((i) => (i + 1) % messages.length)\n  }\n\n  const handleDismiss = () => {\n    setDismissed(true)\n    onDismiss?.()\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center bg-accent text-accent-foreground px-4 py-2 text-center text-sm\",\n        className,\n      )}\n    >\n      {hasMultiple && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute left-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={prev}\n          aria-label=\"Previous message\"\n        >\n          <ChevronLeftIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      <span className=\"px-8\">{messages[currentIndex]}</span>\n\n      {hasMultiple && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute right-8 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={next}\n          aria-label=\"Next message\"\n        >\n          <ChevronRightIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      {onDismiss && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute right-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={handleDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <CloseIcon className=\"size-4\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport { PromotionBar, type PromotionBarProps }\n"],"mappings":";;;;;;;AAQA,SAAS,aAAa,EACpB,UAAU,MACV,WAAW,EAAE,EACb,WACA,aACoB;CACpB,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;CAChD,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,CAAC,cAAc,mBAAmBA,QAAM,SAAS,EAAE;CACzD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,MAAM;AAEvD,KAAI,CAAC,WAAW,aAAa,SAAS,WAAW,EAAG,QAAO;CAE3D,MAAM,cAAc,SAAS,SAAS;CAEtC,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,IAAI,SAAS,UAAU,SAAS,OAAO;;CAGrE,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,KAAK,SAAS,OAAO;;CAGnD,MAAM,sBAAsB;AAC1B,eAAa,KAAK;AAClB,eAAa;;AAGf,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4GACA,UACD;YAJH;GAMG,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;IAC/B,CAAA;GAGX,oBAAC,QAAD;IAAM,WAAU;cAAQ,SAAS;IAAqB,CAAA;GAErD,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;IAChC,CAAA;GAGV,aACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;IACzB,CAAA;GAEP"}
+{"version":3,"file":"promotion-bar.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Button } from \"../../ui/button\";\nimport { cn } from \"../../ui/utils\";\nimport type { PromotionBarProps } from \"../types\";\n\nfunction PromotionBar({ enabled = true, messages = [], onDismiss, className }: PromotionBarProps) {\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n  const CloseIcon = useIcon(\"close\");\n\n  const [currentIndex, setCurrentIndex] = React.useState(0);\n  const [dismissed, setDismissed] = React.useState(false);\n\n  if (!enabled || dismissed || messages.length === 0) return null;\n\n  const hasMultiple = messages.length > 1;\n\n  const prev = () => {\n    setCurrentIndex((i) => (i - 1 + messages.length) % messages.length);\n  };\n\n  const next = () => {\n    setCurrentIndex((i) => (i + 1) % messages.length);\n  };\n\n  const handleDismiss = () => {\n    setDismissed(true);\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center bg-accent text-accent-foreground px-4 py-2 text-center text-sm\",\n        className,\n      )}\n    >\n      {hasMultiple && (\n        <Button\n          variant=\"plain\"\n          size=\"icon\"\n          className=\"absolute left-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={prev}\n          aria-label=\"Previous message\"\n        >\n          <ChevronLeftIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      <span className=\"px-8\">{messages[currentIndex]}</span>\n\n      {hasMultiple && (\n        <Button\n          variant=\"plain\"\n          size=\"icon\"\n          className=\"absolute right-8 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={next}\n          aria-label=\"Next message\"\n        >\n          <ChevronRightIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      {onDismiss && (\n        <Button\n          variant=\"plain\"\n          size=\"icon\"\n          className=\"absolute right-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={handleDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <CloseIcon className=\"size-4\" />\n        </Button>\n      )}\n    </div>\n  );\n}\n\nexport { PromotionBar, type PromotionBarProps };\n"],"mappings":";;;;;;;AAQA,SAAS,aAAa,EAAE,UAAU,MAAM,WAAW,EAAE,EAAE,WAAW,aAAgC;CAChG,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;CAChD,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,CAAC,cAAc,mBAAmBA,QAAM,SAAS,EAAE;CACzD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,MAAM;AAEvD,KAAI,CAAC,WAAW,aAAa,SAAS,WAAW,EAAG,QAAO;CAE3D,MAAM,cAAc,SAAS,SAAS;CAEtC,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,IAAI,SAAS,UAAU,SAAS,OAAO;;CAGrE,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,KAAK,SAAS,OAAO;;CAGnD,MAAM,sBAAsB;AAC1B,eAAa,KAAK;AAClB,eAAa;;AAGf,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4GACA,UACD;YAJH;GAMG,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;IAC/B,CAAA;GAGX,oBAAC,QAAD;IAAM,WAAU;cAAQ,SAAS;IAAqB,CAAA;GAErD,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;IAChC,CAAA;GAGV,aACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;IACzB,CAAA;GAEP"}

package/dist/client/storefront/primitives/block-heading.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/block-heading.d.ts
+interface BlockHeadingProps {
+  preheader?: string;
+  heading?: string;
+  body?: string;
+  dark?: boolean;
+  align?: "left" | "center" | "right";
+  headingClamp?: string;
+  headingTag?: "h1" | "h2" | "h3";
+  headingSize?: "sm" | "md" | "lg" | "xl";
+  /** Override classes for preheader color */
+  preheaderColor?: string;
+  /** Override classes for heading color */
+  headingColor?: string;
+  /** Override classes for body color */
+  bodyColor?: string;
+  /** Max width constraint for body text */
+  bodyMaxWidth?: string;
+  className?: string;
+}
+declare function BlockHeading({
+  preheader,
+  heading,
+  body,
+  dark,
+  align,
+  headingClamp,
+  headingTag: Tag,
+  headingSize,
+  preheaderColor,
+  headingColor,
+  bodyColor,
+  bodyMaxWidth,
+  className
+}: BlockHeadingProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { BlockHeading, type BlockHeadingProps };
+//# sourceMappingURL=block-heading.d.ts.map

package/dist/client/storefront/primitives/block-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-heading.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/block-heading.tsx"],"mappings":";;;UAWU,iBAAA;EACR,SAAA;EACA,OAAA;EACA,IAAA;EACA,IAAA;EACA,KAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EALA;EAOA,cAAA;EALA;EAOA,YAAA;EALA;EAOA,SAAA;EAJA;EAMA,YAAA;EACA,SAAA;AAAA;AAAA,iBAUO,YAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EACA,IAAA;EACA,KAAA;EACA,YAAA;EACA,UAAA,EAAY,GAAA;EACZ,WAAA;EACA,cAAA;EACA,YAAA;EACA,SAAA;EACA,YAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}