@teamimpact/veda-ui-blocks 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/index.js

@@ -19,9 +19,13 @@ 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" } : {};
@@ -98,40 +102,8 @@ var DEFAULT_EXPANDED_CONTENT_JSX = /* @__PURE__ */ jsxs("div", { className: "blo
   ] })
 ] });
 
-// src/components/Button/Button.tsx
-import { Button as USWDSButton } from "@trussworks/react-uswds";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Button({
-  type = "button",
-  secondary = false,
-  base = false,
-  accentStyle,
-  outline = false,
-  inverse = false,
-  size,
-  unstyled = false,
-  children,
-  className,
-  ...rest
-}) {
-  const uswdsButtonProps = {
-    secondary,
-    base,
-    outline,
-    inverse,
-    unstyled,
-    className,
-    type,
-    // Only add accentStyle and size if defined, to avoid passing undefined
-    ...accentStyle ? { accentStyle } : {},
-    ...size ? { size } : {},
-    children
-  };
-  return /* @__PURE__ */ jsx2(USWDSButton, { ...rest, ...uswdsButtonProps });
-}
-
 // src/components/Cards/Card/Card.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Card({
   tag,
   title,
@@ -154,26 +126,52 @@ function Card({
   ]);
   const hasContent = tag || title || subtitle || description || callToAction || callToActionSecondary;
   return /* @__PURE__ */ jsxs2("div", { className: rootClassName, children: [
-    imagePosition === "cover" && /* @__PURE__ */ jsx3("div", { className: "blocks-card__media", children: image }),
+    imagePosition === "cover" && /* @__PURE__ */ jsx2("div", { className: "blocks-card__media", children: image }),
     /* @__PURE__ */ jsxs2("div", { className: "blocks-card__content-container", children: [
-      imagePosition !== "cover" && /* @__PURE__ */ jsx3("div", { className: "blocks-card__media", children: image }),
+      imagePosition !== "cover" && /* @__PURE__ */ jsx2("div", { className: "blocks-card__media", children: image }),
       hasContent && /* @__PURE__ */ jsxs2("div", { className: "blocks-card__content", children: [
-        tag && /* @__PURE__ */ jsx3("div", { className: "blocks-card__tag", children: tag }),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx3("h2", { className: "blocks-card__title", children: title }) : title),
-        subtitle && /* @__PURE__ */ jsx3("div", { className: "blocks-card__subtitle", children: subtitle }),
-        description && /* @__PURE__ */ jsx3("p", { className: "blocks-card__description", children: description }),
+        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__ */ jsx3("a", { href: callToAction.href, className: "usa-button", children: callToAction.label }),
-          callToActionSecondary && /* @__PURE__ */ jsx3("a", { href: callToActionSecondary.href, className: "usa-button usa-button--outline", children: callToActionSecondary.label })
+          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__ */ jsx3("div", { className: "blocks-card__children", children })
+    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 jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function CardCTA({
   title,
   url,
@@ -190,75 +188,54 @@ function CardCTA({
     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__ */ jsxs3("div", { className: "blocks-card-cta__body", children: [
-    /* @__PURE__ */ jsxs3(TitleTag, { className: "blocks-card-cta__title", title, children: [
+  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__ */ 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__ */ jsx4("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
-            /* @__PURE__ */ jsx4("g", { transform: "translate(5.333, 5.333)", children: /* @__PURE__ */ jsx4(
-              "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"
-              }
-            ) })
-          ]
-        }
-      ) })
+      /* @__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 jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function CardDetailed({
   intro,
   title,
   description,
   tags = [],
-  contentTypeTag,
+  callToAction,
+  callToActionSecondary,
+  tagPrimary,
   image,
-  action,
   imagePosition = "top",
-  borderAccent = false,
-  titleAs = "h2",
   className = ""
 }) {
-  const TitleTag = titleAs;
-  const cardClassName = make_class_name("blocks-card-detailed", [
+  const rootClassName = make_class_name("blocks-card-detailed", [
     imagePosition !== "top" ? `blocks-card-detailed--image-${imagePosition}` : "",
     className
   ]);
-  return /* @__PURE__ */ jsxs4("div", { className: cardClassName, children: [
-    borderAccent && /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", className: "blocks-card-detailed__accent-bar" }),
-    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__content", children: [
-      intro && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__intro", children: intro }),
-      /* @__PURE__ */ jsx5(TitleTag, { className: "blocks-card-detailed__title", children: title }),
-      description && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__description", children: description }),
-      isNonEmptyArray(tags) && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tags", children: tags }),
-      action && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__action", children: action })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__image-wrapper", children: [
+  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,
-      contentTypeTag && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__content-type-tag", children: contentTypeTag })
+      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 jsxs5 } from "react/jsx-runtime";
+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);
@@ -266,9 +243,9 @@ function CardMini({ image, title, url, tag, titleAs = "h2", className }) {
     hasTag ? "blocks-card-mini--with-tag" : void 0,
     className
   ]);
-  return /* @__PURE__ */ jsxs5("a", { href: url, className: rootClassName, children: [
+  return /* @__PURE__ */ jsxs6("a", { href: url, className: rootClassName, children: [
     /* @__PURE__ */ jsx6("div", { className: "blocks-card-mini__image", children: image }),
-    /* @__PURE__ */ jsxs5("div", { className: "blocks-card-mini__body", children: [
+    /* @__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 })
     ] })
@@ -276,29 +253,27 @@ function CardMini({ image, title, url, tag, titleAs = "h2", className }) {
 }
 
 // src/components/Cards/CardSimple/CardSimple.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function CardSimple({
   title,
   image,
   url,
   tag,
-  showOverlay = false,
   size = "default",
   titleAs = "h2",
   className
 }) {
   const TitleTag = titleAs;
   const rootClassName = make_class_name("blocks-card-simple", [
-    showOverlay ? "blocks-card-simple--with-overlay" : void 0,
     size === "compact" ? "blocks-card-simple--compact" : void 0,
     className
   ]);
-  return /* @__PURE__ */ jsxs6("a", { href: url, className: rootClassName, children: [
-    /* @__PURE__ */ jsxs6("div", { className: "blocks-card-simple__media", children: [
+  return /* @__PURE__ */ jsxs7("a", { href: url, className: rootClassName, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "blocks-card-simple__media", children: [
       image,
-      showOverlay && /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "blocks-card-simple__body", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "blocks-card-simple__body", children: [
       tag && /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__tag", children: tag }),
       /* @__PURE__ */ jsx7(TitleTag, { className: "blocks-card-simple__title", children: title })
     ] })
@@ -307,7 +282,7 @@ function CardSimple({
 
 // 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 jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function Footer({
   portalDetails,
   primaryNavItems,
@@ -321,25 +296,25 @@ function Footer({
     {
       className: footerClassName,
       size: "slim",
-      primary: /* @__PURE__ */ jsxs7(GridContainer, { children: [
-        portalDetails.logo ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__primary-section-upper", children: portalDetails.logo }) : null,
-        /* @__PURE__ */ jsxs7("section", { className: "blocks-footer__primary-section-lower", children: [
-          /* @__PURE__ */ jsxs7("div", { className: "blocks-footer__title", children: [
+      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__ */ jsxs7(Fragment, { children: [
+          ] })
+        ] }),
+        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",
           {
@@ -348,19 +323,20 @@ function Footer({
             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__ */ jsxs7("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__ */ jsxs7("li", { children: [
+        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__ */ jsxs7("div", { className: "blocks-footer__secondary-meta", children: [
-            portalDetails.updatedDate ? /* @__PURE__ */ jsxs7("p", { children: [
+          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__ */ jsxs7("li", { children: [
+            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__ */ jsxs7(Link, { href: `mailto:${email}`, ...get_external_anchor_props(), children: [
+              /* @__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 })
               ] })
@@ -420,7 +396,7 @@ function useWindowResize(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 jsxs8 } from "react/jsx-runtime";
+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) => {
@@ -467,7 +443,7 @@ var make_menu_link_jsx = ({ label, href, isExternal, isPrimary }, options) => {
 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__ */ jsxs8(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx9(
       NavDropDownButton,
       {
@@ -493,7 +469,7 @@ var make_custom_nav_item_jsx = (customNavItem) => isNavItem(customNavItem) ? /*
 ) : customNavItem;
 
 // src/components/Header/Header.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function Header(props) {
   const {
     portalDetails: { logo, title, url },
@@ -561,9 +537,9 @@ function Header(props) {
       currentPath
     }) : make_menu_link_jsx(item, { currentPath })
   );
-  return /* @__PURE__ */ jsx10(USWDSHeader, { className: headerClassName, basic: true, showMobileOverlay: isMobileNavExpanded, children: /* @__PURE__ */ jsxs9("div", { className: "usa-nav-container", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "usa-navbar", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "blocks-header__portal-details", children: [
+  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
       ] }),
@@ -582,12 +558,145 @@ function Header(props) {
   ] }) });
 }
 
+// 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 jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function Tag({
   variant = "solid",
   size = "default",
   color,
+  bgColor,
+  borderColor,
   textColor,
   icon,
   onClose,
@@ -601,14 +710,16 @@ function Tag({
     onClose ? "blocks-tag--x-close" : void 0,
     className
   ]);
-  const customStyle = color || textColor ? {
-    ...color ? { "--blocks-tag-custom-color": color } : void 0,
-    ...textColor ? { "--blocks-tag-custom-text-color": textColor } : void 0
+  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__ */ jsxs10("span", { className: rootClassName, style: customStyle, children: [
-    icon && /* @__PURE__ */ jsx11("span", { className: "blocks-tag__icon", children: icon }),
+  return /* @__PURE__ */ jsxs12("span", { className: rootClassName, style: customStyle, children: [
+    icon && /* @__PURE__ */ jsx13("span", { className: "blocks-tag__icon", children: icon }),
     children,
-    onClose && /* @__PURE__ */ jsx11(
+    onClose && /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -616,14 +727,15 @@ function Tag({
         "aria-label": "Remove tag",
         tabIndex: 0,
         onClick: onClose,
-        children: /* @__PURE__ */ jsx11("svg", { height: "24", width: "24", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx11("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" }) })
+        children: /* @__PURE__ */ jsx13(CloseIcon, {})
       }
     )
   ] });
 }
 
-// src/geo/SingleLayerMap/SingleLayerMap.tsx
-import { Map as MapLibreMap } from "react-map-gl/maplibre";
+// src/geo/GeoConfigProvider.tsx
+import { StacApiProvider } from "@developmentseed/stac-react";
+import { createContext, useContext } from "react";
 
 // src/geo/constants.ts
 var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
@@ -647,35 +759,484 @@ var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
     }
   ]
 };
+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/SingleLayerMap/SingleLayerMap.tsx
-import "maplibre-gl/dist/maplibre-gl.css";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var SingleLayerMap = function SingleLayerMap2({
-  baseMapStyle = NASA_BLUE_MARBLE_BASEMAP_STYLE,
-  initialViewState,
+// src/geo/GeoConfigProvider.tsx
+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__ */ jsx12(
-    MapLibreMap,
-    {
-      mapStyle: baseMapStyle,
-      ...initialViewState && { initialViewState },
-      style: { width: "100%", flex: 1, minHeight: 0 },
-      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/hooks/useMosaicTiles.ts
+function useMosaicTiles(rasterLayerConfig) {
+  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 request = {
+    rasterApiUrl: titilerBaseUrl,
+    collectionId,
+    datetime,
+    sourceParams: {
+      ...DEFAULT_RENDER_PARAMS,
+      assets: [...DEFAULT_RENDER_PARAMS.assets],
+      bidx: [...DEFAULT_RENDER_PARAMS.bidx]
+    },
+    tileMatrixSet
+  };
+  return useQuery({
+    queryKey: [collectionId, dateRange, titilerBaseUrl],
+    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 unit = collection.item_assets?.cog_default?.["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 {
+    data: tiles,
+    isLoading: tilesetLoading,
+    error: tilesetError
+  } = useMosaicTiles(rasterLayerConfig);
+  const {
+    legend,
+    isLoading: isLoadingLegend,
+    error: legendError
+  } = useStacRasterLegend(collection);
+  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,
-  Button,
   Card,
   CardCTA,
   CardDetailed,
   CardMini,
   CardSimple,
   Footer,
+  GeoConfigProvider,
   Header,
-  SingleLayerMap,
+  Legend,
+  Link3 as Link,
+  StacCompareMap,
+  StacSingleLayerMap,
   Tag
 };