@carbonplan/components 13.3.0 → 13.4.0-develop.0

package/dst/index.mjs

@@ -46,7 +46,7 @@ var Avatar = (_a) => {
     github,
     alt,
     src,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "color",
     "width",
@@ -83,7 +83,7 @@ var Avatar = (_a) => {
         position: "relative",
         display: "inline-block",
         verticalAlign: "top"
-      }, sx3)
+      }, sx4)
     }, props),
     /* @__PURE__ */ React.createElement(
       Image,
@@ -123,7 +123,7 @@ import { Box as Box4 } from "theme-ui";
 import React2 from "react";
 import { Grid } from "theme-ui";
 var Row = (_a) => {
-  var _b = _a, { children, sx: sx3, columns, gap } = _b, props = __objRest(_b, ["children", "sx", "columns", "gap"]);
+  var _b = _a, { children, sx: sx4, columns, gap } = _b, props = __objRest(_b, ["children", "sx", "columns", "gap"]);
   const makeArray = (input) => {
     if (!Array.isArray(input)) {
       input = [input, input, input, input];
@@ -160,7 +160,7 @@ var Row = (_a) => {
       sx: __spreadValues({
         columnGap,
         rowGap
-      }, sx3)
+      }, sx4)
     }),
     children
   );
@@ -177,7 +177,7 @@ var Column = (_a) => {
     dl,
     dr,
     children,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "start",
     "width",
@@ -237,7 +237,7 @@ var Column = (_a) => {
         gridColumnEnd: end,
         ml,
         mr
-      }, sx3)
+      }, sx4)
     }),
     children
   );
@@ -258,7 +258,7 @@ var Group = ({
   children,
   direction = "vertical",
   spacing = "md",
-  sx: sx3
+  sx: sx4
 }) => {
   let marginValue;
   if (typeof spacing === "string" && spacing in sizes) {
@@ -273,7 +273,7 @@ var Group = ({
   }
   const marginProperty = direction === "vertical" ? "mb" : "mr";
   const additionalStyles = direction === "horizontal" ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ React4.createElement(Box3, { sx: sx3 }, React4.Children.map(children, (child, i) => {
+  return /* @__PURE__ */ React4.createElement(Box3, { sx: sx4 }, React4.Children.map(children, (child, i) => {
     const childrenCount = React4.Children.count(children);
     return /* @__PURE__ */ React4.createElement(
       Box3,
@@ -342,7 +342,7 @@ var AvatarGroup = (_a) => {
     width,
     maxWidth,
     fixedCount,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "members",
     "direction",
@@ -378,7 +378,7 @@ var AvatarGroup = (_a) => {
   }
   const excess = limit !== void 0 && members.length > limit;
   const overflow = limit !== void 0 ? members.length - limit + 1 : 0;
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, fixedCount && /* @__PURE__ */ React5.createElement(row_default, __spreadValues({ columns: fixedCount, gap, sx: sx3 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(column_default, { key: idx, start: start(idx) }, (!excess || limit !== void 0 && idx < limit - 1) && /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({}, props2), { width, maxWidth })), excess && limit !== void 0 && idx === limit - 1 && /* @__PURE__ */ React5.createElement(Blank, { overflow, maxWidth })))), !fixedCount && /* @__PURE__ */ React5.createElement(group_default, __spreadValues({ direction, spacing, sx: sx3 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({ key: idx }, props2), { width, maxWidth })))));
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, fixedCount && /* @__PURE__ */ React5.createElement(row_default, __spreadValues({ columns: fixedCount, gap, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(column_default, { key: idx, start: start(idx) }, (!excess || limit !== void 0 && idx < limit - 1) && /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({}, props2), { width, maxWidth })), excess && limit !== void 0 && idx === limit - 1 && /* @__PURE__ */ React5.createElement(Blank, { overflow, maxWidth })))), !fixedCount && /* @__PURE__ */ React5.createElement(group_default, __spreadValues({ direction, spacing, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({ key: idx }, props2), { width, maxWidth })))));
 };
 var avatar_group_default = AvatarGroup;
 
@@ -388,13 +388,13 @@ import { Box as Box5 } from "theme-ui";
 import { transparentize } from "@theme-ui/color";
 
 // src/utils/get-sx-color.ts
-var getSxColor = (sx3, fallback = "primary") => sx3 && typeof sx3 === "object" && "color" in sx3 && typeof sx3.color === "string" ? sx3.color : fallback;
+var getSxColor = (sx4, fallback = "primary") => sx4 && typeof sx4 === "object" && "color" in sx4 && typeof sx4.color === "string" ? sx4.color : fallback;
 var get_sx_color_default = getSxColor;
 
 // src/badge.tsx
 var Badge = (_a) => {
-  var _b = _a, { sx: sx3, children } = _b, props = __objRest(_b, ["sx", "children"]);
-  const color = get_sx_color_default(sx3);
+  var _b = _a, { sx: sx4, children } = _b, props = __objRest(_b, ["sx", "children"]);
+  const color = get_sx_color_default(sx4);
   return /* @__PURE__ */ React6.createElement(
     Box5,
     __spreadValues({
@@ -407,7 +407,7 @@ var Badge = (_a) => {
         textAlign: "center",
         userSelect: "none",
         fontSize: [2, 2, 2, 3]
-      }, sx3)
+      }, sx4)
     }, props),
     /* @__PURE__ */ React6.createElement(
       Box5,
@@ -516,7 +516,7 @@ var Button = (_a, ref) => {
     prefix,
     suffix,
     inverted,
-    sx: sx3,
+    sx: sx4,
     children,
     align,
     href,
@@ -536,7 +536,7 @@ var Button = (_a, ref) => {
   if (!["xs", "sm", "md", "lg", "xl"].includes(size)) {
     throw new Error("Size must be xs, sm, md, lg, or xl");
   }
-  const _a2 = sx3 && typeof sx3 === "object" ? sx3 : {}, { color: sxColor } = _a2, sxProp = __objRest(_a2, ["color"]);
+  const _a2 = sx4 && typeof sx4 === "object" ? sx4 : {}, { color: sxColor } = _a2, sxProp = __objRest(_a2, ["color"]);
   const baseColor = typeof sxColor === "string" && sxColor || (inverted ? "secondary" : "primary");
   const hoverColor = sxColor ? "primary" : inverted ? "primary" : "secondary";
   const sizeConfig = {
@@ -715,7 +715,7 @@ var Callout = (_a, ref) => {
     color,
     href,
     internal,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "label",
     "children",
@@ -750,7 +750,7 @@ var Callout = (_a, ref) => {
         color: hoverColor
       }
     }
-  }, sx3);
+  }, sx4);
   const Inner = /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Box8, { sx: { transition: "0.15s", letterSpacing: "body", pb: ["6px"] } }, children), /* @__PURE__ */ React10.createElement(
     Box8,
     {
@@ -997,7 +997,7 @@ var Colorbar = (_a) => {
     format: format2 = (d) => d,
     horizontal = false,
     bottom = false,
-    sx: sx3,
+    sx: sx4,
     sxClim
   } = _b, props = __objRest(_b, [
     "colormap",
@@ -1160,7 +1160,7 @@ var Colorbar = (_a) => {
         justifyContent: "flex-start",
         gap: ["3px", "6px", "6px", "7px"],
         height: !horizontal ? "100%" : "unset"
-      }, sx3)
+      }, sx4)
     }),
     label && /* @__PURE__ */ React12.createElement(Label, { label, units, horizontal }),
     /* @__PURE__ */ React12.createElement(
@@ -1231,12 +1231,12 @@ __export(colors_exports, {
 import React13 from "react";
 import { Box as Box11 } from "theme-ui";
 var InlineColor = (_a) => {
-  var _b = _a, { sx: sx3, color, children } = _b, props = __objRest(_b, ["sx", "color", "children"]);
+  var _b = _a, { sx: sx4, color, children } = _b, props = __objRest(_b, ["sx", "color", "children"]);
   return /* @__PURE__ */ React13.createElement(
     Box11,
     __spreadValues({
       as: "span",
-      sx: __spreadValues({ display: "inline-block", color }, sx3)
+      sx: __spreadValues({ display: "inline-block", color }, sx4)
     }, props),
     children
   );
@@ -1279,13 +1279,13 @@ var Grey = (props) => {
 };
 
 // src/custom-404.tsx
-import React27 from "react";
-import { Box as Box21 } from "theme-ui";
+import React32 from "react";
+import { Box as Box22 } from "theme-ui";
 import { PoopSad } from "@carbonplan/emoji";
 
 // src/layout.tsx
-import React26, { useEffect as useEffect6 } from "react";
-import { useThemeUI as useThemeUI3, Container as Container3, Flex as Flex4, Box as Box20 } from "theme-ui";
+import React31, { useEffect as useEffect7 } from "react";
+import { useThemeUI as useThemeUI3, Container as Container3, Flex as Flex5, Box as Box21 } from "theme-ui";
 
 // src/meta.tsx
 import React14 from "react";
@@ -1404,11 +1404,10 @@ var Meta = ({ title, description, card, url }) => {
 };
 var meta_default = Meta;
 
-// src/header.tsx
-import React17, { useState as useState2 } from "react";
-import { default as NextLink2 } from "next/link";
-import { Box as Box13, Flex as Flex2, Container, Link as Link2 } from "theme-ui";
-import { Arrow as Arrow2 } from "@carbonplan/icons";
+// src/header/header.tsx
+import React22, { useState as useState3 } from "react";
+import { default as NextLink3 } from "next/link";
+import { Box as Box14, Flex as Flex3, Container, Link as Link4 } from "theme-ui";
 
 // src/logo.tsx
 import React15 from "react";
@@ -1490,11 +1489,24 @@ var Logo = (_a) => {
 };
 var logo_default = Logo;
 
-// src/menu.tsx
+// src/header/menu.tsx
+import React17 from "react";
+
+// src/header/header-icon.tsx
 import React16 from "react";
 import { IconButton } from "theme-ui";
-var Menu = (_a) => {
-  var _b = _a, { value, sx: sx3 } = _b, props = __objRest(_b, ["value", "sx"]);
+var HeaderIcon = (_a) => {
+  var _b = _a, {
+    label = "Toggle Menu",
+    children,
+    value,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "label",
+    "children",
+    "value",
+    "sx"
+  ]);
   return /* @__PURE__ */ React16.createElement(
     IconButton,
     __spreadValues({
@@ -1511,8 +1523,8 @@ var Menu = (_a) => {
             opacity: "1"
           }
         }
-      }, sx3),
-      "aria-label": "Toggle Menu"
+      }, sx4),
+      "aria-label": label
     }, props),
     !value && /* @__PURE__ */ React16.createElement(
       "svg",
@@ -1526,9 +1538,7 @@ var Menu = (_a) => {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 68 36"
       },
-      /* @__PURE__ */ React16.createElement("line", { x1: "52", y1: "29.9", x2: "16", y2: "29.9" }),
-      /* @__PURE__ */ React16.createElement("line", { x1: "52", y1: "6.1", x2: "16", y2: "6.1" }),
-      /* @__PURE__ */ React16.createElement("line", { x1: "52", y1: "18", x2: "16", y2: "18" }),
+      children,
       /* @__PURE__ */ React16.createElement(
         "path",
         {
@@ -1579,9 +1589,19 @@ var Menu = (_a) => {
     )
   );
 };
+var header_icon_default = HeaderIcon;
+
+// src/header/menu.tsx
+var Menu = (props) => {
+  return /* @__PURE__ */ React17.createElement(header_icon_default, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "29.9", x2: "16", y2: "29.9" }), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "6.1", x2: "16", y2: "6.1" }), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "18", x2: "16", y2: "18" }));
+};
 var menu_default = Menu;
 
-// src/header.tsx
+// src/header/navigation-menu.tsx
+import React18 from "react";
+import { default as NextLink2 } from "next/link";
+import { Link as Link2 } from "theme-ui";
+import { Arrow as Arrow2 } from "@carbonplan/icons";
 var sx = {
   link: (current, label, first = false) => {
     return {
@@ -1606,7 +1626,7 @@ var sx = {
         }
       },
       "&:hover": {
-        color: current === label ? "secondary" : "text"
+        color: current == label ? "secondary" : "text"
       }
     };
   }
@@ -1618,7 +1638,7 @@ var links = [
   { url: "press", display: "Press" }
 ];
 var HoverArrow = () => {
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Arrow2,
     {
       id: "arrow",
@@ -1641,7 +1661,7 @@ var Nav = ({ link, mode, nav, first, setExpanded }) => {
   const { url, display } = link;
   const href = mode === "remote" ? "https://carbonplan.org/" + url : "/" + url;
   if (mode === "homepage" || mode === "local" && nav === url) {
-    return /* @__PURE__ */ React17.createElement(NextLink2, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement(NextLink2, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ React18.createElement(
       Link2,
       {
         onClick: () => {
@@ -1649,34 +1669,302 @@ var Nav = ({ link, mode, nav, first, setExpanded }) => {
         },
         sx: sx.link(nav, url, first)
       },
-      /* @__PURE__ */ React17.createElement(HoverArrow, null),
+      /* @__PURE__ */ React18.createElement(HoverArrow, null),
       display
     ));
   } else {
-    return /* @__PURE__ */ React17.createElement(Link2, { href, sx: sx.link(nav, url, first) }, /* @__PURE__ */ React17.createElement(HoverArrow, null), display);
+    return /* @__PURE__ */ React18.createElement(Link2, { href, sx: sx.link(nav, url, first) }, /* @__PURE__ */ React18.createElement(HoverArrow, null), display);
+  }
+};
+var NavigationMenu = ({ nav, mode, setExpanded }) => {
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, links.map((d, i) => /* @__PURE__ */ React18.createElement(
+    Nav,
+    {
+      key: i,
+      link: d,
+      mode,
+      nav,
+      first: i === 0,
+      setExpanded
+    }
+  )));
+};
+var navigation_menu_default = NavigationMenu;
+
+// src/header/search.tsx
+import React19 from "react";
+import { Search as SearchIcon } from "@carbonplan/icons";
+var Search = (props) => {
+  return /* @__PURE__ */ React19.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ React19.createElement(SearchIcon, { width: 50, height: 30, x: 8 }));
+};
+var search_default = Search;
+
+// src/header/search-menu.tsx
+import React21, { useEffect as useEffect2, useState as useState2 } from "react";
+import { Box as Box13, Flex as Flex2, Link as Link3 } from "theme-ui";
+import { Arrow as Arrow3, RotatingArrow } from "@carbonplan/icons";
+
+// src/input.tsx
+import React20, { forwardRef as forwardRef4 } from "react";
+import { Input as ThemedInput } from "theme-ui";
+var Input = (_a, ref) => {
+  var _b = _a, { size = "sm", inverted, sx: sx4 } = _b, props = __objRest(_b, ["size", "inverted", "sx"]);
+  const defaultColor = inverted ? "secondary" : "primary";
+  const styles3 = __spreadValues(__spreadValues({
+    color: defaultColor,
+    borderColor: "secondary",
+    borderStyle: "solid",
+    borderWidth: "0px",
+    borderBottomWidth: "1px",
+    borderRadius: "0px",
+    transition: "border 0.15s",
+    width: "calc(min(15ch, 100%))",
+    p: [0],
+    py: ["2px"],
+    "input::-webkit-outer-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    "input::-webkit-inner-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    ":focus": {
+      borderColor: "primary"
+    },
+    ":focus-visible": {
+      outline: "none !important",
+      background: "none !important"
+    }
+  }, get_size_styles_default(size)), sx4);
+  return /* @__PURE__ */ React20.createElement(ThemedInput, __spreadProps(__spreadValues({}, props), { ref, sx: styles3 }));
+};
+var input_default = forwardRef4(Input);
+
+// src/header/search-menu.tsx
+var HoverArrow2 = ({ sx: sx4 }) => {
+  return /* @__PURE__ */ React21.createElement(
+    Arrow3,
+    {
+      id: "arrow",
+      sx: __spreadValues({
+        display: "inline-block",
+        position: "absolute",
+        right: ["4px", "-68px", "-80px", "-104px"],
+        top: [void 0, void 0, "46px", "62px"],
+        bottom: ["4px", "4px", void 0, void 0],
+        opacity: 0,
+        transition: "opacity 0.2s ease-out",
+        transform: "rotate(45deg)",
+        width: [24, 36, 48, 56],
+        height: [24, 36, 48, 56]
+      }, sx4)
+    }
+  );
+};
+var RESOURCES = [
+  {
+    label: "Carbon accounting",
+    links: []
+  },
+  {
+    label: "Climate impacts",
+    links: []
+  },
+  {
+    label: "Organization",
+    links: []
+  }
+];
+var sx2 = {
+  highlight: {
+    mb: [2, 2, 3, 3],
+    mt: [3, 3, 0, 0],
+    fontSize: [3, 3, 3, 4],
+    fontFamily: "heading",
+    letterSpacing: "smallcaps",
+    textTransform: "uppercase",
+    color: "secondary"
   }
 };
-var NavGroup = ({ links: links2, nav, mode, setExpanded }) => {
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, links2.map((d, i) => {
-    return /* @__PURE__ */ React17.createElement(
-      Nav,
+var SearchMenu = ({}) => {
+  const [value, setValue] = useState2("");
+  const [resources, setResources] = useState2(RESOURCES);
+  const destination = `/search?query=${value.trim()}`;
+  useEffect2(() => {
+    fetch("/resources.json").then((res) => res.json()).then((res) => {
+      if (res.length === 3 && res.every((el) => el.label && Array.isArray(el.links))) {
+        setResources(res);
+      }
+    }).catch(() => {
+      setResources(RESOURCES);
+    });
+  }, []);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(row_default, { columns: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(
+    Flex2,
+    {
+      as: "form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (value.trim()) {
+          window.location.href = destination;
+        }
+      },
+      sx: {
+        flexDirection: ["column", "column", "row", "row"],
+        gap: [0, 0, 7, 7],
+        mt: ["1px", 0, 2, "29px"],
+        position: "relative",
+        borderStyle: "solid",
+        borderColor: ["secondary", "secondary", "muted", "muted"],
+        borderWidth: "0px",
+        borderBottomWidth: "1px",
+        "@media (hover: hover) and (pointer: fine)": {
+          "&:hover  #arrow": {
+            opacity: 1
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Box13,
+      __spreadProps(__spreadValues({
+        as: "label"
+      }, { htmlFor: "search" }), {
+        sx: {
+          color: "primary",
+          fontSize: [6, 6, 7, 8],
+          fontFamily: "heading",
+          letterSpacing: "heading",
+          py: [0, 3, 4, 5],
+          textDecoration: "none",
+          display: "block",
+          transition: "color 0.15s"
+        }
+      }),
+      "Search"
+    ),
+    /* @__PURE__ */ React21.createElement(
+      input_default,
       {
-        key: i,
-        link: d,
-        mode,
-        nav,
-        first: i === 0,
-        setExpanded
+        id: "search",
+        size: "xl",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        sx: {
+          borderBottomWidth: 0,
+          fontSize: [4, 6, 7, 8],
+          flexShrink: 0
+        },
+        color: "secondary"
       }
-    );
-  }));
+    ),
+    /* @__PURE__ */ React21.createElement(Link3, { href: destination }, /* @__PURE__ */ React21.createElement(
+      HoverArrow2,
+      {
+        sx: {
+          opacity: value ? 1 : [1, 1, 0, 0],
+          pointerEvents: value ? "all" : "none"
+        }
+      }
+    ))
+  ))), /* @__PURE__ */ React21.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["none", "grid", "grid", "grid"] }
+    },
+    /* @__PURE__ */ React21.createElement(
+      column_default,
+      {
+        start: 1,
+        width: 5,
+        sx: { mt: [2, 2, 8, 8], mb: [1, 1, , 6, 6] }
+      },
+      /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")
+    ),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [4, 4, 5, 5], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 8, 8], width: 3, sx: { mt: [0, 4, 0, 0] } }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    )))
+  ), /* @__PURE__ */ React21.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["grid", "none", "none", "none"] }
+    },
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h3", sx: { my: 4 } }, "Popular resources"), /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    )))
+  ));
 };
+var search_menu_default = SearchMenu;
+
+// src/header/header.tsx
 var Header = ({ status, mode, nav, menuItems }) => {
-  const [expanded, setExpanded] = useState2(false);
-  const toggle = () => {
-    setExpanded(!expanded);
-  };
-  return /* @__PURE__ */ React17.createElement(
+  const [menuExpanded, setMenuExpanded] = useState3(false);
+  const [searchExpanded, setSearchExpanded] = useState3(false);
+  const expanded = searchExpanded || menuExpanded;
+  return /* @__PURE__ */ React22.createElement(
     row_default,
     {
       sx: {
@@ -1684,20 +1972,20 @@ var Header = ({ status, mode, nav, menuItems }) => {
         pb: [3]
       }
     },
-    /* @__PURE__ */ React17.createElement(column_default, { start: [1], width: [2] }, /* @__PURE__ */ React17.createElement(
-      Box13,
+    /* @__PURE__ */ React22.createElement(column_default, { start: [1], width: [2] }, /* @__PURE__ */ React22.createElement(
+      Box14,
       {
         sx: { pointerEvents: "all", display: "block", width: "fit-content" }
       },
-      (mode === "homepage" || mode === "local") && /* @__PURE__ */ React17.createElement(NextLink2, { href: "/", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React17.createElement(
-        Link2,
+      (mode == "homepage" || mode == "local") && /* @__PURE__ */ React22.createElement(NextLink3, { href: "/", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React22.createElement(
+        Link4,
         {
           "aria-label": "CarbonPlan Homepage",
           sx: {
             display: "block"
           }
         },
-        /* @__PURE__ */ React17.createElement(
+        /* @__PURE__ */ React22.createElement(
           logo_default,
           {
             id: "logo",
@@ -1708,17 +1996,17 @@ var Header = ({ status, mode, nav, menuItems }) => {
           }
         )
       )),
-      (mode == null || mode === "remote") && /* @__PURE__ */ React17.createElement(
-        Link2,
+      (mode == null || mode == "remote") && /* @__PURE__ */ React22.createElement(
+        Link4,
         {
           href: "https://carbonplan.org",
           "aria-label": "CarbonPlan Homepage",
           sx: { display: "block" }
         },
-        /* @__PURE__ */ React17.createElement(logo_default, { sx: { cursor: "pointer", color: "primary" } })
+        /* @__PURE__ */ React22.createElement(logo_default, { sx: { cursor: "pointer", color: "primary" } })
       )
     )),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React22.createElement(
       column_default,
       {
         start: [4, 9],
@@ -1729,8 +2017,8 @@ var Header = ({ status, mode, nav, menuItems }) => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React17.createElement(
-        Box13,
+      /* @__PURE__ */ React22.createElement(
+        Box14,
         {
           sx: {
             fontSize: [1, 2, 3],
@@ -1741,15 +2029,15 @@ var Header = ({ status, mode, nav, menuItems }) => {
         status ? `(${status})` : ""
       )
     ),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React22.createElement(
       column_default,
       {
         start: [status ? 6 : 4, 6, 11, 11],
         width: [status ? 1 : 3, 3, 2, 2],
         sx: { zIndex: 5e3 }
       },
-      /* @__PURE__ */ React17.createElement(Flex2, { sx: { pointerEvents: "all", justifyContent: "flex-end" } }, /* @__PURE__ */ React17.createElement(
-        Box13,
+      /* @__PURE__ */ React22.createElement(Flex3, { sx: { pointerEvents: "all", justifyContent: "flex-end" } }, /* @__PURE__ */ React22.createElement(
+        Box14,
         {
           sx: {
             display: [status ? "none" : "flex", "flex", "flex", "flex"],
@@ -1762,20 +2050,32 @@ var Header = ({ status, mode, nav, menuItems }) => {
           }
         },
         menuItems
-      ), /* @__PURE__ */ React17.createElement(
+      ), /* @__PURE__ */ React22.createElement(Flex3, { sx: { gap: 4 } }, /* @__PURE__ */ React22.createElement(
+        search_default,
+        {
+          value: searchExpanded,
+          onClick: () => {
+            setSearchExpanded(!searchExpanded);
+            !searchExpanded && setMenuExpanded(false);
+          }
+        }
+      ), /* @__PURE__ */ React22.createElement(
         menu_default,
         {
           sx: {
             flexShrink: 0,
             mr: ["-2px"]
           },
-          value: expanded,
-          onClick: toggle
+          value: menuExpanded,
+          onClick: () => {
+            setMenuExpanded(!menuExpanded);
+            !menuExpanded && setSearchExpanded(false);
+          }
         }
-      ))
+      )))
     ),
-    /* @__PURE__ */ React17.createElement(
-      Box13,
+    /* @__PURE__ */ React22.createElement(
+      Box14,
       {
         sx: {
           opacity: expanded ? 1 : 0,
@@ -1793,42 +2093,41 @@ var Header = ({ status, mode, nav, menuItems }) => {
           transition: "opacity 0.25s"
         }
       },
-      /* @__PURE__ */ React17.createElement(Container, null, /* @__PURE__ */ React17.createElement(row_default, null, /* @__PURE__ */ React17.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ React17.createElement(
-        Box13,
+      /* @__PURE__ */ React22.createElement(Container, null, /* @__PURE__ */ React22.createElement(row_default, null, menuExpanded ? /* @__PURE__ */ React22.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ React22.createElement(
+        Box14,
         {
           as: "nav",
           sx: {
-            display: expanded ? "inherit" : "none",
+            display: menuExpanded ? "inherit" : "none",
             mt: [5, 5, 5, 6]
           }
         },
-        /* @__PURE__ */ React17.createElement(
-          NavGroup,
+        /* @__PURE__ */ React22.createElement(
+          navigation_menu_default,
           {
-            links,
             nav,
             mode,
-            setExpanded
+            setExpanded: setMenuExpanded
           }
         )
-      ))))
+      )) : /* @__PURE__ */ React22.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ React22.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
     )
   );
 };
 var header_default = Header;
 
 // src/footer.tsx
-import React19, { useState as useState3, useEffect as useEffect2 } from "react";
-import { Box as Box15, Flex as Flex3, Link as Link3 } from "theme-ui";
-import { default as NextLink3 } from "next/link";
+import React24, { useState as useState4, useEffect as useEffect3 } from "react";
+import { Box as Box16, Flex as Flex4, Link as Link5 } from "theme-ui";
+import { default as NextLink4 } from "next/link";
 
 // src/monogram.tsx
-import React18 from "react";
-import { Box as Box14 } from "theme-ui";
+import React23 from "react";
+import { Box as Box15 } from "theme-ui";
 var Monogram = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ React18.createElement(
-    Box14,
+  return /* @__PURE__ */ React23.createElement(
+    Box15,
     __spreadValues(__spreadValues({
       as: "svg"
     }, {
@@ -1837,21 +2136,21 @@ var Monogram = (_a) => {
       fill: "currentColor",
       viewBox: "0 0 32 32"
     }), props),
-    /* @__PURE__ */ React18.createElement("path", { d: "M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z" }),
-    /* @__PURE__ */ React18.createElement("path", { d: "M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4" }),
-    /* @__PURE__ */ React18.createElement("path", { d: "M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15" })
+    /* @__PURE__ */ React23.createElement("path", { d: "M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z" }),
+    /* @__PURE__ */ React23.createElement("path", { d: "M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4" }),
+    /* @__PURE__ */ React23.createElement("path", { d: "M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15" })
   );
 };
 var monogram_default = Monogram;
 
 // src/footer.tsx
 var Footer = () => {
-  const [year, setYear] = useState3(null);
-  useEffect2(() => {
+  const [year, setYear] = useState4(null);
+  useEffect3(() => {
     setYear((/* @__PURE__ */ new Date()).getFullYear());
   }, []);
-  return /* @__PURE__ */ React19.createElement(
-    Box15,
+  return /* @__PURE__ */ React24.createElement(
+    Box16,
     {
       sx: {
         mt: [7, 7, 7, 8],
@@ -1859,8 +2158,8 @@ var Footer = () => {
         pb: [2, 1, 0, 0]
       }
     },
-    /* @__PURE__ */ React19.createElement(row_default, { sx: { mb: [0, 0, 4, 5] } }, /* @__PURE__ */ React19.createElement(column_default, { start: [1, 2], width: [3, 3] }, /* @__PURE__ */ React19.createElement(Box15, null, /* @__PURE__ */ React19.createElement(
-      Box15,
+    /* @__PURE__ */ React24.createElement(row_default, { sx: { mb: [0, 0, 4, 5] } }, /* @__PURE__ */ React24.createElement(column_default, { start: [1, 2], width: [3, 3] }, /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+      Box16,
       {
         sx: {
           fontSize: [2, 2, 2, 3],
@@ -1870,8 +2169,8 @@ var Footer = () => {
         }
       },
       "EMAIL"
-    ), /* @__PURE__ */ React19.createElement(
-      Link3,
+    ), /* @__PURE__ */ React24.createElement(
+      Link5,
       {
         href: "mailto:hello@carbonplan.org",
         sx: {
@@ -1880,7 +2179,7 @@ var Footer = () => {
         }
       },
       "hello@carbonplan.org"
-    ))), /* @__PURE__ */ React19.createElement(
+    ))), /* @__PURE__ */ React24.createElement(
       column_default,
       {
         start: [5],
@@ -1892,9 +2191,9 @@ var Footer = () => {
           justifyContent: ["center"]
         }
       },
-      /* @__PURE__ */ React19.createElement(monogram_default, { sx: { mt: ["-4px"], width: "60px", height: "60px" } })
-    ), /* @__PURE__ */ React19.createElement(column_default, { start: [1, 5, 5, 5], width: [3, 3], sx: { mt: [3, 0, 0, 0] } }, /* @__PURE__ */ React19.createElement(Box15, null, /* @__PURE__ */ React19.createElement(
-      Box15,
+      /* @__PURE__ */ React24.createElement(monogram_default, { sx: { mt: ["-4px"], width: "60px", height: "60px" } })
+    ), /* @__PURE__ */ React24.createElement(column_default, { start: [1, 5, 5, 5], width: [3, 3], sx: { mt: [3, 0, 0, 0] } }, /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+      Box16,
       {
         sx: {
           fontSize: [2, 2, 2, 3],
@@ -1904,8 +2203,8 @@ var Footer = () => {
         }
       },
       "NEWSLETTER"
-    ), /* @__PURE__ */ React19.createElement(
-      Link3,
+    ), /* @__PURE__ */ React24.createElement(
+      Link5,
       {
         href: "https://carbonplan.org/newsletter",
         sx: {
@@ -1914,15 +2213,15 @@ var Footer = () => {
         }
       },
       "Subscribe"
-    ))), /* @__PURE__ */ React19.createElement(
+    ))), /* @__PURE__ */ React24.createElement(
       column_default,
       {
         start: [1, 9],
         width: [5, 4, 3, 3],
         sx: { mt: ["42px", "42px", 0, 0], mb: [3, 3, 0, 0] }
       },
-      /* @__PURE__ */ React19.createElement(Box15, null, /* @__PURE__ */ React19.createElement(
-        Box15,
+      /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+        Box16,
         {
           sx: {
             fontSize: [2, 2, 2, 3],
@@ -1933,7 +2232,7 @@ var Footer = () => {
         "CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status."
       ))
     )),
-    /* @__PURE__ */ React19.createElement(row_default, { sx: { mb: ["2px"], mt: [5, 5, 4] } }, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React24.createElement(row_default, { sx: { mb: ["2px"], mt: [5, 5, 4] } }, /* @__PURE__ */ React24.createElement(
       column_default,
       {
         start: [1, 1, 2, 2],
@@ -1943,8 +2242,8 @@ var Footer = () => {
           alignItems: ["flex-start", "flex-start", "flex-end"]
         }
       },
-      /* @__PURE__ */ React19.createElement(
-        Box15,
+      /* @__PURE__ */ React24.createElement(
+        Box16,
         {
           sx: {
             bottom: "0px",
@@ -1956,8 +2255,8 @@ var Footer = () => {
             pt: [2]
           }
         },
-        /* @__PURE__ */ React19.createElement(
-          Box15,
+        /* @__PURE__ */ React24.createElement(
+          Box16,
           {
             sx: {
               color: "secondary",
@@ -1966,20 +2265,20 @@ var Footer = () => {
               letterSpacing: "mono"
             }
           },
-          /* @__PURE__ */ React19.createElement(
-            Flex3,
+          /* @__PURE__ */ React24.createElement(
+            Flex4,
             {
               sx: {
                 flexDirection: ["column", "column", "row", "row"],
                 gap: [0, 0, "10px", "12px"]
               }
             },
-            /* @__PURE__ */ React19.createElement(Box15, null, "(c) ", year),
-            /* @__PURE__ */ React19.createElement(Box15, null, "CARBONPLAN")
+            /* @__PURE__ */ React24.createElement(Box16, null, "(c) ", year),
+            /* @__PURE__ */ React24.createElement(Box16, null, "CARBONPLAN")
           )
         )
       )
-    ), /* @__PURE__ */ React19.createElement(
+    ), /* @__PURE__ */ React24.createElement(
       column_default,
       {
         start: [4, 3, 5, 5],
@@ -1990,8 +2289,8 @@ var Footer = () => {
           mt: [0, 0, 0, 0]
         }
       },
-      /* @__PURE__ */ React19.createElement(
-        Box15,
+      /* @__PURE__ */ React24.createElement(
+        Box16,
         {
           sx: {
             bottom: "0px",
@@ -2002,8 +2301,8 @@ var Footer = () => {
             pt: [2]
           }
         },
-        /* @__PURE__ */ React19.createElement(
-          Flex3,
+        /* @__PURE__ */ React24.createElement(
+          Flex4,
           {
             sx: {
               color: "secondary",
@@ -2014,8 +2313,8 @@ var Footer = () => {
               gap: [0, 0, "10px", "12px"]
             }
           },
-          /* @__PURE__ */ React19.createElement(NextLink3, { href: "/terms", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React19.createElement(
-            Box15,
+          /* @__PURE__ */ React24.createElement(NextLink4, { href: "/terms", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React24.createElement(
+            Box16,
             {
               as: "a",
               sx: {
@@ -2027,9 +2326,9 @@ var Footer = () => {
             },
             "TERMS OF USE"
           )),
-          /* @__PURE__ */ React19.createElement(Box15, { sx: { display: ["none", "none", "initial", "initial"] } }, " / "),
-          /* @__PURE__ */ React19.createElement(NextLink3, { href: "/privacy", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React19.createElement(
-            Box15,
+          /* @__PURE__ */ React24.createElement(Box16, { sx: { display: ["none", "none", "initial", "initial"] } }, " / "),
+          /* @__PURE__ */ React24.createElement(NextLink4, { href: "/privacy", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React24.createElement(
+            Box16,
             {
               as: "a",
               sx: {
@@ -2043,14 +2342,14 @@ var Footer = () => {
           ))
         )
       )
-    ), /* @__PURE__ */ React19.createElement(
+    ), /* @__PURE__ */ React24.createElement(
       column_default,
       {
         start: [5, 7, 9, 9],
         width: [2, 2, 3, 3],
         sx: { display: ["none", "initial", "initial", "initial"] }
       },
-      /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React24.createElement(
         monogram_default,
         {
           sx: {
@@ -2067,17 +2366,17 @@ var Footer = () => {
 var footer_default = Footer;
 
 // src/dimmer.tsx
-import React20 from "react";
+import React25 from "react";
 import { IconButton as IconButton2, useColorMode } from "theme-ui";
 import { useCallback } from "react";
 import { Sun } from "@carbonplan/icons";
 var Dimmer = (_a) => {
-  var _b = _a, { sx: sx3 = {} } = _b, props = __objRest(_b, ["sx"]);
+  var _b = _a, { sx: sx4 = {} } = _b, props = __objRest(_b, ["sx"]);
   const [colorMode, setColorMode] = useColorMode();
   const toggle = useCallback(() => {
     setColorMode(colorMode === "light" ? "dark" : "light");
   }, [colorMode]);
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React25.createElement(
     IconButton2,
     __spreadValues({
       "aria-label": "Toggle dark mode",
@@ -2089,9 +2388,9 @@ var Dimmer = (_a) => {
         display: "inline-block",
         cursor: "pointer",
         color: "secondary"
-      }, sx3)
+      }, sx4)
     }, props),
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React25.createElement(
       Sun,
       {
         sx: {
@@ -2110,13 +2409,13 @@ var Dimmer = (_a) => {
 var dimmer_default = Dimmer;
 
 // src/metadata.tsx
-import React22 from "react";
-import { Box as Box17, Text as Text2 } from "theme-ui";
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import React27 from "react";
+import { Box as Box18, Text as Text2 } from "theme-ui";
+import { useState as useState5, useEffect as useEffect4 } from "react";
 
 // src/gitsha.tsx
-import React21 from "react";
-import { Box as Box16, Text, Link as Link4, useThemeUI as useThemeUI2 } from "theme-ui";
+import React26 from "react";
+import { Box as Box17, Text, Link as Link6, useThemeUI as useThemeUI2 } from "theme-ui";
 var GitSha = () => {
   var _a;
   const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
@@ -2127,8 +2426,8 @@ var GitSha = () => {
   if (sha && owner && slug) {
     const shortSha = sha.substring(0, 7);
     const href = "https://github.com/" + owner + "/" + slug + "/tree/" + sha;
-    return /* @__PURE__ */ React21.createElement(Box16, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React21.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React21.createElement(
-      Link4,
+    return /* @__PURE__ */ React26.createElement(Box17, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React26.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React26.createElement(
+      Link6,
       {
         href,
         sx: {
@@ -2146,7 +2445,7 @@ var GitSha = () => {
       shortSha
     ));
   } else {
-    return /* @__PURE__ */ React21.createElement(Box16, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React21.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React26.createElement(Box17, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React26.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React26.createElement(
       Text,
       {
         sx: {
@@ -2165,14 +2464,14 @@ var GitSha = () => {
   }
 };
 var Separator = ({ color = "secondary" }) => {
-  return /* @__PURE__ */ React21.createElement("svg", { fill: color, opacity: "0.8", viewBox: "0 0 24 24", width: "24", height: "24" }, /* @__PURE__ */ React21.createElement("circle", { r: 5, cx: 19, cy: 19 }));
+  return /* @__PURE__ */ React26.createElement("svg", { fill: color, opacity: "0.8", viewBox: "0 0 24 24", width: "24", height: "24" }, /* @__PURE__ */ React26.createElement("circle", { r: 5, cx: 19, cy: 19 }));
 };
 var gitsha_default = GitSha;
 
 // src/metadata.tsx
 var Value = ({ mode }) => {
-  const [display, setDisplay] = useState4(init(mode));
-  useEffect3(() => {
+  const [display, setDisplay] = useState5(init(mode));
+  useEffect4(() => {
     if (mode === "mouse") {
       const setFromEvent = (e) => {
         const x = format(e.clientX, 4);
@@ -2195,7 +2494,7 @@ var Value = ({ mode }) => {
       };
     }
   }, []);
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Text2,
     {
       sx: {
@@ -2213,8 +2512,8 @@ var Value = ({ mode }) => {
   );
 };
 var Metadata = ({ mode }) => {
-  return /* @__PURE__ */ React22.createElement(
-    Box17,
+  return /* @__PURE__ */ React27.createElement(
+    Box18,
     {
       sx: {
         userSelect: "none",
@@ -2226,8 +2525,8 @@ var Metadata = ({ mode }) => {
         display: ["none", "none", "initial"]
       }
     },
-    /* @__PURE__ */ React22.createElement(Value, { mode }),
-    /* @__PURE__ */ React22.createElement(gitsha_default, null)
+    /* @__PURE__ */ React27.createElement(Value, { mode }),
+    /* @__PURE__ */ React27.createElement(gitsha_default, null)
   );
 };
 function init(mode) {
@@ -2248,8 +2547,8 @@ function scrollFraction(window2, document2) {
 var metadata_default = Metadata;
 
 // src/fade-in.tsx
-import React23 from "react";
-import { Box as Box18 } from "theme-ui";
+import React28 from "react";
+import { Box as Box19 } from "theme-ui";
 import { keyframes } from "@emotion/react";
 var fade = keyframes({
   from: {
@@ -2269,8 +2568,8 @@ var FadeIn = (_a) => {
     "delay",
     "children"
   ]);
-  return /* @__PURE__ */ React23.createElement(
-    Box18,
+  return /* @__PURE__ */ React28.createElement(
+    Box19,
     __spreadProps(__spreadValues({}, delegated), {
       sx: {
         animationDuration: duration + "ms",
@@ -2286,7 +2585,7 @@ var FadeIn = (_a) => {
 var fade_in_default = FadeIn;
 
 // src/scrollbar.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 
 // src/utils/get-scrollbar-width.ts
 var getScrollbarWidth = (document2) => {
@@ -2306,7 +2605,7 @@ var get_scrollbar_width_default = getScrollbarWidth;
 
 // src/scrollbar.tsx
 var Scrollbar = () => {
-  useEffect4(() => {
+  useEffect5(() => {
     if (typeof document !== "undefined") {
       const delta = get_scrollbar_width_default(document);
       if (delta > 0) {
@@ -2320,11 +2619,11 @@ var Scrollbar = () => {
 var scrollbar_default = Scrollbar;
 
 // src/guide.tsx
-import React24, { useState as useState5, useEffect as useEffect5 } from "react";
-import { Box as Box19, Container as Container2 } from "theme-ui";
+import React29, { useState as useState6, useEffect as useEffect6 } from "react";
+import { Box as Box20, Container as Container2 } from "theme-ui";
 var Guide = ({ color = "muted" }) => {
-  const [display, setDisplay] = useState5(false);
-  useEffect5(() => {
+  const [display, setDisplay] = useState6(false);
+  useEffect6(() => {
     function handler(event) {
       const { key, metaKey } = event;
       if (key === ";" && metaKey) {
@@ -2336,8 +2635,8 @@ var Guide = ({ color = "muted" }) => {
       document.removeEventListener("keydown", handler);
     };
   }, []);
-  return /* @__PURE__ */ React24.createElement(
-    Box19,
+  return /* @__PURE__ */ React29.createElement(
+    Box20,
     {
       sx: {
         position: "fixed",
@@ -2349,13 +2648,13 @@ var Guide = ({ color = "muted" }) => {
         display: display ? "initial" : "none"
       }
     },
-    /* @__PURE__ */ React24.createElement(Container2, null, /* @__PURE__ */ React24.createElement(Box19, { sx: { display: ["none", "none", "initial", "initial"] } }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React29.createElement(Container2, null, /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["none", "none", "initial", "initial"] } }, /* @__PURE__ */ React29.createElement(
       GuideColumns,
       {
         indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
         color
       }
-    )), /* @__PURE__ */ React24.createElement(Box19, { sx: { display: ["none", "initial", "none", "none"] } }, /* @__PURE__ */ React24.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6, 7, 8], color })), /* @__PURE__ */ React24.createElement(Box19, { sx: { display: ["initial", "none", "none", "none"] } }, /* @__PURE__ */ React24.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6], color })))
+    )), /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["none", "initial", "none", "none"] } }, /* @__PURE__ */ React29.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6, 7, 8], color })), /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["initial", "none", "none", "none"] } }, /* @__PURE__ */ React29.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6], color })))
   );
 };
 var colorCycle = [
@@ -2372,7 +2671,7 @@ function GuideColumns({
   indices,
   color
 }) {
-  const sx3 = {
+  const sx4 = {
     outerGuideColumn: {
       borderStyle: "solid",
       borderWidth: "0px",
@@ -2388,8 +2687,8 @@ function GuideColumns({
       opacity: color === "teal" ? 0.4 : 1
     }
   };
-  return /* @__PURE__ */ React24.createElement(row_default, null, indices.map((i) => {
-    return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React29.createElement(row_default, null, indices.map((i) => {
+    return /* @__PURE__ */ React29.createElement(
       column_default,
       {
         key: i,
@@ -2400,10 +2699,10 @@ function GuideColumns({
         sx: __spreadValues({
           bg: color === "teal" ? "teal" : "transparent",
           height: "100vh"
-        }, sx3.innerGuideColumn)
+        }, sx4.innerGuideColumn)
       },
-      /* @__PURE__ */ React24.createElement(
-        Box19,
+      /* @__PURE__ */ React29.createElement(
+        Box20,
         {
           sx: __spreadValues({
             mx: ["12px", 3, 3, 4],
@@ -2411,7 +2710,7 @@ function GuideColumns({
             height: "100%",
             borderLeftColor: color === "rainbow" ? colorCycle[i % 8] : "muted",
             borderRightColor: color === "rainbow" ? colorCycle[i % 8] : "muted"
-          }, sx3.outerGuideColumn)
+          }, sx4.outerGuideColumn)
         }
       )
     );
@@ -2420,96 +2719,9 @@ function GuideColumns({
 var guide_default = Guide;
 
 // src/settings.tsx
-import React25 from "react";
-import { IconButton as IconButton3 } from "theme-ui";
-var Settings = (_a) => {
-  var _b = _a, { value, sx: sx3 } = _b, props = __objRest(_b, ["value", "sx"]);
-  return /* @__PURE__ */ React25.createElement(
-    IconButton3,
-    __spreadValues({
-      sx: __spreadValues({
-        cursor: "pointer",
-        fill: "none",
-        strokeWidth: "2px",
-        stroke: "text",
-        ".paren": {
-          opacity: "0"
-        },
-        "@media (hover: hover) and (pointer: fine)": {
-          "&:hover .paren": {
-            opacity: "1"
-          }
-        }
-      }, sx3),
-      "aria-label": "Toggle Menu"
-    }, props),
-    !value && /* @__PURE__ */ React25.createElement(
-      "svg",
-      {
-        style: {
-          width: "50px",
-          height: "30px",
-          marginTop: "-3px",
-          flexShrink: 0
-        },
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 68 36"
-      },
-      /* @__PURE__ */ React25.createElement("line", { x1: "24", y1: "2.1", x2: "24", y2: "6.1" }),
-      /* @__PURE__ */ React25.createElement("line", { x1: "24", y1: "24.1", x2: "24", y2: "33.9" }),
-      /* @__PURE__ */ React25.createElement("line", { x1: "44", y1: "2.1", x2: "44", y2: "12.1" }),
-      /* @__PURE__ */ React25.createElement("line", { x1: "44", y1: "30.1", x2: "44", y2: "33.9" }),
-      /* @__PURE__ */ React25.createElement("circle", { cx: "24", cy: "15.1", r: "5" }),
-      /* @__PURE__ */ React25.createElement("circle", { cx: "44", cy: "21.1", r: "5" }),
-      /* @__PURE__ */ React25.createElement(
-        "path",
-        {
-          style: { transition: "all 0.2s" },
-          className: "paren",
-          d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-        }
-      ),
-      /* @__PURE__ */ React25.createElement(
-        "path",
-        {
-          style: { transition: "all 0.2s" },
-          className: "paren",
-          d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-        }
-      )
-    ),
-    value && /* @__PURE__ */ React25.createElement(
-      "svg",
-      {
-        style: {
-          width: "50px",
-          height: "30px",
-          marginTop: "-3px",
-          flexShrink: 0
-        },
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 68 36"
-      },
-      /* @__PURE__ */ React25.createElement("line", { x1: "50.85", y1: "29.79", x2: "17.15", y2: "6.21" }),
-      /* @__PURE__ */ React25.createElement("line", { x1: "17.15", y1: "29.79", x2: "50.85", y2: "6.21" }),
-      /* @__PURE__ */ React25.createElement(
-        "path",
-        {
-          style: { transition: "all 0.2s" },
-          className: "paren",
-          d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-        }
-      ),
-      /* @__PURE__ */ React25.createElement(
-        "path",
-        {
-          style: { transition: "all 0.2s" },
-          className: "paren",
-          d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-        }
-      )
-    )
-  );
+import React30 from "react";
+var Settings = (props) => {
+  return /* @__PURE__ */ React30.createElement(header_icon_default, __spreadValues({ label: "Toggle Settings" }, props), /* @__PURE__ */ React30.createElement("line", { x1: "24", y1: "2.1", x2: "24", y2: "6.1" }), /* @__PURE__ */ React30.createElement("line", { x1: "24", y1: "24.1", x2: "24", y2: "33.9" }), /* @__PURE__ */ React30.createElement("line", { x1: "44", y1: "2.1", x2: "44", y2: "12.1" }), /* @__PURE__ */ React30.createElement("line", { x1: "44", y1: "30.1", x2: "44", y2: "33.9" }), /* @__PURE__ */ React30.createElement("circle", { cx: "24", cy: "15.1", r: "5" }), /* @__PURE__ */ React30.createElement("circle", { cx: "44", cy: "21.1", r: "5" }));
 };
 var settings_default = Settings;
 
@@ -2536,10 +2748,10 @@ var Layout = ({
 }) => {
   let content = children;
   if (fade2) {
-    content = /* @__PURE__ */ React26.createElement(fade_in_default, { duration: 250 }, content);
+    content = /* @__PURE__ */ React31.createElement(fade_in_default, { duration: 250 }, content);
   }
   if (container) {
-    content = /* @__PURE__ */ React26.createElement(Box20, { sx: { mb: [8, 8, 9, 10] } }, /* @__PURE__ */ React26.createElement(Container3, null, content));
+    content = /* @__PURE__ */ React31.createElement(Box21, { sx: { mb: [8, 8, 9, 10] } }, /* @__PURE__ */ React31.createElement(Container3, null, content));
   }
   const { theme } = useThemeUI3();
   const hideOnPrint = printable ? {
@@ -2547,7 +2759,7 @@ var Layout = ({
       display: "none"
     }
   } : {};
-  useEffect6(() => {
+  useEffect7(() => {
     var _a;
     if (!theme) return;
     const handler = (e) => {
@@ -2564,7 +2776,7 @@ var Layout = ({
     };
   }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
   const menuItems = [
-    /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React31.createElement(
       dimmer_default,
       {
         key: "dimmer",
@@ -2583,7 +2795,7 @@ var Layout = ({
   ];
   if (settings) {
     menuItems.push(
-      /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React31.createElement(
         settings_default,
         __spreadValues({
           key: "settings",
@@ -2592,16 +2804,16 @@ var Layout = ({
       )
     );
   }
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, guide && /* @__PURE__ */ React26.createElement(guide_default, { color: typeof guide === "string" ? guide : void 0 }), scrollbar && /* @__PURE__ */ React26.createElement(scrollbar_default, null), /* @__PURE__ */ React26.createElement(meta_default, { card, description, title, url }), /* @__PURE__ */ React26.createElement(
-    Flex4,
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, guide && /* @__PURE__ */ React31.createElement(guide_default, { color: typeof guide === "string" ? guide : void 0 }), scrollbar && /* @__PURE__ */ React31.createElement(scrollbar_default, null), /* @__PURE__ */ React31.createElement(meta_default, { card, description, title, url }), /* @__PURE__ */ React31.createElement(
+    Flex5,
     {
       sx: {
         flexDirection: "column",
         minHeight: "100vh"
       }
     },
-    header && /* @__PURE__ */ React26.createElement(
-      Box20,
+    header && /* @__PURE__ */ React31.createElement(
+      Box21,
       {
         as: "header",
         sx: __spreadValues({
@@ -2617,7 +2829,7 @@ var Layout = ({
           zIndex: 2e3
         }, hideOnPrint)
       },
-      /* @__PURE__ */ React26.createElement(Container3, null, /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React31.createElement(Container3, null, /* @__PURE__ */ React31.createElement(
         header_default,
         {
           mode: links2,
@@ -2627,8 +2839,8 @@ var Layout = ({
         }
       ))
     ),
-    /* @__PURE__ */ React26.createElement(
-      Box20,
+    /* @__PURE__ */ React31.createElement(
+      Box21,
       {
         sx: {
           width: "100%",
@@ -2637,8 +2849,8 @@ var Layout = ({
       },
       content
     ),
-    footer && /* @__PURE__ */ React26.createElement(
-      Box20,
+    footer && /* @__PURE__ */ React31.createElement(
+      Box21,
       {
         as: "footer",
         sx: __spreadValues({
@@ -2649,10 +2861,10 @@ var Layout = ({
           borderTopWidth: "1px"
         }, hideOnPrint)
       },
-      /* @__PURE__ */ React26.createElement(Container3, null, /* @__PURE__ */ React26.createElement(footer_default, null))
+      /* @__PURE__ */ React31.createElement(Container3, null, /* @__PURE__ */ React31.createElement(footer_default, null))
     ),
-    dimmer === "bottom" && /* @__PURE__ */ React26.createElement(
-      Box20,
+    dimmer === "bottom" && /* @__PURE__ */ React31.createElement(
+      Box21,
       {
         sx: {
           display: ["none", "none", "initial", "initial"],
@@ -2661,24 +2873,24 @@ var Layout = ({
           bottom: [17, 17, 15, 15]
         }
       },
-      /* @__PURE__ */ React26.createElement(dimmer_default, null)
+      /* @__PURE__ */ React31.createElement(dimmer_default, null)
     ),
-    metadata && /* @__PURE__ */ React26.createElement(metadata_default, { mode: typeof metadata === "string" ? metadata : "mouse" })
+    metadata && /* @__PURE__ */ React31.createElement(metadata_default, { mode: typeof metadata === "string" ? metadata : "mouse" })
   ));
 };
 var layout_default = Layout;
 
 // src/custom-404.tsx
 var Custom404 = () => {
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React32.createElement(
     layout_default,
     {
       footer: false,
       title: "404 \u2013 CarbonPlan",
       description: "Sorry but we can't seem to find the page you are looking for."
     },
-    /* @__PURE__ */ React27.createElement(row_default, { sx: { mb: [5, 0, 0], pt: [0, 0, 6] } }, /* @__PURE__ */ React27.createElement(column_default, { start: [1, 1, 3, 3], width: [6, 4, 4, 4] }, /* @__PURE__ */ React27.createElement(Box21, { as: "h1", variant: "styles.h1" }, "Oops!"), /* @__PURE__ */ React27.createElement(
-      Box21,
+    /* @__PURE__ */ React32.createElement(row_default, { sx: { mb: [5, 0, 0], pt: [0, 0, 6] } }, /* @__PURE__ */ React32.createElement(column_default, { start: [1, 1, 3, 3], width: [6, 4, 4, 4] }, /* @__PURE__ */ React32.createElement(Box22, { as: "h1", variant: "styles.h1" }, "Oops!"), /* @__PURE__ */ React32.createElement(
+      Box22,
       {
         sx: {
           fontSize: [4, 4, 4, 5],
@@ -2689,8 +2901,8 @@ var Custom404 = () => {
         }
       },
       "Sorry but we can't seem to find the page you are looking for."
-    ), /* @__PURE__ */ React27.createElement(
-      Box21,
+    ), /* @__PURE__ */ React32.createElement(
+      Box22,
       {
         sx: {
           color: "secondary",
@@ -2701,8 +2913,8 @@ var Custom404 = () => {
         }
       },
       "ERROR CODE 404"
-    )), /* @__PURE__ */ React27.createElement(column_default, { start: [2, 5, 7, 7], width: [4, 4, 4, 4] }, /* @__PURE__ */ React27.createElement(
-      Box21,
+    )), /* @__PURE__ */ React32.createElement(column_default, { start: [2, 5, 7, 7], width: [4, 4, 4, 4] }, /* @__PURE__ */ React32.createElement(
+      Box22,
       {
         sx: {
           width: ["100%"],
@@ -2710,18 +2922,18 @@ var Custom404 = () => {
           fill: "primary"
         }
       },
-      /* @__PURE__ */ React27.createElement(PoopSad, { sx: { width: "100%", height: "auto" } })
+      /* @__PURE__ */ React32.createElement(PoopSad, { sx: { width: "100%", height: "auto" } })
     )))
   );
 };
 var custom_404_default = Custom404;
 
 // src/expander.tsx
-import React28 from "react";
-import { IconButton as IconButton4 } from "theme-ui";
-var Expander = ({ value, id, onClick, sx: sx3 }) => {
-  return /* @__PURE__ */ React28.createElement(
-    IconButton4,
+import React33 from "react";
+import { IconButton as IconButton3 } from "theme-ui";
+var Expander = ({ value, id, onClick, sx: sx4 }) => {
+  return /* @__PURE__ */ React33.createElement(
+    IconButton3,
     {
       onClick,
       id,
@@ -2742,9 +2954,9 @@ var Expander = ({ value, id, onClick, sx: sx3 }) => {
             stroke: "primary"
           }
         }
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ React28.createElement("svg", { viewBox: "0 0 16 16" }, /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React33.createElement("svg", { viewBox: "0 0 16 16" }, /* @__PURE__ */ React33.createElement(
       "path",
       {
         d: "M8,0 V16 M0,8 H16",
@@ -2761,22 +2973,22 @@ var Expander = ({ value, id, onClick, sx: sx3 }) => {
 var expander_default = Expander;
 
 // src/figure.tsx
-import React29 from "react";
-import { Box as Box22 } from "theme-ui";
-var Figure = ({ as = "figure", children, sx: sx3 }) => {
-  const childrenArray = React29.Children.toArray(children);
+import React34 from "react";
+import { Box as Box23 } from "theme-ui";
+var Figure = ({ as = "figure", children, sx: sx4 }) => {
+  const childrenArray = React34.Children.toArray(children);
   const captionElement = childrenArray.find((child) => {
-    if (!React29.isValidElement(child)) return false;
+    if (!React34.isValidElement(child)) return false;
     const type = child.type;
     return typeof type !== "string" && "displayName" in type && (type.displayName === "FigureCaption" || type.displayName === "TableCaption");
   });
-  const captionProps = React29.isValidElement(captionElement) ? captionElement.props : void 0;
-  const captionType = React29.isValidElement(captionElement) ? captionElement.type : void 0;
+  const captionProps = React34.isValidElement(captionElement) ? captionElement.props : void 0;
+  const captionType = React34.isValidElement(captionElement) ? captionElement.type : void 0;
   const elementNumber = captionProps == null ? void 0 : captionProps.number;
   const elementType = typeof captionType !== "string" && captionType && "displayName" in captionType && captionType.displayName === "TableCaption" ? "table" : "figure";
   const id = elementNumber ? `${elementType}-${elementNumber}` : void 0;
-  return /* @__PURE__ */ React29.createElement(
-    Box22,
+  return /* @__PURE__ */ React34.createElement(
+    Box23,
     {
       as,
       id,
@@ -2787,38 +2999,38 @@ var Figure = ({ as = "figure", children, sx: sx3 }) => {
         "@media print": {
           breakInside: "avoid"
         }
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ React29.createElement(group_default, { spacing: [4, 4, 4, 5] }, children)
+    /* @__PURE__ */ React34.createElement(group_default, { spacing: [4, 4, 4, 5] }, children)
   );
 };
 var figure_default = Figure;
 
 // src/figure-caption.tsx
-import React30 from "react";
+import React35 from "react";
 var FigureCaption = ({
   as = "figcaption",
   number,
   children
 }) => {
-  return /* @__PURE__ */ React30.createElement(caption_default, { as, number, label: "figure" }, children);
+  return /* @__PURE__ */ React35.createElement(caption_default, { as, number, label: "figure" }, children);
 };
 FigureCaption.displayName = "FigureCaption";
 var figure_caption_default = FigureCaption;
 
 // src/filter.tsx
-import React32, { useMemo } from "react";
-import { Box as Box24 } from "theme-ui";
+import React37, { useMemo } from "react";
+import { Box as Box25 } from "theme-ui";
 
 // src/tag.tsx
-import React31 from "react";
-import { Box as Box23 } from "theme-ui";
+import React36 from "react";
+import { Box as Box24 } from "theme-ui";
 var Tag = (_a) => {
-  var _b = _a, { label, value, sx: sx3, children } = _b, props = __objRest(_b, ["label", "value", "sx", "children"]);
-  const color = get_sx_color_default(sx3);
+  var _b = _a, { label, value, sx: sx4, children } = _b, props = __objRest(_b, ["label", "value", "sx", "children"]);
+  const color = get_sx_color_default(sx4);
   const isClickable = props && (props.onClick || props.onDoubleClick);
-  return /* @__PURE__ */ React31.createElement(
-    Box23,
+  return /* @__PURE__ */ React36.createElement(
+    Box24,
     __spreadValues({
       as: isClickable ? "button" : "span",
       role: "checkbox",
@@ -2845,7 +3057,7 @@ var Tag = (_a) => {
         px: [0],
         m: [0],
         opacity: value == null || value ? 1 : color === "primary" ? 0.24 : 0.33
-      }, sx3)
+      }, sx4)
     }, props),
     children
   );
@@ -2853,7 +3065,7 @@ var Tag = (_a) => {
 var tag_default = Tag;
 
 // src/filter.tsx
-var sx2 = {
+var sx3 = {
   label: {
     fontFamily: "mono",
     letterSpacing: "mono",
@@ -2925,7 +3137,7 @@ var Filter = (_a) => {
       return Object.keys(values);
     }
   }, [order, ...Object.keys(values).sort()]);
-  return /* @__PURE__ */ React32.createElement(Box24, __spreadValues({}, props), label && /* @__PURE__ */ React32.createElement(Box24, { sx: sx2.label }, label), /* @__PURE__ */ React32.createElement(Box24, { sx: { mt: label ? [3] : 0 } }, showAll && /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React37.createElement(Box25, __spreadValues({}, props), label && /* @__PURE__ */ React37.createElement(Box25, { sx: sx3.label }, label), /* @__PURE__ */ React37.createElement(Box25, { sx: { mt: label ? [3] : 0 } }, showAll && /* @__PURE__ */ React37.createElement(
     tag_default,
     {
       label: "all",
@@ -2939,7 +3151,7 @@ var Filter = (_a) => {
       sx: { mr: [2] }
     },
     "All"
-  ), keys.map((d, i) => /* @__PURE__ */ React32.createElement(
+  ), keys.map((d, i) => /* @__PURE__ */ React37.createElement(
     tag_default,
     {
       label: String(d),
@@ -2970,18 +3182,18 @@ var Filter = (_a) => {
 var filter_default = Filter;
 
 // src/heading.tsx
-import React34 from "react";
-import { Box as Box26 } from "theme-ui";
+import React39 from "react";
+import { Box as Box27 } from "theme-ui";
 
 // src/sidenote.tsx
-import React33 from "react";
-import { Box as Box25 } from "theme-ui";
+import React38 from "react";
+import { Box as Box26 } from "theme-ui";
 var Sidenote = ({ children, variant = "h1" }) => {
   let mt;
   if (variant === "h1") mt = [4, "27px", "42px", "54px"];
   if (variant === "h2") mt = [4, 4, "14px", "25px"];
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(column_default, { start: [1, 4, 8, 8], width: [1, 1, 1, 1] }, /* @__PURE__ */ React33.createElement(
-    Box25,
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(column_default, { start: [1, 4, 8, 8], width: [1, 1, 1, 1] }, /* @__PURE__ */ React38.createElement(
+    Box26,
     {
       sx: {
         mt,
@@ -2992,8 +3204,8 @@ var Sidenote = ({ children, variant = "h1" }) => {
       }
     },
     "/"
-  )), /* @__PURE__ */ React33.createElement(column_default, { start: [2, 5, 9, 9], width: [3, 3, 2, 2] }, /* @__PURE__ */ React33.createElement(
-    Box25,
+  )), /* @__PURE__ */ React38.createElement(column_default, { start: [2, 5, 9, 9], width: [3, 3, 2, 2] }, /* @__PURE__ */ React38.createElement(
+    Box26,
     {
       sx: {
         mt,
@@ -3016,7 +3228,7 @@ var Heading = ({
   description,
   descriptionStart = [1, 3, 5, 5],
   descriptionWidth = [5, 5, 5, 4],
-  sx: sx3
+  sx: sx4
 }) => {
   let titleWidth = [6, 6, 6, 6];
   if (description) {
@@ -3027,8 +3239,8 @@ var Heading = ({
   if (!["h1", "h2"].includes(variant)) {
     throw new Error(`variant must be 'h1' or 'h2' but got '${variant}'`);
   }
-  return /* @__PURE__ */ React34.createElement(row_default, { sx: __spreadValues({ mt: [5, 6, 7, 8], mb: [5, 6, 7, 8] }, sx3) }, /* @__PURE__ */ React34.createElement(column_default, { start: [1, 1, 2, 2], width: titleWidth }, variant === "h1" && /* @__PURE__ */ React34.createElement(Box26, { as: "h1", variant: "styles.h1", sx: { my: [0, 0, 0, 0] } }, children), variant === "h2" && /* @__PURE__ */ React34.createElement(Box26, { as: "h2", variant: "styles.h2", sx: { my: [0, 0, 0, 0] } }, children)), sidenote && /* @__PURE__ */ React34.createElement(sidenote_default, { variant }, sidenote), description && /* @__PURE__ */ React34.createElement(column_default, { start: descriptionStart, width: descriptionWidth }, /* @__PURE__ */ React34.createElement(
-    Box26,
+  return /* @__PURE__ */ React39.createElement(row_default, { sx: __spreadValues({ mt: [5, 6, 7, 8], mb: [5, 6, 7, 8] }, sx4) }, /* @__PURE__ */ React39.createElement(column_default, { start: [1, 1, 2, 2], width: titleWidth }, variant === "h1" && /* @__PURE__ */ React39.createElement(Box27, { as: "h1", variant: "styles.h1", sx: { my: [0, 0, 0, 0] } }, children), variant === "h2" && /* @__PURE__ */ React39.createElement(Box27, { as: "h2", variant: "styles.h2", sx: { my: [0, 0, 0, 0] } }, children)), sidenote && /* @__PURE__ */ React39.createElement(sidenote_default, { variant }, sidenote), description && /* @__PURE__ */ React39.createElement(column_default, { start: descriptionStart, width: descriptionWidth }, /* @__PURE__ */ React39.createElement(
+    Box27,
     {
       sx: {
         mt: [4, "5px", "20px", "31px"],
@@ -3040,47 +3252,10 @@ var Heading = ({
 };
 var heading_default = Heading;
 
-// src/input.tsx
-import React35, { forwardRef as forwardRef4 } from "react";
-import { Input as ThemedInput } from "theme-ui";
-var Input = (_a, ref) => {
-  var _b = _a, { size = "sm", inverted, sx: sx3 } = _b, props = __objRest(_b, ["size", "inverted", "sx"]);
-  const defaultColor = inverted ? "secondary" : "primary";
-  const styles3 = __spreadValues(__spreadValues({
-    color: defaultColor,
-    borderColor: "secondary",
-    borderStyle: "solid",
-    borderWidth: "0px",
-    borderBottomWidth: "1px",
-    borderRadius: "0px",
-    transition: "border 0.15s",
-    width: "calc(min(15ch, 100%))",
-    p: [0],
-    py: ["2px"],
-    "input::-webkit-outer-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0
-    },
-    "input::-webkit-inner-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0
-    },
-    ":focus": {
-      borderColor: "primary"
-    },
-    ":focus-visible": {
-      outline: "none !important",
-      background: "none !important"
-    }
-  }, get_size_styles_default(size)), sx3);
-  return /* @__PURE__ */ React35.createElement(ThemedInput, __spreadProps(__spreadValues({}, props), { ref, sx: styles3 }));
-};
-var input_default = forwardRef4(Input);
-
 // src/link-group.tsx
-import React36 from "react";
-import { Flex as Flex5 } from "theme-ui";
-import { RotatingArrow } from "@carbonplan/icons";
+import React40 from "react";
+import { Flex as Flex6 } from "theme-ui";
+import { RotatingArrow as RotatingArrow2 } from "@carbonplan/icons";
 var LinkGroup = ({
   members,
   color,
@@ -3089,20 +3264,20 @@ var LinkGroup = ({
   rowGap = [2, 2, 2, 3],
   columnGap = [3, 3, 3, 4],
   direction = "horizontal",
-  sx: sx3
+  sx: sx4
 }) => {
-  return /* @__PURE__ */ React36.createElement(
-    Flex5,
+  return /* @__PURE__ */ React40.createElement(
+    Flex6,
     {
       sx: __spreadValues({
         flexDirection: direction === "horizontal" ? "row" : "column",
         rowGap,
         columnGap,
         flexWrap: "wrap"
-      }, sx3)
+      }, sx4)
     },
     members.map((d, i) => {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React40.createElement(
         button_default,
         {
           key: i,
@@ -3110,7 +3285,7 @@ var LinkGroup = ({
           size,
           sx: { color },
           inverted,
-          suffix: /* @__PURE__ */ React36.createElement(RotatingArrow, null)
+          suffix: /* @__PURE__ */ React40.createElement(RotatingArrow2, null)
         },
         d.label
       );
@@ -3120,14 +3295,14 @@ var LinkGroup = ({
 var link_group_default = LinkGroup;
 
 // src/select.tsx
-import React37, { useRef as useRef2 } from "react";
-import { Box as Box27 } from "theme-ui";
-import { Arrow as Arrow3 } from "@carbonplan/icons";
+import React41, { useRef as useRef2 } from "react";
+import { Box as Box28 } from "theme-ui";
+import { Arrow as Arrow4 } from "@carbonplan/icons";
 var Select = (_a) => {
   var _b = _a, {
     children,
     size = "sm",
-    sx: sx3,
+    sx: sx4,
     sxSelect,
     onChange
   } = _b, props = __objRest(_b, [
@@ -3137,7 +3312,7 @@ var Select = (_a) => {
     "sxSelect",
     "onChange"
   ]);
-  const color = get_sx_color_default(sx3);
+  const color = get_sx_color_default(sx4);
   const sizeStyles = get_size_styles_default(size);
   const ref = useRef2(null);
   if (!["xs", "sm", "md"].includes(size)) {
@@ -3165,15 +3340,15 @@ var Select = (_a) => {
   };
   const { height, width, top, ml } = sizeConfig[size];
   const pr = width.map((d) => d + 12);
-  return /* @__PURE__ */ React37.createElement(
-    Box27,
+  return /* @__PURE__ */ React41.createElement(
+    Box28,
     {
       sx: __spreadValues({
         display: "inline-block"
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ React37.createElement(
-      Box27,
+    /* @__PURE__ */ React41.createElement(
+      Box28,
       __spreadValues({
         as: "select",
         ref,
@@ -3209,8 +3384,8 @@ var Select = (_a) => {
       }, props),
       children
     ),
-    /* @__PURE__ */ React37.createElement(
-      Arrow3,
+    /* @__PURE__ */ React41.createElement(
+      Arrow4,
       {
         sx: {
           width,
@@ -3229,15 +3404,15 @@ var Select = (_a) => {
 var select_default = Select;
 
 // src/slider.tsx
-import React38, { forwardRef as forwardRef5 } from "react";
+import React42, { forwardRef as forwardRef5 } from "react";
 import { useThemeUI as useThemeUI4, Slider as ThemeSlider } from "theme-ui";
 var Slider = (_a, ref) => {
-  var _b = _a, { sx: sx3 } = _b, props = __objRest(_b, ["sx"]);
-  const color = get_sx_color_default(sx3);
+  var _b = _a, { sx: sx4 } = _b, props = __objRest(_b, ["sx"]);
+  const color = get_sx_color_default(sx4);
   const {
     theme: { rawColors: colors }
   } = useThemeUI4();
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React42.createElement(
     ThemeSlider,
     __spreadValues({
       ref,
@@ -3268,15 +3443,15 @@ var Slider = (_a, ref) => {
           }
         },
         color
-      }, sx3)
+      }, sx4)
     }, props)
   );
 };
 var slider_default = forwardRef5(Slider);
 
 // src/table.tsx
-import React39 from "react";
-import { Box as Box28 } from "theme-ui";
+import React43 from "react";
+import { Box as Box29 } from "theme-ui";
 var styles2 = {
   reset: {
     verticalAlign: "baseline",
@@ -3319,7 +3494,7 @@ var styles2 = {
 };
 var Table = ({
   data,
-  sx: sx3,
+  sx: sx4,
   color,
   header,
   columns,
@@ -3332,7 +3507,7 @@ var Table = ({
   if (!start || !columns || !width) {
     throw new Error("Must provide columns, start, and width");
   }
-  return /* @__PURE__ */ React39.createElement(Box28, { as: "table", sx: __spreadValues({ display: "block" }, sx3) }, /* @__PURE__ */ React39.createElement(Box28, { as: "tbody", sx: { display: "block" } }, header && /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React43.createElement(Box29, { as: "table", sx: __spreadValues({ display: "block" }, sx4) }, /* @__PURE__ */ React43.createElement(Box29, { as: "tbody", sx: { display: "block" } }, header && /* @__PURE__ */ React43.createElement(
     row_default,
     {
       as: "tr",
@@ -3341,9 +3516,9 @@ var Table = ({
         borderTopWidth: !borderTop ? "0px" : "1px"
       })
     },
-    /* @__PURE__ */ React39.createElement(column_default, { as: "td", start: [1], width: columns, sx: styles2.index }, header)
+    /* @__PURE__ */ React43.createElement(column_default, { as: "td", start: [1], width: columns, sx: styles2.index }, header)
   ), data.map((row, i) => {
-    return /* @__PURE__ */ React39.createElement(
+    return /* @__PURE__ */ React43.createElement(
       row_default,
       {
         as: "tr",
@@ -3356,7 +3531,7 @@ var Table = ({
         })
       },
       row.map((column, j) => {
-        return /* @__PURE__ */ React39.createElement(
+        return /* @__PURE__ */ React43.createElement(
           column_default,
           {
             as: "td",
@@ -3374,27 +3549,27 @@ var Table = ({
 var table_default = Table;
 
 // src/table-caption.tsx
-import React40 from "react";
+import React44 from "react";
 var TableCaption = ({
   as = "figcaption",
   number,
   children
 }) => {
-  return /* @__PURE__ */ React40.createElement(caption_default, { as, number, label: "table" }, children);
+  return /* @__PURE__ */ React44.createElement(caption_default, { as, number, label: "table" }, children);
 };
 TableCaption.displayName = "TableCaption";
 var table_caption_default = TableCaption;
 
 // src/toggle.tsx
-import React41, { forwardRef as forwardRef6 } from "react";
-import { Box as Box29 } from "theme-ui";
+import React45, { forwardRef as forwardRef6 } from "react";
+import { Box as Box30 } from "theme-ui";
 import { transparentize as transparentize2 } from "@theme-ui/color";
 var Toggle = (_a, ref) => {
-  var _b = _a, { value, onClick, disabled, sx: sx3 } = _b, props = __objRest(_b, ["value", "onClick", "disabled", "sx"]);
-  const color = get_sx_color_default(sx3);
+  var _b = _a, { value, onClick, disabled, sx: sx4 } = _b, props = __objRest(_b, ["value", "onClick", "disabled", "sx"]);
+  const color = get_sx_color_default(sx4);
   const active = disabled ? false : value;
-  return /* @__PURE__ */ React41.createElement(
-    Box29,
+  return /* @__PURE__ */ React45.createElement(
+    Box30,
     __spreadValues({
       ref,
       as: "button",
@@ -3409,10 +3584,10 @@ var Toggle = (_a, ref) => {
         p: [0],
         m: [0],
         display: "inline-block"
-      }, sx3)
+      }, sx4)
     }, props),
-    /* @__PURE__ */ React41.createElement(
-      Box29,
+    /* @__PURE__ */ React45.createElement(
+      Box30,
       {
         sx: {
           width: "50px",
@@ -3424,8 +3599,8 @@ var Toggle = (_a, ref) => {
           display: "inline-block"
         }
       },
-      /* @__PURE__ */ React41.createElement(
-        Box29,
+      /* @__PURE__ */ React45.createElement(
+        Box30,
         {
           sx: {
             width: "14px",
@@ -3445,11 +3620,11 @@ var Toggle = (_a, ref) => {
 var toggle_default = forwardRef6(Toggle);
 
 // src/tray.tsx
-import React42 from "react";
-import { Box as Box30 } from "theme-ui";
-var Tray = ({ expanded, sx: sx3, children }) => {
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(
-    Box30,
+import React46 from "react";
+import { Box as Box31 } from "theme-ui";
+var Tray = ({ expanded, sx: sx4, children }) => {
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+    Box31,
     {
       sx: {
         position: "fixed",
@@ -3465,8 +3640,8 @@ var Tray = ({ expanded, sx: sx3, children }) => {
         pointerEvents: expanded ? "all" : "none"
       }
     }
-  ), /* @__PURE__ */ React42.createElement(
-    Box30,
+  ), /* @__PURE__ */ React46.createElement(
+    Box31,
     {
       sx: __spreadValues({
         position: "fixed",
@@ -3486,9 +3661,9 @@ var Tray = ({ expanded, sx: sx3, children }) => {
         pl: [3, 4, 5, 6],
         pr: [3, 4, 5, 6],
         transform: expanded ? "translateY(0)" : "translateY(-100%)"
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ React42.createElement(row_default, null, /* @__PURE__ */ React42.createElement(column_default, { start: [1, 1, 1, 1], width: [6, 8, 10, 10] }, children))
+    /* @__PURE__ */ React46.createElement(row_default, null, /* @__PURE__ */ React46.createElement(column_default, { start: [1, 1, 1, 1], width: [6, 8, 10, 10] }, children))
   ));
 };
 var tray_default = Tray;
@@ -3524,10 +3699,10 @@ var formatDate = (date, options = defaultOptions) => {
 var format_date_default = formatDate;
 
 // src/utils/use-scrollbar-class.ts
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState7 } from "react";
 var useScrollbarClass = () => {
-  const [className, setClassName] = useState6(null);
-  useEffect7(() => {
+  const [className, setClassName] = useState7(null);
+  useEffect8(() => {
     if (document && get_scrollbar_width_default(document) > 0) {
       setClassName("custom-scrollbar");
     }