@enadhq/enad-react-sdk 1.2.0 → 1.3.0

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: "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=\"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={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";

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/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"}

package/dist/client/storefront/primitives/block-heading.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/block-heading.tsx
+const headingStyle = {
+	fontWeight: "var(--enad-heading-weight)",
+	letterSpacing: "var(--enad-heading-tracking)",
+	textTransform: "var(--enad-heading-transform)"
+};
+const headingSizeClasses = {
+	sm: "text-xl font-heading md:text-2xl",
+	md: "text-2xl font-heading md:text-3xl",
+	lg: "text-3xl font-heading md:text-4xl lg:text-5xl",
+	xl: "text-3xl font-heading md:text-5xl lg:text-6xl"
+};
+function BlockHeading({ preheader, heading, body, dark = false, align = "left", headingClamp, headingTag: Tag = "h2", headingSize = "md", preheaderColor, headingColor, bodyColor, bodyMaxWidth, className }) {
+	const resolvedPreheaderColor = preheaderColor ?? (dark ? "text-white/70" : "text-muted-foreground");
+	const resolvedHeadingColor = headingColor ?? (dark ? "text-white" : "text-foreground");
+	const resolvedBodyColor = bodyColor ?? (dark ? "text-white/80" : "text-muted-foreground");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col", align === "center" && "items-center text-center", align === "right" && "items-end text-end", align === "left" && "items-start text-start", className),
+		children: [
+			preheader && /* @__PURE__ */ jsx("p", {
+				className: cn("mb-2 text-sm uppercase tracking-widest", resolvedPreheaderColor),
+				children: preheader
+			}),
+			heading && /* @__PURE__ */ jsx(Tag, {
+				className: cn(headingSizeClasses[headingSize], resolvedHeadingColor, headingClamp),
+				style: headingStyle,
+				children: heading
+			}),
+			body && /* @__PURE__ */ jsx("p", {
+				className: cn("mt-4 text-base leading-relaxed", resolvedBodyColor, bodyMaxWidth),
+				children: body
+			})
+		]
+	});
+}
+//#endregion
+export { BlockHeading };
+
+//# sourceMappingURL=block-heading.mjs.map

package/dist/client/storefront/primitives/block-heading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-heading.mjs","names":[],"sources":["../../../../src/client/storefront/primitives/block-heading.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\nconst headingStyle = {\n  fontWeight: \"var(--enad-heading-weight)\",\n  letterSpacing: \"var(--enad-heading-tracking)\",\n  textTransform: \"var(--enad-heading-transform)\",\n} as unknown as React.CSSProperties;\n\ninterface BlockHeadingProps {\n  preheader?: string;\n  heading?: string;\n  body?: string;\n  dark?: boolean;\n  align?: \"left\" | \"center\" | \"right\";\n  headingClamp?: string;\n  headingTag?: \"h1\" | \"h2\" | \"h3\";\n  headingSize?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Override classes for preheader color */\n  preheaderColor?: string;\n  /** Override classes for heading color */\n  headingColor?: string;\n  /** Override classes for body color */\n  bodyColor?: string;\n  /** Max width constraint for body text */\n  bodyMaxWidth?: string;\n  className?: string;\n}\n\nconst headingSizeClasses = {\n  sm: \"text-xl font-heading md:text-2xl\",\n  md: \"text-2xl font-heading md:text-3xl\",\n  lg: \"text-3xl font-heading md:text-4xl lg:text-5xl\",\n  xl: \"text-3xl font-heading md:text-5xl lg:text-6xl\",\n} as const;\n\nfunction BlockHeading({\n  preheader,\n  heading,\n  body,\n  dark = false,\n  align = \"left\",\n  headingClamp,\n  headingTag: Tag = \"h2\",\n  headingSize = \"md\",\n  preheaderColor,\n  headingColor,\n  bodyColor,\n  bodyMaxWidth,\n  className,\n}: BlockHeadingProps) {\n  const resolvedPreheaderColor =\n    preheaderColor ?? (dark ? \"text-white/70\" : \"text-muted-foreground\");\n  const resolvedHeadingColor = headingColor ?? (dark ? \"text-white\" : \"text-foreground\");\n  const resolvedBodyColor = bodyColor ?? (dark ? \"text-white/80\" : \"text-muted-foreground\");\n\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-col\",\n        align === \"center\" && \"items-center text-center\",\n        align === \"right\" && \"items-end text-end\",\n        align === \"left\" && \"items-start text-start\",\n        className,\n      )}\n    >\n      {preheader && (\n        <p className={cn(\"mb-2 text-sm uppercase tracking-widest\", resolvedPreheaderColor)}>\n          {preheader}\n        </p>\n      )}\n      {heading && (\n        <Tag\n          className={cn(headingSizeClasses[headingSize], resolvedHeadingColor, headingClamp)}\n          style={headingStyle}\n        >\n          {heading}\n        </Tag>\n      )}\n      {body && (\n        <p className={cn(\"mt-4 text-base leading-relaxed\", resolvedBodyColor, bodyMaxWidth)}>\n          {body}\n        </p>\n      )}\n    </div>\n  );\n}\n\nexport { BlockHeading, type BlockHeadingProps };\n"],"mappings":";;;;;AAKA,MAAM,eAAe;CACnB,YAAY;CACZ,eAAe;CACf,eAAe;CAChB;AAsBD,MAAM,qBAAqB;CACzB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAS,aAAa,EACpB,WACA,SACA,MACA,OAAO,OACP,QAAQ,QACR,cACA,YAAY,MAAM,MAClB,cAAc,MACd,gBACA,cACA,WACA,cACA,aACoB;CACpB,MAAM,yBACJ,mBAAmB,OAAO,kBAAkB;CAC9C,MAAM,uBAAuB,iBAAiB,OAAO,eAAe;CACpE,MAAM,oBAAoB,cAAc,OAAO,kBAAkB;AAEjE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,yBACA,UAAU,YAAY,4BACtB,UAAU,WAAW,sBACrB,UAAU,UAAU,0BACpB,UACD;YAPH;GASG,aACC,oBAAC,KAAD;IAAG,WAAW,GAAG,0CAA0C,uBAAuB;cAC/E;IACC,CAAA;GAEL,WACC,oBAAC,KAAD;IACE,WAAW,GAAG,mBAAmB,cAAc,sBAAsB,aAAa;IAClF,OAAO;cAEN;IACG,CAAA;GAEP,QACC,oBAAC,KAAD;IAAG,WAAW,GAAG,kCAAkC,mBAAmB,aAAa;cAChF;IACC,CAAA;GAEF"}

package/dist/client/storefront/primitives/cta-group.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/cta-group.d.ts
+interface CTAGroupProps {
+  buttonLabel?: string;
+  buttonHref?: string;
+  textLinkLabel?: string;
+  textLinkHref?: string;
+  dark?: boolean;
+  /** Override the button variant (defaults to "outline" when dark, "primary" when light) */
+  buttonVariant?: "primary" | "outline";
+  className?: string;
+}
+declare function CTAGroup({
+  buttonLabel,
+  buttonHref,
+  textLinkLabel,
+  textLinkHref,
+  dark,
+  buttonVariant,
+  className
+}: CTAGroupProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { CTAGroup, type CTAGroupProps };
+//# sourceMappingURL=cta-group.d.ts.map

package/dist/client/storefront/primitives/cta-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-group.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/cta-group.tsx"],"mappings":";;;UAOU,aAAA;EACR,WAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,IAAA;EALqB;EAOrB,aAAA;EACA,SAAA;AAAA;AAAA,iBAGO,QAAA,CAAA;EACP,WAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,IAAA;EACA,aAAA;EACA;AAAA,GACC,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/primitives/cta-group.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { cn } from "../../ui/utils.mjs";
+import { StorefrontButton } from "./button.mjs";
+import { StorefrontTextLink } from "./text-link.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/cta-group.tsx
+function CTAGroup({ buttonLabel, buttonHref, textLinkLabel, textLinkHref, dark = false, buttonVariant, className }) {
+	if (!buttonLabel && !textLinkLabel) return null;
+	const resolvedVariant = buttonVariant ?? (dark ? "outline" : "primary");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("mt-6 flex flex-wrap items-center gap-4", className),
+		children: [buttonLabel && buttonHref && /* @__PURE__ */ jsx(StorefrontButton, {
+			href: buttonHref,
+			variant: resolvedVariant,
+			children: buttonLabel
+		}), textLinkLabel && textLinkHref && /* @__PURE__ */ jsx(StorefrontTextLink, {
+			href: textLinkHref,
+			className: dark ? "text-white" : void 0,
+			children: textLinkLabel
+		})]
+	});
+}
+//#endregion
+export { CTAGroup };
+
+//# sourceMappingURL=cta-group.mjs.map

package/dist/client/storefront/primitives/cta-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-group.mjs","names":[],"sources":["../../../../src/client/storefront/primitives/cta-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { StorefrontButton } from \"./button\";\nimport { StorefrontTextLink } from \"./text-link\";\n\ninterface CTAGroupProps {\n  buttonLabel?: string;\n  buttonHref?: string;\n  textLinkLabel?: string;\n  textLinkHref?: string;\n  dark?: boolean;\n  /** Override the button variant (defaults to \"outline\" when dark, \"primary\" when light) */\n  buttonVariant?: \"primary\" | \"outline\";\n  className?: string;\n}\n\nfunction CTAGroup({\n  buttonLabel,\n  buttonHref,\n  textLinkLabel,\n  textLinkHref,\n  dark = false,\n  buttonVariant,\n  className,\n}: CTAGroupProps) {\n  if (!buttonLabel && !textLinkLabel) return null;\n\n  const resolvedVariant = buttonVariant ?? (dark ? \"outline\" : \"primary\");\n\n  return (\n    <div className={cn(\"mt-6 flex flex-wrap items-center gap-4\", className)}>\n      {buttonLabel && buttonHref && (\n        <StorefrontButton href={buttonHref} variant={resolvedVariant}>\n          {buttonLabel}\n        </StorefrontButton>\n      )}\n      {textLinkLabel && textLinkHref && (\n        <StorefrontTextLink href={textLinkHref} className={dark ? \"text-white\" : undefined}>\n          {textLinkLabel}\n        </StorefrontTextLink>\n      )}\n    </div>\n  );\n}\n\nexport { CTAGroup, type CTAGroupProps };\n"],"mappings":";;;;;;;AAkBA,SAAS,SAAS,EAChB,aACA,YACA,eACA,cACA,OAAO,OACP,eACA,aACgB;AAChB,KAAI,CAAC,eAAe,CAAC,cAAe,QAAO;CAE3C,MAAM,kBAAkB,kBAAkB,OAAO,YAAY;AAE7D,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,0CAA0C,UAAU;YAAvE,CACG,eAAe,cACd,oBAAC,kBAAD;GAAkB,MAAM;GAAY,SAAS;aAC1C;GACgB,CAAA,EAEpB,iBAAiB,gBAChB,oBAAC,oBAAD;GAAoB,MAAM;GAAc,WAAW,OAAO,eAAe,KAAA;aACtE;GACkB,CAAA,CAEnB"}

package/dist/client/storefront/primitives/image-with-hover.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/image-with-hover.d.ts
+interface ImageWithHoverProps extends React$1.ComponentProps<"img"> {
+  /** Enable hover scale effect using --enad-image-hover-scale and --enad-image-hover-duration */
+  enableHover?: boolean;
+}
+declare function ImageWithHover({
+  enableHover,
+  className,
+  alt,
+  loading,
+  ...props
+}: ImageWithHoverProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ImageWithHover, type ImageWithHoverProps };
+//# sourceMappingURL=image-with-hover.d.ts.map

package/dist/client/storefront/primitives/image-with-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-with-hover.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/image-with-hover.tsx"],"mappings":";;;;UAGU,mBAAA,SAA4B,OAAA,CAAM,cAAA;;EAE1C,WAAA;AAAA;AAAA,iBAGO,cAAA,CAAA;EACP,WAAA;EACA,SAAA;EACA,GAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/primitives/image-with-hover.mjs

@@ -0,0 +1,16 @@
+import { cn } from "../../ui/utils.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/client/storefront/primitives/image-with-hover.tsx
+function ImageWithHover({ enableHover = true, className, alt = "", loading = "lazy", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		alt,
+		loading,
+		className: cn("size-full object-cover", enableHover && "transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]", className),
+		...props
+	});
+}
+//#endregion
+export { ImageWithHover };
+
+//# sourceMappingURL=image-with-hover.mjs.map

package/dist/client/storefront/primitives/image-with-hover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-with-hover.mjs","names":[],"sources":["../../../../src/client/storefront/primitives/image-with-hover.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\n\ninterface ImageWithHoverProps extends React.ComponentProps<\"img\"> {\n  /** Enable hover scale effect using --enad-image-hover-scale and --enad-image-hover-duration */\n  enableHover?: boolean;\n}\n\nfunction ImageWithHover({\n  enableHover = true,\n  className,\n  alt = \"\",\n  loading = \"lazy\",\n  ...props\n}: ImageWithHoverProps) {\n  return (\n    <img\n      alt={alt}\n      loading={loading}\n      className={cn(\n        \"size-full object-cover\",\n        enableHover &&\n          \"transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ImageWithHover, type ImageWithHoverProps };\n"],"mappings":";;;;AAQA,SAAS,eAAe,EACtB,cAAc,MACd,WACA,MAAM,IACN,UAAU,QACV,GAAG,SACmB;AACtB,QACE,oBAAC,OAAD;EACO;EACI;EACT,WAAW,GACT,0BACA,eACE,sHACF,UACD;EACD,GAAI;EACJ,CAAA"}

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

@@ -8,4 +8,7 @@ import { BreadcrumbItemData, StorefrontBreadcrumbs, StorefrontBreadcrumbsProps }
 import { QuickLink, QuickLinks, QuickLinksProps } from "./quick-links.js";
 import { DownloadItem, DownloadItemProps } from "./download-item.js";
 import { SimpleSelect, SimpleSelectOption, SimpleSelectProps } from "../../ui/simple-select.js";
-export { type BreadcrumbItemData, DownloadItem, type DownloadItemProps, type QuickLink, QuickLinks, type QuickLinksProps, type SelectOption, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, StorefrontBreadcrumbs, type StorefrontBreadcrumbsProps, StorefrontButton, type StorefrontButtonProps, type StorefrontButtonSize, type StorefrontButtonVariant, StorefrontCheckbox, type StorefrontCheckboxProps, StorefrontInput, type StorefrontInputProps, StorefrontPagination, type StorefrontPaginationProps, StorefrontSelect, type StorefrontSelectProps, StorefrontTextLink, type StorefrontTextLinkProps };
+import { BlockHeading, BlockHeadingProps } from "./block-heading.js";
+import { CTAGroup, CTAGroupProps } from "./cta-group.js";
+import { ImageWithHover, ImageWithHoverProps } from "./image-with-hover.js";
+export { BlockHeading, type BlockHeadingProps, type BreadcrumbItemData, CTAGroup, type CTAGroupProps, DownloadItem, type DownloadItemProps, ImageWithHover, type ImageWithHoverProps, type QuickLink, QuickLinks, type QuickLinksProps, type SelectOption, SimpleSelect, type SimpleSelectOption, type SimpleSelectProps, StorefrontBreadcrumbs, type StorefrontBreadcrumbsProps, StorefrontButton, type StorefrontButtonProps, type StorefrontButtonSize, type StorefrontButtonVariant, StorefrontCheckbox, type StorefrontCheckboxProps, StorefrontInput, type StorefrontInputProps, StorefrontPagination, type StorefrontPaginationProps, StorefrontSelect, type StorefrontSelectProps, StorefrontTextLink, type StorefrontTextLinkProps };

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

@@ -8,4 +8,7 @@ import { StorefrontBreadcrumbs } from "./breadcrumbs.mjs";
 import { QuickLinks } from "./quick-links.mjs";
 import { DownloadItem } from "./download-item.mjs";
 import { SimpleSelect } from "../../ui/simple-select.mjs";
-export { DownloadItem, QuickLinks, SimpleSelect, StorefrontBreadcrumbs, StorefrontButton, StorefrontCheckbox, StorefrontInput, StorefrontPagination, StorefrontSelect, StorefrontTextLink };
+import { BlockHeading } from "./block-heading.mjs";
+import { CTAGroup } from "./cta-group.mjs";
+import { ImageWithHover } from "./image-with-hover.mjs";
+export { BlockHeading, CTAGroup, DownloadItem, ImageWithHover, QuickLinks, SimpleSelect, StorefrontBreadcrumbs, StorefrontButton, StorefrontCheckbox, StorefrontInput, StorefrontPagination, StorefrontSelect, StorefrontTextLink };

package/dist/client/theme/apply.d.ts

@@ -2,7 +2,7 @@ import { ThemeHash } from "./codec.js";
 
 //#region src/client/theme/apply.d.ts
 interface GenerateOptions {
-  colorSpace?: 'hsl' | 'oklch';
+  colorSpace?: "hsl" | "oklch";
 }
 /**
  * Generate CSS variable declarations from a decoded theme hash.

package/dist/client/theme/apply.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply.d.ts","names":[],"sources":["../../../src/client/theme/apply.ts"],"mappings":";;;UAGiB,eAAA;EACf,UAAA;AAAA;;;;;iBAqHc,gBAAA,CAAiB,IAAA,EAAM,SAAA,EAAW,QAAA,GAAU,eAAA;AAAA,cAsB/C,YAAA;AAAA,cACA,UAAA;;;;;iBAMG,eAAA,CAAgB,WAAA,UAAqB,QAAA"}
+{"version":3,"file":"apply.d.ts","names":[],"sources":["../../../src/client/theme/apply.ts"],"mappings":";;;UAGiB,eAAA;EACf,UAAA;AAAA;;;;;iBAsHc,gBAAA,CAAiB,IAAA,EAAM,SAAA,EAAW,QAAA,GAAU,eAAA;AAAA,cAsB/C,YAAA;AAAA,cACA,UAAA;;;;;iBAMG,eAAA,CAAgB,WAAA,UAAqB,QAAA"}

package/dist/client/theme/apply.mjs

@@ -110,18 +110,6 @@ function buildTokenSections(hash) {
 					TOKEN_DEFAULTS.overlayToOpacity
 				]
 			]
-		},
-		{
-			comment: "Motion",
-			entries: [[
-				"--enad-image-hover-scale",
-				hash.imageHoverScale,
-				TOKEN_DEFAULTS.imageHoverScale
-			], [
-				"--enad-image-hover-duration",
-				hash.imageHoverDuration,
-				TOKEN_DEFAULTS.imageHoverDuration
-			]]
 		}
 	];
 	for (const section of tokenSections) {