@teamimpact/veda-ui-blocks 0.1.0-beta.12 → 0.1.0-beta.14

package/dist/index.js

@@ -103,51 +103,9 @@ var DEFAULT_EXPANDED_CONTENT_JSX = /* @__PURE__ */ jsxs("div", { className: "blo
   ] })
 ] });
 
-// 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(
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ArrowIcon = () => /* @__PURE__ */ jsxs2(
   "svg",
   {
     width: "20",
@@ -157,8 +115,8 @@ var ArrowIcon = () => /* @__PURE__ */ jsxs3(
     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(
+      /* @__PURE__ */ jsx2("circle", { cx: "10", cy: "10", r: "10", fill: "currentColor" }),
+      /* @__PURE__ */ jsx2("g", { transform: "translate(5.333, 5.333)", children: /* @__PURE__ */ jsx2(
         "path",
         {
           fillRule: "evenodd",
@@ -171,35 +129,188 @@ var ArrowIcon = () => /* @__PURE__ */ jsxs3(
   }
 );
 
+// src/components/Link/AsLink.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function AsLink({
+  as,
+  isExternal,
+  children,
+  ...rest
+}) {
+  const Component = as ?? "a";
+  return /* @__PURE__ */ jsx3(
+    Component,
+    {
+      ...rest,
+      ...typeof as !== "string" || as === "a" ? get_external_anchor_props(isExternal) : {},
+      children
+    }
+  );
+}
+
+// src/components/Link/Link.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Link({
+  variant = "text",
+  size = "md",
+  isExternal,
+  className,
+  as,
+  children,
+  ...rest
+}) {
+  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
+  ]);
+  const props = {
+    className: rootClassName,
+    as,
+    isExternal,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxs3(AsLink, { ...props, children: [
+    children,
+    variant === "arrow" && /* @__PURE__ */ jsx4(ArrowIcon, {})
+  ] });
+}
+
+// src/components/Cards/Card/Card.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Card(props) {
+  const {
+    tag,
+    title,
+    description,
+    subtitle,
+    callToAction,
+    callToActionSecondary,
+    image,
+    imagePosition = "cover",
+    colorMode = "light",
+    isMastHead = false,
+    className,
+    children
+  } = props;
+  const {
+    label: callToActionLabel,
+    variant: callToActionVariant = "button",
+    ...callToActionProps
+  } = callToAction ?? {};
+  const {
+    label: callToActionSecondaryLabel,
+    variant: callToActionSecondaryVariant = "button-outline",
+    ...callToActionSecondaryProps
+  } = callToActionSecondary ?? {};
+  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__ */ jsxs4("div", { className: rootClassName, children: [
+    imagePosition === "cover" && /* @__PURE__ */ jsx5("div", { className: "blocks-card__media", children: image }),
+    /* @__PURE__ */ jsxs4("div", { className: "blocks-card__content-container", children: [
+      imagePosition !== "cover" && /* @__PURE__ */ jsx5("div", { className: "blocks-card__media", children: image }),
+      hasContent && /* @__PURE__ */ jsxs4("div", { className: "blocks-card__content", children: [
+        tag && /* @__PURE__ */ jsx5("div", { className: "blocks-card__tag", children: tag }),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx5("h2", { className: "blocks-card__title", children: title }) : title),
+        subtitle && /* @__PURE__ */ jsx5("div", { className: "blocks-card__subtitle", children: subtitle }),
+        description && /* @__PURE__ */ jsx5("p", { className: "blocks-card__description", children: description }),
+        (callToAction || callToActionSecondary) && /* @__PURE__ */ jsxs4("div", { className: "blocks-card__actions", children: [
+          callToAction && /* @__PURE__ */ jsx5(
+            Link,
+            {
+              ...{
+                ...callToActionProps,
+                variant: callToActionVariant,
+                children: callToActionLabel
+                // TypeScript cannot verify that spread props for callToAction satisfy Omit<ComponentPropsWithRef<T>, "as">
+                // for an unconstrained generic T. Cast through unknown preserves T so callers still get
+                // accurate prop checking (e.g. href only valid when as="a").
+                // TypeScript cannot verify generics when props are spread and generics must be inferred
+                // For accurate prop checking, all props need to be explicitly defined
+                // ex. ❌ <Card {...props} callToAction={...callToActionProps} /> vs ✅ <Card {...props} callToAction={{label: "text", href="/", as: "a"}} />
+              }
+            }
+          ),
+          callToActionSecondary && /* @__PURE__ */ jsx5(
+            Link,
+            {
+              ...{
+                ...callToActionSecondaryProps,
+                variant: callToActionSecondaryVariant,
+                children: callToActionSecondaryLabel
+                // See typescript warning above
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    children && /* @__PURE__ */ jsx5("div", { className: "blocks-card__children", children })
+  ] });
+}
+
 // src/components/Cards/CardCTA/CardCTA.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function CardCTA({
   title,
-  url,
+  titleAs = "h2",
   description,
   accentColor,
-  titleAs = "h2",
   className,
   style,
+  isExternal,
+  as,
   ...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 })
-  ] }) });
+  const [isHovered, setIsHovered] = useState2(false);
+  const props = {
+    className: rootClassName,
+    style: { ...accentColorStyle, ...style },
+    as,
+    isExternal,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx6(
+    AsLink,
+    {
+      ...props,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: /* @__PURE__ */ jsxs5("div", { className: "blocks-card-cta__body", children: [
+        /* @__PURE__ */ jsx6(
+          Link,
+          {
+            as: titleAs,
+            className: `blocks-card-cta__title ${isHovered ? "usa-button--hover" : ""}`,
+            isExternal,
+            size: "lg",
+            variant: "arrow",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx6("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";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function CardDetailed({
   intro,
   title,
@@ -212,58 +323,111 @@ function CardDetailed({
   imagePosition = "top",
   className = ""
 }) {
+  const {
+    label: callToActionLabel,
+    variant: callToActionVariant = "button",
+    ...callToActionProps
+  } = callToAction ?? {};
+  const {
+    label: callToActionSecondaryLabel,
+    variant: callToActionSecondaryVariant = "button-outline",
+    ...callToActionSecondaryProps
+  } = callToActionSecondary ?? {};
   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: [
+  return /* @__PURE__ */ jsxs6("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "blocks-card-detailed__media", children: [
       image,
-      tagPrimary && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tag-primary", children: tagPrimary })
+      tagPrimary && /* @__PURE__ */ jsx7("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 })
+    hasContent && /* @__PURE__ */ jsxs6("div", { className: "blocks-card-detailed__content-container", children: [
+      intro && /* @__PURE__ */ jsx7("div", { className: "blocks-card-detailed__intro", title: intro, children: intro }),
+      title && (typeof title === "string" ? /* @__PURE__ */ jsx7("h2", { className: "blocks-card-detailed__title", title, children: title }) : title),
+      isNonEmptyArray(tags) && /* @__PURE__ */ jsx7("div", { className: "blocks-card-detailed__tags", children: tags }),
+      description && /* @__PURE__ */ jsx7("p", { className: "blocks-card-detailed__description", children: description }),
+      (callToAction || callToActionSecondary) && /* @__PURE__ */ jsxs6("div", { className: "blocks-card-detailed__actions", children: [
+        callToAction && /* @__PURE__ */ jsx7(
+          Link,
+          {
+            ...{
+              ...callToActionProps,
+              variant: callToActionVariant,
+              children: callToActionLabel
+              // TypeScript cannot verify that spread props for callToAction satisfy Omit<ComponentPropsWithRef<T>, "as">
+              // for an unconstrained generic T. Cast through unknown preserves T so callers still get
+              // accurate prop checking (e.g. href only valid when as="a").
+              // TypeScript cannot verify generics when props are spread and generics must be inferred
+              // For accurate prop checking, all props need to be explicitly defined
+              // ex. ❌ <CardDetailed {...props} callToAction={...callToActionProps} /> vs ✅ <CardDetailed {...props} callToAction={{label: "text", href="/", as: "a"}} />
+            }
+          }
+        ),
+        callToActionSecondary && /* @__PURE__ */ jsx7(
+          Link,
+          {
+            ...{
+              ...callToActionSecondaryProps,
+              variant: callToActionSecondaryVariant,
+              children: callToActionSecondaryLabel
+              // See typescript warning above
+            }
+          }
+        )
       ] })
     ] })
   ] });
 }
 
 // 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 }) {
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function CardMini({
+  image,
+  title,
+  titleAs = "h2",
+  tag,
+  className,
+  isExternal,
+  as,
+  ...rest
+}) {
   const TitleTag = titleAs;
-  const hasTag = Boolean(tag);
   const rootClassName = make_class_name("blocks-card-mini", [
-    hasTag ? "blocks-card-mini--with-tag" : void 0,
+    isDefined(tag) ? "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 })
+  const titleClassName = make_class_name("blocks-card-mini__title", [
+    isExternal ? "usa-link--external" : void 0
+  ]);
+  const props = {
+    className: rootClassName,
+    as,
+    isExternal,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxs7(AsLink, { ...props, children: [
+    /* @__PURE__ */ jsx8("div", { className: "blocks-card-mini__image", children: image }),
+    /* @__PURE__ */ jsxs7("div", { className: "blocks-card-mini__body", children: [
+      /* @__PURE__ */ jsx8(TitleTag, { className: titleClassName, title, children: title }),
+      tag && /* @__PURE__ */ jsx8("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";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function CardSimple({
-  title,
   image,
-  url,
-  isExternal,
+  title,
+  titleAs = "h2",
   tag,
   size = "default",
-  titleAs = "h2",
-  className
+  className,
+  isExternal,
+  as,
+  ...rest
 }) {
   const TitleTag = titleAs;
   const rootClassName = make_class_name("blocks-card-simple", [
@@ -273,21 +437,290 @@ function CardSimple({
   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: [
+  const props = {
+    className: rootClassName,
+    as,
+    isExternal,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxs8(AsLink, { ...props, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "blocks-card-simple__media", children: [
       image,
-      /* @__PURE__ */ jsx7("div", { className: "blocks-card-simple__overlay", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx9("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 })
+    /* @__PURE__ */ jsxs8("div", { className: "blocks-card-simple__body", children: [
+      tag && /* @__PURE__ */ jsx9("div", { className: "blocks-card-simple__tag", children: tag }),
+      /* @__PURE__ */ jsx9(TitleTag, { className: titleClassName, children: title })
     ] })
   ] });
 }
 
+// src/components/Carousel/Carousel.tsx
+import useEmblaCarousel from "embla-carousel-react";
+import { useCallback, useEffect, useState as useState3 } from "react";
+
+// src/components/icons/NavigateBeforeIcon.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var NavigateBeforeIcon = () => /* @__PURE__ */ jsx10(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    role: "img",
+    children: /* @__PURE__ */ jsx10("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  }
+);
+
+// src/components/icons/NavigateNextIcon.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var NavigateNextIcon = () => /* @__PURE__ */ jsx11(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    role: "img",
+    children: /* @__PURE__ */ jsx11("path", { d: "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" })
+  }
+);
+
+// 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 jsxs9 } 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__ */ jsxs9("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/components/Carousel/Carousel.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function Carousel({ items, maxVisibleItems = 2, className }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    slidesToScroll: "auto"
+  });
+  const [, forceUpdate] = useState3(0);
+  useEffect(() => {
+    if (!emblaApi) return;
+    const onEmblaStateChange = () => forceUpdate((n) => n + 1);
+    emblaApi.on("select", onEmblaStateChange).on("reInit", onEmblaStateChange).on("init", onEmblaStateChange);
+  }, [emblaApi]);
+  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+  const showControls = items.length > maxVisibleItems;
+  const effectiveVisibleItems = Math.min(items.length, maxVisibleItems);
+  return /* @__PURE__ */ jsxs10("div", { className: make_class_name("blocks-carousel", [className]), children: [
+    /* @__PURE__ */ jsx14("div", { className: "blocks-carousel__viewport", ref: emblaRef, children: /* @__PURE__ */ jsx14("div", { className: "blocks-carousel__track", children: items.map(({ tag: { label: tagLabel, ...tagProps } = {}, ...cardProps }, index) => /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className: make_class_name("blocks-carousel__item", [
+          `blocks-carousel__item--${effectiveVisibleItems}`
+        ]),
+        children: /* @__PURE__ */ jsx14(
+          Card,
+          {
+            ...cardProps,
+            ...tagLabel && { tag: /* @__PURE__ */ jsx14(Tag, { ...tagProps, children: tagLabel }) }
+          }
+        )
+      },
+      index
+    )) }) }),
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: make_class_name("blocks-carousel__controls", [
+          !showControls ? "blocks-carousel__controls--hidden" : void 0
+        ]),
+        "aria-hidden": !showControls || void 0,
+        children: [
+          /* @__PURE__ */ jsx14(
+            Link,
+            {
+              as: "button",
+              type: "button",
+              variant: "text",
+              className: "blocks-carousel__btn blocks-carousel__btn--prev",
+              onClick: scrollPrev,
+              disabled: !emblaApi?.canScrollPrev(),
+              "aria-label": "Previous slide",
+              children: /* @__PURE__ */ jsx14(NavigateBeforeIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs10("span", { className: "blocks-carousel__counter", "aria-live": "polite", children: [
+            (emblaApi?.selectedScrollSnap() ?? 0) + 1,
+            " / ",
+            emblaApi?.scrollSnapList().length ?? 0
+          ] }),
+          /* @__PURE__ */ jsx14(
+            Link,
+            {
+              as: "button",
+              type: "button",
+              variant: "text",
+              className: "blocks-carousel__btn blocks-carousel__btn--next",
+              onClick: scrollNext,
+              disabled: !emblaApi?.canScrollNext(),
+              "aria-label": "Next slide",
+              children: /* @__PURE__ */ jsx14(NavigateNextIcon, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
 // 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";
+import { GridContainer, Icon as Icon2, Link as Link2, Footer as USWDSFooter } from "@trussworks/react-uswds";
+import { Fragment, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Footer({
   portalDetails,
   primaryNavItems,
@@ -296,21 +729,21 @@ function Footer({
   className
 }) {
   const footerClassName = make_class_name("blocks-footer", [className]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx15(
     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
+      primary: /* @__PURE__ */ jsx15(GridContainer, { children: /* @__PURE__ */ jsxs11("section", { className: "blocks-footer__primary-section", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "blocks-footer__title", children: [
+          portalDetails.logo ? /* @__PURE__ */ jsx15("div", { className: "blocks-footer__logo", children: portalDetails.logo }) : null,
+          /* @__PURE__ */ jsxs11("div", { className: "blocks-footer__title-text", children: [
+            /* @__PURE__ */ jsx15("span", { children: portalDetails.title }),
+            portalDetails.tagline ? /* @__PURE__ */ jsx15("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,
+        primaryNavItems.length > 0 ? /* @__PURE__ */ jsx15("nav", { className: "blocks-footer__primary-nav", "aria-label": "Footer primary navigation", children: /* @__PURE__ */ jsx15("ul", { children: primaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx15("li", { className: "usa-footer__primary-content", children: /* @__PURE__ */ jsx15(
+          Link2,
           {
             className: "usa-footer__primary-link",
             href,
@@ -319,31 +752,31 @@ function Footer({
           }
         ) }, href)) }) }) : null
       ] }) }),
-      secondary: /* @__PURE__ */ jsxs8(Fragment, { children: [
-        secondaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__secondary-section-upper", children: /* @__PURE__ */ jsx8(
+      secondary: /* @__PURE__ */ jsxs11(Fragment, { children: [
+        secondaryNavItems.length > 0 ? /* @__PURE__ */ jsx15("section", { className: "blocks-footer__secondary-section-upper", children: /* @__PURE__ */ jsx15(
           "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)) })
+            children: /* @__PURE__ */ jsx15("ul", { children: secondaryNavItems.map(({ label, href, isExternal }) => /* @__PURE__ */ jsx15("li", { className: "usa-footer__secondary-link", children: /* @__PURE__ */ jsx15(Link2, { 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: [
+        utilityNavItems?.length || portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs11("section", { className: "blocks-footer__secondary-section-lower", children: [
+          utilityNavItems?.length ? /* @__PURE__ */ jsx15("nav", { className: "blocks-footer__utility-nav", "aria-label": "Site utilities", children: /* @__PURE__ */ jsx15("ul", { children: utilityNavItems.length ? utilityNavItems.map(({ text, label, href, isExternal }) => /* @__PURE__ */ jsxs11("li", { children: [
             text,
             " ",
-            /* @__PURE__ */ jsx8(Link, { href, ...get_external_anchor_props(isExternal), children: label })
+            /* @__PURE__ */ jsx15(Link2, { 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: [
+          portalDetails.updatedDate || portalDetails.contacts?.length ? /* @__PURE__ */ jsxs11("div", { className: "blocks-footer__secondary-meta", children: [
+            portalDetails.updatedDate ? /* @__PURE__ */ jsxs11("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 })
+            portalDetails.contacts?.length ? /* @__PURE__ */ jsx15("nav", { className: "blocks-footer__contacts-nav", "aria-label": "Site contacts", children: /* @__PURE__ */ jsx15("ul", { children: portalDetails.contacts.map(({ label, name, email }) => /* @__PURE__ */ jsxs11("li", { children: [
+              /* @__PURE__ */ jsx15("span", { children: label }),
+              /* @__PURE__ */ jsxs11(Link2, { href: `mailto:${email}`, ...get_external_anchor_props(), children: [
+                /* @__PURE__ */ jsx15(Icon2.Mail, { "aria-hidden": "true", focusable: false }),
+                /* @__PURE__ */ jsx15("span", { children: name })
               ] })
             ] }, `${label}-${email}`)) }) }) : null
           ] }) : null
@@ -355,14 +788,14 @@ function Footer({
 
 // 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";
+import { useCallback as useCallback2, useMemo, useRef as useRef2, useState as useState4 } from "react";
 
 // src/hooks/useClickOutside.ts
-import { useEffect, useRef } from "react";
+import { useEffect as useEffect2, useRef } from "react";
 function useClickOutside(callback, options) {
   const ref = useRef(null);
   const { excludeRefs, bindEscapeKey } = options ?? {};
-  useEffect(() => {
+  useEffect2(() => {
     const handleClickOutside = (event) => {
       if ([ref, ...excludeRefs ?? []].every(
         (r) => r.current && !r.current.contains(event.target)
@@ -373,7 +806,7 @@ function useClickOutside(callback, options) {
     document.addEventListener("click", handleClickOutside);
     return () => document.removeEventListener("click", handleClickOutside);
   }, [callback, excludeRefs]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!bindEscapeKey) return;
     const handleEscape = (event) => {
       if (event.key === "Escape") {
@@ -389,9 +822,9 @@ function useClickOutside(callback, options) {
 }
 
 // src/hooks/useWindowResize.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useWindowResize(handleResize) {
-  useEffect2(() => {
+  useEffect3(() => {
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
@@ -400,8 +833,8 @@ 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 jsxs9 } from "react/jsx-runtime";
+import { Link as Link3, Menu, NavDropDownButton } from "@trussworks/react-uswds";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var make_nav_items_initial_state = (navItems) => {
   const initialState = {};
   const initialProps = navItems.map((item) => {
@@ -433,14 +866,14 @@ var make_menu_link_jsx = ({ label, href, isExternal, isPrimary }, options) => {
   if (isCurrent) {
     className.push("usa-current");
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx16(
     "a",
     {
       href,
       className: className.join(" "),
       "aria-current": isCurrent ? "page" : void 0,
       ...get_external_anchor_props(isExternal),
-      children: /* @__PURE__ */ jsx9("span", { children: label })
+      children: /* @__PURE__ */ jsx16("span", { children: label })
     },
     href
   );
@@ -448,8 +881,8 @@ 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__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
+    /* @__PURE__ */ jsx16(
       NavDropDownButton,
       {
         menuId,
@@ -459,11 +892,11 @@ var make_menu_link_with_dropdown_jsx = ({ label, menuId, subItems }, options) =>
         isCurrent: sublinks.some((sublink) => is_current_path(sublink.props.href, currentPath))
       }
     ),
-    /* @__PURE__ */ jsx9(Menu, { items: sublinks, isOpen: navDropDownOpenState[menuId] ?? false, id: menuId }, "one")
+    /* @__PURE__ */ jsx16(Menu, { items: sublinks, isOpen: navDropDownOpenState[menuId] ?? false, id: menuId }, "one")
   ] });
 };
-var make_custom_nav_item_jsx = (customNavItem) => isNavItem(customNavItem) ? /* @__PURE__ */ jsx9(
-  Link2,
+var make_custom_nav_item_jsx = (customNavItem) => isNavItem(customNavItem) ? /* @__PURE__ */ jsx16(
+  Link3,
   {
     className: "blocks-header__custom-nav-item usa-button",
     variant: "unstyled",
@@ -474,7 +907,7 @@ var make_custom_nav_item_jsx = (customNavItem) => isNavItem(customNavItem) ? /*
 ) : customNavItem;
 
 // src/components/Header/Header.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function Header(props) {
   const {
     portalDetails: { logo, title, url },
@@ -487,11 +920,11 @@ function Header(props) {
     () => make_nav_items_initial_state(navItems),
     [navItems]
   );
-  const [navDropDownOpenState, setNavDropDownOpenState] = useState2(
+  const [navDropDownOpenState, setNavDropDownOpenState] = useState4(
     initialNavDropDownOpenState
   );
-  const [isMobileNavExpanded, setIsMobileNavExpanded] = useState2(false);
-  const handleToggleDropdown = useCallback(
+  const [isMobileNavExpanded, setIsMobileNavExpanded] = useState4(false);
+  const handleToggleDropdown = useCallback2(
     (menuId) => {
       if (isMobileNavExpanded) {
         setNavDropDownOpenState((prev) => ({
@@ -510,8 +943,8 @@ function Header(props) {
     },
     [isMobileNavExpanded]
   );
-  const handleToggleMobileNav = useCallback(() => setIsMobileNavExpanded((prev) => !prev), []);
-  const handleClickOutside = useCallback(() => {
+  const handleToggleMobileNav = useCallback2(() => setIsMobileNavExpanded((prev) => !prev), []);
+  const handleClickOutside = useCallback2(() => {
     if (isMobileNavExpanded) {
       setIsMobileNavExpanded(false);
     } else {
@@ -542,15 +975,15 @@ function Header(props) {
       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
+  return /* @__PURE__ */ jsx17(USWDSHeader, { className: headerClassName, basic: true, showMobileOverlay: isMobileNavExpanded, children: /* @__PURE__ */ jsxs13("div", { className: "usa-nav-container", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "usa-navbar", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "blocks-header__portal-details", children: [
+        /* @__PURE__ */ jsx17("a", { className: "blocks-header__portal-logo", href: url ?? "/", children: logo }),
+        title ? /* @__PURE__ */ jsx17(Title, { children: /* @__PURE__ */ jsx17("a", { href: url ?? "/", children: title }) }) : null
       ] }),
-      /* @__PURE__ */ jsx10(NavMenuButton, { ref: mobileNavToggleRef, onClick: handleToggleMobileNav, label: "Menu" })
+      /* @__PURE__ */ jsx17(NavMenuButton, { ref: mobileNavToggleRef, onClick: handleToggleMobileNav, label: "Menu" })
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx17(
       PrimaryNav,
       {
         ref: menuRef,
@@ -563,181 +996,6 @@ 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 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/GeoConfigProvider.tsx
 import { StacApiProvider } from "@developmentseed/stac-react";
 import { createContext, useContext } from "react";
@@ -749,7 +1007,7 @@ var DEFAULT_TILE_MATRIX_SET = "WebMercatorQuad";
 var STAC_COLORSTOP_RGBA_ARG_COUNT = 4;
 
 // src/geo/GeoConfigProvider.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var GeoConfigContext = createContext(null);
 function useGeoConfig() {
   const ctx = useContext(GeoConfigContext);
@@ -761,24 +1019,24 @@ function GeoConfigProvider({
   titilerBaseUrl = TITILER_BASE_URL,
   children
 }) {
-  return /* @__PURE__ */ jsx14(GeoConfigContext.Provider, { value: { titilerBaseUrl }, children: /* @__PURE__ */ jsx14(StacApiProvider, { apiUrl: stacApiUrl, children }) });
+  return /* @__PURE__ */ jsx18(GeoConfigContext.Provider, { value: { titilerBaseUrl }, children: /* @__PURE__ */ jsx18(StacApiProvider, { apiUrl: stacApiUrl, children }) });
 }
 
 // src/geo/Legend/Legend.tsx
 import { Icon as Icon3 } from "@trussworks/react-uswds";
-import { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } 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 [isExpanded, setIsExpanded] = useState5(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 })
+  return /* @__PURE__ */ jsxs14("div", { className: "blocks-legend", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "blocks-legend__header", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "blocks-legend__header-text", children: [
+        title && /* @__PURE__ */ jsx19("h3", { className: "blocks-legend__title", title, children: title }),
+        subtitle && /* @__PURE__ */ jsx19("p", { className: "blocks-legend__subtitle", title: subtitle, children: subtitle })
       ] }),
-      description && /* @__PURE__ */ jsx15(
+      description && /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
@@ -786,12 +1044,12 @@ function Legend({ initialExpanded = false, ...props }) {
           "aria-expanded": isExpanded,
           "aria-label": "Toggle layer description",
           onClick: () => setIsExpanded((v) => !v),
-          children: /* @__PURE__ */ jsx15(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
+          children: /* @__PURE__ */ jsx19(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
         }
       )
     ] }),
-    colorStops && /* @__PURE__ */ jsxs13(Fragment3, { children: [
-      /* @__PURE__ */ jsx15("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx15(
+    colorStops && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+      /* @__PURE__ */ jsx19("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx19(
         "div",
         {
           className: "blocks-legend__gradient",
@@ -800,18 +1058,18 @@ function Legend({ initialExpanded = false, ...props }) {
           }
         }
       ) }),
-      isDefined(min) && isDefined(max) && /* @__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 })
+      isDefined(min) && isDefined(max) && /* @__PURE__ */ jsxs14("div", { className: "blocks-legend__labels", children: [
+        /* @__PURE__ */ jsx19("span", { className: "blocks-legend__min", children: min }),
+        /* @__PURE__ */ jsx19("span", { className: "blocks-legend__unit", children: unit }),
+        /* @__PURE__ */ jsx19("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 }) })
+    isExpanded && description && /* @__PURE__ */ jsx19("div", { className: "blocks-legend__description", children: /* @__PURE__ */ jsx19("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 { useEffect as useEffect5, useId, useRef as useRef3, useState as useState8 } from "react";
 import {
   Layer,
   Map as MapLibreMap,
@@ -876,10 +1134,38 @@ var formatRenderPropertiesToQuery = (renderProperties) => {
 };
 
 // src/geo/DateChip/DateChip.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } 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 });
+  return /* @__PURE__ */ jsx20("div", { className: "blocks-date-chip", children: label });
+}
+
+// src/geo/hooks/useMapScrollGuard.ts
+import { useEffect as useEffect4, useState as useState6 } from "react";
+function useMapScrollGuard(enabled, containerRef) {
+  const [isInteractive, setIsInteractive] = useState6(false);
+  useEffect4(() => {
+    if (!enabled || !isInteractive) return;
+    const handleClick = (e) => {
+      if (!containerRef.current?.contains(e.target)) {
+        setIsInteractive(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsInteractive(false);
+    };
+    document.addEventListener("click", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enabled, isInteractive, containerRef]);
+  return {
+    isInteractive,
+    onActivate: () => setIsInteractive(true),
+    onDeactivate: () => setIsInteractive(false)
+  };
 }
 
 // src/geo/hooks/useStacRasterLayer.ts
@@ -1067,6 +1353,106 @@ function useStacRasterLayer(rasterLayerConfig) {
   };
 }
 
+// src/geo/MapScrollGuard/LockMapControl.tsx
+import { useState as useState7 } from "react";
+import { createPortal } from "react-dom";
+import { useControl as useControl2 } from "react-map-gl/maplibre";
+
+// src/components/icons/LockIcon.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var LockIcon = () => /* @__PURE__ */ jsx21(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx21("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" })
+  }
+);
+
+// src/geo/MapScrollGuard/MapScrollGuardExit.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function MapScrollGuardExit({ onDeactivate }) {
+  return /* @__PURE__ */ jsx22(
+    "button",
+    {
+      className: "blocks-map-scroll-guard-exit",
+      onClick: onDeactivate,
+      type: "button",
+      "aria-label": "Lock map \u2014 stop interacting",
+      children: /* @__PURE__ */ jsx22(LockIcon, {})
+    }
+  );
+}
+
+// src/geo/MapScrollGuard/LockMapControl.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var LockControl = class {
+  container = null;
+  onAdd(_map) {
+    const container = document.createElement("div");
+    container.className = "maplibregl-ctrl maplibregl-ctrl-group blocks-map-scroll-guard-exit-control";
+    this.container = container;
+    return container;
+  }
+  onRemove() {
+    this.container?.remove();
+    this.container = null;
+  }
+};
+function LockMapControl({ onDeactivate }) {
+  const [portalTarget, setPortalTarget] = useState7(null);
+  const ctrl = useControl2(
+    () => new LockControl(),
+    () => setPortalTarget(ctrl?.container ?? null),
+    () => setPortalTarget(null),
+    { position: "top-left" }
+  );
+  if (!portalTarget) return null;
+  return createPortal(/* @__PURE__ */ jsx23(MapScrollGuardExit, { onDeactivate }), portalTarget);
+}
+
+// src/components/icons/CursorClickIcon.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var CursorClickIcon = () => /* @__PURE__ */ jsx24(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx24("path", { d: "M11.5803 8.69C11.3787 8.69 11.1854 8.77007 11.0429 8.9126C10.9004 9.05513 10.8203 9.24844 10.8203 9.45V20.9C10.8203 21.32 11.1603 21.66 11.5803 21.66C11.7703 21.66 11.9303 21.6 12.0603 21.5L13.9703 19.95L15.6303 23.57C15.7603 23.84 16.0303 24 16.3203 24C16.4303 24 16.5403 24 16.6503 23.92L19.4103 22.64C19.7903 22.46 19.9703 22 19.7703 21.63L18.1003 18L20.5103 17.55C20.6703 17.5 20.8203 17.43 20.9403 17.29C21.2103 16.97 21.1703 16.5 20.8203 16.21L12.0803 8.86L12.0703 8.87C11.9403 8.76 11.7703 8.69 11.5803 8.69ZM15.8203 10V8H20.8203V10H15.8203ZM14.6503 4.76L17.4803 1.93L18.8903 3.34L16.0603 6.17L14.6503 4.76ZM10.8203 0H12.8203V5H10.8203V0ZM4.75031 14.66L7.58031 11.83L8.99031 13.24L6.16031 16.07L4.75031 14.66ZM4.75031 3.34L6.16031 1.93L8.99031 4.76L7.58031 6.17L4.75031 3.34ZM7.82031 10H2.82031V8H7.82031V10Z" })
+  }
+);
+
+// src/geo/MapScrollGuard/MapScrollGuard.tsx
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+function MapScrollGuard({ onActivate }) {
+  return /* @__PURE__ */ jsx25(
+    "button",
+    {
+      className: "blocks-map-scroll-guard",
+      onClick: (e) => {
+        e.stopPropagation();
+        onActivate();
+      },
+      type: "button",
+      "aria-label": "Click to interact with map",
+      children: /* @__PURE__ */ jsxs15("span", { className: "blocks-map-scroll-guard__pill", children: [
+        /* @__PURE__ */ jsx25(CursorClickIcon, {}),
+        /* @__PURE__ */ jsx25("span", { className: "blocks-map-scroll-guard__label", children: "Click to interact with the map" })
+      ] })
+    }
+  );
+}
+
 // src/geo/stac.basemaps.ts
 var createRasterBasemapStyle = ({
   id,
@@ -1115,7 +1501,7 @@ var BASEMAP_LABEL_LAYER_IDS = {
 };
 
 // src/geo/StacCompareMap/StacCompareMap.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var MAP_PANEL_STYLE = {
   position: "absolute",
   top: 0,
@@ -1127,7 +1513,8 @@ function StacCompareMap({
   initialViewState,
   leftLayerConfig,
   rightLayerConfig,
-  className
+  className,
+  showScrollGuard = false
 }) {
   const resolvedBeforeLayerId = typeof baseMapStyle === "string" ? BASEMAP_LABEL_LAYER_IDS[baseMapStyle] : void 0;
   const instanceId = useId();
@@ -1135,8 +1522,12 @@ function StacCompareMap({
   const rightMapRef = useRef3(null);
   const compareRef = useRef3(null);
   const containerRef = useRef3(null);
-  const [leftMapLoaded, setLeftMapLoaded] = useState4(false);
-  const [rightMapLoaded, setRightMapLoaded] = useState4(false);
+  const [leftMapLoaded, setLeftMapLoaded] = useState8(false);
+  const [rightMapLoaded, setRightMapLoaded] = useState8(false);
+  const { isInteractive, onActivate, onDeactivate } = useMapScrollGuard(
+    showScrollGuard,
+    containerRef
+  );
   const containerClassName = make_class_name("blocks-stacmap-compare", [className]);
   const left = useStacRasterLayer(leftLayerConfig);
   const right = useStacRasterLayer(rightLayerConfig);
@@ -1145,7 +1536,7 @@ function StacCompareMap({
   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(() => {
+  useEffect5(() => {
     if (!leftMapLoaded || !rightMapLoaded) return;
     if (compareRef.current) return;
     const leftMap = leftMapRef.current?.getMap();
@@ -1164,7 +1555,7 @@ function StacCompareMap({
       }
     });
   }, [leftMapLoaded, rightMapLoaded]);
-  useEffect3(() => {
+  useEffect5(() => {
     return () => {
       compareRef.current?.remove();
       compareRef.current = null;
@@ -1175,8 +1566,8 @@ function StacCompareMap({
     ...initialViewState && { initialViewState },
     style: MAP_PANEL_STYLE
   };
-  return /* @__PURE__ */ jsxs14("div", { ref: containerRef, className: containerClassName, children: [
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16("div", { ref: containerRef, className: containerClassName, children: [
+    /* @__PURE__ */ jsxs16(
       MapLibreMap,
       {
         ref: leftMapRef,
@@ -1184,9 +1575,10 @@ function StacCompareMap({
         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(
+          /* @__PURE__ */ jsx26(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx26(NavigationControl, { position: "top-left", showCompass: false }),
+          showScrollGuard && isInteractive && /* @__PURE__ */ jsx26(LockMapControl, { onDeactivate }),
+          left.mapSource.tiles && /* @__PURE__ */ jsx26(Source, { id: leftSourceId, type: "raster", tiles: [left.mapSource.tiles], children: /* @__PURE__ */ jsx26(
             Layer,
             {
               id: leftLayerId,
@@ -1197,7 +1589,7 @@ function StacCompareMap({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs16(
       MapLibreMap,
       {
         ref: rightMapRef,
@@ -1205,8 +1597,8 @@ function StacCompareMap({
         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(
+          /* @__PURE__ */ jsx26(AttributionMapControl, {}),
+          right.mapSource.tiles && /* @__PURE__ */ jsx26(Source, { id: rightSourceId, type: "raster", tiles: [right.mapSource.tiles], children: /* @__PURE__ */ jsx26(
             Layer,
             {
               id: rightLayerId,
@@ -1217,33 +1609,40 @@ function StacCompareMap({
         ]
       }
     ),
-    /* @__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 }) })
+    /* @__PURE__ */ jsx26("div", { className: "blocks-stacmap-compare__date-chip", children: /* @__PURE__ */ jsx26(DateChip, { left: leftLayerConfig.dateRange, right: rightLayerConfig.dateRange }) }),
+    !isSameCollection && left.legend && /* @__PURE__ */ jsx26("div", { className: "blocks-stacmap-compare__legend-left", children: /* @__PURE__ */ jsx26(Legend, { ...left.legend }) }),
+    right.legend && /* @__PURE__ */ jsx26("div", { className: "blocks-stacmap-compare__legend-right", children: /* @__PURE__ */ jsx26(Legend, { ...right.legend }) }),
+    showScrollGuard && !isInteractive && /* @__PURE__ */ jsx26(MapScrollGuard, { onActivate })
   ] });
 }
 
 // src/geo/StacSingleLayerMap/StacSingleLayerMap.tsx
-import { useId as useId2 } from "react";
+import { useId as useId2, useRef as useRef4 } 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";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function StacSingleLayerMap({
   baseMapStyle = CARTO_DARK_WITH_LABELS_BASEMAP_STYLE,
   initialViewState,
-  layerConfig
+  layerConfig,
+  showScrollGuard = false
 }) {
   const resolvedBeforeLayerId = typeof baseMapStyle === "string" ? BASEMAP_LABEL_LAYER_IDS[baseMapStyle] : void 0;
   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(
+  const containerRef = useRef4(null);
+  const { isInteractive, onActivate, onDeactivate } = useMapScrollGuard(
+    showScrollGuard,
+    containerRef
+  );
+  return /* @__PURE__ */ jsxs17("div", { className: "blocks-stacmap-singlelayer", ref: containerRef, children: [
+    /* @__PURE__ */ jsxs17(
       MapLibreMap2,
       {
         mapStyle: baseMapStyle,
@@ -1251,9 +1650,10 @@ function StacSingleLayerMap({
         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(
+          /* @__PURE__ */ jsx27(AttributionMapControl, {}),
+          /* @__PURE__ */ jsx27(NavigationControl2, { position: "top-left", showCompass: false }),
+          showScrollGuard && isInteractive && /* @__PURE__ */ jsx27(LockMapControl, { onDeactivate }),
+          mapSource.tiles && /* @__PURE__ */ jsx27(Source2, { id: sourceId, type: "raster", tiles: [mapSource.tiles], children: /* @__PURE__ */ jsx27(
             Layer2,
             {
               id: layerId,
@@ -1264,8 +1664,9 @@ function StacSingleLayerMap({
         ]
       }
     ),
-    /* @__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 }) })
+    /* @__PURE__ */ jsx27("div", { className: "blocks-stacmap-singlelayer__legend", children: legend && /* @__PURE__ */ jsx27(Legend, { ...legend }) }),
+    /* @__PURE__ */ jsx27("div", { className: "blocks-stacmap-singlelayer__date-chip", children: /* @__PURE__ */ jsx27(DateChip, { left: layerConfig.dateRange }) }),
+    showScrollGuard && !isInteractive && /* @__PURE__ */ jsx27(MapScrollGuard, { onActivate })
   ] });
 }
 export {
@@ -1278,11 +1679,12 @@ export {
   CardDetailed,
   CardMini,
   CardSimple,
+  Carousel,
   Footer,
   GeoConfigProvider,
   Header,
   Legend,
-  Link3 as Link,
+  Link,
   NASA_BLUE_MARBLE_BASEMAP_STYLE,
   OPEN_FREE_MAP_DARK_BASEMAP_STYLE,
   OPEN_FREE_MAP_LABELS_LAYER_ID,