@teamimpact/veda-ui-blocks 0.1.0-beta.10

package/dist/index.js

@@ -0,0 +1,1268 @@
+"use client";
+
+// src/components/Banner/Banner.tsx
+import {
+  BannerButton,
+  BannerContent,
+  BannerFlag,
+  BannerGuidance,
+  BannerHeader,
+  BannerIcon,
+  Icon,
+  MediaBlockBody,
+  Banner as USWDSBanner
+} from "@trussworks/react-uswds";
+import { useState } from "react";
+
+// src/utils/type-guards.ts
+var isNull = (x) => x === null;
+var isUndefined = (x) => x === void 0;
+var isNil = (x) => isNull(x) || isUndefined(x);
+var isDefined = (x) => !isNil(x);
+var isNumber = (x) => typeof x === "number";
+var isObject = (x) => !isNil(x) && typeof x === "object" && x instanceof Object;
+var isEmptyObject = (x) => isObject(x) && isEmptyArray(Object.keys(x));
+var isArray = (as) => Array.isArray(as);
+var isEmptyArray = (as) => isArray(as) && as.length === 0;
+var isNonEmptyArray = (as) => isArray(as) && as.length > 0;
+var getTypedValues = Object.values;
+
+// src/utils/component-utils.tsx
+var get_external_anchor_props = (isExternal) => isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
+var make_clean_string = (str) => str.replace(/[^a-zA-Z0-9]/g, "");
+var is_current_path = (href, currentPath) => isDefined(currentPath) ? href === currentPath : false;
+var make_class_name = (baseClass, additionalClasses) => [baseClass, ...additionalClasses ?? []].filter(Boolean).join(" ");
+
+// src/components/Banner/Banner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Banner({
+  ariaLabel = DEFAULT_HEADER_TEXT,
+  bannerHeaderText = DEFAULT_HEADER_TEXT,
+  bannerHeaderActionText = DEFAULT_HEADER_ACTION_TEXT,
+  bannerIcon = DEFAULT_ICON,
+  bannerExpandedContent = DEFAULT_EXPANDED_CONTENT_JSX,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const bannerClassName = make_class_name("blocks-banner", [className]);
+  return /* @__PURE__ */ jsxs(USWDSBanner, { "aria-label": ariaLabel, className: bannerClassName, children: [
+    /* @__PURE__ */ jsx(
+      BannerHeader,
+      {
+        isOpen,
+        flagImg: bannerIcon,
+        headerText: bannerHeaderText,
+        headerActionText: bannerHeaderActionText,
+        children: /* @__PURE__ */ jsx(
+          BannerButton,
+          {
+            isOpen,
+            "aria-controls": CONTENT_ID,
+            onClick: () => setIsOpen((prev) => !prev),
+            children: bannerHeaderActionText
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(BannerContent, { id: CONTENT_ID, isOpen, children: bannerExpandedContent })
+  ] });
+}
+var CONTENT_ID = "blocks-banner-content";
+var DEFAULT_HEADER_TEXT = "An official website of the United States government";
+var DEFAULT_HEADER_ACTION_TEXT = "Here's how you know";
+var DEFAULT_ICON = /* @__PURE__ */ jsx(BannerFlag, { src: "/img/us_flag_small.png", "aria-hidden": true, alt: "USA flag" });
+var DEFAULT_EXPANDED_CONTENT_JSX = /* @__PURE__ */ jsxs("div", { className: "blocks-banner__row", children: [
+  /* @__PURE__ */ jsxs(BannerGuidance, { className: "blocks-banner__guidance", children: [
+    /* @__PURE__ */ jsx(BannerIcon, { src: "/img/icon-dot-gov.svg", alt: "" }),
+    /* @__PURE__ */ jsx(MediaBlockBody, { children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Official websites use .gov" }),
+      /* @__PURE__ */ jsx("br", {}),
+      "A ",
+      /* @__PURE__ */ jsx("strong", { children: ".gov" }),
+      " website belongs to an official government organization in the United States."
+    ] }) })
+  ] }),
+  /* @__PURE__ */ jsxs(BannerGuidance, { className: "blocks-banner__guidance", children: [
+    /* @__PURE__ */ jsx(BannerIcon, { src: "/img/icon-https.svg", alt: "" }),
+    /* @__PURE__ */ jsx(MediaBlockBody, { children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Secure .gov websites use HTTPS" }),
+      /* @__PURE__ */ jsx("br", {}),
+      "A",
+      " ",
+      /* @__PURE__ */ jsxs("strong", { children: [
+        "lock (",
+        /* @__PURE__ */ jsx(Icon.Lock, { "aria-label": "Locked padlock icon" }),
+        ")"
+      ] }),
+      " ",
+      "or ",
+      /* @__PURE__ */ jsx("strong", { children: "https://" }),
+      " means you've safely connected to the .gov website. Share sensitive information only on official, secure websites."
+    ] }) })
+  ] })
+] });
+
+// src/components/Cards/Card/Card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Card({
+  tag,
+  title,
+  description,
+  subtitle,
+  callToAction,
+  callToActionSecondary,
+  image,
+  imagePosition = "cover",
+  colorMode = "light",
+  isMastHead = false,
+  className,
+  children
+}) {
+  const rootClassName = make_class_name("blocks-card", [
+    imagePosition === "left" ? "blocks-card--image-left" : imagePosition === "right" ? "blocks-card--image-right" : void 0,
+    colorMode === "dark" ? "blocks-card--dark" : colorMode === "brand" ? "blocks-card--brand" : void 0,
+    isMastHead ? "blocks-card--mast-head" : void 0,
+    className
+  ]);
+  const hasContent = tag || title || subtitle || description || callToAction || callToActionSecondary;
+  return /* @__PURE__ */ jsxs2("div", { className: rootClassName, children: [
+    imagePosition === "cover" && /* @__PURE__ */ jsx2("div", { className: "blocks-card__media", children: image }),
+    /* @__PURE__ */ jsxs2("div", { className: "blocks-card__content-container", children: [
+      imagePosition !== "cover" && /* @__PURE__ */ jsx2("div", { className: "blocks-card__media", children: image }),
+      hasContent && /* @__PURE__ */ jsxs2("div", { className: "blocks-card__content", children: [
+        tag && /* @__PURE__ */ jsx2("div", { className: "blocks-card__tag", children: tag }),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx2("h2", { className: "blocks-card__title", children: title }) : title),
+        subtitle && /* @__PURE__ */ jsx2("div", { className: "blocks-card__subtitle", children: subtitle }),
+        description && /* @__PURE__ */ jsx2("p", { className: "blocks-card__description", children: description }),
+        (callToAction || callToActionSecondary) && /* @__PURE__ */ jsxs2("div", { className: "blocks-card__actions", children: [
+          callToAction && /* @__PURE__ */ jsx2("a", { href: callToAction.href, className: "usa-button", children: callToAction.label }),
+          callToActionSecondary && /* @__PURE__ */ jsx2("a", { href: callToActionSecondary.href, className: "usa-button usa-button--outline", children: callToActionSecondary.label })
+        ] })
+      ] })
+    ] }),
+    children && /* @__PURE__ */ jsx2("div", { className: "blocks-card__children", children })
+  ] });
+}
+
+// src/components/icons/ArrowIcon.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ArrowIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx3("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+      /* @__PURE__ */ jsx3("g", { transform: "translate(5.333, 5.333)", children: /* @__PURE__ */ jsx3(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4.66667 0L3.84417 0.8225L7.09917 4.08333H0V5.25H7.09917L3.84417 8.51083L4.66667 9.33333L9.33333 4.66667L4.66667 0Z",
+          fill: "white"
+        }
+      ) })
+    ]
+  }
+);
+
+// src/components/Cards/CardCTA/CardCTA.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function CardCTA({
+  title,
+  url,
+  description,
+  accentColor,
+  titleAs = "h2",
+  className,
+  style,
+  ...rest
+}) {
+  const TitleTag = titleAs;
+  const rootClassName = make_class_name("blocks-card-cta", [
+    !description ? "blocks-card-cta--without-description" : void 0,
+    className
+  ]);
+  const accentColorStyle = accentColor ? { "--blocks-card-cta-custom-accent-color": accentColor } : void 0;
+  return /* @__PURE__ */ jsx4("a", { href: url, className: rootClassName, style: { ...accentColorStyle, ...style }, ...rest, children: /* @__PURE__ */ jsxs4("div", { className: "blocks-card-cta__body", children: [
+    /* @__PURE__ */ jsxs4(TitleTag, { className: "blocks-card-cta__title", title, children: [
+      title,
+      /* @__PURE__ */ jsx4("span", { className: "blocks-card-cta__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(ArrowIcon, {}) })
+    ] }),
+    description && /* @__PURE__ */ jsx4("p", { className: "blocks-card-cta__description", children: description })
+  ] }) });
+}
+
+// src/components/Cards/CardDetailed/CardDetailed.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function CardDetailed({
+  intro,
+  title,
+  description,
+  tags = [],
+  callToAction,
+  callToActionSecondary,
+  tagPrimary,
+  image,
+  imagePosition = "top",
+  className = ""
+}) {
+  const rootClassName = make_class_name("blocks-card-detailed", [
+    imagePosition !== "top" ? `blocks-card-detailed--image-${imagePosition}` : "",
+    className
+  ]);
+  const hasContent = intro || title || description || tags.length || callToAction || callToActionSecondary;
+  return /* @__PURE__ */ jsxs5("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "blocks-card-detailed__media", children: [
+      image,
+      tagPrimary && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tag-primary", children: tagPrimary })
+    ] }),
+    hasContent && /* @__PURE__ */ jsxs5("div", { className: "blocks-card-detailed__content-container", children: [
+      intro && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__intro", title: intro, children: intro }),
+      title && (typeof title === "string" ? /* @__PURE__ */ jsx5("h2", { className: "blocks-card-detailed__title", title, children: title }) : title),
+      isNonEmptyArray(tags) && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tags", children: tags }),
+      description && /* @__PURE__ */ jsx5("p", { className: "blocks-card-detailed__description", children: description }),
+      (callToAction || callToActionSecondary) && /* @__PURE__ */ jsxs5("div", { className: "blocks-card-detailed__actions", children: [
+        callToAction && /* @__PURE__ */ jsx5("a", { href: callToAction.href, className: "usa-button", children: callToAction.label }),
+        callToActionSecondary && /* @__PURE__ */ jsx5("a", { href: callToActionSecondary.href, className: "usa-button usa-button--outline", children: callToActionSecondary.label })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Cards/CardMini/CardMini.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function CardMini({ image, title, url, tag, titleAs = "h2", className }) {
+  const TitleTag = titleAs;
+  const hasTag = Boolean(tag);
+  const rootClassName = make_class_name("blocks-card-mini", [
+    hasTag ? "blocks-card-mini--with-tag" : void 0,
+    className
+  ]);
+  return /* @__PURE__ */ jsxs6("a", { href: url, className: rootClassName, children: [
+    /* @__PURE__ */ jsx6("div", { className: "blocks-card-mini__image", children: image }),
+    /* @__PURE__ */ jsxs6("div", { className: "blocks-card-mini__body", children: [
+      /* @__PURE__ */ jsx6(TitleTag, { className: "blocks-card-mini__title", title, children: title }),
+      tag && /* @__PURE__ */ jsx6("div", { className: "blocks-card-mini__tag", children: tag })
+    ] })
+  ] });
+}
+
+// src/components/Cards/CardSimple/CardSimple.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function CardSimple({
+  title,
+  image,
+  url,
+  isExternal,
+  tag,
+  size = "default",
+  titleAs = "h2",
+  className
+}) {
+  const TitleTag = titleAs;
+  const rootClassName = make_class_name("blocks-card-simple", [
+    size === "compact" ? "blocks-card-simple--compact" : void 0,
+    className
+  ]);
+  const titleClassName = make_class_name("blocks-card-simple__title", [
+    isExternal ? "usa-link--external" : void 0
+  ]);
+  return /* @__PURE__ */ jsxs7("a", { href: url, className: rootClassName, ...get_external_anchor_props(isExternal), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "blocks-card-simple__media", children: [
+      image,
+      /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "blocks-card-simple__body", children: [
+      tag && /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__tag", children: tag }),
+      /* @__PURE__ */ jsx7(TitleTag, { className: titleClassName, children: title })
+    ] })
+  ] });
+}
+
+// src/components/Footer/Footer.tsx
+import { GridContainer, Icon as Icon2, Link, Footer as USWDSFooter } from "@trussworks/react-uswds";
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function Footer({
+  portalDetails,
+  primaryNavItems,
+  secondaryNavItems,
+  utilityNavItems,
+  className
+}) {
+  const footerClassName = make_class_name("blocks-footer", [className]);
+  return /* @__PURE__ */ jsx8(
+    USWDSFooter,
+    {
+      className: footerClassName,
+      size: "slim",
+      primary: /* @__PURE__ */ jsx8(GridContainer, { children: /* @__PURE__ */ jsxs8("section", { className: "blocks-footer__primary-section", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "blocks-footer__title", children: [
+          portalDetails.logo ? /* @__PURE__ */ jsx8("div", { className: "blocks-footer__logo", children: portalDetails.logo }) : null,
+          /* @__PURE__ */ jsxs8("div", { className: "blocks-footer__title-text", children: [
+            /* @__PURE__ */ jsx8("span", { children: portalDetails.title }),
+            portalDetails.tagline ? /* @__PURE__ */ jsx8("p", { children: portalDetails.tagline }) : null
+          ] })
+        ] }),
+        primaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__primary-nav", "aria-label": "Footer primary navigation", children: /* @__PURE__ */ jsx8("ul", { children: primaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx8("li", { className: "usa-footer__primary-content", children: /* @__PURE__ */ jsx8(
+          Link,
+          {
+            className: "usa-footer__primary-link",
+            href,
+            ...get_external_anchor_props(isExternal),
+            children: label
+          }
+        ) }, href)) }) }) : null
+      ] }) }),
+      secondary: /* @__PURE__ */ jsxs8(Fragment, { children: [
+        secondaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__secondary-section-upper", children: /* @__PURE__ */ jsx8(
+          "nav",
+          {
+            className: "blocks-footer__secondary-nav",
+            "aria-label": "Footer secondary navigation",
+            children: /* @__PURE__ */ jsx8("ul", { children: secondaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx8("li", { className: "usa-footer__secondary-link", children: /* @__PURE__ */ jsx8(Link, { href, ...get_external_anchor_props(isExternal), children: label }) }, href)) })
+          }
+        ) }) : null,
+        utilityNavItems?.length || portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs8("section", { className: "blocks-footer__secondary-section-lower", children: [
+          utilityNavItems?.length ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__utility-nav", "aria-label": "Site utilities", children: /* @__PURE__ */ jsx8("ul", { children: utilityNavItems.length ? utilityNavItems.map(({ text, label, href, isExternal }) => /* @__PURE__ */ jsxs8("li", { children: [
+            text,
+            " ",
+            /* @__PURE__ */ jsx8(Link, { href, ...get_external_anchor_props(isExternal), children: label })
+          ] }, href)) : null }) }) : null,
+          portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs8("div", { className: "blocks-footer__secondary-meta", children: [
+            portalDetails.updatedDate ? /* @__PURE__ */ jsxs8("p", { children: [
+              "Site last updated: ",
+              portalDetails.updatedDate
+            ] }) : null,
+            portalDetails.contacts?.length ? /* @__PURE__ */ jsx8("nav", { className: "blocks-footer__contacts-nav", "aria-label": "Site contacts", children: /* @__PURE__ */ jsx8("ul", { children: portalDetails.contacts.map(({ label, name, email }) => /* @__PURE__ */ jsxs8("li", { children: [
+              /* @__PURE__ */ jsx8("span", { children: label }),
+              /* @__PURE__ */ jsxs8(Link, { href: `mailto:${email}`, ...get_external_anchor_props(), children: [
+                /* @__PURE__ */ jsx8(Icon2.Mail, { "aria-hidden": "true", focusable: false }),
+                /* @__PURE__ */ jsx8("span", { children: name })
+              ] })
+            ] }, `${label}-${email}`)) }) }) : null
+          ] }) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+
+// src/components/Header/Header.tsx
+import { NavMenuButton, PrimaryNav, Title, Header as USWDSHeader } from "@trussworks/react-uswds";
+import { useCallback, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/hooks/useClickOutside.ts
+import { useEffect, useRef } from "react";
+function useClickOutside(callback, options) {
+  const ref = useRef(null);
+  const { excludeRefs, bindEscapeKey } = options ?? {};
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if ([ref, ...excludeRefs ?? []].every(
+        (r) => r.current && !r.current.contains(event.target)
+      )) {
+        callback();
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [callback, excludeRefs]);
+  useEffect(() => {
+    if (!bindEscapeKey) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        callback();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [callback, bindEscapeKey]);
+  return ref;
+}
+
+// src/hooks/useWindowResize.ts
+import { useEffect as useEffect2 } from "react";
+function useWindowResize(handleResize) {
+  useEffect2(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize]);
+}
+
+// src/components/Header/Header.helpers.tsx
+import { Link as Link2, Menu, NavDropDownButton } from "@trussworks/react-uswds";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var make_nav_items_initial_state = (navItems) => {
+  const initialState = {};
+  const initialProps = navItems.map((item) => {
+    if (isNavDropDownItem(item)) {
+      const menuId = make_clean_string(item.label);
+      initialState[menuId] = false;
+      return {
+        ...item,
+        menuId,
+        subItems: item.subItems.map((subItem) => ({
+          ...subItem,
+          isPrimary: false
+        }))
+      };
+    }
+    return { ...item, isPrimary: true };
+  });
+  return { initialProps, initialState };
+};
+var isNavItem = (item) => isObject(item) && !!Object.hasOwn(item, "label") && !!Object.hasOwn(item, "href");
+var isNavDropDownItem = (item) => isObject(item) && !!Object.hasOwn(item, "label") && !!Object.hasOwn(item, "subItems");
+var make_menu_link_jsx = ({ label, href, isExternal, isPrimary }, options) => {
+  const currentPath = options?.currentPath;
+  const className = [];
+  const isCurrent = is_current_path(href, currentPath);
+  if (isPrimary) {
+    className.push("usa-nav__link");
+  }
+  if (isCurrent) {
+    className.push("usa-current");
+  }
+  return /* @__PURE__ */ jsx9(
+    "a",
+    {
+      href,
+      className: className.join(" "),
+      "aria-current": isCurrent ? "page" : void 0,
+      ...get_external_anchor_props(isExternal),
+      children: /* @__PURE__ */ jsx9("span", { children: label })
+    },
+    href
+  );
+};
+var make_menu_link_with_dropdown_jsx = ({ label, menuId, subItems }, options) => {
+  const { navDropDownOpenState, handleToggleDropdown, currentPath } = options;
+  const sublinks = subItems.map((item) => make_menu_link_jsx(item, { currentPath }));
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(
+      NavDropDownButton,
+      {
+        menuId,
+        onToggle: () => handleToggleDropdown(menuId),
+        isOpen: navDropDownOpenState[menuId] ?? false,
+        label,
+        isCurrent: sublinks.some((sublink) => is_current_path(sublink.props.href, currentPath))
+      }
+    ),
+    /* @__PURE__ */ jsx9(Menu, { items: sublinks, isOpen: navDropDownOpenState[menuId] ?? false, id: menuId }, "one")
+  ] });
+};
+var make_custom_nav_item_jsx = (customNavItem) => isNavItem(customNavItem) ? /* @__PURE__ */ jsx9(
+  Link2,
+  {
+    className: "blocks-header__custom-nav-item usa-button",
+    variant: "unstyled",
+    href: customNavItem.href,
+    ...get_external_anchor_props(customNavItem.isExternal),
+    children: customNavItem.label
+  }
+) : customNavItem;
+
+// src/components/Header/Header.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function Header(props) {
+  const {
+    portalDetails: { logo, title, url },
+    navItems,
+    customNavItem,
+    currentPath,
+    className
+  } = props;
+  const { initialProps: navItemsExtended, initialState: initialNavDropDownOpenState } = useMemo(
+    () => make_nav_items_initial_state(navItems),
+    [navItems]
+  );
+  const [navDropDownOpenState, setNavDropDownOpenState] = useState2(
+    initialNavDropDownOpenState
+  );
+  const [isMobileNavExpanded, setIsMobileNavExpanded] = useState2(false);
+  const handleToggleDropdown = useCallback(
+    (menuId) => {
+      if (isMobileNavExpanded) {
+        setNavDropDownOpenState((prev) => ({
+          ...prev,
+          [menuId]: !prev[menuId]
+        }));
+      } else {
+        setNavDropDownOpenState((prev) => {
+          const newState = {};
+          for (const key in prev) {
+            newState[key] = key === menuId ? !prev[key] : false;
+          }
+          return newState;
+        });
+      }
+    },
+    [isMobileNavExpanded]
+  );
+  const handleToggleMobileNav = useCallback(() => setIsMobileNavExpanded((prev) => !prev), []);
+  const handleClickOutside = useCallback(() => {
+    if (isMobileNavExpanded) {
+      setIsMobileNavExpanded(false);
+    } else {
+      setNavDropDownOpenState((prev) => {
+        const newState = {};
+        for (const key in prev) {
+          newState[key] = false;
+        }
+        return newState;
+      });
+    }
+  }, [isMobileNavExpanded]);
+  useWindowResize(handleClickOutside);
+  const mobileNavToggleRef = useRef2(null);
+  const menuRef = useClickOutside(handleClickOutside, {
+    excludeRefs: [mobileNavToggleRef],
+    bindEscapeKey: true
+  });
+  const headerClassName = make_class_name("blocks-header", [className]);
+  const customNavItemJsx = useMemo(
+    () => isDefined(customNavItem) ? make_custom_nav_item_jsx(customNavItem) : void 0,
+    [customNavItem]
+  );
+  const menuItemsJsx = navItemsExtended.map(
+    (item) => isNavDropDownItem(item) ? make_menu_link_with_dropdown_jsx(item, {
+      navDropDownOpenState,
+      handleToggleDropdown,
+      currentPath
+    }) : make_menu_link_jsx(item, { currentPath })
+  );
+  return /* @__PURE__ */ jsx10(USWDSHeader, { className: headerClassName, basic: true, showMobileOverlay: isMobileNavExpanded, children: /* @__PURE__ */ jsxs10("div", { className: "usa-nav-container", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "usa-navbar", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "blocks-header__portal-details", children: [
+        /* @__PURE__ */ jsx10("a", { className: "blocks-header__portal-logo", href: url ?? "/", children: logo }),
+        title ? /* @__PURE__ */ jsx10(Title, { children: /* @__PURE__ */ jsx10("a", { href: url ?? "/", children: title }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx10(NavMenuButton, { ref: mobileNavToggleRef, onClick: handleToggleMobileNav, label: "Menu" })
+    ] }),
+    /* @__PURE__ */ jsx10(
+      PrimaryNav,
+      {
+        ref: menuRef,
+        items: menuItemsJsx,
+        mobileExpanded: isMobileNavExpanded,
+        onToggleMobileNav: handleToggleMobileNav,
+        children: customNavItemJsx
+      }
+    )
+  ] }) });
+}
+
+// src/components/Link/Link.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function Link3({
+  variant = "text",
+  size = "md",
+  isExternal,
+  className,
+  as,
+  children,
+  ...rest
+}) {
+  const Component = isExternal ? "a" : as ?? "a";
+  const rootClassName = make_class_name("blocks-link", [
+    `blocks-link--${variant}`,
+    variant === "button" || variant === "button-outline" ? "usa-button" : void 0,
+    variant === "button-outline" ? "usa-button--outline" : void 0,
+    variant === "text" ? "usa-button--unstyled" : void 0,
+    `blocks-link--${size}`,
+    isExternal ? "blocks-link--external usa-link--external" : void 0,
+    className
+  ]);
+  return /* @__PURE__ */ jsxs11(Component, { className: rootClassName, ...get_external_anchor_props(isExternal), ...rest, children: [
+    children,
+    variant === "arrow" && /* @__PURE__ */ jsx11(ArrowIcon, {})
+  ] });
+}
+
+// src/foundations/theme-token-bridge.helpers.ts
+var BASE_COLOR_TOKENS = [
+  "base-lightest",
+  "base-lighter",
+  "base-light",
+  "base",
+  "base-dark",
+  "base-darker",
+  "base-darkest",
+  "ink"
+];
+var PRIMARY_COLOR_TOKENS = [
+  "primary-lightest",
+  "primary-lighter",
+  "primary-light",
+  "primary",
+  "primary-vivid",
+  "primary-dark",
+  "primary-darker",
+  "primary-darkest"
+];
+var SECONDARY_COLOR_TOKENS = [
+  "secondary-lightest",
+  "secondary-lighter",
+  "secondary-light",
+  "secondary",
+  "secondary-vivid",
+  "secondary-dark",
+  "secondary-darker",
+  "secondary-darkest"
+];
+var ACCENT_COOL_COLOR_TOKENS = [
+  "accent-cool-lightest",
+  "accent-cool-lighter",
+  "accent-cool-light",
+  "accent-cool",
+  "accent-cool-dark",
+  "accent-cool-darker",
+  "accent-cool-darkest"
+];
+var ACCENT_WARM_COLOR_TOKENS = [
+  "accent-warm-lightest",
+  "accent-warm-lighter",
+  "accent-warm-light",
+  "accent-warm",
+  "accent-warm-dark",
+  "accent-warm-darker",
+  "accent-warm-darkest"
+];
+var INFO_COLOR_TOKENS = [
+  "info-lighter",
+  "info-light",
+  "info",
+  "info-dark",
+  "info-darker"
+];
+var WARNING_COLOR_TOKENS = [
+  "warning-lighter",
+  "warning-light",
+  "warning",
+  "warning-dark",
+  "warning-darker"
+];
+var ERROR_COLOR_TOKENS = [
+  "error-lighter",
+  "error-light",
+  "error",
+  "error-dark",
+  "error-darker"
+];
+var SUCCESS_COLOR_TOKENS = [
+  "success-lighter",
+  "success-light",
+  "success",
+  "success-dark",
+  "success-darker"
+];
+var DISABLED_COLOR_TOKENS = [
+  "disabled-lighter",
+  "disabled-light",
+  "disabled",
+  "disabled-dark",
+  "disabled-darker"
+];
+var EMERGENCY_COLOR_TOKENS = ["emergency", "emergency-dark"];
+var COLOR_TOKENS = [
+  ...BASE_COLOR_TOKENS,
+  ...PRIMARY_COLOR_TOKENS,
+  ...SECONDARY_COLOR_TOKENS,
+  ...ACCENT_COOL_COLOR_TOKENS,
+  ...ACCENT_WARM_COLOR_TOKENS,
+  ...INFO_COLOR_TOKENS,
+  ...WARNING_COLOR_TOKENS,
+  ...ERROR_COLOR_TOKENS,
+  ...SUCCESS_COLOR_TOKENS,
+  ...EMERGENCY_COLOR_TOKENS,
+  ...DISABLED_COLOR_TOKENS
+];
+var resolveColorToken = (color) => COLOR_TOKENS.includes(color) ? `var(--color-${color})` : color;
+
+// src/components/icons/CloseIcon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsx12("svg", { height: "24", width: "24", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx12("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
+
+// src/components/Tag/Tag.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function Tag({
+  variant = "solid",
+  size = "default",
+  color,
+  bgColor,
+  borderColor,
+  textColor,
+  icon,
+  onClose,
+  children,
+  className
+}) {
+  const rootClassName = make_class_name("blocks-tag", [
+    `blocks-tag--${variant}`,
+    size === "big" ? "blocks-tag--big" : void 0,
+    icon ? "blocks-tag--icon" : void 0,
+    onClose ? "blocks-tag--x-close" : void 0,
+    className
+  ]);
+  const customStyle = color || textColor || bgColor || borderColor ? {
+    ...color ? { "--blocks-tag-custom-color": resolveColorToken(color) } : void 0,
+    ...textColor ? { "--blocks-tag-custom-text-color": resolveColorToken(textColor) } : void 0,
+    ...bgColor ? { "--blocks-tag-custom-bg-color": resolveColorToken(bgColor) } : void 0,
+    ...borderColor ? { "--blocks-tag-custom-border-color": resolveColorToken(borderColor) } : void 0
+  } : void 0;
+  return /* @__PURE__ */ jsxs12("span", { className: rootClassName, style: customStyle, children: [
+    icon && /* @__PURE__ */ jsx13("span", { className: "blocks-tag__icon", children: icon }),
+    children,
+    onClose && /* @__PURE__ */ jsx13(
+      "button",
+      {
+        type: "button",
+        className: "blocks-tag__close-button",
+        "aria-label": "Remove tag",
+        tabIndex: 0,
+        onClick: onClose,
+        children: /* @__PURE__ */ jsx13(CloseIcon, {})
+      }
+    )
+  ] });
+}
+
+// src/geo/constants.ts
+var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
+  version: 8,
+  sources: {
+    "nasa-blue-marble": {
+      type: "raster",
+      tiles: [
+        "https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_NextGeneration/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg"
+      ],
+      tileSize: 256,
+      maxzoom: 8,
+      attribution: "Imagery courtesy NASA EOSDIS/GIBS"
+    }
+  },
+  layers: [
+    {
+      id: "nasa-blue-marble",
+      type: "raster",
+      source: "nasa-blue-marble"
+    }
+  ]
+};
+var STAC_API_URL = "https://openveda.cloud/api/stac";
+var TITILER_BASE_URL = "https://openveda.cloud/api/raster";
+var DEFAULT_RENDER_PARAMS = {
+  assets: ["cog_default"],
+  rescale: "0,0.0001",
+  resampling: "bilinear",
+  colormap_name: "viridis",
+  bidx: [1]
+};
+var DEFAULT_TILE_MATRIX_SET = "WebMercatorQuad";
+var STAC_COLORSTOP_RGBA_ARG_COUNT = 4;
+
+// src/geo/GeoConfigProvider.tsx
+import { StacApiProvider } from "@developmentseed/stac-react";
+import { createContext, useContext } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var GeoConfigContext = createContext(null);
+function useGeoConfig() {
+  const ctx = useContext(GeoConfigContext);
+  if (!ctx) throw new Error("Geo components require a GeoConfigProvider ancestor");
+  return ctx;
+}
+function GeoConfigProvider({
+  stacApiUrl = STAC_API_URL,
+  titilerBaseUrl = TITILER_BASE_URL,
+  children
+}) {
+  return /* @__PURE__ */ jsx14(GeoConfigContext.Provider, { value: { titilerBaseUrl }, children: /* @__PURE__ */ jsx14(StacApiProvider, { apiUrl: stacApiUrl, children }) });
+}
+
+// src/geo/Legend/Legend.tsx
+import { Icon as Icon3 } from "@trussworks/react-uswds";
+import { useState as useState3 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Legend({ initialExpanded = false, ...props }) {
+  const { title, description, unit, min, max, colorStops, provider, spatialExtent, timeDensity } = props;
+  const [isExpanded, setIsExpanded] = useState3(initialExpanded);
+  const subtitle = [provider, spatialExtent, timeDensity].some(isDefined) ? [provider, spatialExtent, timeDensity].filter(isDefined).join(" \xB7 ") : void 0;
+  return /* @__PURE__ */ jsxs13("div", { className: "blocks-legend", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "blocks-legend__header", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "blocks-legend__header-text", children: [
+        title && /* @__PURE__ */ jsx15("h3", { className: "blocks-legend__title", title, children: title }),
+        subtitle && /* @__PURE__ */ jsx15("p", { className: "blocks-legend__subtitle", title: subtitle, children: subtitle })
+      ] }),
+      description && /* @__PURE__ */ jsx15(
+        "button",
+        {
+          type: "button",
+          className: "blocks-legend__info-toggle",
+          "aria-expanded": isExpanded,
+          "aria-label": "Toggle layer description",
+          onClick: () => setIsExpanded((v) => !v),
+          children: /* @__PURE__ */ jsx15(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: "blocks-legend__gradient",
+        style: {
+          background: `linear-gradient(to right, ${colorStops.join(", ")})`
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs13("div", { className: "blocks-legend__labels", children: [
+      /* @__PURE__ */ jsx15("span", { className: "blocks-legend__min", children: min }),
+      /* @__PURE__ */ jsx15("span", { className: "blocks-legend__unit", children: unit }),
+      /* @__PURE__ */ jsx15("span", { className: "blocks-legend__max", children: max })
+    ] }),
+    isExpanded && description && /* @__PURE__ */ jsx15("div", { className: "blocks-legend__description", children: /* @__PURE__ */ jsx15("div", { className: "blocks-legend__description-inner", children: description }) })
+  ] });
+}
+
+// src/geo/StacCompareMap/StacCompareMap.tsx
+import { useEffect as useEffect3, useId, useRef as useRef3, useState as useState4 } from "react";
+import {
+  Layer,
+  Map as MapLibreMap,
+  NavigationControl,
+  Source
+} from "react-map-gl/maplibre";
+
+// src/geo/AttributionMapControl.tsx
+import maplibregl from "maplibre-gl";
+import { useControl } from "react-map-gl/maplibre";
+function AttributionMapControl({ position = "top-right" }) {
+  useControl(() => new maplibregl.AttributionControl(), { position });
+  return null;
+}
+
+// src/geo/utils/formatDateRange.ts
+function formatDateRange(dateRange) {
+  const from = /* @__PURE__ */ new Date(`${dateRange.from}T00:00:00Z`);
+  const to = /* @__PURE__ */ new Date(`${dateRange.to}T00:00:00Z`);
+  if (from.getUTCFullYear() === to.getUTCFullYear() && from.getUTCMonth() === to.getUTCMonth()) {
+    return from.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric",
+      timeZone: "UTC"
+    });
+  }
+  const fromStr = from.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+  const toStr = to.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    timeZone: "UTC"
+  });
+  return `${fromStr} \u2013 ${toStr}`;
+}
+
+// src/geo/DateChip/DateChip.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function DateChip({ left, right }) {
+  const label = right === void 0 || left.from === right.from && left.to === right.to ? formatDateRange(left) : `${formatDateRange(left)} vs ${formatDateRange(right)}`;
+  return /* @__PURE__ */ jsx16("div", { className: "blocks-date-chip", children: label });
+}
+
+// src/geo/hooks/useStacRasterLayer.ts
+import { useCollection } from "@developmentseed/stac-react";
+
+// src/geo/hooks/useMosaicTiles.ts
+import { useQuery } from "@tanstack/react-query";
+
+// src/geo/api/titiler/fetchTilejson.ts
+async function fetchTilejson(tilejsonUrl, queryString) {
+  const response = await fetch(`${tilejsonUrl}?${queryString}`);
+  if (!response.ok) {
+    const error = { detail: `Failed to fetch tilejson: ${response.statusText}` };
+    throw error;
+  }
+  const tilejson = await response.json();
+  if (!tilejson.tiles?.[0]) {
+    const error = { detail: "No tile URL found in response" };
+    throw error;
+  }
+  return tilejson.tiles[0];
+}
+
+// src/geo/api/titiler/mosaicLinks.ts
+function findTileLink(links) {
+  return links.find((link) => link.rel === "tiles") ?? links.at(1) ?? links.at(0) ?? null;
+}
+function buildTilejsonUrl(tileLinkHref, tileMatrixSet) {
+  return tileLinkHref.replace("/{tileMatrixSetId}", `/${tileMatrixSet}`);
+}
+function extractTileUrl(registrationResponse, tileMatrixSet) {
+  const tileLink = findTileLink(registrationResponse.links);
+  if (!tileLink?.href) {
+    const error = { detail: "No tile URL found in registration response" };
+    throw error;
+  }
+  const tilejsonUrl = buildTilejsonUrl(tileLink.href, tileMatrixSet);
+  return tilejsonUrl;
+}
+
+// src/geo/api/titiler/registerMosaic.ts
+async function registerMosaic(request) {
+  const { rasterApiUrl, collectionId, datetime } = request;
+  const response = await fetch(`${rasterApiUrl}/searches/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      collections: [collectionId],
+      datetime
+    })
+  });
+  if (!response.ok) {
+    const error = {
+      detail: `Failed to register mosaic: ${response.statusText}`,
+      status: response.status
+    };
+    throw error;
+  }
+  return response.json();
+}
+
+// src/geo/api/titiler/fetchMosaicTileUrl.ts
+var TILE_PARAMS = {
+  ASSETS: "assets",
+  RESCALE: "rescale",
+  RESAMPLING: "resampling",
+  COLORMAP_NAME: "colormap_name",
+  BIDX: "bidx"
+};
+function buildQueryParams(sourceParams) {
+  const params = new URLSearchParams();
+  if (sourceParams.assets) params.append(TILE_PARAMS.ASSETS, sourceParams.assets.join(","));
+  if (sourceParams.rescale) params.append(TILE_PARAMS.RESCALE, sourceParams.rescale);
+  if (sourceParams.resampling) params.append(TILE_PARAMS.RESAMPLING, sourceParams.resampling);
+  if (sourceParams.colormap_name)
+    params.append(TILE_PARAMS.COLORMAP_NAME, sourceParams.colormap_name);
+  if (sourceParams.bidx) params.append(TILE_PARAMS.BIDX, sourceParams.bidx.join(","));
+  return params;
+}
+async function fetchMosaicTileUrl(request) {
+  const { sourceParams, tileMatrixSet } = request;
+  const queryParams = buildQueryParams(sourceParams);
+  const queryString = queryParams.toString();
+  const registrationResponse = await registerMosaic(request);
+  const tilejsonUrl = extractTileUrl(registrationResponse, tileMatrixSet);
+  return fetchTilejson(tilejsonUrl, queryString);
+}
+
+// src/geo/utils/resolveAssetName.ts
+function resolveAssetName(collection) {
+  if (collection.renders?.dashboard?.assets?.[0]) {
+    return collection.renders.dashboard.assets[0];
+  }
+  if (collection.item_assets?.cog_default) {
+    return "cog_default";
+  }
+  if (collection.item_assets) {
+    const firstKey = Object.keys(collection.item_assets)[0];
+    if (firstKey) return firstKey;
+  }
+  return "cog_default";
+}
+
+// src/geo/hooks/useMosaicTiles.ts
+function useMosaicTiles(rasterLayerConfig, collection) {
+  const { titilerBaseUrl } = useGeoConfig();
+  const { collectionId, dateRange, tileMatrixSet = DEFAULT_TILE_MATRIX_SET } = rasterLayerConfig;
+  const datetime = dateRange.from === dateRange.to ? dateRange.from : `${dateRange.from}/${dateRange.to}`;
+  const assetName = collection ? resolveAssetName(collection) : DEFAULT_RENDER_PARAMS.assets[0];
+  const colormapName = collection?.renders?.dashboard?.colormap_name ?? DEFAULT_RENDER_PARAMS.colormap_name;
+  const rescale = collection?.renders?.dashboard?.rescale?.join(",") ?? DEFAULT_RENDER_PARAMS.rescale;
+  const resampling = collection?.renders?.dashboard?.resampling ?? DEFAULT_RENDER_PARAMS.resampling;
+  const request = {
+    rasterApiUrl: titilerBaseUrl,
+    collectionId,
+    datetime,
+    sourceParams: {
+      ...DEFAULT_RENDER_PARAMS,
+      assets: [assetName],
+      colormap_name: colormapName,
+      rescale,
+      resampling
+    },
+    tileMatrixSet
+  };
+  return useQuery({
+    queryKey: [collectionId, dateRange, titilerBaseUrl, assetName],
+    queryFn: () => fetchMosaicTileUrl(request),
+    staleTime: 30 * 60 * 1e3,
+    gcTime: 60 * 60 * 1e3,
+    enabled: !!collectionId && !!dateRange?.from && !!dateRange?.to
+  });
+}
+
+// src/geo/hooks/useStacRasterLegend.ts
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+
+// src/geo/utils/stac.formatters.ts
+var formatSpatialExtent = (spatialExtent) => {
+  const [minX, minY, maxX, maxY] = spatialExtent?.bbox?.[0] ?? [];
+  if (minX === void 0 || minY === void 0 || maxX === void 0 || maxY === void 0)
+    return void 0;
+  return maxX - minX >= 359 && maxY - minY >= 179 ? "global" : "regional";
+};
+
+// src/geo/utils/stac.typeguards.ts
+var isRgbaColorStopMap = (value) => {
+  return !isNil(value) && isObject(value) && !isEmptyObject(value) && getTypedValues(value).every(
+    (rgba) => isArray(rgba) && rgba.length === STAC_COLORSTOP_RGBA_ARG_COUNT && rgba.every(isNumber)
+  );
+};
+
+// src/geo/utils/extractLegendProps.ts
+function extractLegendProps(collection, colorStopMap) {
+  const rescale = collection.renders?.dashboard?.rescale?.[0];
+  if (!rescale) return null;
+  if (!isRgbaColorStopMap(colorStopMap)) return null;
+  const colorStops = getTypedValues(colorStopMap).map((rgba) => `rgba(${rgba.join(",")})`);
+  const title = collection.title;
+  const description = collection.description;
+  const provider = collection.providers?.[0]?.name;
+  const timeDensity = collection.properties?.["dashboard:time_density"];
+  const spatialExtent = formatSpatialExtent(collection.extent?.spatial);
+  const assetName = resolveAssetName(collection);
+  const unit = collection.item_assets?.[assetName]?.["raster:bands"]?.[0]?.unit;
+  return {
+    type: "gradient",
+    ...title && { title },
+    ...description && { description },
+    min: rescale[0],
+    max: rescale[1],
+    colorStops,
+    ...provider && { provider },
+    ...timeDensity && { timeDensity },
+    ...spatialExtent && { spatialExtent },
+    ...unit && { unit }
+  };
+}
+
+// src/geo/hooks/useStacRasterLegend.ts
+function useStacRasterLegend(collection) {
+  const { titilerBaseUrl } = useGeoConfig();
+  const query = useQuery2({
+    queryKey: ["legend", collection, titilerBaseUrl],
+    queryFn: async () => {
+      if (!collection) return null;
+      const colormapName = collection?.renders?.dashboard?.colormap_name;
+      if (!colormapName) return null;
+      const response = await fetch(`${titilerBaseUrl}/colorMaps/${colormapName}`);
+      if (!response.ok) {
+        const error = {
+          detail: `Colormap "${colormapName}" not found (HTTP ${response.status})`,
+          status: response.status
+        };
+        throw error;
+      }
+      const colorMap = await response.json();
+      return extractLegendProps(collection, colorMap);
+    },
+    enabled: !!collection
+  });
+  return {
+    legend: query.data ?? null,
+    isLoading: query.isLoading,
+    error: query.error || null
+  };
+}
+
+// src/geo/hooks/useStacRasterLayer.ts
+function useStacRasterLayer(rasterLayerConfig) {
+  const { collectionId } = rasterLayerConfig;
+  const {
+    collection,
+    isLoading: isLoadingCollection,
+    error: collectionError
+  } = useCollection(collectionId);
+  const extCollection = collection;
+  const {
+    data: tiles,
+    isLoading: tilesetLoading,
+    error: tilesetError
+  } = useMosaicTiles(rasterLayerConfig, extCollection);
+  const {
+    legend,
+    isLoading: isLoadingLegend,
+    error: legendError
+  } = useStacRasterLegend(extCollection);
+  return {
+    mapSource: {
+      tiles: tiles ?? null
+    },
+    legend,
+    isLoading: isLoadingCollection || tilesetLoading || isLoadingLegend,
+    error: collectionError || tilesetError || legendError || null
+  };
+}
+
+// src/geo/StacCompareMap/StacCompareMap.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var MAP_PANEL_STYLE = {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  width: "100%"
+};
+function StacCompareMap({
+  baseMapStyle,
+  initialViewState,
+  leftLayerConfig,
+  rightLayerConfig,
+  className
+}) {
+  const instanceId = useId();
+  const leftMapRef = useRef3(null);
+  const rightMapRef = useRef3(null);
+  const compareRef = useRef3(null);
+  const containerRef = useRef3(null);
+  const [leftMapLoaded, setLeftMapLoaded] = useState4(false);
+  const [rightMapLoaded, setRightMapLoaded] = useState4(false);
+  const containerClassName = make_class_name("blocks-stacmap-compare", [className]);
+  const left = useStacRasterLayer(leftLayerConfig);
+  const right = useStacRasterLayer(rightLayerConfig);
+  const isSameCollection = leftLayerConfig.collectionId === rightLayerConfig.collectionId;
+  const leftSourceId = `${leftLayerConfig.collectionId}-raster-source-left-${instanceId}`;
+  const leftLayerId = `${leftLayerConfig.collectionId}-raster-layer-left-${instanceId}`;
+  const rightSourceId = `${rightLayerConfig.collectionId}-raster-source-right-${instanceId}`;
+  const rightLayerId = `${rightLayerConfig.collectionId}-raster-layer-right-${instanceId}`;
+  useEffect3(() => {
+    if (!leftMapLoaded || !rightMapLoaded) return;
+    if (compareRef.current) return;
+    const leftMap = leftMapRef.current?.getMap();
+    const rightMap = rightMapRef.current?.getMap();
+    const container = containerRef.current;
+    if (!leftMap || !rightMap || !container) return;
+    import("mapbox-gl-compare").then(({ default: MapboxCompare }) => {
+      if (compareRef.current) return;
+      try {
+        compareRef.current = new MapboxCompare(leftMap, rightMap, container, {
+          mousemove: false,
+          orientation: "vertical"
+        });
+      } catch (error) {
+        console.error("Failed to initialize mapbox-gl-compare:", error);
+      }
+    });
+  }, [leftMapLoaded, rightMapLoaded]);
+  useEffect3(() => {
+    return () => {
+      compareRef.current?.remove();
+      compareRef.current = null;
+    };
+  }, []);
+  const mapProps = {
+    ...baseMapStyle && { mapStyle: baseMapStyle },
+    ...initialViewState && { initialViewState },
+    style: MAP_PANEL_STYLE
+  };
+  return /* @__PURE__ */ jsxs14("div", { ref: containerRef, className: containerClassName, children: [
+    /* @__PURE__ */ jsxs14(
+      MapLibreMap,
+      {
+        ref: leftMapRef,
+        ...mapProps,
+        attributionControl: false,
+        onLoad: () => setLeftMapLoaded(true),
+        children: [
+          /* @__PURE__ */ jsx17(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx17(NavigationControl, { position: "top-left", showCompass: false }),
+          left.mapSource.tiles && /* @__PURE__ */ jsx17(Source, { id: leftSourceId, type: "raster", tiles: [left.mapSource.tiles], children: /* @__PURE__ */ jsx17(Layer, { id: leftLayerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs14(
+      MapLibreMap,
+      {
+        ref: rightMapRef,
+        ...mapProps,
+        attributionControl: false,
+        onLoad: () => setRightMapLoaded(true),
+        children: [
+          /* @__PURE__ */ jsx17(AttributionMapControl, {}),
+          right.mapSource.tiles && /* @__PURE__ */ jsx17(Source, { id: rightSourceId, type: "raster", tiles: [right.mapSource.tiles], children: /* @__PURE__ */ jsx17(Layer, { id: rightLayerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx17("div", { className: "blocks-stacmap-compare__date-chip", children: /* @__PURE__ */ jsx17(DateChip, { left: leftLayerConfig.dateRange, right: rightLayerConfig.dateRange }) }),
+    !isSameCollection && left.legend && /* @__PURE__ */ jsx17("div", { className: "blocks-stacmap-compare__legend-left", children: /* @__PURE__ */ jsx17(Legend, { ...left.legend }) }),
+    right.legend && /* @__PURE__ */ jsx17("div", { className: "blocks-stacmap-compare__legend-right", children: /* @__PURE__ */ jsx17(Legend, { ...right.legend }) })
+  ] });
+}
+
+// src/geo/StacSingleLayerMap/StacSingleLayerMap.tsx
+import { useId as useId2 } from "react";
+import {
+  Layer as Layer2,
+  Map as MapLibreMap2,
+  NavigationControl as NavigationControl2,
+  Source as Source2
+} from "react-map-gl/maplibre";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function StacSingleLayerMap({
+  baseMapStyle = NASA_BLUE_MARBLE_BASEMAP_STYLE,
+  initialViewState,
+  layerConfig
+}) {
+  const instanceId = useId2();
+  const sourceId = `${layerConfig.collectionId}-raster-source-${instanceId}`;
+  const layerId = `${layerConfig.collectionId}-raster-layer-${instanceId}`;
+  const { mapSource, legend } = useStacRasterLayer(layerConfig);
+  return /* @__PURE__ */ jsxs15("div", { className: "blocks-stacmap-singlelayer", children: [
+    /* @__PURE__ */ jsxs15(
+      MapLibreMap2,
+      {
+        mapStyle: baseMapStyle,
+        ...initialViewState && { initialViewState },
+        style: { position: "absolute", inset: 0 },
+        attributionControl: false,
+        children: [
+          /* @__PURE__ */ jsx18(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx18(NavigationControl2, { position: "top-left", showCompass: false }),
+          mapSource.tiles && /* @__PURE__ */ jsx18(Source2, { id: sourceId, type: "raster", tiles: [mapSource.tiles], children: /* @__PURE__ */ jsx18(Layer2, { id: layerId, type: "raster" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: "blocks-stacmap-singlelayer__legend", children: legend && /* @__PURE__ */ jsx18(Legend, { ...legend }) }),
+    /* @__PURE__ */ jsx18("div", { className: "blocks-stacmap-singlelayer__date-chip", children: /* @__PURE__ */ jsx18(DateChip, { left: layerConfig.dateRange }) })
+  ] });
+}
+export {
+  Banner,
+  Card,
+  CardCTA,
+  CardDetailed,
+  CardMini,
+  CardSimple,
+  Footer,
+  GeoConfigProvider,
+  Header,
+  Legend,
+  Link3 as Link,
+  NASA_BLUE_MARBLE_BASEMAP_STYLE,
+  StacCompareMap,
+  StacSingleLayerMap,
+  Tag
+};