@canopy-iiif/app 1.6.22 → 1.8.0

package/ui/dist/index.mjs

@@ -4068,6 +4068,636 @@ function MapPoint() {
   return null;
 }
 MapPoint.displayName = "MapPoint";
+
+// ui/src/content/gallery/Gallery.jsx
+import React40 from "react";
+
+// ui/src/utils/manifestReferences.js
+import React39 from "react";
+var CONTEXT_KEY2 = typeof Symbol === "function" ? Symbol.for("__CANOPY_PAGE_CONTEXT__") : "__CANOPY_PAGE_CONTEXT__";
+function getGlobalRoot() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof global !== "undefined") return global;
+  if (typeof window !== "undefined") return window;
+  return {};
+}
+function getPageContext() {
+  const root = getGlobalRoot();
+  if (root && root[CONTEXT_KEY2]) return root[CONTEXT_KEY2];
+  const ctx = React39.createContext({
+    navigation: null,
+    page: null,
+    site: null,
+    primaryNavigation: []
+  });
+  if (root) root[CONTEXT_KEY2] = ctx;
+  return ctx;
+}
+function normalizeManifestId(raw) {
+  if (!raw) return "";
+  try {
+    const url = new URL(String(raw));
+    url.hash = "";
+    const params = Array.from(url.searchParams.entries()).sort(
+      (a, b) => a[0].localeCompare(b[0]) || a[1].localeCompare(b[1])
+    );
+    url.search = "";
+    params.forEach(([key, value]) => url.searchParams.append(key, value));
+    return url.toString();
+  } catch (_) {
+    return String(raw || "").trim();
+  }
+}
+var PageContextFallback = React39.createContext(null);
+var referencedModule = null;
+function getReferencedModule() {
+  if (typeof window !== "undefined") return null;
+  if (referencedModule) return referencedModule;
+  try {
+    const globalReq = typeof globalThis !== "undefined" && globalThis.__canopyRequire || null;
+    if (typeof globalReq === "function") {
+      referencedModule = globalReq("../../../lib/components/referenced.js");
+      return referencedModule;
+    }
+  } catch (_) {
+    referencedModule = null;
+  }
+  return referencedModule;
+}
+function useReferencedManifestMap() {
+  const PageContext = getPageContext() || PageContextFallback;
+  const pageContext = React39.useContext(PageContext);
+  const referencedItems = pageContext && pageContext.page && Array.isArray(pageContext.page.referencedItems) ? pageContext.page.referencedItems : [];
+  return React39.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    referencedItems.forEach((item) => {
+      if (!item) return;
+      const id = item.id || item.href;
+      if (!id) return;
+      const normalized = normalizeManifestId(id);
+      if (normalized) map.set(normalized, item);
+      map.set(String(id), item);
+    });
+    return map;
+  }, [referencedItems]);
+}
+function resolveManifestReferences(ids, manifestMap) {
+  if (!Array.isArray(ids) || !ids.length || !manifestMap) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  ids.forEach((value) => {
+    if (!value) return;
+    const normalized = normalizeManifestId(value);
+    if (!normalized || seen.has(normalized)) return;
+    seen.add(normalized);
+    const record = manifestMap.get(normalized) || manifestMap.get(String(value));
+    if (!record) return;
+    out.push({
+      id: record.id || record.href || value,
+      href: record.href || null,
+      title: record.title || record.label || record.href || value,
+      summary: record.summary || "",
+      thumbnail: record.thumbnail || null,
+      thumbnailWidth: record.thumbnailWidth,
+      thumbnailHeight: record.thumbnailHeight,
+      type: record.type || "work",
+      metadata: Array.isArray(record.metadata) && record.metadata.length ? record.metadata : record.summary ? [record.summary] : []
+    });
+  });
+  return out;
+}
+function resolveReferencedManifests(ids, manifestMap) {
+  if (!Array.isArray(ids) || !ids.length) return [];
+  const order = [];
+  const seen = /* @__PURE__ */ new Set();
+  ids.forEach((value) => {
+    const normalized = normalizeManifestId(value);
+    if (!normalized || seen.has(normalized)) return;
+    seen.add(normalized);
+    order.push(normalized);
+  });
+  if (!order.length) return [];
+  const manifestRecords = /* @__PURE__ */ new Map();
+  if (manifestMap) {
+    const resolved = resolveManifestReferences(ids, manifestMap);
+    resolved.forEach((entry) => {
+      const key = normalizeManifestId(entry && (entry.id || entry.href));
+      if (key && !manifestRecords.has(key)) {
+        manifestRecords.set(key, entry);
+      }
+    });
+  }
+  const missing = order.filter((key) => key && !manifestRecords.has(key));
+  if (missing.length) {
+    const referencedHelpers = getReferencedModule();
+    const buildReferencedItems = referencedHelpers == null ? void 0 : referencedHelpers.buildReferencedItems;
+    const normalizeList = referencedHelpers == null ? void 0 : referencedHelpers.normalizeReferencedManifestList;
+    if (typeof buildReferencedItems === "function") {
+      let fallbackItems = [];
+      try {
+        const normalizedMissing = typeof normalizeList === "function" ? normalizeList(missing) : missing;
+        if (normalizedMissing && normalizedMissing.length) {
+          fallbackItems = buildReferencedItems(normalizedMissing) || [];
+        }
+      } catch (_) {
+        fallbackItems = [];
+      }
+      fallbackItems.forEach((item) => {
+        if (!item) return;
+        const fallbackKey = normalizeManifestId(item.id || item.href);
+        if (!fallbackKey || manifestRecords.has(fallbackKey)) return;
+        manifestRecords.set(fallbackKey, {
+          id: item.id || item.href || fallbackKey,
+          href: item.href || null,
+          title: item.title || item.href || "",
+          summary: item.summary || "",
+          thumbnail: item.thumbnail || null,
+          thumbnailWidth: item.thumbnailWidth,
+          thumbnailHeight: item.thumbnailHeight,
+          type: item.type || "work",
+          metadata: Array.isArray(item.metadata) && item.metadata.length ? item.metadata : item.summary ? [item.summary] : []
+        });
+      });
+    }
+  }
+  return order.map((key) => manifestRecords.get(key)).filter(Boolean);
+}
+
+// ui/src/content/gallery/Gallery.jsx
+var INLINE_SCRIPT = `(() => {
+  if (typeof window === 'undefined') return;
+  if (window.__canopyGalleryBound) return;
+  window.__canopyGalleryBound = true;
+  const focusableSelector =
+    'a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  const raf =
+    (window.requestAnimationFrame && window.requestAnimationFrame.bind(window)) ||
+    function (cb) {
+      return window.setTimeout(cb, 0);
+    };
+  let activeModal = null;
+
+  function isVisible(node) {
+    return !!(node && (node.offsetWidth || node.offsetHeight || node.getClientRects().length));
+  }
+
+  function getFocusable(modal) {
+    if (!modal) return [];
+    return Array.prototype.slice
+      .call(modal.querySelectorAll(focusableSelector))
+      .filter((node) => !node.hasAttribute('disabled') && node.getAttribute('aria-hidden') !== 'true' && isVisible(node));
+  }
+
+  function escapeSelector(value) {
+    if (window.CSS && typeof window.CSS.escape === 'function') {
+      return window.CSS.escape(value);
+    }
+    return value.replace(/"/g, '\\"');
+  }
+
+  function findTrigger(modal) {
+    if (!modal || !modal.id) return null;
+    try {
+      return document.querySelector('[data-canopy-gallery-trigger="' + escapeSelector(modal.id) + '"]');
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function focusInitial(modal) {
+    if (!modal) return;
+    const focusables = getFocusable(modal);
+    const target = focusables[0] || modal;
+    raf(() => {
+      try {
+        target.focus({preventScroll: true});
+      } catch (_) {
+        try {
+          target.focus();
+        } catch (err) {}
+      }
+    });
+  }
+
+  function lockScroll() {
+    document.body && document.body.setAttribute('data-canopy-gallery-locked', '1');
+  }
+
+  function unlockScroll() {
+    document.body && document.body.removeAttribute('data-canopy-gallery-locked');
+  }
+
+  function handleKeydown(event) {
+    if (!activeModal) return;
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.preventDefault();
+      const closeId = activeModal.getAttribute('data-canopy-gallery-close');
+      if (closeId) {
+        const targetHash = '#' + closeId;
+        if (window.location.hash !== targetHash) {
+          window.location.hash = targetHash;
+        } else {
+          window.location.hash = targetHash;
+        }
+      } else {
+        window.location.hash = '';
+      }
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const focusables = getFocusable(activeModal);
+    if (!focusables.length) {
+      event.preventDefault();
+      activeModal.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const current = document.activeElement;
+    if (event.shiftKey) {
+      if (current === first || !activeModal.contains(current)) {
+        event.preventDefault();
+        last.focus();
+      }
+      return;
+    }
+    if (current === last || !activeModal.contains(current)) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function setActiveModal(modal) {
+    if (modal) {
+      if (!activeModal) {
+        lockScroll();
+        document.addEventListener('keydown', handleKeydown, true);
+      } else if (activeModal !== modal) {
+        activeModal.removeAttribute('data-canopy-gallery-active');
+      }
+      activeModal = modal;
+      modal.setAttribute('data-canopy-gallery-active', '1');
+      focusInitial(modal);
+      return;
+    }
+    if (!activeModal) return;
+    const previous = activeModal;
+    activeModal = null;
+    previous.removeAttribute('data-canopy-gallery-active');
+    unlockScroll();
+    document.removeEventListener('keydown', handleKeydown, true);
+    const closeTarget = previous.getAttribute('data-canopy-gallery-close');
+    if (closeTarget) {
+      const closeHash = '#' + closeTarget;
+      if (window.location.hash === closeHash) {
+        try {
+          if (window.history && typeof window.history.replaceState === 'function') {
+            window.history.replaceState('', document.title, window.location.pathname + window.location.search);
+          } else {
+            window.location.hash = '';
+          }
+        } catch (_) {}
+      }
+    }
+    const trigger = findTrigger(previous);
+    if (trigger && typeof trigger.focus === 'function') {
+      raf(() => {
+        try {
+          trigger.focus({preventScroll: true});
+        } catch (_) {
+          try {
+            trigger.focus();
+          } catch (err) {}
+        }
+      });
+    }
+  }
+
+  function modalFromHash() {
+    const id = window.location.hash.replace(/^#/, '');
+    if (!id) return null;
+    const candidate = document.getElementById(id);
+    if (!candidate) return null;
+    return candidate.hasAttribute('data-canopy-gallery-modal') ? candidate : null;
+  }
+
+  function syncFromHash() {
+    const modal = modalFromHash();
+    if (modal) {
+      setActiveModal(modal);
+    } else {
+      setActiveModal(null);
+    }
+  }
+
+  window.addEventListener('hashchange', syncFromHash);
+  window.addEventListener('pageshow', syncFromHash);
+  syncFromHash();
+})()`;
+var galleryInstanceCounter = 0;
+function nextGalleryInstanceId() {
+  galleryInstanceCounter += 1;
+  return `canopy-gallery-${galleryInstanceCounter}`;
+}
+function slugify(value, fallback) {
+  if (!value) return fallback;
+  const normalized = String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").trim();
+  if (!normalized) return fallback;
+  return normalized;
+}
+function ensureArray2(value) {
+  if (!value && value !== 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function normalizeOrder(value) {
+  const normalized = String(value || "default").toLowerCase();
+  return normalized === "random" ? "random" : "default";
+}
+function shuffleItems(list) {
+  const copy = list.slice();
+  for (let i = copy.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = copy[i];
+    copy[i] = copy[j];
+    copy[j] = temp;
+  }
+  return copy;
+}
+function renderMetaList(meta, className) {
+  const entries = ensureArray2(meta).filter((entry) => entry || entry === 0);
+  if (!entries.length) return null;
+  return /* @__PURE__ */ React40.createElement("ul", { className, role: "list" }, entries.map((entry, index) => /* @__PURE__ */ React40.createElement("li", { key: `meta-${index}` }, entry)));
+}
+function renderPreview(props = {}) {
+  const source = typeof props.media === "string" && props.media || props.thumbnail || props.src || props.image && props.image.src || props.image;
+  if (source) {
+    const alt = props.thumbnailAlt || props.imageAlt || props.alt || props.title || "";
+    const width = props.thumbnailWidth || props.imageWidth || props.width;
+    const height = props.thumbnailHeight || props.imageHeight || props.height;
+    return /* @__PURE__ */ React40.createElement(
+      "img",
+      {
+        src: source,
+        alt,
+        width,
+        height,
+        loading: "lazy"
+      }
+    );
+  }
+  return /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__placeholder", "aria-hidden": "true" });
+}
+function normalizeItem(child, index, galleryId, manifestMap) {
+  var _a;
+  if (!React40.isValidElement(child)) return null;
+  if (child.type !== GalleryItem && ((_a = child.type) == null ? void 0 : _a.displayName) !== "GalleryItem")
+    return null;
+  const props = child.props || {};
+  const manifestValues = Array.isArray(props.referencedManifests) ? props.referencedManifests : props.manifest ? [props.manifest] : Array.isArray(props.manifests) ? props.manifests : [];
+  const manifests = resolveReferencedManifests(manifestValues, manifestMap);
+  const normalizedProps = { ...props };
+  if (!normalizedProps.title) {
+    const manifestWithTitle = manifests.find(
+      (manifest) => manifest && manifest.title
+    );
+    if (manifestWithTitle && manifestWithTitle.title) {
+      normalizedProps.title = manifestWithTitle.title;
+    }
+  }
+  if (!normalizedProps.summary || !normalizedProps.description) {
+    const manifestWithSummary = manifests.find(
+      (manifest) => manifest && manifest.summary
+    );
+    if (manifestWithSummary && manifestWithSummary.summary) {
+      if (!normalizedProps.summary) {
+        normalizedProps.summary = manifestWithSummary.summary;
+      }
+      if (!normalizedProps.description) {
+        normalizedProps.description = manifestWithSummary.summary;
+      }
+    }
+  }
+  if (!normalizedProps.thumbnail && !normalizedProps.media && !normalizedProps.image) {
+    const manifestWithThumb = manifests.find(
+      (manifest) => manifest && manifest.thumbnail
+    );
+    if (manifestWithThumb && manifestWithThumb.thumbnail) {
+      normalizedProps.thumbnail = manifestWithThumb.thumbnail;
+      if (manifestWithThumb.thumbnailWidth != null && normalizedProps.thumbnailWidth == null && normalizedProps.imageWidth == null && normalizedProps.width == null) {
+        normalizedProps.thumbnailWidth = manifestWithThumb.thumbnailWidth;
+      }
+      if (manifestWithThumb.thumbnailHeight != null && normalizedProps.thumbnailHeight == null && normalizedProps.imageHeight == null && normalizedProps.height == null) {
+        normalizedProps.thumbnailHeight = manifestWithThumb.thumbnailHeight;
+      }
+    }
+  }
+  const rawSlug = normalizedProps.slug || normalizedProps.id || normalizedProps.title || `item-${index + 1}`;
+  const slug = slugify(rawSlug, `item-${index + 1}`);
+  const modalId = `${galleryId}-modal-${slug}-${index + 1}`;
+  const triggerLabel = normalizedProps.triggerLabel || normalizedProps.buttonLabel || normalizedProps.linkLabel || `Open popup for ${normalizedProps.title || `item ${index + 1}`}`;
+  const modalTitleId = `${modalId}-title`;
+  const needsDescriptionId = normalizedProps.popupDescription || normalizedProps.modalDescription || normalizedProps.description || normalizedProps.summary;
+  const modalDescriptionId = needsDescriptionId ? `${modalId}-description` : null;
+  const manifestLinks = manifests.map((manifest) => {
+    if (!manifest) return null;
+    const href = manifest.href || manifest.id || manifest.slug;
+    if (!href) return null;
+    return {
+      id: manifest.id || manifest.slug || href,
+      href,
+      title: manifest.title || manifest.label || href
+    };
+  }).filter(Boolean);
+  return {
+    index,
+    key: child.key != null ? child.key : `${galleryId}-item-${index}`,
+    props: normalizedProps,
+    modalId,
+    slug,
+    modalTitleId,
+    modalDescriptionId,
+    triggerLabel,
+    manifests: manifestLinks
+  };
+}
+function buildCaptionContent(itemProps) {
+  if (itemProps.caption) return itemProps.caption;
+  const kicker = itemProps.kicker || itemProps.label || itemProps.eyebrow;
+  const summary = itemProps.summary || itemProps.description;
+  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, kicker ? /* @__PURE__ */ React40.createElement("span", { className: "canopy-gallery__kicker" }, kicker) : null, itemProps.title ? /* @__PURE__ */ React40.createElement("span", { className: "canopy-gallery__title-text" }, itemProps.title) : null, summary ? /* @__PURE__ */ React40.createElement("span", { className: "canopy-gallery__summary" }, summary) : null, renderMetaList(
+    itemProps.meta,
+    "canopy-gallery__meta canopy-gallery__meta--caption"
+  ));
+}
+function GalleryModal({ item, total, closeTargetId, prevTarget, nextTarget }) {
+  const {
+    props,
+    modalId,
+    modalTitleId,
+    modalDescriptionId,
+    triggerLabel,
+    index,
+    manifests
+  } = item;
+  const kicker = props.kicker || props.label || props.eyebrow;
+  const summary = props.popupDescription || props.modalDescription || props.description || props.summary || null;
+  const modalTitle = props.popupTitle || props.modalTitle || props.title || `Item ${index + 1}`;
+  const preview = renderPreview(props);
+  return /* @__PURE__ */ React40.createElement(
+    "div",
+    {
+      id: modalId,
+      className: "canopy-gallery__modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": modalTitleId,
+      "aria-describedby": modalDescriptionId || void 0,
+      tabIndex: -1,
+      "data-canopy-gallery-modal": "true",
+      "data-canopy-gallery-close": closeTargetId
+    },
+    /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modal-scrim" }, /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modal-panel" }, /* @__PURE__ */ React40.createElement("header", { className: "canopy-gallery__modal-header" }, preview ? /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modal-thumb", "aria-hidden": "true" }, preview) : null, /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modal-text" }, kicker ? /* @__PURE__ */ React40.createElement("p", { className: "canopy-gallery__modal-kicker" }, kicker) : null, /* @__PURE__ */ React40.createElement("h3", { id: modalTitleId, className: "canopy-gallery__modal-title" }, modalTitle), summary ? /* @__PURE__ */ React40.createElement(
+      "p",
+      {
+        id: modalDescriptionId || void 0,
+        className: "canopy-gallery__modal-summary"
+      },
+      summary
+    ) : null, renderMetaList(
+      props.meta,
+      "canopy-gallery__meta canopy-gallery__meta--modal"
+    ))), /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modal-body" }, props.children, manifests && manifests.length ? /* @__PURE__ */ React40.createElement("section", { className: "canopy-gallery__referenced" }, /* @__PURE__ */ React40.createElement("h4", null, "Referenced works"), /* @__PURE__ */ React40.createElement("ul", { role: "list" }, manifests.map((manifest) => /* @__PURE__ */ React40.createElement("li", { key: manifest.id || manifest.href }, /* @__PURE__ */ React40.createElement("a", { href: manifest.href }, manifest.title || manifest.href))))) : null), /* @__PURE__ */ React40.createElement("footer", { className: "canopy-gallery__modal-footer" }, /* @__PURE__ */ React40.createElement(
+      "a",
+      {
+        className: "canopy-gallery__modal-close",
+        href: `#${closeTargetId}`,
+        "aria-label": `Close popup for ${modalTitle}`
+      },
+      "Close"
+    ), total > 1 ? /* @__PURE__ */ React40.createElement(
+      "nav",
+      {
+        className: "canopy-gallery__modal-nav",
+        "aria-label": "Gallery popup navigation"
+      },
+      /* @__PURE__ */ React40.createElement(
+        "a",
+        {
+          className: "canopy-gallery__modal-nav-link canopy-gallery__modal-nav-link--prev",
+          href: `#${prevTarget}`,
+          "aria-label": `Show previous popup before ${modalTitle}`
+        },
+        "Prev"
+      ),
+      /* @__PURE__ */ React40.createElement(
+        "a",
+        {
+          className: "canopy-gallery__modal-nav-link canopy-gallery__modal-nav-link--next",
+          href: `#${nextTarget}`,
+          "aria-label": `Show next popup after ${modalTitle}`
+        },
+        "Next"
+      )
+    ) : null)))
+  );
+}
+function GalleryFigure({ item }) {
+  const { props, modalId, triggerLabel } = item;
+  return /* @__PURE__ */ React40.createElement(
+    "figure",
+    {
+      className: "canopy-gallery__item",
+      "data-gallery-item-index": item.index
+    },
+    /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__media" }, renderPreview(props)),
+    /* @__PURE__ */ React40.createElement("figcaption", { className: "canopy-gallery__caption" }, buildCaptionContent(props)),
+    /* @__PURE__ */ React40.createElement(
+      "a",
+      {
+        className: "canopy-gallery__trigger",
+        href: `#${modalId}`,
+        "aria-haspopup": "dialog",
+        "aria-controls": modalId,
+        "aria-label": triggerLabel,
+        "data-canopy-gallery-trigger": modalId
+      },
+      /* @__PURE__ */ React40.createElement("span", { className: "canopy-gallery__trigger-label" }, triggerLabel)
+    )
+  );
+}
+function GalleryContent({ children, flex = false }) {
+  const contentClassName = [
+    "canopy-gallery-item__content",
+    flex ? "canopy-gallery-item__content_flex" : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React40.createElement("div", { className: contentClassName }, children);
+}
+function GalleryItem() {
+  return null;
+}
+GalleryItem.displayName = "GalleryItem";
+function normalizePopupSize(value) {
+  const normalized = String(value || "full").toLowerCase();
+  return normalized === "medium" ? "medium" : "full";
+}
+function Gallery({
+  children,
+  id,
+  title,
+  description,
+  popupSize = "full",
+  order = "default",
+  className = "",
+  style = {}
+}) {
+  const manifestMap = useReferencedManifestMap();
+  const galleryId = id ? String(id) : nextGalleryInstanceId();
+  const HeadingTag = "h3";
+  const closeTargetId = `${galleryId}-close`;
+  const childArray = React40.Children.toArray(children);
+  const items = childArray.map((child, index) => normalizeItem(child, index, galleryId, manifestMap)).filter(Boolean);
+  if (!items.length) return null;
+  const popupMode = normalizePopupSize(popupSize);
+  const orderMode = normalizeOrder(order);
+  const orderedItems = orderMode === "random" ? shuffleItems(items) : items;
+  const rootClassName = [
+    "canopy-gallery",
+    popupMode === "medium" ? "canopy-gallery--popup-medium" : "canopy-gallery--popup-full",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React40.createElement("section", { className: rootClassName, style, "data-canopy-gallery": "true" }, /* @__PURE__ */ React40.createElement(
+    "div",
+    {
+      id: closeTargetId,
+      className: "canopy-gallery__close-anchor",
+      "aria-hidden": "true",
+      tabIndex: -1
+    }
+  ), (title || description) && /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__header" }, title ? /* @__PURE__ */ React40.createElement(HeadingTag, { className: "canopy-gallery__heading" }, title) : null, description ? /* @__PURE__ */ React40.createElement("p", { className: "canopy-gallery__description" }, description) : null), /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__grid" }, orderedItems.map((item) => /* @__PURE__ */ React40.createElement(GalleryFigure, { key: item.key, item }))), /* @__PURE__ */ React40.createElement("div", { className: "canopy-gallery__modals" }, orderedItems.map((item, index) => {
+    const total = orderedItems.length;
+    const prevIndex = (index - 1 + total) % total;
+    const nextIndex = (index + 1) % total;
+    return /* @__PURE__ */ React40.createElement(
+      GalleryModal,
+      {
+        key: `${item.modalId}-modal`,
+        item,
+        total,
+        closeTargetId,
+        prevTarget: orderedItems[prevIndex].modalId,
+        nextTarget: orderedItems[nextIndex].modalId
+      }
+    );
+  })), /* @__PURE__ */ React40.createElement(
+    "script",
+    {
+      "data-canopy-gallery-script": "true",
+      dangerouslySetInnerHTML: { __html: INLINE_SCRIPT }
+    }
+  ));
+}
+Gallery.Item = GalleryItem;
+Gallery.Content = GalleryContent;
 export {
   ArticleCard,
   Button,
@@ -4080,6 +4710,9 @@ export {
   Card,
   Container,
   MarkdownTable as DocsMarkdownTable,
+  Gallery,
+  GalleryContent,
+  GalleryItem,
   GoogleAnalytics,
   Grid,
   GridItem,