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

package/dist/index.js

@@ -102,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,
@@ -158,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,
@@ -194,39 +188,17 @@ 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,
@@ -244,17 +216,17 @@ function CardDetailed({
     className
   ]);
   const hasContent = intro || title || description || tags.length || callToAction || callToActionSecondary;
-  return /* @__PURE__ */ jsxs4("div", { className: rootClassName, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__media", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "blocks-card-detailed__media", children: [
       image,
       tagPrimary && /* @__PURE__ */ jsx5("div", { className: "blocks-card-detailed__tag-primary", children: tagPrimary })
     ] }),
-    hasContent && /* @__PURE__ */ jsxs4("div", { className: "blocks-card-detailed__content-container", children: [
+    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__ */ jsxs4("div", { className: "blocks-card-detailed__actions", children: [
+      (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 })
       ] })
@@ -263,7 +235,7 @@ function CardDetailed({
 }
 
 // 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);
@@ -271,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 })
     ] })
@@ -281,7 +253,7 @@ 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,
@@ -296,12 +268,12 @@ function CardSimple({
     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,
       /* @__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 })
     ] })
@@ -310,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,
@@ -324,10 +296,10 @@ function Footer({
     {
       className: footerClassName,
       size: "slim",
-      primary: /* @__PURE__ */ jsx8(GridContainer, { children: /* @__PURE__ */ jsxs7("section", { className: "blocks-footer__primary-section", 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__ */ jsxs7("div", { className: "blocks-footer__title-text", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "blocks-footer__title-text", children: [
             /* @__PURE__ */ jsx8("span", { children: portalDetails.title }),
             portalDetails.tagline ? /* @__PURE__ */ jsx8("p", { children: portalDetails.tagline }) : null
           ] })
@@ -342,7 +314,7 @@ function Footer({
           }
         ) }, href)) }) }) : null
       ] }) }),
-      secondary: /* @__PURE__ */ jsxs7(Fragment, { children: [
+      secondary: /* @__PURE__ */ jsxs8(Fragment, { children: [
         secondaryNavItems.length > 0 ? /* @__PURE__ */ jsx8("section", { className: "blocks-footer__secondary-section-upper", children: /* @__PURE__ */ jsx8(
           "nav",
           {
@@ -351,20 +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 })
               ] })
@@ -424,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) => {
@@ -471,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,
       {
@@ -497,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 },
@@ -565,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
       ] }),
@@ -586,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,
@@ -605,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",
@@ -620,27 +727,81 @@ 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/GeoConfigProvider.tsx
+import { StacApiProvider } from "@developmentseed/stac-react";
+import { createContext, useContext } from "react";
+
+// src/geo/constants.ts
+var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
+  version: 8,
+  sources: {
+    "nasa-blue-marble": {
+      type: "raster",
+      tiles: [
+        "https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_NextGeneration/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg"
+      ],
+      tileSize: 256,
+      maxzoom: 8,
+      attribution: "Imagery courtesy NASA EOSDIS/GIBS"
+    }
+  },
+  layers: [
+    {
+      id: "nasa-blue-marble",
+      type: "raster",
+      source: "nasa-blue-marble"
+    }
+  ]
+};
+var STAC_API_URL = "https://openveda.cloud/api/stac";
+var TITILER_BASE_URL = "https://openveda.cloud/api/raster";
+var DEFAULT_RENDER_PARAMS = {
+  assets: ["cog_default"],
+  rescale: "0,0.0001",
+  resampling: "bilinear",
+  colormap_name: "viridis",
+  bidx: [1]
+};
+var DEFAULT_TILE_MATRIX_SET = "WebMercatorQuad";
+var STAC_COLORSTOP_RGBA_ARG_COUNT = 4;
+
+// src/geo/GeoConfigProvider.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var GeoConfigContext = createContext(null);
+function useGeoConfig() {
+  const ctx = useContext(GeoConfigContext);
+  if (!ctx) throw new Error("Geo components require a GeoConfigProvider ancestor");
+  return ctx;
+}
+function GeoConfigProvider({
+  stacApiUrl = STAC_API_URL,
+  titilerBaseUrl = TITILER_BASE_URL,
+  children
+}) {
+  return /* @__PURE__ */ jsx14(GeoConfigContext.Provider, { value: { titilerBaseUrl }, children: /* @__PURE__ */ jsx14(StacApiProvider, { apiUrl: stacApiUrl, children }) });
+}
+
 // src/geo/Legend/Legend.tsx
 import { Icon as Icon3 } from "@trussworks/react-uswds";
 import { useState as useState3 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+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__ */ jsxs11("div", { className: "blocks-legend", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__header", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__header-text", children: [
-        title && /* @__PURE__ */ jsx12("h3", { className: "blocks-legend__title", title, children: title }),
-        subtitle && /* @__PURE__ */ jsx12("p", { className: "blocks-legend__subtitle", title: subtitle, children: subtitle })
+  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__ */ jsx12(
+      description && /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -648,11 +809,11 @@ function Legend({ initialExpanded = false, ...props }) {
           "aria-expanded": isExpanded,
           "aria-label": "Toggle layer description",
           onClick: () => setIsExpanded((v) => !v),
-          children: /* @__PURE__ */ jsx12(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
+          children: /* @__PURE__ */ jsx15(Icon3.InfoOutline, { "aria-hidden": true, focusable: false, size: 3 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx15("div", { className: "blocks-legend__gradient-bar", children: /* @__PURE__ */ jsx15(
       "div",
       {
         className: "blocks-legend__gradient",
@@ -661,12 +822,12 @@ function Legend({ initialExpanded = false, ...props }) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsxs11("div", { className: "blocks-legend__labels", children: [
-      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__min", children: min }),
-      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__unit", children: unit }),
-      /* @__PURE__ */ jsx12("span", { className: "blocks-legend__max", children: 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 })
     ] }),
-    isExpanded && description && /* @__PURE__ */ jsx12("div", { className: "blocks-legend__description", children: /* @__PURE__ */ jsx12("div", { className: "blocks-legend__description-inner", children: description }) })
+    isExpanded && description && /* @__PURE__ */ jsx15("div", { className: "blocks-legend__description", children: /* @__PURE__ */ jsx15("div", { className: "blocks-legend__description-inner", children: description }) })
   ] });
 }
 
@@ -714,10 +875,10 @@ function formatDateRange(dateRange) {
 }
 
 // src/geo/DateChip/DateChip.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+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__ */ jsx13("div", { className: "blocks-date-chip", children: label });
+  return /* @__PURE__ */ jsx16("div", { className: "blocks-date-chip", children: label });
 }
 
 // src/geo/hooks/useStacRasterLayer.ts
@@ -806,45 +967,13 @@ async function fetchMosaicTileUrl(request) {
   return fetchTilejson(tilejsonUrl, queryString);
 }
 
-// src/geo/constants.ts
-var NASA_BLUE_MARBLE_BASEMAP_STYLE = {
-  version: 8,
-  sources: {
-    "nasa-blue-marble": {
-      type: "raster",
-      tiles: [
-        "https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_NextGeneration/default/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg"
-      ],
-      tileSize: 256,
-      maxzoom: 8,
-      attribution: "Imagery courtesy NASA EOSDIS/GIBS"
-    }
-  },
-  layers: [
-    {
-      id: "nasa-blue-marble",
-      type: "raster",
-      source: "nasa-blue-marble"
-    }
-  ]
-};
-var 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/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: TITILER_BASE_URL,
+    rasterApiUrl: titilerBaseUrl,
     collectionId,
     datetime,
     sourceParams: {
@@ -855,7 +984,7 @@ function useMosaicTiles(rasterLayerConfig) {
     tileMatrixSet
   };
   return useQuery({
-    queryKey: [collectionId, dateRange],
+    queryKey: [collectionId, dateRange, titilerBaseUrl],
     queryFn: () => fetchMosaicTileUrl(request),
     staleTime: 30 * 60 * 1e3,
     gcTime: 60 * 60 * 1e3,
@@ -909,13 +1038,14 @@ function extractLegendProps(collection, colorStopMap) {
 
 // src/geo/hooks/useStacRasterLegend.ts
 function useStacRasterLegend(collection) {
+  const { titilerBaseUrl } = useGeoConfig();
   const query = useQuery2({
-    queryKey: ["legend", collection],
+    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(`${TITILER_BASE_URL}/colorMaps/${colormapName}`);
+      const response = await fetch(`${titilerBaseUrl}/colorMaps/${colormapName}`);
       if (!response.ok) {
         const error = {
           detail: `Colormap "${colormapName}" not found (HTTP ${response.status})`,
@@ -964,7 +1094,7 @@ function useStacRasterLayer(rasterLayerConfig) {
 }
 
 // src/geo/StacCompareMap/StacCompareMap.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var MAP_PANEL_STYLE = {
   position: "absolute",
   top: 0,
@@ -1023,8 +1153,8 @@ function StacCompareMap({
     ...initialViewState && { initialViewState },
     style: MAP_PANEL_STYLE
   };
-  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: containerClassName, children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14("div", { ref: containerRef, className: containerClassName, children: [
+    /* @__PURE__ */ jsxs14(
       MapLibreMap,
       {
         ref: leftMapRef,
@@ -1032,13 +1162,13 @@ function StacCompareMap({
         attributionControl: false,
         onLoad: () => setLeftMapLoaded(true),
         children: [
-          /* @__PURE__ */ jsx14(AttributionMapControl, {}),
-          /* @__PURE__ */ jsx14(NavigationControl, { position: "top-left", showCompass: false }),
-          left.mapSource.tiles && /* @__PURE__ */ jsx14(Source, { id: leftSourceId, type: "raster", tiles: [left.mapSource.tiles], children: /* @__PURE__ */ jsx14(Layer, { id: leftLayerId, type: "raster" }) })
+          /* @__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__ */ jsxs12(
+    /* @__PURE__ */ jsxs14(
       MapLibreMap,
       {
         ref: rightMapRef,
@@ -1046,14 +1176,14 @@ function StacCompareMap({
         attributionControl: false,
         onLoad: () => setRightMapLoaded(true),
         children: [
-          /* @__PURE__ */ jsx14(AttributionMapControl, {}),
-          right.mapSource.tiles && /* @__PURE__ */ jsx14(Source, { id: rightSourceId, type: "raster", tiles: [right.mapSource.tiles], children: /* @__PURE__ */ jsx14(Layer, { id: rightLayerId, type: "raster" }) })
+          /* @__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__ */ jsx14("div", { className: "blocks-stacmap-compare__date-chip", children: /* @__PURE__ */ jsx14(DateChip, { left: leftLayerConfig.dateRange, right: rightLayerConfig.dateRange }) }),
-    !isSameCollection && left.legend && /* @__PURE__ */ jsx14("div", { className: "blocks-stacmap-compare__legend-left", children: /* @__PURE__ */ jsx14(Legend, { ...left.legend }) }),
-    right.legend && /* @__PURE__ */ jsx14("div", { className: "blocks-stacmap-compare__legend-right", children: /* @__PURE__ */ jsx14(Legend, { ...right.legend }) })
+    /* @__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 }) })
   ] });
 }
 
@@ -1065,7 +1195,7 @@ import {
   NavigationControl as NavigationControl2,
   Source as Source2
 } from "react-map-gl/maplibre";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function StacSingleLayerMap({
   baseMapStyle = NASA_BLUE_MARBLE_BASEMAP_STYLE,
   initialViewState,
@@ -1075,8 +1205,8 @@ function StacSingleLayerMap({
   const sourceId = `${layerConfig.collectionId}-raster-source-${instanceId}`;
   const layerId = `${layerConfig.collectionId}-raster-layer-${instanceId}`;
   const { mapSource, legend } = useStacRasterLayer(layerConfig);
-  return /* @__PURE__ */ jsxs13("div", { className: "blocks-stacmap-singlelayer", children: [
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15("div", { className: "blocks-stacmap-singlelayer", children: [
+    /* @__PURE__ */ jsxs15(
       MapLibreMap2,
       {
         mapStyle: baseMapStyle,
@@ -1084,27 +1214,28 @@ function StacSingleLayerMap({
         style: { position: "absolute", inset: 0 },
         attributionControl: false,
         children: [
-          /* @__PURE__ */ jsx15(AttributionMapControl, {}),
-          /* @__PURE__ */ jsx15(NavigationControl2, { position: "top-left", showCompass: false }),
-          mapSource.tiles && /* @__PURE__ */ jsx15(Source2, { id: sourceId, type: "raster", tiles: [mapSource.tiles], children: /* @__PURE__ */ jsx15(Layer2, { id: layerId, type: "raster" }) })
+          /* @__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__ */ jsx15("div", { className: "blocks-stacmap-singlelayer__legend", children: legend && /* @__PURE__ */ jsx15(Legend, { ...legend }) }),
-    /* @__PURE__ */ jsx15("div", { className: "blocks-stacmap-singlelayer__date-chip", children: /* @__PURE__ */ jsx15(DateChip, { left: layerConfig.dateRange }) })
+    /* @__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,
   Legend,
+  Link3 as Link,
   StacCompareMap,
   StacSingleLayerMap,
   Tag