@chinggis.systems/collection-ui 1.0.0 → 1.0.1

package/dist/CollectionRenderer.js

@@ -1,293 +1,306 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { defaultAdapters } from "./defaultAdapters";
-import { compact, cx, hasCollections, hasItems, sortCollections, } from "./utils";
-const defaultLabels = {
-    all: "All",
-    viewAll: "View all",
-    readMore: "Read more",
-    previous: "Previous",
-    next: "Next",
-};
-export function CollectionRenderer({ collection, layout, adapters, labels, className, }) {
-    const resolvedLayout = layout ?? collection.layout;
-    if (!resolvedLayout) {
-        return null;
-    }
-    return (_jsx("div", { className: cx("collection-ui", className), "data-layout": resolvedLayout.name, "data-direction": resolvedLayout.direction ?? undefined, style: {
-            "--collection-ui-columns": resolvedLayout.columns ?? undefined,
-        }, children: _jsx(CollectionBody, { collection: collection, layout: resolvedLayout, adapters: adapters, labels: { ...defaultLabels, ...labels } }) }));
-}
-function CollectionBody({ collection, layout, adapters, labels, }) {
-    switch (layout.name) {
-        case "dynamic":
-        case "list": {
-            if (!hasItems(collection)) {
-                return null;
-            }
-            if (layout.direction === "vertical") {
-                return (_jsx(VerticalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels, numbered: layout.isNumbered }));
-            }
-            return (_jsx(HorizontalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
-        }
-        case "grid":
-        case "relative": {
-            if (!hasItems(collection)) {
-                return null;
-            }
-            return (_jsx(GridList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
-        }
-        case "carousel": {
-            if (!hasItems(collection)) {
-                return null;
-            }
-            return (_jsx(HorizontalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
-        }
-        case "grid-title": {
-            if (!hasCollections(collection)) {
-                return null;
-            }
-            return (_jsx(GridTitle, { collection: collection, adapters: adapters, labels: labels, itemLimit: layout.itemLimit ?? 3 }));
-        }
-        case "hero":
-        case "banner": {
-            if (!collection.imageUrl) {
-                return null;
-            }
-            return (_jsx(LargeBanner, { collection: collection, adapters: adapters, labels: labels }));
-        }
-        case "special": {
-            if (!hasItems(collection)) {
-                return null;
-            }
-            return (_jsx(SpecialItem, { collection: collection, adapters: adapters, labels: labels }));
-        }
-        case "slide":
-            if (!hasCollections(collection)) {
-                return null;
-            }
-            return (_jsx(SlideShow, { collections: compact(collection.collections), adapters: adapters, labels: labels }));
-        case "featured": {
-            if (!hasCollections(collection)) {
-                return null;
-            }
-            return (_jsx(FeaturedBanners, { collections: compact(collection.collections), adapters: adapters, labels: labels }));
-        }
-        case "image-grid": {
-            if (!hasCollections(collection)) {
-                return null;
-            }
-            return (_jsx(ImageGrid, { collection: collection, adapters: adapters, labels: labels, variant: layout.shape === "square" ? "square" : "circle" }));
-        }
-        case "block-grid": {
-            if (!hasCollections(collection)) {
-                return null;
-            }
-            return (_jsx(ImageGrid, { collection: collection, adapters: adapters, labels: labels, variant: "block" }));
-        }
-        default:
-            return null;
-    }
-}
-function getAdapters(adapters) {
-    return { ...defaultAdapters, ...adapters };
-}
-function renderItem(adapters, props) {
-    return adapters.renderItem({
-        ...props,
-        renderBookMedia: adapters.renderBookMedia,
-        renderPrice: adapters.renderPrice,
-        renderHtml: adapters.renderHtml,
-    });
-}
-function Container({ adapters, children, className, }) {
-    const resolved = getAdapters(adapters);
-    return resolved.renderContainer(children, {
-        className: cx("collection-ui-container", className),
-    });
-}
-function LinkAdapter({ adapters, href, children, className, collection, item, onClick, }) {
-    const resolved = getAdapters(adapters);
-    if (!href) {
-        return _jsx(_Fragment, { children: children });
-    }
-    return (_jsx(_Fragment, { children: resolved.renderLink({
-            href,
-            children,
-            className,
-            collection,
-            item,
-            onClick,
-        }) }));
-}
-function ImageAdapter(props) {
-    const resolved = getAdapters(props.adapters);
-    if (!props.src) {
-        return null;
-    }
-    return _jsx(_Fragment, { children: resolved.renderImage(props) });
-}
-function SectionTitle({ collection, adapters, labels, small, }) {
-    const resolved = getAdapters(adapters);
-    const href = resolved.resolveCollectionHref(collection);
-    return (_jsxs("div", { className: "collection-ui-title", children: [_jsxs("div", { className: "collection-ui-title__row", children: [_jsx("h2", { className: cx("collection-ui-title__heading", small && "collection-ui-title__heading--small"), children: href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, children: collection.name })) : (collection.name) }), href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, className: "collection-ui-title__link", children: small ? labels.all : labels.viewAll })) : null] }), collection.description ? (_jsx("p", { className: "collection-ui-title__description", children: collection.description })) : null] }));
-}
-function HorizontalList({ collection, items, adapters, labels, }) {
-    const id = useId().replaceAll(":", "");
-    const resolved = getAdapters(adapters);
-    const collectionHref = resolved.resolveCollectionHref(collection);
-    const slides = items.map((item, index) => {
-        const href = resolved.resolveItemHref(item);
-        return renderItem(resolved, {
-            item,
-            href,
-            index,
-            variant: "card",
-            collection,
-        });
-    });
-    if (collectionHref) {
-        slides.push(_jsxs(LinkAdapter, { adapters: adapters, href: collectionHref, collection: collection, className: "collection-ui-view-all", children: [_jsx("span", { className: "collection-ui-view-all__icon", "aria-hidden": "true", children: ">" }), _jsx("span", { children: labels.viewAll })] }));
-    }
-    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-horizontal", "aria-labelledby": `collection-title-${id}`, children: [_jsx("div", { id: `collection-title-${id}`, children: _jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }) }), resolved.renderCarousel({
-                    id: `collection-carousel-${id}`,
-                    slides,
-                    className: "collection-ui-carousel__track",
-                    slideClassName: "collection-ui-carousel__slide",
-                    previousLabel: labels.previous,
-                    nextLabel: labels.next,
-                    showControls: true,
-                    slidesPerView: "auto",
-                    slidesPerGroupAuto: true,
-                    spaceBetween: 20,
-                })] }) }));
-}
-function GridList({ collection, items, adapters, labels, }) {
-    const resolved = getAdapters(adapters);
-    const collectionHref = resolved.resolveCollectionHref(collection);
-    const cards = items.map((item, index) => {
-        const href = resolved.resolveItemHref(item);
-        return (_jsx("div", { className: "collection-ui-grid__item", children: renderItem(resolved, {
-                item,
-                href,
-                index,
-                variant: "card",
-                collection,
-            }) }, item.id));
-    });
-    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-grid", "aria-label": collection.name ?? undefined, children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), _jsxs("div", { className: "collection-ui-grid__items", children: [cards, collectionHref ? (_jsxs(LinkAdapter, { adapters: adapters, href: collectionHref, collection: collection, className: "collection-ui-view-all collection-ui-grid__view-all", children: [_jsx("span", { className: "collection-ui-view-all__icon", "aria-hidden": "true", children: ">" }), _jsx("span", { children: labels.viewAll })] })) : null] })] }) }));
-}
-function VerticalList({ collection, items, adapters, labels, numbered, limit, hideTitle, }) {
-    const resolved = getAdapters(adapters);
-    const visibleItems = limit ? items.slice(0, limit) : items;
-    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-vertical", children: [hideTitle ? null : (_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels })), _jsx("div", { className: "collection-ui-vertical__grid", role: "list", children: visibleItems.map((item, index) => {
-                        const href = resolved.resolveItemHref(item);
-                        return (_jsx("div", { className: "collection-ui-vertical__item", role: "listitem", children: renderItem(resolved, {
-                                item,
-                                href,
-                                index,
-                                number: numbered ? index + 1 : undefined,
-                                variant: "vertical",
-                                collection,
-                            }) }, item.id));
-                    }) })] }) }));
-}
-function GridTitle({ collection, adapters, labels, itemLimit, }) {
-    const id = useId().replaceAll(":", "");
-    const resolved = getAdapters(adapters);
-    const slides = compact(collection.collections).map((child) => (_jsxs("div", { className: "collection-ui-grid-title__panel", children: [_jsx(SectionTitle, { collection: child, adapters: adapters, labels: labels, small: true }), _jsx(VerticalList, { collection: child, items: compact(child.items), adapters: adapters, labels: labels, numbered: true, limit: itemLimit, hideTitle: true })] }, child.id)));
-    return (_jsx("section", { className: "collection-ui-band", children: _jsxs(Container, { adapters: adapters, children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), resolved.renderCarousel({
-                    id: `collection-grid-title-${id}`,
-                    slides,
-                    className: "collection-ui-grid-title",
-                    slideClassName: "collection-ui-grid-title__slide",
-                    previousLabel: labels.previous,
-                    nextLabel: labels.next,
-                    showControls: true,
-                    slidesPerView: 1,
-                    slidesPerGroupAuto: false,
-                    spaceBetween: 24,
-                    breakpoints: {
-                        1280: {
-                            slidesPerView: 2,
-                        },
-                    },
-                })] }) }));
-}
-function LargeBanner({ collection, adapters, labels, }) {
-    const resolved = getAdapters(adapters);
-    const href = resolved.resolveCollectionHref(collection);
-    const handleClick = () => resolved.onCollectionClick?.(collection, href);
-    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsxs("section", { className: "collection-ui-banner", children: [_jsxs("div", { className: "collection-ui-banner__copy", children: [collection.type ? (_jsx("div", { className: "collection-ui-banner__eyebrow", children: resolved.formatCollectionType(collection.type) })) : null, _jsx("h2", { className: "collection-ui-banner__title", children: collection.name }), collection.description ? (_jsx("p", { className: "collection-ui-banner__description", children: collection.description })) : null, href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, onClick: handleClick, className: "collection-ui-button", children: labels.readMore })) : null] }), collection.imageUrl ? (_jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: collection.imageUrl, alt: collection.name ?? "Collection banner", width: 1003, height: 564, priority: true, sizes: "(max-width: 768px) 100vw, 1003px", className: "collection-ui-banner__image", collection: collection, style: { height: "auto" } }) })) : null] }) }));
-}
-function SpecialItem({ collection, adapters, labels, }) {
-    const item = compact(collection.items)[0];
-    const resolved = getAdapters(adapters);
-    if (!item) {
-        return null;
-    }
-    const href = resolved.resolveItemHref(item);
-    return (_jsx("section", { className: "collection-ui-band", children: _jsx(Container, { adapters: adapters, children: _jsxs("div", { className: "collection-ui-special", children: [renderItem(resolved, {
-                        item,
-                        href,
-                        index: 0,
-                        variant: "special",
-                        collection,
-                    }), href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, item: item, collection: collection, onClick: () => resolved.onItemClick?.(item, href), className: "collection-ui-button collection-ui-special__button", children: labels.readMore })) : null] }) }) }));
-}
-function FeaturedBanners({ collections, adapters, labels, }) {
-    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsx("div", { className: cx("collection-ui-featured", collections.length >= 3 && "collection-ui-featured--three"), children: sortCollections(collections).map((collection) => (_jsx(FeaturedBanner, { collection: collection, adapters: adapters, labels: labels }, collection.id))) }) }));
-}
-function SlideShow({ collections, adapters, labels, }) {
-    const id = useId().replaceAll(":", "");
-    const resolved = getAdapters(adapters);
-    const slides = sortCollections(collections).map((collection) => (_jsx("div", { className: "collection-ui-slide__item", children: _jsx(FeaturedBanner, { collection: collection, adapters: adapters, labels: labels }) }, collection.id)));
-    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsx("section", { className: "collection-ui-slide", children: resolved.renderCarousel({
-                id: `collection-slide-${id}`,
-                slides,
-                className: "collection-ui-slide__track",
-                slideClassName: "collection-ui-slide__slide",
-                previousLabel: labels.previous,
-                nextLabel: labels.next,
-                showControls: true,
-                effect: "coverflow",
-                centeredSlides: true,
-                loop: slides.length > 1,
-                slidesPerView: 1.1,
-                slidesPerGroupAuto: false,
-                spaceBetween: 20,
-                breakpoints: {
-                    768: {
-                        slidesPerView: 1.35,
-                        spaceBetween: 24,
-                    },
-                    1200: {
-                        slidesPerView: 1.6,
-                        spaceBetween: 28,
-                    },
-                },
-            }) }) }));
-}
-function FeaturedBanner({ collection, adapters, labels, }) {
-    const resolved = getAdapters(adapters);
-    const href = resolved.resolveCollectionHref(collection);
-    const handleClick = () => resolved.onCollectionClick?.(collection, href);
-    if (!collection.imageUrl) {
-        return null;
-    }
-    return (_jsxs("article", { className: "collection-ui-featured-card", children: [_jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: collection.imageUrl, alt: collection.name ?? "", width: 740, height: 417, priority: true, className: "collection-ui-featured-card__image", collection: collection, style: { height: "auto" } }) }), _jsxs("div", { className: "collection-ui-featured-card__body", children: [_jsx("h2", { className: "collection-ui-featured-card__title", children: _jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: collection.name }) }), collection.description ? (_jsx("p", { className: "collection-ui-featured-card__description", children: collection.description })) : null, href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, onClick: handleClick, className: "collection-ui-featured-card__link", children: labels.readMore })) : null] })] }));
-}
-function ImageGrid({ collection, adapters, labels, variant, }) {
-    const resolved = getAdapters(adapters);
-    const imageCollections = sortCollections(collection.collections).filter((item) => item.imageUrl);
-    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: cx("collection-ui-image-grid", `collection-ui-image-grid--${variant}`), children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), _jsx("div", { className: "collection-ui-image-grid__items", children: imageCollections.map((child, index) => {
-                        const href = resolved.resolveCollectionHref(child);
-                        const handleClick = () => resolved.onCollectionClick?.(child, href);
-                        return (_jsx("div", { className: cx("collection-ui-image-grid__item", variant === "block" &&
-                                index % 2 === 0 &&
-                                "collection-ui-image-grid__item--end"), children: _jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: child, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: child.imageUrl ?? "", alt: child.name ?? "", width: variant === "circle" ? 200 : 176, height: variant === "circle" ? 200 : 64, className: cx("collection-ui-image-grid__image", variant === "circle" &&
-                                        "collection-ui-image-grid__image--circle", variant === "square" &&
-                                        "collection-ui-image-grid__image--square"), collection: child }) }) }, child.id));
-                    }) })] }) }));
-}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { defaultAdapters } from "./defaultAdapters";
+import { compact, cx, hasCollections, hasItems, sortCollections, } from "./utils";
+const defaultLabels = {
+    all: "All",
+    viewAll: "View all",
+    readMore: "Read more",
+    previous: "Previous",
+    next: "Next",
+};
+export function CollectionRenderer({ collection, layout, adapters, labels, className, }) {
+    const resolvedLayout = layout ?? collection.layout;
+    const isPreview = className?.split(/\s+/).includes("collection-ui--preview");
+    if (!resolvedLayout) {
+        return null;
+    }
+    return (_jsx("div", { className: cx("collection-ui", className), "data-layout": resolvedLayout.name, "data-direction": resolvedLayout.direction ?? undefined, onClickCapture: isPreview ? preventPreviewNavigation : undefined, style: {
+            "--collection-ui-columns": resolvedLayout.columns ?? undefined,
+        }, children: _jsx(CollectionBody, { collection: collection, layout: resolvedLayout, adapters: adapters, labels: { ...defaultLabels, ...labels } }) }));
+}
+function preventPreviewNavigation(event) {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+        return;
+    }
+    const link = target.closest("a[href]");
+    if (link) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+function CollectionBody({ collection, layout, adapters, labels, }) {
+    switch (layout.name) {
+        case "dynamic":
+        case "list": {
+            if (!hasItems(collection)) {
+                return null;
+            }
+            if (layout.direction === "vertical") {
+                return (_jsx(VerticalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels, numbered: layout.isNumbered }));
+            }
+            return (_jsx(HorizontalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
+        }
+        case "grid":
+        case "relative": {
+            if (!hasItems(collection)) {
+                return null;
+            }
+            return (_jsx(GridList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
+        }
+        case "carousel": {
+            if (!hasItems(collection)) {
+                return null;
+            }
+            return (_jsx(HorizontalList, { collection: collection, items: compact(collection.items), adapters: adapters, labels: labels }));
+        }
+        case "grid-title": {
+            if (!hasCollections(collection)) {
+                return null;
+            }
+            return (_jsx(GridTitle, { collection: collection, adapters: adapters, labels: labels, itemLimit: layout.itemLimit ?? 3 }));
+        }
+        case "hero":
+        case "banner": {
+            if (!collection.imageUrl) {
+                return null;
+            }
+            return (_jsx(LargeBanner, { collection: collection, adapters: adapters, labels: labels }));
+        }
+        case "special": {
+            if (!hasItems(collection)) {
+                return null;
+            }
+            return (_jsx(SpecialItem, { collection: collection, adapters: adapters, labels: labels }));
+        }
+        case "slide":
+            if (!hasCollections(collection)) {
+                return null;
+            }
+            return (_jsx(SlideShow, { collections: compact(collection.collections), adapters: adapters, labels: labels }));
+        case "featured": {
+            if (!hasCollections(collection)) {
+                return null;
+            }
+            return (_jsx(FeaturedBanners, { collections: compact(collection.collections), adapters: adapters, labels: labels }));
+        }
+        case "image-grid": {
+            if (!hasCollections(collection)) {
+                return null;
+            }
+            return (_jsx(ImageGrid, { collection: collection, adapters: adapters, labels: labels, variant: layout.shape === "square" ? "square" : "circle" }));
+        }
+        case "block-grid": {
+            if (!hasCollections(collection)) {
+                return null;
+            }
+            return (_jsx(ImageGrid, { collection: collection, adapters: adapters, labels: labels, variant: "block" }));
+        }
+        default:
+            return null;
+    }
+}
+function getAdapters(adapters) {
+    return { ...defaultAdapters, ...adapters };
+}
+function renderItem(adapters, props) {
+    return adapters.renderItem({
+        ...props,
+        renderBookMedia: adapters.renderBookMedia,
+        renderPrice: adapters.renderPrice,
+        renderHtml: adapters.renderHtml,
+    });
+}
+function Container({ adapters, children, className, }) {
+    const resolved = getAdapters(adapters);
+    return resolved.renderContainer(children, {
+        className: cx("collection-ui-container", className),
+    });
+}
+function LinkAdapter({ adapters, href, children, className, collection, item, onClick, }) {
+    const resolved = getAdapters(adapters);
+    if (!href) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(_Fragment, { children: resolved.renderLink({
+            href,
+            children,
+            className,
+            collection,
+            item,
+            onClick,
+        }) }));
+}
+function ImageAdapter(props) {
+    const resolved = getAdapters(props.adapters);
+    if (!props.src) {
+        return null;
+    }
+    return _jsx(_Fragment, { children: resolved.renderImage(props) });
+}
+function SectionTitle({ collection, adapters, labels, small, actions, }) {
+    const resolved = getAdapters(adapters);
+    const href = resolved.resolveCollectionHref(collection);
+    return (_jsxs("div", { className: "collection-ui-title", children: [_jsxs("div", { className: "collection-ui-title__row", children: [_jsx("h2", { className: cx("collection-ui-title__heading", small && "collection-ui-title__heading--small"), children: href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, children: collection.name })) : (collection.name) }), href || actions ? (_jsxs("div", { className: "collection-ui-title__actions", children: [href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, className: "collection-ui-title__link", children: small ? labels.all : labels.viewAll })) : null, actions] })) : null] }), collection.description ? (_jsx("p", { className: "collection-ui-title__description", children: collection.description })) : null] }));
+}
+function HorizontalList({ collection, items, adapters, labels, }) {
+    const id = useId().replaceAll(":", "");
+    const carouselId = `collection-carousel-${id}`;
+    const resolved = getAdapters(adapters);
+    const collectionHref = resolved.resolveCollectionHref(collection);
+    const slides = items.map((item, index) => {
+        const href = resolved.resolveItemHref(item);
+        return renderItem(resolved, {
+            item,
+            href,
+            index,
+            variant: "card",
+            collection,
+        });
+    });
+    if (collectionHref) {
+        slides.push(_jsxs(LinkAdapter, { adapters: adapters, href: collectionHref, collection: collection, className: "collection-ui-view-all", children: [_jsx("span", { className: "collection-ui-view-all__icon", "aria-hidden": "true", children: ">" }), _jsx("span", { children: labels.viewAll })] }));
+    }
+    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-horizontal", "aria-labelledby": `collection-title-${id}`, children: [_jsx("div", { id: `collection-title-${id}`, children: _jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels, actions: _jsxs("div", { className: "collection-ui-title__controls", children: [_jsx("button", { type: "button", "aria-controls": carouselId, "aria-label": labels.previous, className: `prev-btn-${carouselId} collection-ui-carousel__prev-${carouselId} prev-btn`, children: "<" }), _jsx("button", { type: "button", "aria-controls": carouselId, "aria-label": labels.next, className: `next-btn-${carouselId} collection-ui-carousel__next-${carouselId} next-btn`, children: ">" })] }) }) }), resolved.renderCarousel({
+                    id: carouselId,
+                    slides,
+                    className: "collection-ui-carousel__track",
+                    slideClassName: "collection-ui-carousel__slide",
+                    previousLabel: labels.previous,
+                    nextLabel: labels.next,
+                    showControls: false,
+                    slidesPerView: "auto",
+                    slidesPerGroupAuto: true,
+                    spaceBetween: 20,
+                })] }) }));
+}
+function GridList({ collection, items, adapters, labels, }) {
+    const resolved = getAdapters(adapters);
+    const collectionHref = resolved.resolveCollectionHref(collection);
+    const cards = items.map((item, index) => {
+        const href = resolved.resolveItemHref(item);
+        return (_jsx("div", { className: "collection-ui-grid__item", children: renderItem(resolved, {
+                item,
+                href,
+                index,
+                variant: "card",
+                collection,
+            }) }, item.id));
+    });
+    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-grid", "aria-label": collection.name ?? undefined, children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), _jsxs("div", { className: "collection-ui-grid__items", children: [cards, collectionHref ? (_jsxs(LinkAdapter, { adapters: adapters, href: collectionHref, collection: collection, className: "collection-ui-view-all collection-ui-grid__view-all", children: [_jsx("span", { className: "collection-ui-view-all__icon", "aria-hidden": "true", children: ">" }), _jsx("span", { children: labels.viewAll })] })) : null] })] }) }));
+}
+function VerticalList({ collection, items, adapters, labels, numbered, limit, hideTitle, }) {
+    const resolved = getAdapters(adapters);
+    const visibleItems = limit ? items.slice(0, limit) : items;
+    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: "collection-ui-vertical", children: [hideTitle ? null : (_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels })), _jsx("div", { className: "collection-ui-vertical__grid", role: "list", children: visibleItems.map((item, index) => {
+                        const href = resolved.resolveItemHref(item);
+                        return (_jsx("div", { className: "collection-ui-vertical__item", role: "listitem", children: renderItem(resolved, {
+                                item,
+                                href,
+                                index,
+                                number: numbered ? index + 1 : undefined,
+                                variant: "vertical",
+                                collection,
+                            }) }, item.id));
+                    }) })] }) }));
+}
+function GridTitle({ collection, adapters, labels, itemLimit, }) {
+    const id = useId().replaceAll(":", "");
+    const resolved = getAdapters(adapters);
+    const slides = compact(collection.collections).map((child) => (_jsxs("div", { className: "collection-ui-grid-title__panel", children: [_jsx(SectionTitle, { collection: child, adapters: adapters, labels: labels, small: true }), _jsx(VerticalList, { collection: child, items: compact(child.items), adapters: adapters, labels: labels, numbered: true, limit: itemLimit, hideTitle: true })] }, child.id)));
+    return (_jsx("section", { className: "collection-ui-band", children: _jsxs(Container, { adapters: adapters, children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), resolved.renderCarousel({
+                    id: `collection-grid-title-${id}`,
+                    slides,
+                    className: "collection-ui-grid-title",
+                    slideClassName: "collection-ui-grid-title__slide",
+                    previousLabel: labels.previous,
+                    nextLabel: labels.next,
+                    showControls: true,
+                    slidesPerView: 1,
+                    slidesPerGroupAuto: false,
+                    spaceBetween: 24,
+                    breakpoints: {
+                        1280: {
+                            slidesPerView: 2,
+                        },
+                    },
+                })] }) }));
+}
+function LargeBanner({ collection, adapters, labels, }) {
+    const resolved = getAdapters(adapters);
+    const href = resolved.resolveCollectionHref(collection);
+    const handleClick = () => resolved.onCollectionClick?.(collection, href);
+    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsxs("section", { className: "collection-ui-banner", children: [_jsxs("div", { className: "collection-ui-banner__copy", children: [collection.type ? (_jsx("div", { className: "collection-ui-banner__eyebrow", children: resolved.formatCollectionType(collection.type) })) : null, _jsx("h2", { className: "collection-ui-banner__title", children: collection.name }), collection.description ? (_jsx("p", { className: "collection-ui-banner__description", children: collection.description })) : null, href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, onClick: handleClick, className: "collection-ui-button", children: labels.readMore })) : null] }), collection.imageUrl ? (_jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: collection.imageUrl, alt: collection.name ?? "Collection banner", width: 1003, height: 564, priority: true, sizes: "(max-width: 768px) 100vw, 1003px", className: "collection-ui-banner__image", collection: collection, style: { height: "auto" } }) })) : null] }) }));
+}
+function SpecialItem({ collection, adapters, labels, }) {
+    const item = compact(collection.items)[0];
+    const resolved = getAdapters(adapters);
+    if (!item) {
+        return null;
+    }
+    const href = resolved.resolveItemHref(item);
+    return (_jsx("section", { className: "collection-ui-band", children: _jsx(Container, { adapters: adapters, children: _jsxs("div", { className: "collection-ui-special", children: [renderItem(resolved, {
+                        item,
+                        href,
+                        index: 0,
+                        variant: "special",
+                        collection,
+                    }), href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, item: item, collection: collection, onClick: () => resolved.onItemClick?.(item, href), className: "collection-ui-button collection-ui-special__button", children: labels.readMore })) : null] }) }) }));
+}
+function FeaturedBanners({ collections, adapters, labels, }) {
+    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsx("div", { className: cx("collection-ui-featured", collections.length >= 3 && "collection-ui-featured--three"), children: sortCollections(collections).map((collection) => (_jsx(FeaturedBanner, { collection: collection, adapters: adapters, labels: labels }, collection.id))) }) }));
+}
+function SlideShow({ collections, adapters, labels, }) {
+    const id = useId().replaceAll(":", "");
+    const resolved = getAdapters(adapters);
+    const slides = sortCollections(collections).map((collection) => (_jsx("div", { className: "collection-ui-slide__item", children: _jsx(FeaturedBanner, { collection: collection, adapters: adapters, labels: labels }) }, collection.id)));
+    return (_jsx(Container, { adapters: adapters, className: "collection-ui-container--wide", children: _jsx("section", { className: "collection-ui-slide", children: resolved.renderCarousel({
+                id: `collection-slide-${id}`,
+                slides,
+                className: "collection-ui-slide__track",
+                slideClassName: "collection-ui-slide__slide",
+                previousLabel: labels.previous,
+                nextLabel: labels.next,
+                showControls: true,
+                effect: "coverflow",
+                centeredSlides: true,
+                loop: slides.length > 1,
+                slidesPerView: 1.1,
+                slidesPerGroupAuto: false,
+                spaceBetween: 20,
+                breakpoints: {
+                    768: {
+                        slidesPerView: 1.35,
+                        spaceBetween: 24,
+                    },
+                    1200: {
+                        slidesPerView: 1.6,
+                        spaceBetween: 28,
+                    },
+                },
+            }) }) }));
+}
+function FeaturedBanner({ collection, adapters, labels, }) {
+    const resolved = getAdapters(adapters);
+    const href = resolved.resolveCollectionHref(collection);
+    const handleClick = () => resolved.onCollectionClick?.(collection, href);
+    if (!collection.imageUrl) {
+        return null;
+    }
+    return (_jsxs("article", { className: "collection-ui-featured-card", children: [_jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: collection.imageUrl, alt: collection.name ?? "", width: 740, height: 417, priority: true, className: "collection-ui-featured-card__image", collection: collection, style: { height: "auto" } }) }), _jsxs("div", { className: "collection-ui-featured-card__body", children: [_jsx("h2", { className: "collection-ui-featured-card__title", children: _jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: collection, onClick: handleClick, children: collection.name }) }), collection.description ? (_jsx("p", { className: "collection-ui-featured-card__description", children: collection.description })) : null, href ? (_jsx(LinkAdapter, { adapters: adapters, href: href, collection: collection, onClick: handleClick, className: "collection-ui-featured-card__link", children: labels.readMore })) : null] })] }));
+}
+function ImageGrid({ collection, adapters, labels, variant, }) {
+    const resolved = getAdapters(adapters);
+    const imageCollections = sortCollections(collection.collections).filter((item) => item.imageUrl);
+    return (_jsx(Container, { adapters: adapters, children: _jsxs("section", { className: cx("collection-ui-image-grid", `collection-ui-image-grid--${variant}`), children: [_jsx(SectionTitle, { collection: collection, adapters: adapters, labels: labels }), _jsx("div", { className: "collection-ui-image-grid__items", children: imageCollections.map((child, index) => {
+                        const href = resolved.resolveCollectionHref(child);
+                        const handleClick = () => resolved.onCollectionClick?.(child, href);
+                        return (_jsx("div", { className: cx("collection-ui-image-grid__item", variant === "block" &&
+                                index % 2 === 0 &&
+                                "collection-ui-image-grid__item--end"), children: _jsx(LinkAdapter, { adapters: adapters, href: href ?? "", collection: child, onClick: handleClick, children: _jsx(ImageAdapter, { adapters: adapters, src: child.imageUrl ?? "", alt: child.name ?? "", width: variant === "circle" ? 200 : 176, height: variant === "circle" ? 200 : 64, className: cx("collection-ui-image-grid__image", variant === "circle" &&
+                                        "collection-ui-image-grid__image--circle", variant === "square" &&
+                                        "collection-ui-image-grid__image--square"), collection: child }) }) }, child.id));
+                    }) })] }) }));
+}
 //# sourceMappingURL=CollectionRenderer.js.map