@asante-org/atlascopco-vt-litesitegenerator 3.8.4 → 3.8.6

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useId, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { useId, useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -46,12 +46,87 @@ var LsgButton = function (_a) {
   }, children);
 };
 
-function bannerClassName(layout, mobileMediaPosition, background, className) {
-  return ["lsg-banner", "lsg-banner--".concat(layout), "lsg-banner--mobile-media-".concat(mobileMediaPosition),
-  // In AEM this class arrives on the decoration div instead; the SCSS only
-  // sets inherited custom properties, so either position works.
-  background ? "lsg-banner--bg-".concat(background) : "", className].filter(Boolean).join(" ");
+// ─────────────────────────────────────────────────────────────────────────────
+// AEM markup helpers
+//
+// The banner's content region is a parsys in AEM, filled by _cq_template with
+// Group > Title / Text / Button components. These helpers reproduce the HTML
+// those components (and their Sling decoration divs) emit on publish, so the
+// theme CSS written here applies to AEM unchanged. Reference page:
+// /content/vtba/varovac/en (wcmmode=disabled).
+// ─────────────────────────────────────────────────────────────────────────────
+var GRID_COLUMN = "aem-GridColumn aem-GridColumn--default--12";
+/** vtba/components/lsg/structure/group — a responsivegrid with two wrappers. */
+var AemGroup = function (_a) {
+  var styleClasses = _a.styleClasses,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ["lsg-group", styleClasses].filter(Boolean).join(" ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "layout-container-color-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "layout-container-spacing-wrapper aem-Grid aem-Grid--12 aem-Grid--default--12 "
+  }, children)));
+};
+/**
+ * AEM decoration class for a grid column: the component's own class, then either
+ * its authored style classes or — when none are set — the component name.
+ */
+function columnClassName(componentClass, name, styleClass) {
+  return "".concat(componentClass, " ").concat(styleClass !== null && styleClass !== void 0 ? styleClass : name, " ").concat(GRID_COLUMN);
 }
+/** vtba/components/lsg/content/title — type "p" is the pre-title. */
+var AemTitle = function (_a) {
+  var Tag = _a.tag,
+    colour = _a.colour,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: columnClassName("cmp-lsg-title", "title", colour && "cmp-title__colour-".concat(colour))
+  }, /*#__PURE__*/React.createElement(Tag, {
+    className: "cmp-title__element".concat(Tag === "p" ? " cmp-title__element--pretitle" : "")
+  }, children));
+};
+/** vtba/components/lsg/content/text — core text v2 inside the decoration div. */
+var AemText = function (_a) {
+  var id = _a.id,
+    colour = _a.colour,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: columnClassName("cmp-lsg-text", "text", colour && "cmp-text__colour-".concat(colour))
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "cmp-text"
+  }, /*#__PURE__*/React.createElement("p", null, children)));
+};
+/** vtba/components/lsg/content/button — the variant is a style class on the decoration div. */
+var AemButton = function (_a) {
+  var _b, _c;
+  var cta = _a.cta;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-lsg-button button--".concat((_b = cta.variant) !== null && _b !== void 0 ? _b : "primary", " ").concat(GRID_COLUMN)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lsg-button-container"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "lsg-button",
+    href: (_c = cta.href) !== null && _c !== void 0 ? _c : "#",
+    target: cta.external ? "_blank" : undefined,
+    rel: cta.external ? "noopener noreferrer" : undefined,
+    onClick: cta.onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-button__text"
+  }, cta.label))));
+};
+/** Same extension mapping as BannerModel.getVideoMimeType. */
+function videoMimeType(url) {
+  var path = url.split(/[?#]/)[0].toLowerCase();
+  if (path.endsWith(".mp4")) return "video/mp4";
+  if (path.endsWith(".webm")) return "video/webm";
+  if (path.endsWith(".ogg") || path.endsWith(".ogv")) return "video/ogg";
+  return undefined;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// LsgBanner
+// ─────────────────────────────────────────────────────────────────────────────
 var LsgBanner = function (_a) {
   var heading = _a.heading,
     preTitle = _a.preTitle,
@@ -60,10 +135,15 @@ var LsgBanner = function (_a) {
     copy = _a.copy,
     ctas = _a.ctas,
     cta = _a.cta,
+    preTitleColour = _a.preTitleColour,
+    headingColour = _a.headingColour,
+    bodyColour = _a.bodyColour,
     mediaType = _a.mediaType,
     imageUrl = _a.imageUrl,
     _b = _a.imageAlt,
     imageAlt = _b === void 0 ? "" : _b,
+    mediaHref = _a.mediaHref,
+    mediaTarget = _a.mediaTarget,
     videoUrl = _a.videoUrl,
     videoPoster = _a.videoPoster,
     _c = _a.videoControls,
@@ -79,65 +159,78 @@ var LsgBanner = function (_a) {
     _h = _a.mobileMediaPosition,
     mobileMediaPosition = _h === void 0 ? "top" : _h,
     background = _a.background,
+    accent = _a.accent,
     _j = _a.headingTag,
-    headingTag = _j === void 0 ? "h1" : _j,
+    headingTag = _j === void 0 ? "h2" : _j,
     className = _a.className;
+  var textId = "text-".concat(useId().replace(/[^a-zA-Z0-9]/g, ""));
   var resolvedPreTitle = preTitle !== null && preTitle !== void 0 ? preTitle : eyebrow;
   var resolvedBody = body !== null && body !== void 0 ? body : copy;
   var actions = ((ctas === null || ctas === void 0 ? void 0 : ctas.length) ? ctas : cta ? [cta] : []).slice(0, 3);
   var resolvedMediaType = mediaType !== null && mediaType !== void 0 ? mediaType : videoUrl ? "video" : "image";
   var hasMedia = layout !== "text-only" && (resolvedMediaType === "video" ? Boolean(videoUrl) : Boolean(imageUrl));
-  var HeadingTag = headingTag;
-  return /*#__PURE__*/React.createElement("section", {
-    className: bannerClassName(layout, mobileMediaPosition, background, className),
-    "data-lsg-is": "banner",
-    "data-lsg-banner-layout": layout,
-    "data-lsg-banner-mobile-media": mobileMediaPosition,
-    "data-lsg-banner-media": hasMedia ? resolvedMediaType : "none"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__shell"
-  }, hasMedia && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__media"
-  }, resolvedMediaType === "video" && videoUrl ? /*#__PURE__*/React.createElement("video", {
-    className: "lsg-banner__video",
-    src: videoUrl,
-    poster: videoPoster,
-    controls: videoControls,
-    autoPlay: videoAutoPlay,
-    muted: videoMuted,
-    loop: videoLoop,
-    playsInline: true,
-    "aria-label": imageAlt || heading
-  }) : imageUrl ? /*#__PURE__*/React.createElement("img", {
-    className: "lsg-banner__image",
+  var picture = /*#__PURE__*/React.createElement("picture", {
+    className: "lsg-banner__image"
+  }, /*#__PURE__*/React.createElement("img", {
     src: imageUrl,
-    alt: imageAlt
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__content"
-  }, resolvedPreTitle && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__pre-title"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "lsg-banner__pre-title-marker",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "lsg-banner__pre-title-text"
-  }, resolvedPreTitle)), /*#__PURE__*/React.createElement(HeadingTag, {
-    className: "lsg-banner__heading"
-  }, heading), resolvedBody && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__body"
-  }, /*#__PURE__*/React.createElement("p", null, resolvedBody)), actions.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__actions"
-  }, actions.map(function (action, index) {
-    var _a, _b;
-    return /*#__PURE__*/React.createElement(LsgButton, {
-      key: "".concat(action.label, "-").concat((_a = action.href) !== null && _a !== void 0 ? _a : "button", "-").concat(index),
-      href: action.href,
-      external: action.external,
-      variant: (_b = action.variant) !== null && _b !== void 0 ? _b : "primary",
-      onClick: action.onClick,
-      className: "lsg-banner__cta"
-    }, action.label);
-  })))));
+    alt: imageAlt,
+    loading: "lazy"
+  }));
+  return (
+    /*#__PURE__*/
+    // The Sling decoration div. Background / accent style-system classes land
+    // here in AEM, not on the section.
+    React.createElement("div", {
+      className: ["banner teaser", background && "lsg-banner--bg-".concat(background), accent && "lsg-banner--accent-".concat(accent), GRID_COLUMN, className].filter(Boolean).join(" ")
+    }, /*#__PURE__*/React.createElement("section", {
+      className: "lsg-banner lsg-banner--".concat(layout, " lsg-banner--mobile-media-").concat(mobileMediaPosition),
+      "data-lsg-is": "banner",
+      "data-lsg-banner-layout": layout,
+      "data-lsg-banner-mobile-media": mobileMediaPosition,
+      "data-lsg-banner-media": hasMedia ? resolvedMediaType : "none"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__shell"
+    }, hasMedia && /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__media"
+    }, resolvedMediaType === "video" && videoUrl ? /*#__PURE__*/React.createElement("video", {
+      className: "lsg-banner__video",
+      poster: videoPoster,
+      autoPlay: videoAutoPlay,
+      muted: videoMuted,
+      loop: videoLoop,
+      controls: videoControls,
+      playsInline: true,
+      "aria-label": imageAlt
+    }, /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: videoMimeType(videoUrl)
+    })) : mediaHref ? /*#__PURE__*/React.createElement("a", {
+      className: "lsg-banner__media-link",
+      href: mediaHref,
+      target: mediaTarget
+    }, picture) : picture), /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__content"
+    }, /*#__PURE__*/React.createElement(AemGroup, {
+      styleClasses: "lsg-group-display--flex lsg-group-direction--column lsg-group-gap--16"
+    }, resolvedPreTitle && /*#__PURE__*/React.createElement(AemTitle, {
+      tag: "p",
+      colour: preTitleColour
+    }, resolvedPreTitle), /*#__PURE__*/React.createElement(AemTitle, {
+      tag: headingTag,
+      colour: headingColour
+    }, heading)), resolvedBody && /*#__PURE__*/React.createElement(AemGroup, null, /*#__PURE__*/React.createElement(AemText, {
+      id: textId,
+      colour: bodyColour
+    }, resolvedBody)), actions.length > 0 && /*#__PURE__*/React.createElement(AemGroup, {
+      styleClasses: "lsg-group-display--flex lsg-group-gap--16"
+    }, actions.map(function (action, index) {
+      var _a;
+      return /*#__PURE__*/React.createElement(AemButton, {
+        key: "".concat(action.label, "-").concat((_a = action.href) !== null && _a !== void 0 ? _a : "button", "-").concat(index),
+        cta: action
+      });
+    }))))))
+  );
 };
 
 function isSafeUrl$1(url) {
@@ -2476,6 +2569,357 @@ var LsgCards = function (_a) {
   }));
 };
 
+/**
+ * Mirrors AEM `vtba/components/content/generated-list` in "LSG Card" mode,
+ * including its `cq:htmlTag` wrapper. Card styling comes from LsgCard.
+ */
+var LsgGeneratedList = function (_a) {
+  var items = _a.items,
+    _b = _a.cardVariant,
+    cardVariant = _b === void 0 ? "withImage" : _b,
+    _c = _a.maxColumns,
+    maxColumns = _c === void 0 ? 3 : _c,
+    className = _a.className;
+  var wrapperClassName = ["c-row--divider", "generated-list", className].filter(Boolean).join(" ");
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "generated-list-container"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "generated-list-container__ul lsg-cards lsg-cards--cols-".concat(maxColumns),
+    "data-total-items": items.length,
+    "data-item-per-row": maxColumns,
+    "data-columns": maxColumns
+  }, items.map(function (item, index) {
+    var _a;
+    return /*#__PURE__*/React.createElement("li", {
+      className: "lsg-cards__item",
+      key: "".concat(item.href, "-").concat(index)
+    }, /*#__PURE__*/React.createElement(LsgCard, _extends({}, item, {
+      imageAlt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : item.title,
+      variant: cardVariant
+    })));
+  }))));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var DEFAULT_LABELS = {
+  nav: "Pagination",
+  first: "First",
+  previous: "Previous",
+  next: "Next",
+  last: "Last",
+  page: function (page) {
+    return "Page ".concat(page);
+  }
+};
+/**
+ * Page numbers to show: always the first and last page plus the current page
+ * ± `siblingCount`. A gap of a single page shows that page rather than "…".
+ * Page 2 of 6 → [1, 2, 3, "ellipsis", 6].
+ */
+function getLsgPaginationRange(currentPage, totalPages, siblingCount) {
+  if (siblingCount === void 0) {
+    siblingCount = 1;
+  }
+  if (totalPages < 1) {
+    return [];
+  }
+  var current = Math.min(Math.max(currentPage, 1), totalPages);
+  var pages = new Set([1, totalPages]);
+  for (var page = current - siblingCount; page <= current + siblingCount; page += 1) {
+    if (page >= 1 && page <= totalPages) {
+      pages.add(page);
+    }
+  }
+  var sorted = Array.from(pages).sort(function (a, b) {
+    return a - b;
+  });
+  var range = [];
+  sorted.forEach(function (page, index) {
+    var previous = sorted[index - 1];
+    if (previous !== undefined) {
+      if (page - previous === 2) {
+        range.push(previous + 1);
+      } else if (page - previous > 2) {
+        range.push("ellipsis");
+      }
+    }
+    range.push(page);
+  });
+  return range;
+}
+// Left-pointing glyphs on a 24×24 grid; next/last mirror them. Each control
+// carries every glyph its themes need and theme CSS shows one: theme 1 uses
+// the chevrons (‹ «), theme 2 the bar (|<), theme 3 the arrow (←).
+var GLYPHS = {
+  previous: {
+    chevron: "M14.5 6.5 9 12l5.5 5.5",
+    arrow: "M19 12H5M11 6l-6 6 6 6"
+  },
+  first: {
+    "chevron-double": "M12 6.5 6.5 12l5.5 5.5M18 6.5 12.5 12l5.5 5.5",
+    bar: "M7 6.5v11M16.5 6.5 11 12l5.5 5.5"
+  }
+};
+var PaginationIcon = function (_a) {
+  var kind = _a.kind;
+  var glyphs = GLYPHS[kind === "first" || kind === "last" ? "first" : "previous"];
+  var mirrored = kind === "next" || kind === "last";
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "lsg-pagination__icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: mirrored ? "matrix(-1 0 0 1 24 0)" : undefined
+  }, Object.entries(glyphs).map(function (_a) {
+    var name = _a[0],
+      d = _a[1];
+    return /*#__PURE__*/React.createElement("path", {
+      key: name,
+      className: "lsg-pagination__glyph lsg-pagination__glyph--".concat(name),
+      d: d
+    });
+  })));
+};
+var LsgPagination = function (_a) {
+  var currentPage = _a.currentPage,
+    totalPages = _a.totalPages,
+    onPageChange = _a.onPageChange,
+    _b = _a.siblingCount,
+    siblingCount = _b === void 0 ? 1 : _b,
+    _c = _a.truncate,
+    truncate = _c === void 0 ? true : _c,
+    _d = _a.showFirstLast,
+    showFirstLast = _d === void 0 ? false : _d,
+    labels = _a.labels,
+    className = _a.className;
+  if (totalPages <= 1) {
+    return null;
+  }
+  var text = __assign(__assign({}, DEFAULT_LABELS), labels);
+  var current = Math.min(Math.max(currentPage, 1), totalPages);
+  var goTo = function (page) {
+    if (page !== current && page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+  var control = function (kind, target, disabled) {
+    var label = /*#__PURE__*/React.createElement("span", {
+      className: "lsg-pagination__label"
+    }, text[kind]);
+    var iconFirst = kind === "first" || kind === "previous";
+    return /*#__PURE__*/React.createElement("li", {
+      className: "lsg-pagination__item lsg-pagination__item--".concat(kind)
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "lsg-pagination__control lsg-pagination__control--".concat(kind),
+      disabled: disabled,
+      onClick: function () {
+        return goTo(target);
+      }
+    }, iconFirst && /*#__PURE__*/React.createElement(PaginationIcon, {
+      kind: kind
+    }), label, !iconFirst && /*#__PURE__*/React.createElement(PaginationIcon, {
+      kind: kind
+    })));
+  };
+  return /*#__PURE__*/React.createElement("nav", {
+    className: ["lsg-pagination", className].filter(Boolean).join(" "),
+    "aria-label": text.nav
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "lsg-pagination__list"
+  }, showFirstLast && control("first", 1, current === 1), control("previous", current - 1, current === 1), (truncate ? getLsgPaginationRange(current, totalPages, siblingCount) : Array.from({
+    length: totalPages
+  }, function (_, index) {
+    return index + 1;
+  })).map(function (item, index) {
+    return item === "ellipsis" ? /*#__PURE__*/React.createElement("li", {
+      key: "ellipsis-".concat(index),
+      className: "lsg-pagination__item lsg-pagination__ellipsis",
+      "aria-hidden": "true"
+    }, "\u2026") : /*#__PURE__*/React.createElement("li", {
+      key: item,
+      className: "lsg-pagination__item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "lsg-pagination__page",
+      "aria-label": text.page(item),
+      "aria-current": item === current ? "page" : undefined,
+      onClick: function () {
+        return goTo(item);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "lsg-pagination__page-text",
+      "data-text": item
+    }, item)));
+  }), control("next", current + 1, current === totalPages), showFirstLast && control("last", totalPages, current === totalPages)));
+};
+
+var defaultStatusLabel = function (page, totalPages) {
+  return "Page ".concat(page, " of ").concat(totalPages);
+};
+/**
+ * Client-side, paginated card list for the AEM Generated List when "Enable
+ * client-side React rendering" is on. ac-react-app mounts it into the
+ * component's placeholder; see mapAemGeneratedListJson for the data.
+ */
+var LsgBlogOverview = function (_a) {
+  var items = _a.items,
+    _b = _a.cardVariant,
+    cardVariant = _b === void 0 ? "withImage" : _b,
+    _c = _a.maxColumns,
+    maxColumns = _c === void 0 ? 3 : _c,
+    _d = _a.rows,
+    rows = _d === void 0 ? 3 : _d,
+    paginationLabels = _a.paginationLabels,
+    _e = _a.showFirstLast,
+    showFirstLast = _e === void 0 ? false : _e,
+    _f = _a.truncatePages,
+    truncatePages = _f === void 0 ? true : _f,
+    _g = _a.statusLabel,
+    statusLabel = _g === void 0 ? defaultStatusLabel : _g,
+    className = _a.className;
+  var rootRef = useRef(null);
+  var _h = useState(1),
+    page = _h[0],
+    setPage = _h[1];
+  var _j = useState(""),
+    status = _j[0],
+    setStatus = _j[1];
+  var pageSize = Math.max(1, maxColumns * Math.max(1, rows));
+  var totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  // Clamped on read, so a shorter item list never strands the user on an empty page.
+  var currentPage = Math.min(page, totalPages);
+  var pageItems = items.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+  var handlePageChange = function (nextPage) {
+    var _a;
+    setPage(nextPage);
+    setStatus(statusLabel(nextPage, totalPages));
+    // Bring the list back into view when its top has scrolled off the screen.
+    var root = rootRef.current;
+    if (root && root.getBoundingClientRect().top < 0) {
+      var reduceMotion = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches;
+      root.scrollIntoView({
+        behavior: reduceMotion ? "auto" : "smooth",
+        block: "start"
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: ["lsg-blog-overview", className].filter(Boolean).join(" ")
+  }, /*#__PURE__*/React.createElement(LsgCards, {
+    columns: maxColumns,
+    cards: pageItems.map(function (item) {
+      var _a;
+      return __assign(__assign({}, item), {
+        imageAlt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : item.title,
+        variant: cardVariant
+      });
+    })
+  }), /*#__PURE__*/React.createElement(LsgPagination, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: handlePageChange,
+    labels: paginationLabels,
+    showFirstLast: showFirstLast,
+    truncate: truncatePages
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "lsg-visually-hidden",
+    "aria-live": "polite"
+  }, status));
+};
+
+var CARD_VARIANTS = ["withImage", "onlyText", "withIcon"];
+var isRecord = function (value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+};
+/** Trimmed string, or undefined for anything empty or not a string. */
+var text = function (value) {
+  return typeof value === "string" && value.trim() ? value.trim() : undefined;
+};
+function toColumns(value) {
+  var columns = Number.parseInt(String(value), 10);
+  return columns >= 2 && columns <= 5 ? columns : 3;
+}
+function toCardVariant(value) {
+  var _a;
+  return (_a = CARD_VARIANTS.find(function (variant) {
+    return variant === value;
+  })) !== null && _a !== void 0 ? _a : "withImage";
+}
+function toItem(raw) {
+  var _a;
+  if (!isRecord(raw)) {
+    return null;
+  }
+  var path = text(raw.path);
+  var title = (_a = text(raw.referenceTitle)) !== null && _a !== void 0 ? _a : text(raw["jcr:title"]);
+  if (!path || !title) {
+    return null;
+  }
+  var image = text(raw.referenceImage);
+  return {
+    // The HTL adds the extension with `@ extension='html'`; the JSON doesn't.
+    href: path.endsWith(".html") ? path : "".concat(path, ".html"),
+    title: title,
+    preTitle: text(raw.referencePreTitle),
+    subtitle: text(raw.referenceSubtitle),
+    description: text(raw.referenceText),
+    // DAM file names can contain spaces.
+    imageUrl: image ? encodeURI(image) : undefined
+  };
+}
+/**
+ * Maps the AEM Generated List JSON to LsgBlogOverview props. Tolerates missing
+ * or malformed fields and never throws on the shape; items without a path or
+ * title are dropped.
+ */
+function mapAemGeneratedListJson(json) {
+  var data = isRecord(json) ? json : {};
+  var items = Array.isArray(data.items) ? data.items.map(toItem).filter(function (item) {
+    return item !== null;
+  }) : [];
+  return {
+    items: items,
+    cardVariant: toCardVariant(data.cardVariant),
+    maxColumns: toColumns(data.maxColumns)
+  };
+}
+
 var LSG_ICON_PATHS = {
   bars: "M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z",
   chevronLeft: "M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z",
@@ -5318,6 +5762,9 @@ var BASE_COMPONENTS = {
   LsgCarousel: LsgCarousel,
   LsgCard: LsgCard,
   LsgCards: LsgCards,
+  LsgGeneratedList: LsgGeneratedList,
+  LsgPagination: LsgPagination,
+  LsgBlogOverview: LsgBlogOverview,
   LsgBreadcrumb: LsgBreadcrumb,
   LsgLogo: LsgLogo,
   LsgNavigation: LsgNavigation,
@@ -5358,6 +5805,9 @@ function createThemeComponents(themeName) {
     LsgCarousel: createThemeComponent(themeName, "carousel", BASE_COMPONENTS.LsgCarousel),
     LsgCard: createThemeComponent(themeName, "card", BASE_COMPONENTS.LsgCard),
     LsgCards: createThemeComponent(themeName, "cards", BASE_COMPONENTS.LsgCards),
+    LsgGeneratedList: createThemeComponent(themeName, "generated-list", BASE_COMPONENTS.LsgGeneratedList),
+    LsgPagination: createThemeComponent(themeName, "pagination", BASE_COMPONENTS.LsgPagination),
+    LsgBlogOverview: createThemeComponent(themeName, "blog-overview", BASE_COMPONENTS.LsgBlogOverview),
     LsgBreadcrumb: createThemeComponent(themeName, "breadcrumb", BASE_COMPONENTS.LsgBreadcrumb),
     LsgLogo: createThemeComponent(themeName, "logo", BASE_COMPONENTS.LsgLogo),
     LsgNavigation: createThemeComponent(themeName, "navigation", BASE_COMPONENTS.LsgNavigation),
@@ -5390,6 +5840,9 @@ var Theme1LsgButton = theme1Components.LsgButton,
   Theme1LsgCarousel = theme1Components.LsgCarousel,
   Theme1LsgCard = theme1Components.LsgCard,
   Theme1LsgCards = theme1Components.LsgCards,
+  Theme1LsgGeneratedList = theme1Components.LsgGeneratedList,
+  Theme1LsgPagination = theme1Components.LsgPagination,
+  Theme1LsgBlogOverview = theme1Components.LsgBlogOverview,
   Theme1LsgBreadcrumb = theme1Components.LsgBreadcrumb,
   Theme1LsgLogo = theme1Components.LsgLogo,
   Theme1LsgNavigation = theme1Components.LsgNavigation,
@@ -5421,6 +5874,9 @@ var Theme2LsgButton = theme2Components.LsgButton,
   Theme2LsgCarousel = theme2Components.LsgCarousel,
   Theme2LsgCard = theme2Components.LsgCard,
   Theme2LsgCards = theme2Components.LsgCards,
+  Theme2LsgGeneratedList = theme2Components.LsgGeneratedList,
+  Theme2LsgPagination = theme2Components.LsgPagination,
+  Theme2LsgBlogOverview = theme2Components.LsgBlogOverview,
   Theme2LsgBreadcrumb = theme2Components.LsgBreadcrumb,
   Theme2LsgLogo = theme2Components.LsgLogo,
   Theme2LsgNavigation = theme2Components.LsgNavigation,
@@ -5450,6 +5906,9 @@ var Theme3LsgButton = theme3Components.LsgButton,
   Theme3LsgCarousel = theme3Components.LsgCarousel,
   Theme3LsgCard = theme3Components.LsgCard,
   Theme3LsgCards = theme3Components.LsgCards,
+  Theme3LsgGeneratedList = theme3Components.LsgGeneratedList,
+  Theme3LsgPagination = theme3Components.LsgPagination,
+  Theme3LsgBlogOverview = theme3Components.LsgBlogOverview,
   Theme3LsgBreadcrumb = theme3Components.LsgBreadcrumb,
   Theme3LsgLogo = theme3Components.LsgLogo,
   Theme3LsgNavigation = theme3Components.LsgNavigation,
@@ -5473,5 +5932,5 @@ var Theme3LsgButton = theme3Components.LsgButton,
   theme3Components.LsgFormFieldConsent;
   theme3Components.LsgFormStep;
 
-export { LsgBanner, LsgBreadcrumb, LsgButton, LsgCard, LsgCards, LsgCarousel, LsgCarouselController, LsgFooter, LsgHeader, LsgHero, LsgHeroCard, LsgHeroController, LsgLanguageSwitcher, LsgLogo, LsgNavigation, LsgQuickLinks, LsgSearchOverlay, LsgSearchTrigger, LsgSocialMediaIcons, LsgTable, Theme1LsgBanner, Theme1LsgBreadcrumb, Theme1LsgButton, Theme1LsgCard, Theme1LsgCards, Theme1LsgCarousel, Theme1LsgFooter, Theme1LsgHeader, Theme1LsgHero, Theme1LsgLanguageSwitcher, Theme1LsgLogo, Theme1LsgNavigation, Theme1LsgQuickLinks, Theme1LsgSearchOverlay, Theme1LsgSearchTrigger, Theme1LsgSocialMediaIcons, Theme1LsgTable, Theme2LsgBanner, Theme2LsgBreadcrumb, Theme2LsgButton, Theme2LsgCard, Theme2LsgCards, Theme2LsgCarousel, Theme2LsgFooter, Theme2LsgHeader, Theme2LsgHero, Theme2LsgLanguageSwitcher, Theme2LsgLogo, Theme2LsgNavigation, Theme2LsgQuickLinks, Theme2LsgSearchOverlay, Theme2LsgSearchTrigger, Theme2LsgSocialMediaIcons, Theme2LsgTable, Theme3LsgBanner, Theme3LsgBreadcrumb, Theme3LsgButton, Theme3LsgCard, Theme3LsgCards, Theme3LsgCarousel, Theme3LsgFooter, Theme3LsgHeader, Theme3LsgHero, Theme3LsgLanguageSwitcher, Theme3LsgLogo, Theme3LsgNavigation, Theme3LsgQuickLinks, Theme3LsgSearchOverlay, Theme3LsgSearchTrigger, Theme3LsgSocialMediaIcons, Theme3LsgTable, getTelValue, initTelPickers, theme1Components, theme2Components, theme3Components };
+export { LsgBanner, LsgBlogOverview, LsgBreadcrumb, LsgButton, LsgCard, LsgCards, LsgCarousel, LsgCarouselController, LsgFooter, LsgGeneratedList, LsgHeader, LsgHero, LsgHeroCard, LsgHeroController, LsgLanguageSwitcher, LsgLogo, LsgNavigation, LsgPagination, LsgQuickLinks, LsgSearchOverlay, LsgSearchTrigger, LsgSocialMediaIcons, LsgTable, Theme1LsgBanner, Theme1LsgBlogOverview, Theme1LsgBreadcrumb, Theme1LsgButton, Theme1LsgCard, Theme1LsgCards, Theme1LsgCarousel, Theme1LsgFooter, Theme1LsgGeneratedList, Theme1LsgHeader, Theme1LsgHero, Theme1LsgLanguageSwitcher, Theme1LsgLogo, Theme1LsgNavigation, Theme1LsgPagination, Theme1LsgQuickLinks, Theme1LsgSearchOverlay, Theme1LsgSearchTrigger, Theme1LsgSocialMediaIcons, Theme1LsgTable, Theme2LsgBanner, Theme2LsgBlogOverview, Theme2LsgBreadcrumb, Theme2LsgButton, Theme2LsgCard, Theme2LsgCards, Theme2LsgCarousel, Theme2LsgFooter, Theme2LsgGeneratedList, Theme2LsgHeader, Theme2LsgHero, Theme2LsgLanguageSwitcher, Theme2LsgLogo, Theme2LsgNavigation, Theme2LsgPagination, Theme2LsgQuickLinks, Theme2LsgSearchOverlay, Theme2LsgSearchTrigger, Theme2LsgSocialMediaIcons, Theme2LsgTable, Theme3LsgBanner, Theme3LsgBlogOverview, Theme3LsgBreadcrumb, Theme3LsgButton, Theme3LsgCard, Theme3LsgCards, Theme3LsgCarousel, Theme3LsgFooter, Theme3LsgGeneratedList, Theme3LsgHeader, Theme3LsgHero, Theme3LsgLanguageSwitcher, Theme3LsgLogo, Theme3LsgNavigation, Theme3LsgPagination, Theme3LsgQuickLinks, Theme3LsgSearchOverlay, Theme3LsgSearchTrigger, Theme3LsgSocialMediaIcons, Theme3LsgTable, getLsgPaginationRange, getTelValue, initTelPickers, mapAemGeneratedListJson, theme1Components, theme2Components, theme3Components };
 //# sourceMappingURL=index.esm.js.map