@carbonplan/components 13.3.0 → 13.4.0-develop.0

package/dst/index.js

@@ -119,7 +119,7 @@ var Avatar = (_a) => {
     github,
     alt,
     src,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "color",
     "width",
@@ -156,7 +156,7 @@ var Avatar = (_a) => {
         position: "relative",
         display: "inline-block",
         verticalAlign: "top"
-      }, sx3)
+      }, sx4)
     }, props),
     /* @__PURE__ */ import_react.default.createElement(
       import_theme_ui.Image,
@@ -196,7 +196,7 @@ var import_theme_ui5 = require("theme-ui");
 var import_react2 = __toESM(require("react"));
 var import_theme_ui2 = require("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];
@@ -233,7 +233,7 @@ var Row = (_a) => {
       sx: __spreadValues({
         columnGap,
         rowGap
-      }, sx3)
+      }, sx4)
     }),
     children
   );
@@ -250,7 +250,7 @@ var Column = (_a) => {
     dl,
     dr,
     children,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "start",
     "width",
@@ -310,7 +310,7 @@ var Column = (_a) => {
         gridColumnEnd: end,
         ml,
         mr
-      }, sx3)
+      }, sx4)
     }),
     children
   );
@@ -331,7 +331,7 @@ var Group = ({
   children,
   direction = "vertical",
   spacing = "md",
-  sx: sx3
+  sx: sx4
 }) => {
   let marginValue;
   if (typeof spacing === "string" && spacing in sizes) {
@@ -346,7 +346,7 @@ var Group = ({
   }
   const marginProperty = direction === "vertical" ? "mb" : "mr";
   const additionalStyles = direction === "horizontal" ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ import_react4.default.createElement(import_theme_ui4.Box, { sx: sx3 }, import_react4.default.Children.map(children, (child, i) => {
+  return /* @__PURE__ */ import_react4.default.createElement(import_theme_ui4.Box, { sx: sx4 }, import_react4.default.Children.map(children, (child, i) => {
     const childrenCount = import_react4.default.Children.count(children);
     return /* @__PURE__ */ import_react4.default.createElement(
       import_theme_ui4.Box,
@@ -415,7 +415,7 @@ var AvatarGroup = (_a) => {
     width,
     maxWidth,
     fixedCount,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "members",
     "direction",
@@ -451,7 +451,7 @@ var AvatarGroup = (_a) => {
   }
   const excess = limit !== void 0 && members.length > limit;
   const overflow = limit !== void 0 ? members.length - limit + 1 : 0;
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, fixedCount && /* @__PURE__ */ import_react5.default.createElement(row_default, __spreadValues({ columns: fixedCount, gap, sx: sx3 }, props), members.map((props2, idx) => /* @__PURE__ */ import_react5.default.createElement(column_default, { key: idx, start: start(idx) }, (!excess || limit !== void 0 && idx < limit - 1) && /* @__PURE__ */ import_react5.default.createElement(avatar_default, __spreadProps(__spreadValues({}, props2), { width, maxWidth })), excess && limit !== void 0 && idx === limit - 1 && /* @__PURE__ */ import_react5.default.createElement(Blank, { overflow, maxWidth })))), !fixedCount && /* @__PURE__ */ import_react5.default.createElement(group_default, __spreadValues({ direction, spacing, sx: sx3 }, props), members.map((props2, idx) => /* @__PURE__ */ import_react5.default.createElement(avatar_default, __spreadProps(__spreadValues({ key: idx }, props2), { width, maxWidth })))));
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, fixedCount && /* @__PURE__ */ import_react5.default.createElement(row_default, __spreadValues({ columns: fixedCount, gap, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ import_react5.default.createElement(column_default, { key: idx, start: start(idx) }, (!excess || limit !== void 0 && idx < limit - 1) && /* @__PURE__ */ import_react5.default.createElement(avatar_default, __spreadProps(__spreadValues({}, props2), { width, maxWidth })), excess && limit !== void 0 && idx === limit - 1 && /* @__PURE__ */ import_react5.default.createElement(Blank, { overflow, maxWidth })))), !fixedCount && /* @__PURE__ */ import_react5.default.createElement(group_default, __spreadValues({ direction, spacing, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ import_react5.default.createElement(avatar_default, __spreadProps(__spreadValues({ key: idx }, props2), { width, maxWidth })))));
 };
 var avatar_group_default = AvatarGroup;
 
@@ -461,13 +461,13 @@ var import_theme_ui6 = require("theme-ui");
 var import_color = require("@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__ */ import_react6.default.createElement(
     import_theme_ui6.Box,
     __spreadValues({
@@ -480,7 +480,7 @@ var Badge = (_a) => {
         textAlign: "center",
         userSelect: "none",
         fontSize: [2, 2, 2, 3]
-      }, sx3)
+      }, sx4)
     }, props),
     /* @__PURE__ */ import_react6.default.createElement(
       import_theme_ui6.Box,
@@ -589,7 +589,7 @@ var Button = (_a, ref) => {
     prefix,
     suffix,
     inverted,
-    sx: sx3,
+    sx: sx4,
     children,
     align,
     href,
@@ -609,7 +609,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 = {
@@ -788,7 +788,7 @@ var Callout = (_a, ref) => {
     color,
     href,
     internal,
-    sx: sx3
+    sx: sx4
   } = _b, props = __objRest(_b, [
     "label",
     "children",
@@ -823,7 +823,7 @@ var Callout = (_a, ref) => {
         color: hoverColor
       }
     }
-  }, sx3);
+  }, sx4);
   const Inner = /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_theme_ui10.Box, { sx: { transition: "0.15s", letterSpacing: "body", pb: ["6px"] } }, children), /* @__PURE__ */ import_react10.default.createElement(
     import_theme_ui10.Box,
     {
@@ -1062,7 +1062,7 @@ var Colorbar = (_a) => {
     format: format2 = (d) => d,
     horizontal = false,
     bottom = false,
-    sx: sx3,
+    sx: sx4,
     sxClim
   } = _b, props = __objRest(_b, [
     "colormap",
@@ -1225,7 +1225,7 @@ var Colorbar = (_a) => {
         justifyContent: "flex-start",
         gap: ["3px", "6px", "6px", "7px"],
         height: !horizontal ? "100%" : "unset"
-      }, sx3)
+      }, sx4)
     }),
     label && /* @__PURE__ */ import_react12.default.createElement(Label, { label, units, horizontal }),
     /* @__PURE__ */ import_react12.default.createElement(
@@ -1296,12 +1296,12 @@ __export(colors_exports, {
 var import_react13 = __toESM(require("react"));
 var import_theme_ui13 = require("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__ */ import_react13.default.createElement(
     import_theme_ui13.Box,
     __spreadValues({
       as: "span",
-      sx: __spreadValues({ display: "inline-block", color }, sx3)
+      sx: __spreadValues({ display: "inline-block", color }, sx4)
     }, props),
     children
   );
@@ -1344,13 +1344,13 @@ var Grey = (props) => {
 };
 
 // src/custom-404.tsx
-var import_react31 = __toESM(require("react"));
-var import_theme_ui27 = require("theme-ui");
+var import_react36 = __toESM(require("react"));
+var import_theme_ui29 = require("theme-ui");
 var import_emoji = require("@carbonplan/emoji");
 
 // src/layout.tsx
-var import_react30 = __toESM(require("react"));
-var import_theme_ui26 = require("theme-ui");
+var import_react35 = __toESM(require("react"));
+var import_theme_ui28 = require("theme-ui");
 
 // src/meta.tsx
 var import_react14 = __toESM(require("react"));
@@ -1469,11 +1469,10 @@ var Meta = ({ title, description, card, url }) => {
 };
 var meta_default = Meta;
 
-// src/header.tsx
-var import_react17 = __toESM(require("react"));
-var import_link4 = __toESM(require("next/link"));
-var import_theme_ui17 = require("theme-ui");
-var import_icons2 = require("@carbonplan/icons");
+// src/header/header.tsx
+var import_react22 = __toESM(require("react"));
+var import_link5 = __toESM(require("next/link"));
+var import_theme_ui20 = require("theme-ui");
 
 // src/logo.tsx
 var import_react15 = __toESM(require("react"));
@@ -1555,11 +1554,24 @@ var Logo = (_a) => {
 };
 var logo_default = Logo;
 
-// src/menu.tsx
+// src/header/menu.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/header/header-icon.tsx
 var import_react16 = __toESM(require("react"));
 var import_theme_ui16 = require("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__ */ import_react16.default.createElement(
     import_theme_ui16.IconButton,
     __spreadValues({
@@ -1576,8 +1588,8 @@ var Menu = (_a) => {
             opacity: "1"
           }
         }
-      }, sx3),
-      "aria-label": "Toggle Menu"
+      }, sx4),
+      "aria-label": label
     }, props),
     !value && /* @__PURE__ */ import_react16.default.createElement(
       "svg",
@@ -1591,9 +1603,7 @@ var Menu = (_a) => {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 68 36"
       },
-      /* @__PURE__ */ import_react16.default.createElement("line", { x1: "52", y1: "29.9", x2: "16", y2: "29.9" }),
-      /* @__PURE__ */ import_react16.default.createElement("line", { x1: "52", y1: "6.1", x2: "16", y2: "6.1" }),
-      /* @__PURE__ */ import_react16.default.createElement("line", { x1: "52", y1: "18", x2: "16", y2: "18" }),
+      children,
       /* @__PURE__ */ import_react16.default.createElement(
         "path",
         {
@@ -1644,9 +1654,19 @@ var Menu = (_a) => {
     )
   );
 };
+var header_icon_default = HeaderIcon;
+
+// src/header/menu.tsx
+var Menu = (props) => {
+  return /* @__PURE__ */ import_react17.default.createElement(header_icon_default, __spreadValues({}, props), /* @__PURE__ */ import_react17.default.createElement("line", { x1: "52", y1: "29.9", x2: "16", y2: "29.9" }), /* @__PURE__ */ import_react17.default.createElement("line", { x1: "52", y1: "6.1", x2: "16", y2: "6.1" }), /* @__PURE__ */ import_react17.default.createElement("line", { x1: "52", y1: "18", x2: "16", y2: "18" }));
+};
 var menu_default = Menu;
 
-// src/header.tsx
+// src/header/navigation-menu.tsx
+var import_react18 = __toESM(require("react"));
+var import_link4 = __toESM(require("next/link"));
+var import_theme_ui17 = require("theme-ui");
+var import_icons2 = require("@carbonplan/icons");
 var sx = {
   link: (current, label, first = false) => {
     return {
@@ -1671,7 +1691,7 @@ var sx = {
         }
       },
       "&:hover": {
-        color: current === label ? "secondary" : "text"
+        color: current == label ? "secondary" : "text"
       }
     };
   }
@@ -1683,7 +1703,7 @@ var links = [
   { url: "press", display: "Press" }
 ];
 var HoverArrow = () => {
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     import_icons2.Arrow,
     {
       id: "arrow",
@@ -1706,7 +1726,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__ */ import_react17.default.createElement(import_link4.default, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react18.default.createElement(import_link4.default, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react18.default.createElement(
       import_theme_ui17.Link,
       {
         onClick: () => {
@@ -1714,34 +1734,302 @@ var Nav = ({ link, mode, nav, first, setExpanded }) => {
         },
         sx: sx.link(nav, url, first)
       },
-      /* @__PURE__ */ import_react17.default.createElement(HoverArrow, null),
+      /* @__PURE__ */ import_react18.default.createElement(HoverArrow, null),
       display
     ));
   } else {
-    return /* @__PURE__ */ import_react17.default.createElement(import_theme_ui17.Link, { href, sx: sx.link(nav, url, first) }, /* @__PURE__ */ import_react17.default.createElement(HoverArrow, null), display);
+    return /* @__PURE__ */ import_react18.default.createElement(import_theme_ui17.Link, { href, sx: sx.link(nav, url, first) }, /* @__PURE__ */ import_react18.default.createElement(HoverArrow, null), display);
+  }
+};
+var NavigationMenu = ({ nav, mode, setExpanded }) => {
+  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, links.map((d, i) => /* @__PURE__ */ import_react18.default.createElement(
+    Nav,
+    {
+      key: i,
+      link: d,
+      mode,
+      nav,
+      first: i === 0,
+      setExpanded
+    }
+  )));
+};
+var navigation_menu_default = NavigationMenu;
+
+// src/header/search.tsx
+var import_react19 = __toESM(require("react"));
+var import_icons3 = require("@carbonplan/icons");
+var Search = (props) => {
+  return /* @__PURE__ */ import_react19.default.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ import_react19.default.createElement(import_icons3.Search, { width: 50, height: 30, x: 8 }));
+};
+var search_default = Search;
+
+// src/header/search-menu.tsx
+var import_react21 = __toESM(require("react"));
+var import_theme_ui19 = require("theme-ui");
+var import_icons4 = require("@carbonplan/icons");
+
+// src/input.tsx
+var import_react20 = __toESM(require("react"));
+var import_theme_ui18 = require("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__ */ import_react20.default.createElement(import_theme_ui18.Input, __spreadProps(__spreadValues({}, props), { ref, sx: styles3 }));
+};
+var input_default = (0, import_react20.forwardRef)(Input);
+
+// src/header/search-menu.tsx
+var HoverArrow2 = ({ sx: sx4 }) => {
+  return /* @__PURE__ */ import_react21.default.createElement(
+    import_icons4.Arrow,
+    {
+      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__ */ import_react17.default.createElement(import_react17.default.Fragment, null, links2.map((d, i) => {
-    return /* @__PURE__ */ import_react17.default.createElement(
-      Nav,
+var SearchMenu = ({}) => {
+  const [value, setValue] = (0, import_react21.useState)("");
+  const [resources, setResources] = (0, import_react21.useState)(RESOURCES);
+  const destination = `/search?query=${value.trim()}`;
+  (0, import_react21.useEffect)(() => {
+    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__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(row_default, { columns: [6, 6, 10, 10] }, /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: [6, 6, 10, 10] }, /* @__PURE__ */ import_react21.default.createElement(
+    import_theme_ui19.Flex,
+    {
+      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__ */ import_react21.default.createElement(
+      import_theme_ui19.Box,
+      __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__ */ import_react21.default.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__ */ import_react21.default.createElement(import_theme_ui19.Link, { href: destination }, /* @__PURE__ */ import_react21.default.createElement(
+      HoverArrow2,
+      {
+        sx: {
+          opacity: value ? 1 : [1, 1, 0, 0],
+          pointerEvents: value ? "all" : "none"
+        }
+      }
+    ))
+  ))), /* @__PURE__ */ import_react21.default.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["none", "grid", "grid", "grid"] }
+    },
+    /* @__PURE__ */ import_react21.default.createElement(
+      column_default,
+      {
+        start: 1,
+        width: 5,
+        sx: { mt: [2, 2, 8, 8], mb: [1, 1, , 6, 6] }
+      },
+      /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")
+    ),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [4, 4, 5, 5], width: 3 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [1, 1, 8, 8], width: 3, sx: { mt: [0, 4, 0, 0] } }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    )))
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["grid", "none", "none", "none"] }
+    },
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h3", sx: { my: 4 } }, "Popular resources"), /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
+      },
+      label
+    )))
+  ));
 };
+var search_menu_default = SearchMenu;
+
+// src/header/header.tsx
 var Header = ({ status, mode, nav, menuItems }) => {
-  const [expanded, setExpanded] = (0, import_react17.useState)(false);
-  const toggle = () => {
-    setExpanded(!expanded);
-  };
-  return /* @__PURE__ */ import_react17.default.createElement(
+  const [menuExpanded, setMenuExpanded] = (0, import_react22.useState)(false);
+  const [searchExpanded, setSearchExpanded] = (0, import_react22.useState)(false);
+  const expanded = searchExpanded || menuExpanded;
+  return /* @__PURE__ */ import_react22.default.createElement(
     row_default,
     {
       sx: {
@@ -1749,20 +2037,20 @@ var Header = ({ status, mode, nav, menuItems }) => {
         pb: [3]
       }
     },
-    /* @__PURE__ */ import_react17.default.createElement(column_default, { start: [1], width: [2] }, /* @__PURE__ */ import_react17.default.createElement(
-      import_theme_ui17.Box,
+    /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [1], width: [2] }, /* @__PURE__ */ import_react22.default.createElement(
+      import_theme_ui20.Box,
       {
         sx: { pointerEvents: "all", display: "block", width: "fit-content" }
       },
-      (mode === "homepage" || mode === "local") && /* @__PURE__ */ import_react17.default.createElement(import_link4.default, { href: "/", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react17.default.createElement(
-        import_theme_ui17.Link,
+      (mode == "homepage" || mode == "local") && /* @__PURE__ */ import_react22.default.createElement(import_link5.default, { href: "/", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react22.default.createElement(
+        import_theme_ui20.Link,
         {
           "aria-label": "CarbonPlan Homepage",
           sx: {
             display: "block"
           }
         },
-        /* @__PURE__ */ import_react17.default.createElement(
+        /* @__PURE__ */ import_react22.default.createElement(
           logo_default,
           {
             id: "logo",
@@ -1773,17 +2061,17 @@ var Header = ({ status, mode, nav, menuItems }) => {
           }
         )
       )),
-      (mode == null || mode === "remote") && /* @__PURE__ */ import_react17.default.createElement(
-        import_theme_ui17.Link,
+      (mode == null || mode == "remote") && /* @__PURE__ */ import_react22.default.createElement(
+        import_theme_ui20.Link,
         {
           href: "https://carbonplan.org",
           "aria-label": "CarbonPlan Homepage",
           sx: { display: "block" }
         },
-        /* @__PURE__ */ import_react17.default.createElement(logo_default, { sx: { cursor: "pointer", color: "primary" } })
+        /* @__PURE__ */ import_react22.default.createElement(logo_default, { sx: { cursor: "pointer", color: "primary" } })
       )
     )),
-    /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(
       column_default,
       {
         start: [4, 9],
@@ -1794,8 +2082,8 @@ var Header = ({ status, mode, nav, menuItems }) => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ import_react17.default.createElement(
-        import_theme_ui17.Box,
+      /* @__PURE__ */ import_react22.default.createElement(
+        import_theme_ui20.Box,
         {
           sx: {
             fontSize: [1, 2, 3],
@@ -1806,15 +2094,15 @@ var Header = ({ status, mode, nav, menuItems }) => {
         status ? `(${status})` : ""
       )
     ),
-    /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react22.default.createElement(
       column_default,
       {
         start: [status ? 6 : 4, 6, 11, 11],
         width: [status ? 1 : 3, 3, 2, 2],
         sx: { zIndex: 5e3 }
       },
-      /* @__PURE__ */ import_react17.default.createElement(import_theme_ui17.Flex, { sx: { pointerEvents: "all", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react17.default.createElement(
-        import_theme_ui17.Box,
+      /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Flex, { sx: { pointerEvents: "all", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react22.default.createElement(
+        import_theme_ui20.Box,
         {
           sx: {
             display: [status ? "none" : "flex", "flex", "flex", "flex"],
@@ -1827,20 +2115,32 @@ var Header = ({ status, mode, nav, menuItems }) => {
           }
         },
         menuItems
-      ), /* @__PURE__ */ import_react17.default.createElement(
+      ), /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Flex, { sx: { gap: 4 } }, /* @__PURE__ */ import_react22.default.createElement(
+        search_default,
+        {
+          value: searchExpanded,
+          onClick: () => {
+            setSearchExpanded(!searchExpanded);
+            !searchExpanded && setMenuExpanded(false);
+          }
+        }
+      ), /* @__PURE__ */ import_react22.default.createElement(
         menu_default,
         {
           sx: {
             flexShrink: 0,
             mr: ["-2px"]
           },
-          value: expanded,
-          onClick: toggle
+          value: menuExpanded,
+          onClick: () => {
+            setMenuExpanded(!menuExpanded);
+            !menuExpanded && setSearchExpanded(false);
+          }
         }
-      ))
+      )))
     ),
-    /* @__PURE__ */ import_react17.default.createElement(
-      import_theme_ui17.Box,
+    /* @__PURE__ */ import_react22.default.createElement(
+      import_theme_ui20.Box,
       {
         sx: {
           opacity: expanded ? 1 : 0,
@@ -1858,42 +2158,41 @@ var Header = ({ status, mode, nav, menuItems }) => {
           transition: "opacity 0.25s"
         }
       },
-      /* @__PURE__ */ import_react17.default.createElement(import_theme_ui17.Container, null, /* @__PURE__ */ import_react17.default.createElement(row_default, null, /* @__PURE__ */ import_react17.default.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ import_react17.default.createElement(
-        import_theme_ui17.Box,
+      /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Container, null, /* @__PURE__ */ import_react22.default.createElement(row_default, null, menuExpanded ? /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ import_react22.default.createElement(
+        import_theme_ui20.Box,
         {
           as: "nav",
           sx: {
-            display: expanded ? "inherit" : "none",
+            display: menuExpanded ? "inherit" : "none",
             mt: [5, 5, 5, 6]
           }
         },
-        /* @__PURE__ */ import_react17.default.createElement(
-          NavGroup,
+        /* @__PURE__ */ import_react22.default.createElement(
+          navigation_menu_default,
           {
-            links,
             nav,
             mode,
-            setExpanded
+            setExpanded: setMenuExpanded
           }
         )
-      ))))
+      )) : /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ import_react22.default.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
     )
   );
 };
 var header_default = Header;
 
 // src/footer.tsx
-var import_react19 = __toESM(require("react"));
-var import_theme_ui19 = require("theme-ui");
-var import_link5 = __toESM(require("next/link"));
+var import_react24 = __toESM(require("react"));
+var import_theme_ui22 = require("theme-ui");
+var import_link6 = __toESM(require("next/link"));
 
 // src/monogram.tsx
-var import_react18 = __toESM(require("react"));
-var import_theme_ui18 = require("theme-ui");
+var import_react23 = __toESM(require("react"));
+var import_theme_ui21 = require("theme-ui");
 var Monogram = (_a) => {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ import_react18.default.createElement(
-    import_theme_ui18.Box,
+  return /* @__PURE__ */ import_react23.default.createElement(
+    import_theme_ui21.Box,
     __spreadValues(__spreadValues({
       as: "svg"
     }, {
@@ -1902,21 +2201,21 @@ var Monogram = (_a) => {
       fill: "currentColor",
       viewBox: "0 0 32 32"
     }), props),
-    /* @__PURE__ */ import_react18.default.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__ */ import_react18.default.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__ */ import_react18.default.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__ */ import_react23.default.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__ */ import_react23.default.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__ */ import_react23.default.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] = (0, import_react19.useState)(null);
-  (0, import_react19.useEffect)(() => {
+  const [year, setYear] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
     setYear((/* @__PURE__ */ new Date()).getFullYear());
   }, []);
-  return /* @__PURE__ */ import_react19.default.createElement(
-    import_theme_ui19.Box,
+  return /* @__PURE__ */ import_react24.default.createElement(
+    import_theme_ui22.Box,
     {
       sx: {
         mt: [7, 7, 7, 8],
@@ -1924,8 +2223,8 @@ var Footer = () => {
         pb: [2, 1, 0, 0]
       }
     },
-    /* @__PURE__ */ import_react19.default.createElement(row_default, { sx: { mb: [0, 0, 4, 5] } }, /* @__PURE__ */ import_react19.default.createElement(column_default, { start: [1, 2], width: [3, 3] }, /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, null, /* @__PURE__ */ import_react19.default.createElement(
-      import_theme_ui19.Box,
+    /* @__PURE__ */ import_react24.default.createElement(row_default, { sx: { mb: [0, 0, 4, 5] } }, /* @__PURE__ */ import_react24.default.createElement(column_default, { start: [1, 2], width: [3, 3] }, /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, null, /* @__PURE__ */ import_react24.default.createElement(
+      import_theme_ui22.Box,
       {
         sx: {
           fontSize: [2, 2, 2, 3],
@@ -1935,8 +2234,8 @@ var Footer = () => {
         }
       },
       "EMAIL"
-    ), /* @__PURE__ */ import_react19.default.createElement(
-      import_theme_ui19.Link,
+    ), /* @__PURE__ */ import_react24.default.createElement(
+      import_theme_ui22.Link,
       {
         href: "mailto:hello@carbonplan.org",
         sx: {
@@ -1945,7 +2244,7 @@ var Footer = () => {
         }
       },
       "hello@carbonplan.org"
-    ))), /* @__PURE__ */ import_react19.default.createElement(
+    ))), /* @__PURE__ */ import_react24.default.createElement(
       column_default,
       {
         start: [5],
@@ -1957,9 +2256,9 @@ var Footer = () => {
           justifyContent: ["center"]
         }
       },
-      /* @__PURE__ */ import_react19.default.createElement(monogram_default, { sx: { mt: ["-4px"], width: "60px", height: "60px" } })
-    ), /* @__PURE__ */ import_react19.default.createElement(column_default, { start: [1, 5, 5, 5], width: [3, 3], sx: { mt: [3, 0, 0, 0] } }, /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, null, /* @__PURE__ */ import_react19.default.createElement(
-      import_theme_ui19.Box,
+      /* @__PURE__ */ import_react24.default.createElement(monogram_default, { sx: { mt: ["-4px"], width: "60px", height: "60px" } })
+    ), /* @__PURE__ */ import_react24.default.createElement(column_default, { start: [1, 5, 5, 5], width: [3, 3], sx: { mt: [3, 0, 0, 0] } }, /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, null, /* @__PURE__ */ import_react24.default.createElement(
+      import_theme_ui22.Box,
       {
         sx: {
           fontSize: [2, 2, 2, 3],
@@ -1969,8 +2268,8 @@ var Footer = () => {
         }
       },
       "NEWSLETTER"
-    ), /* @__PURE__ */ import_react19.default.createElement(
-      import_theme_ui19.Link,
+    ), /* @__PURE__ */ import_react24.default.createElement(
+      import_theme_ui22.Link,
       {
         href: "https://carbonplan.org/newsletter",
         sx: {
@@ -1979,15 +2278,15 @@ var Footer = () => {
         }
       },
       "Subscribe"
-    ))), /* @__PURE__ */ import_react19.default.createElement(
+    ))), /* @__PURE__ */ import_react24.default.createElement(
       column_default,
       {
         start: [1, 9],
         width: [5, 4, 3, 3],
         sx: { mt: ["42px", "42px", 0, 0], mb: [3, 3, 0, 0] }
       },
-      /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, null, /* @__PURE__ */ import_react19.default.createElement(
-        import_theme_ui19.Box,
+      /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, null, /* @__PURE__ */ import_react24.default.createElement(
+        import_theme_ui22.Box,
         {
           sx: {
             fontSize: [2, 2, 2, 3],
@@ -1998,7 +2297,7 @@ var Footer = () => {
         "CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status."
       ))
     )),
-    /* @__PURE__ */ import_react19.default.createElement(row_default, { sx: { mb: ["2px"], mt: [5, 5, 4] } }, /* @__PURE__ */ import_react19.default.createElement(
+    /* @__PURE__ */ import_react24.default.createElement(row_default, { sx: { mb: ["2px"], mt: [5, 5, 4] } }, /* @__PURE__ */ import_react24.default.createElement(
       column_default,
       {
         start: [1, 1, 2, 2],
@@ -2008,8 +2307,8 @@ var Footer = () => {
           alignItems: ["flex-start", "flex-start", "flex-end"]
         }
       },
-      /* @__PURE__ */ import_react19.default.createElement(
-        import_theme_ui19.Box,
+      /* @__PURE__ */ import_react24.default.createElement(
+        import_theme_ui22.Box,
         {
           sx: {
             bottom: "0px",
@@ -2021,8 +2320,8 @@ var Footer = () => {
             pt: [2]
           }
         },
-        /* @__PURE__ */ import_react19.default.createElement(
-          import_theme_ui19.Box,
+        /* @__PURE__ */ import_react24.default.createElement(
+          import_theme_ui22.Box,
           {
             sx: {
               color: "secondary",
@@ -2031,20 +2330,20 @@ var Footer = () => {
               letterSpacing: "mono"
             }
           },
-          /* @__PURE__ */ import_react19.default.createElement(
-            import_theme_ui19.Flex,
+          /* @__PURE__ */ import_react24.default.createElement(
+            import_theme_ui22.Flex,
             {
               sx: {
                 flexDirection: ["column", "column", "row", "row"],
                 gap: [0, 0, "10px", "12px"]
               }
             },
-            /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, null, "(c) ", year),
-            /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, null, "CARBONPLAN")
+            /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, null, "(c) ", year),
+            /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, null, "CARBONPLAN")
           )
         )
       )
-    ), /* @__PURE__ */ import_react19.default.createElement(
+    ), /* @__PURE__ */ import_react24.default.createElement(
       column_default,
       {
         start: [4, 3, 5, 5],
@@ -2055,8 +2354,8 @@ var Footer = () => {
           mt: [0, 0, 0, 0]
         }
       },
-      /* @__PURE__ */ import_react19.default.createElement(
-        import_theme_ui19.Box,
+      /* @__PURE__ */ import_react24.default.createElement(
+        import_theme_ui22.Box,
         {
           sx: {
             bottom: "0px",
@@ -2067,8 +2366,8 @@ var Footer = () => {
             pt: [2]
           }
         },
-        /* @__PURE__ */ import_react19.default.createElement(
-          import_theme_ui19.Flex,
+        /* @__PURE__ */ import_react24.default.createElement(
+          import_theme_ui22.Flex,
           {
             sx: {
               color: "secondary",
@@ -2079,8 +2378,8 @@ var Footer = () => {
               gap: [0, 0, "10px", "12px"]
             }
           },
-          /* @__PURE__ */ import_react19.default.createElement(import_link5.default, { href: "/terms", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react19.default.createElement(
-            import_theme_ui19.Box,
+          /* @__PURE__ */ import_react24.default.createElement(import_link6.default, { href: "/terms", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react24.default.createElement(
+            import_theme_ui22.Box,
             {
               as: "a",
               sx: {
@@ -2092,9 +2391,9 @@ var Footer = () => {
             },
             "TERMS OF USE"
           )),
-          /* @__PURE__ */ import_react19.default.createElement(import_theme_ui19.Box, { sx: { display: ["none", "none", "initial", "initial"] } }, " / "),
-          /* @__PURE__ */ import_react19.default.createElement(import_link5.default, { href: "/privacy", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react19.default.createElement(
-            import_theme_ui19.Box,
+          /* @__PURE__ */ import_react24.default.createElement(import_theme_ui22.Box, { sx: { display: ["none", "none", "initial", "initial"] } }, " / "),
+          /* @__PURE__ */ import_react24.default.createElement(import_link6.default, { href: "/privacy", passHref: true, legacyBehavior: true }, /* @__PURE__ */ import_react24.default.createElement(
+            import_theme_ui22.Box,
             {
               as: "a",
               sx: {
@@ -2108,14 +2407,14 @@ var Footer = () => {
           ))
         )
       )
-    ), /* @__PURE__ */ import_react19.default.createElement(
+    ), /* @__PURE__ */ import_react24.default.createElement(
       column_default,
       {
         start: [5, 7, 9, 9],
         width: [2, 2, 3, 3],
         sx: { display: ["none", "initial", "initial", "initial"] }
       },
-      /* @__PURE__ */ import_react19.default.createElement(
+      /* @__PURE__ */ import_react24.default.createElement(
         monogram_default,
         {
           sx: {
@@ -2132,18 +2431,18 @@ var Footer = () => {
 var footer_default = Footer;
 
 // src/dimmer.tsx
-var import_react20 = __toESM(require("react"));
-var import_theme_ui20 = require("theme-ui");
-var import_react21 = require("react");
-var import_icons3 = require("@carbonplan/icons");
+var import_react25 = __toESM(require("react"));
+var import_theme_ui23 = require("theme-ui");
+var import_react26 = require("react");
+var import_icons5 = require("@carbonplan/icons");
 var Dimmer = (_a) => {
-  var _b = _a, { sx: sx3 = {} } = _b, props = __objRest(_b, ["sx"]);
-  const [colorMode, setColorMode] = (0, import_theme_ui20.useColorMode)();
-  const toggle = (0, import_react21.useCallback)(() => {
+  var _b = _a, { sx: sx4 = {} } = _b, props = __objRest(_b, ["sx"]);
+  const [colorMode, setColorMode] = (0, import_theme_ui23.useColorMode)();
+  const toggle = (0, import_react26.useCallback)(() => {
     setColorMode(colorMode === "light" ? "dark" : "light");
   }, [colorMode]);
-  return /* @__PURE__ */ import_react20.default.createElement(
-    import_theme_ui20.IconButton,
+  return /* @__PURE__ */ import_react25.default.createElement(
+    import_theme_ui23.IconButton,
     __spreadValues({
       "aria-label": "Toggle dark mode",
       onClick: toggle,
@@ -2154,10 +2453,10 @@ var Dimmer = (_a) => {
         display: "inline-block",
         cursor: "pointer",
         color: "secondary"
-      }, sx3)
+      }, sx4)
     }, props),
-    /* @__PURE__ */ import_react20.default.createElement(
-      import_icons3.Sun,
+    /* @__PURE__ */ import_react25.default.createElement(
+      import_icons5.Sun,
       {
         sx: {
           strokeWidth: "1.75",
@@ -2175,25 +2474,25 @@ var Dimmer = (_a) => {
 var dimmer_default = Dimmer;
 
 // src/metadata.tsx
-var import_react23 = __toESM(require("react"));
-var import_theme_ui22 = require("theme-ui");
-var import_react24 = require("react");
+var import_react28 = __toESM(require("react"));
+var import_theme_ui25 = require("theme-ui");
+var import_react29 = require("react");
 
 // src/gitsha.tsx
-var import_react22 = __toESM(require("react"));
-var import_theme_ui21 = require("theme-ui");
+var import_react27 = __toESM(require("react"));
+var import_theme_ui24 = require("theme-ui");
 var GitSha = () => {
   var _a;
   const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
   const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
   const slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
-  const { theme } = (0, import_theme_ui21.useThemeUI)();
+  const { theme } = (0, import_theme_ui24.useThemeUI)();
   const color = (_a = theme.rawColors) == null ? void 0 : _a.secondary;
   if (sha && owner && slug) {
     const shortSha = sha.substring(0, 7);
     const href = "https://github.com/" + owner + "/" + slug + "/tree/" + sha;
-    return /* @__PURE__ */ import_react22.default.createElement(import_theme_ui21.Box, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ import_react22.default.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ import_react22.default.createElement(
-      import_theme_ui21.Link,
+    return /* @__PURE__ */ import_react27.default.createElement(import_theme_ui24.Box, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ import_react27.default.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ import_react27.default.createElement(
+      import_theme_ui24.Link,
       {
         href,
         sx: {
@@ -2211,8 +2510,8 @@ var GitSha = () => {
       shortSha
     ));
   } else {
-    return /* @__PURE__ */ import_react22.default.createElement(import_theme_ui21.Box, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ import_react22.default.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ import_react22.default.createElement(
-      import_theme_ui21.Text,
+    return /* @__PURE__ */ import_react27.default.createElement(import_theme_ui24.Box, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ import_react27.default.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ import_react27.default.createElement(
+      import_theme_ui24.Text,
       {
         sx: {
           whiteSpace: "nowrap",
@@ -2230,14 +2529,14 @@ var GitSha = () => {
   }
 };
 var Separator = ({ color = "secondary" }) => {
-  return /* @__PURE__ */ import_react22.default.createElement("svg", { fill: color, opacity: "0.8", viewBox: "0 0 24 24", width: "24", height: "24" }, /* @__PURE__ */ import_react22.default.createElement("circle", { r: 5, cx: 19, cy: 19 }));
+  return /* @__PURE__ */ import_react27.default.createElement("svg", { fill: color, opacity: "0.8", viewBox: "0 0 24 24", width: "24", height: "24" }, /* @__PURE__ */ import_react27.default.createElement("circle", { r: 5, cx: 19, cy: 19 }));
 };
 var gitsha_default = GitSha;
 
 // src/metadata.tsx
 var Value = ({ mode }) => {
-  const [display, setDisplay] = (0, import_react24.useState)(init(mode));
-  (0, import_react24.useEffect)(() => {
+  const [display, setDisplay] = (0, import_react29.useState)(init(mode));
+  (0, import_react29.useEffect)(() => {
     if (mode === "mouse") {
       const setFromEvent = (e) => {
         const x = format(e.clientX, 4);
@@ -2260,8 +2559,8 @@ var Value = ({ mode }) => {
       };
     }
   }, []);
-  return /* @__PURE__ */ import_react23.default.createElement(
-    import_theme_ui22.Text,
+  return /* @__PURE__ */ import_react28.default.createElement(
+    import_theme_ui25.Text,
     {
       sx: {
         whiteSpace: "nowrap",
@@ -2278,8 +2577,8 @@ var Value = ({ mode }) => {
   );
 };
 var Metadata = ({ mode }) => {
-  return /* @__PURE__ */ import_react23.default.createElement(
-    import_theme_ui22.Box,
+  return /* @__PURE__ */ import_react28.default.createElement(
+    import_theme_ui25.Box,
     {
       sx: {
         userSelect: "none",
@@ -2291,8 +2590,8 @@ var Metadata = ({ mode }) => {
         display: ["none", "none", "initial"]
       }
     },
-    /* @__PURE__ */ import_react23.default.createElement(Value, { mode }),
-    /* @__PURE__ */ import_react23.default.createElement(gitsha_default, null)
+    /* @__PURE__ */ import_react28.default.createElement(Value, { mode }),
+    /* @__PURE__ */ import_react28.default.createElement(gitsha_default, null)
   );
 };
 function init(mode) {
@@ -2313,10 +2612,10 @@ function scrollFraction(window2, document2) {
 var metadata_default = Metadata;
 
 // src/fade-in.tsx
-var import_react25 = __toESM(require("react"));
-var import_theme_ui23 = require("theme-ui");
-var import_react26 = require("@emotion/react");
-var fade = (0, import_react26.keyframes)({
+var import_react30 = __toESM(require("react"));
+var import_theme_ui26 = require("theme-ui");
+var import_react31 = require("@emotion/react");
+var fade = (0, import_react31.keyframes)({
   from: {
     opacity: 0
   },
@@ -2334,8 +2633,8 @@ var FadeIn = (_a) => {
     "delay",
     "children"
   ]);
-  return /* @__PURE__ */ import_react25.default.createElement(
-    import_theme_ui23.Box,
+  return /* @__PURE__ */ import_react30.default.createElement(
+    import_theme_ui26.Box,
     __spreadProps(__spreadValues({}, delegated), {
       sx: {
         animationDuration: duration + "ms",
@@ -2351,7 +2650,7 @@ var FadeIn = (_a) => {
 var fade_in_default = FadeIn;
 
 // src/scrollbar.tsx
-var import_react27 = require("react");
+var import_react32 = require("react");
 
 // src/utils/get-scrollbar-width.ts
 var getScrollbarWidth = (document2) => {
@@ -2371,7 +2670,7 @@ var get_scrollbar_width_default = getScrollbarWidth;
 
 // src/scrollbar.tsx
 var Scrollbar = () => {
-  (0, import_react27.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (typeof document !== "undefined") {
       const delta = get_scrollbar_width_default(document);
       if (delta > 0) {
@@ -2385,11 +2684,11 @@ var Scrollbar = () => {
 var scrollbar_default = Scrollbar;
 
 // src/guide.tsx
-var import_react28 = __toESM(require("react"));
-var import_theme_ui24 = require("theme-ui");
+var import_react33 = __toESM(require("react"));
+var import_theme_ui27 = require("theme-ui");
 var Guide = ({ color = "muted" }) => {
-  const [display, setDisplay] = (0, import_react28.useState)(false);
-  (0, import_react28.useEffect)(() => {
+  const [display, setDisplay] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
     function handler(event) {
       const { key, metaKey } = event;
       if (key === ";" && metaKey) {
@@ -2401,8 +2700,8 @@ var Guide = ({ color = "muted" }) => {
       document.removeEventListener("keydown", handler);
     };
   }, []);
-  return /* @__PURE__ */ import_react28.default.createElement(
-    import_theme_ui24.Box,
+  return /* @__PURE__ */ import_react33.default.createElement(
+    import_theme_ui27.Box,
     {
       sx: {
         position: "fixed",
@@ -2414,13 +2713,13 @@ var Guide = ({ color = "muted" }) => {
         display: display ? "initial" : "none"
       }
     },
-    /* @__PURE__ */ import_react28.default.createElement(import_theme_ui24.Container, null, /* @__PURE__ */ import_react28.default.createElement(import_theme_ui24.Box, { sx: { display: ["none", "none", "initial", "initial"] } }, /* @__PURE__ */ import_react28.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(import_theme_ui27.Container, null, /* @__PURE__ */ import_react33.default.createElement(import_theme_ui27.Box, { sx: { display: ["none", "none", "initial", "initial"] } }, /* @__PURE__ */ import_react33.default.createElement(
       GuideColumns,
       {
         indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
         color
       }
-    )), /* @__PURE__ */ import_react28.default.createElement(import_theme_ui24.Box, { sx: { display: ["none", "initial", "none", "none"] } }, /* @__PURE__ */ import_react28.default.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6, 7, 8], color })), /* @__PURE__ */ import_react28.default.createElement(import_theme_ui24.Box, { sx: { display: ["initial", "none", "none", "none"] } }, /* @__PURE__ */ import_react28.default.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6], color })))
+    )), /* @__PURE__ */ import_react33.default.createElement(import_theme_ui27.Box, { sx: { display: ["none", "initial", "none", "none"] } }, /* @__PURE__ */ import_react33.default.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6, 7, 8], color })), /* @__PURE__ */ import_react33.default.createElement(import_theme_ui27.Box, { sx: { display: ["initial", "none", "none", "none"] } }, /* @__PURE__ */ import_react33.default.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6], color })))
   );
 };
 var colorCycle = [
@@ -2437,7 +2736,7 @@ function GuideColumns({
   indices,
   color
 }) {
-  const sx3 = {
+  const sx4 = {
     outerGuideColumn: {
       borderStyle: "solid",
       borderWidth: "0px",
@@ -2453,8 +2752,8 @@ function GuideColumns({
       opacity: color === "teal" ? 0.4 : 1
     }
   };
-  return /* @__PURE__ */ import_react28.default.createElement(row_default, null, indices.map((i) => {
-    return /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(row_default, null, indices.map((i) => {
+    return /* @__PURE__ */ import_react33.default.createElement(
       column_default,
       {
         key: i,
@@ -2465,10 +2764,10 @@ function GuideColumns({
         sx: __spreadValues({
           bg: color === "teal" ? "teal" : "transparent",
           height: "100vh"
-        }, sx3.innerGuideColumn)
+        }, sx4.innerGuideColumn)
       },
-      /* @__PURE__ */ import_react28.default.createElement(
-        import_theme_ui24.Box,
+      /* @__PURE__ */ import_react33.default.createElement(
+        import_theme_ui27.Box,
         {
           sx: __spreadValues({
             mx: ["12px", 3, 3, 4],
@@ -2476,7 +2775,7 @@ function GuideColumns({
             height: "100%",
             borderLeftColor: color === "rainbow" ? colorCycle[i % 8] : "muted",
             borderRightColor: color === "rainbow" ? colorCycle[i % 8] : "muted"
-          }, sx3.outerGuideColumn)
+          }, sx4.outerGuideColumn)
         }
       )
     );
@@ -2485,96 +2784,9 @@ function GuideColumns({
 var guide_default = Guide;
 
 // src/settings.tsx
-var import_react29 = __toESM(require("react"));
-var import_theme_ui25 = require("theme-ui");
-var Settings = (_a) => {
-  var _b = _a, { value, sx: sx3 } = _b, props = __objRest(_b, ["value", "sx"]);
-  return /* @__PURE__ */ import_react29.default.createElement(
-    import_theme_ui25.IconButton,
-    __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__ */ import_react29.default.createElement(
-      "svg",
-      {
-        style: {
-          width: "50px",
-          height: "30px",
-          marginTop: "-3px",
-          flexShrink: 0
-        },
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 68 36"
-      },
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "24", y1: "2.1", x2: "24", y2: "6.1" }),
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "24", y1: "24.1", x2: "24", y2: "33.9" }),
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "44", y1: "2.1", x2: "44", y2: "12.1" }),
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "44", y1: "30.1", x2: "44", y2: "33.9" }),
-      /* @__PURE__ */ import_react29.default.createElement("circle", { cx: "24", cy: "15.1", r: "5" }),
-      /* @__PURE__ */ import_react29.default.createElement("circle", { cx: "44", cy: "21.1", r: "5" }),
-      /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.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__ */ import_react29.default.createElement(
-      "svg",
-      {
-        style: {
-          width: "50px",
-          height: "30px",
-          marginTop: "-3px",
-          flexShrink: 0
-        },
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 68 36"
-      },
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "50.85", y1: "29.79", x2: "17.15", y2: "6.21" }),
-      /* @__PURE__ */ import_react29.default.createElement("line", { x1: "17.15", y1: "29.79", x2: "50.85", y2: "6.21" }),
-      /* @__PURE__ */ import_react29.default.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__ */ import_react29.default.createElement(
-        "path",
-        {
-          style: { transition: "all 0.2s" },
-          className: "paren",
-          d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-        }
-      )
-    )
-  );
+var import_react34 = __toESM(require("react"));
+var Settings = (props) => {
+  return /* @__PURE__ */ import_react34.default.createElement(header_icon_default, __spreadValues({ label: "Toggle Settings" }, props), /* @__PURE__ */ import_react34.default.createElement("line", { x1: "24", y1: "2.1", x2: "24", y2: "6.1" }), /* @__PURE__ */ import_react34.default.createElement("line", { x1: "24", y1: "24.1", x2: "24", y2: "33.9" }), /* @__PURE__ */ import_react34.default.createElement("line", { x1: "44", y1: "2.1", x2: "44", y2: "12.1" }), /* @__PURE__ */ import_react34.default.createElement("line", { x1: "44", y1: "30.1", x2: "44", y2: "33.9" }), /* @__PURE__ */ import_react34.default.createElement("circle", { cx: "24", cy: "15.1", r: "5" }), /* @__PURE__ */ import_react34.default.createElement("circle", { cx: "44", cy: "21.1", r: "5" }));
 };
 var settings_default = Settings;
 
@@ -2601,18 +2813,18 @@ var Layout = ({
 }) => {
   let content = children;
   if (fade2) {
-    content = /* @__PURE__ */ import_react30.default.createElement(fade_in_default, { duration: 250 }, content);
+    content = /* @__PURE__ */ import_react35.default.createElement(fade_in_default, { duration: 250 }, content);
   }
   if (container) {
-    content = /* @__PURE__ */ import_react30.default.createElement(import_theme_ui26.Box, { sx: { mb: [8, 8, 9, 10] } }, /* @__PURE__ */ import_react30.default.createElement(import_theme_ui26.Container, null, content));
+    content = /* @__PURE__ */ import_react35.default.createElement(import_theme_ui28.Box, { sx: { mb: [8, 8, 9, 10] } }, /* @__PURE__ */ import_react35.default.createElement(import_theme_ui28.Container, null, content));
   }
-  const { theme } = (0, import_theme_ui26.useThemeUI)();
+  const { theme } = (0, import_theme_ui28.useThemeUI)();
   const hideOnPrint = printable ? {
     "@media print": {
       display: "none"
     }
   } : {};
-  (0, import_react30.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     var _a;
     if (!theme) return;
     const handler = (e) => {
@@ -2629,7 +2841,7 @@ var Layout = ({
     };
   }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
   const menuItems = [
-    /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react35.default.createElement(
       dimmer_default,
       {
         key: "dimmer",
@@ -2648,7 +2860,7 @@ var Layout = ({
   ];
   if (settings) {
     menuItems.push(
-      /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(
         settings_default,
         __spreadValues({
           key: "settings",
@@ -2657,16 +2869,16 @@ var Layout = ({
       )
     );
   }
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, guide && /* @__PURE__ */ import_react30.default.createElement(guide_default, { color: typeof guide === "string" ? guide : void 0 }), scrollbar && /* @__PURE__ */ import_react30.default.createElement(scrollbar_default, null), /* @__PURE__ */ import_react30.default.createElement(meta_default, { card, description, title, url }), /* @__PURE__ */ import_react30.default.createElement(
-    import_theme_ui26.Flex,
+  return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, guide && /* @__PURE__ */ import_react35.default.createElement(guide_default, { color: typeof guide === "string" ? guide : void 0 }), scrollbar && /* @__PURE__ */ import_react35.default.createElement(scrollbar_default, null), /* @__PURE__ */ import_react35.default.createElement(meta_default, { card, description, title, url }), /* @__PURE__ */ import_react35.default.createElement(
+    import_theme_ui28.Flex,
     {
       sx: {
         flexDirection: "column",
         minHeight: "100vh"
       }
     },
-    header && /* @__PURE__ */ import_react30.default.createElement(
-      import_theme_ui26.Box,
+    header && /* @__PURE__ */ import_react35.default.createElement(
+      import_theme_ui28.Box,
       {
         as: "header",
         sx: __spreadValues({
@@ -2682,7 +2894,7 @@ var Layout = ({
           zIndex: 2e3
         }, hideOnPrint)
       },
-      /* @__PURE__ */ import_react30.default.createElement(import_theme_ui26.Container, null, /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(import_theme_ui28.Container, null, /* @__PURE__ */ import_react35.default.createElement(
         header_default,
         {
           mode: links2,
@@ -2692,8 +2904,8 @@ var Layout = ({
         }
       ))
     ),
-    /* @__PURE__ */ import_react30.default.createElement(
-      import_theme_ui26.Box,
+    /* @__PURE__ */ import_react35.default.createElement(
+      import_theme_ui28.Box,
       {
         sx: {
           width: "100%",
@@ -2702,8 +2914,8 @@ var Layout = ({
       },
       content
     ),
-    footer && /* @__PURE__ */ import_react30.default.createElement(
-      import_theme_ui26.Box,
+    footer && /* @__PURE__ */ import_react35.default.createElement(
+      import_theme_ui28.Box,
       {
         as: "footer",
         sx: __spreadValues({
@@ -2714,10 +2926,10 @@ var Layout = ({
           borderTopWidth: "1px"
         }, hideOnPrint)
       },
-      /* @__PURE__ */ import_react30.default.createElement(import_theme_ui26.Container, null, /* @__PURE__ */ import_react30.default.createElement(footer_default, null))
+      /* @__PURE__ */ import_react35.default.createElement(import_theme_ui28.Container, null, /* @__PURE__ */ import_react35.default.createElement(footer_default, null))
     ),
-    dimmer === "bottom" && /* @__PURE__ */ import_react30.default.createElement(
-      import_theme_ui26.Box,
+    dimmer === "bottom" && /* @__PURE__ */ import_react35.default.createElement(
+      import_theme_ui28.Box,
       {
         sx: {
           display: ["none", "none", "initial", "initial"],
@@ -2726,24 +2938,24 @@ var Layout = ({
           bottom: [17, 17, 15, 15]
         }
       },
-      /* @__PURE__ */ import_react30.default.createElement(dimmer_default, null)
+      /* @__PURE__ */ import_react35.default.createElement(dimmer_default, null)
     ),
-    metadata && /* @__PURE__ */ import_react30.default.createElement(metadata_default, { mode: typeof metadata === "string" ? metadata : "mouse" })
+    metadata && /* @__PURE__ */ import_react35.default.createElement(metadata_default, { mode: typeof metadata === "string" ? metadata : "mouse" })
   ));
 };
 var layout_default = Layout;
 
 // src/custom-404.tsx
 var Custom404 = () => {
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react36.default.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__ */ import_react31.default.createElement(row_default, { sx: { mb: [5, 0, 0], pt: [0, 0, 6] } }, /* @__PURE__ */ import_react31.default.createElement(column_default, { start: [1, 1, 3, 3], width: [6, 4, 4, 4] }, /* @__PURE__ */ import_react31.default.createElement(import_theme_ui27.Box, { as: "h1", variant: "styles.h1" }, "Oops!"), /* @__PURE__ */ import_react31.default.createElement(
-      import_theme_ui27.Box,
+    /* @__PURE__ */ import_react36.default.createElement(row_default, { sx: { mb: [5, 0, 0], pt: [0, 0, 6] } }, /* @__PURE__ */ import_react36.default.createElement(column_default, { start: [1, 1, 3, 3], width: [6, 4, 4, 4] }, /* @__PURE__ */ import_react36.default.createElement(import_theme_ui29.Box, { as: "h1", variant: "styles.h1" }, "Oops!"), /* @__PURE__ */ import_react36.default.createElement(
+      import_theme_ui29.Box,
       {
         sx: {
           fontSize: [4, 4, 4, 5],
@@ -2754,8 +2966,8 @@ var Custom404 = () => {
         }
       },
       "Sorry but we can't seem to find the page you are looking for."
-    ), /* @__PURE__ */ import_react31.default.createElement(
-      import_theme_ui27.Box,
+    ), /* @__PURE__ */ import_react36.default.createElement(
+      import_theme_ui29.Box,
       {
         sx: {
           color: "secondary",
@@ -2766,8 +2978,8 @@ var Custom404 = () => {
         }
       },
       "ERROR CODE 404"
-    )), /* @__PURE__ */ import_react31.default.createElement(column_default, { start: [2, 5, 7, 7], width: [4, 4, 4, 4] }, /* @__PURE__ */ import_react31.default.createElement(
-      import_theme_ui27.Box,
+    )), /* @__PURE__ */ import_react36.default.createElement(column_default, { start: [2, 5, 7, 7], width: [4, 4, 4, 4] }, /* @__PURE__ */ import_react36.default.createElement(
+      import_theme_ui29.Box,
       {
         sx: {
           width: ["100%"],
@@ -2775,18 +2987,18 @@ var Custom404 = () => {
           fill: "primary"
         }
       },
-      /* @__PURE__ */ import_react31.default.createElement(import_emoji.PoopSad, { sx: { width: "100%", height: "auto" } })
+      /* @__PURE__ */ import_react36.default.createElement(import_emoji.PoopSad, { sx: { width: "100%", height: "auto" } })
     )))
   );
 };
 var custom_404_default = Custom404;
 
 // src/expander.tsx
-var import_react32 = __toESM(require("react"));
-var import_theme_ui28 = require("theme-ui");
-var Expander = ({ value, id, onClick, sx: sx3 }) => {
-  return /* @__PURE__ */ import_react32.default.createElement(
-    import_theme_ui28.IconButton,
+var import_react37 = __toESM(require("react"));
+var import_theme_ui30 = require("theme-ui");
+var Expander = ({ value, id, onClick, sx: sx4 }) => {
+  return /* @__PURE__ */ import_react37.default.createElement(
+    import_theme_ui30.IconButton,
     {
       onClick,
       id,
@@ -2807,9 +3019,9 @@ var Expander = ({ value, id, onClick, sx: sx3 }) => {
             stroke: "primary"
           }
         }
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ import_react32.default.createElement("svg", { viewBox: "0 0 16 16" }, /* @__PURE__ */ import_react32.default.createElement(
+    /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "0 0 16 16" }, /* @__PURE__ */ import_react37.default.createElement(
       "path",
       {
         d: "M8,0 V16 M0,8 H16",
@@ -2826,22 +3038,22 @@ var Expander = ({ value, id, onClick, sx: sx3 }) => {
 var expander_default = Expander;
 
 // src/figure.tsx
-var import_react33 = __toESM(require("react"));
-var import_theme_ui29 = require("theme-ui");
-var Figure = ({ as = "figure", children, sx: sx3 }) => {
-  const childrenArray = import_react33.default.Children.toArray(children);
+var import_react38 = __toESM(require("react"));
+var import_theme_ui31 = require("theme-ui");
+var Figure = ({ as = "figure", children, sx: sx4 }) => {
+  const childrenArray = import_react38.default.Children.toArray(children);
   const captionElement = childrenArray.find((child) => {
-    if (!import_react33.default.isValidElement(child)) return false;
+    if (!import_react38.default.isValidElement(child)) return false;
     const type = child.type;
     return typeof type !== "string" && "displayName" in type && (type.displayName === "FigureCaption" || type.displayName === "TableCaption");
   });
-  const captionProps = import_react33.default.isValidElement(captionElement) ? captionElement.props : void 0;
-  const captionType = import_react33.default.isValidElement(captionElement) ? captionElement.type : void 0;
+  const captionProps = import_react38.default.isValidElement(captionElement) ? captionElement.props : void 0;
+  const captionType = import_react38.default.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__ */ import_react33.default.createElement(
-    import_theme_ui29.Box,
+  return /* @__PURE__ */ import_react38.default.createElement(
+    import_theme_ui31.Box,
     {
       as,
       id,
@@ -2852,38 +3064,38 @@ var Figure = ({ as = "figure", children, sx: sx3 }) => {
         "@media print": {
           breakInside: "avoid"
         }
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ import_react33.default.createElement(group_default, { spacing: [4, 4, 4, 5] }, children)
+    /* @__PURE__ */ import_react38.default.createElement(group_default, { spacing: [4, 4, 4, 5] }, children)
   );
 };
 var figure_default = Figure;
 
 // src/figure-caption.tsx
-var import_react34 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var FigureCaption = ({
   as = "figcaption",
   number,
   children
 }) => {
-  return /* @__PURE__ */ import_react34.default.createElement(caption_default, { as, number, label: "figure" }, children);
+  return /* @__PURE__ */ import_react39.default.createElement(caption_default, { as, number, label: "figure" }, children);
 };
 FigureCaption.displayName = "FigureCaption";
 var figure_caption_default = FigureCaption;
 
 // src/filter.tsx
-var import_react36 = __toESM(require("react"));
-var import_theme_ui31 = require("theme-ui");
+var import_react41 = __toESM(require("react"));
+var import_theme_ui33 = require("theme-ui");
 
 // src/tag.tsx
-var import_react35 = __toESM(require("react"));
-var import_theme_ui30 = require("theme-ui");
+var import_react40 = __toESM(require("react"));
+var import_theme_ui32 = require("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__ */ import_react35.default.createElement(
-    import_theme_ui30.Box,
+  return /* @__PURE__ */ import_react40.default.createElement(
+    import_theme_ui32.Box,
     __spreadValues({
       as: isClickable ? "button" : "span",
       role: "checkbox",
@@ -2910,7 +3122,7 @@ var Tag = (_a) => {
         px: [0],
         m: [0],
         opacity: value == null || value ? 1 : color === "primary" ? 0.24 : 0.33
-      }, sx3)
+      }, sx4)
     }, props),
     children
   );
@@ -2918,7 +3130,7 @@ var Tag = (_a) => {
 var tag_default = Tag;
 
 // src/filter.tsx
-var sx2 = {
+var sx3 = {
   label: {
     fontFamily: "mono",
     letterSpacing: "mono",
@@ -2983,14 +3195,14 @@ var Filter = (_a) => {
     "showAll",
     "multiSelect"
   ]);
-  const keys = (0, import_react36.useMemo)(() => {
+  const keys = (0, import_react41.useMemo)(() => {
     if (order) {
       return order;
     } else {
       return Object.keys(values);
     }
   }, [order, ...Object.keys(values).sort()]);
-  return /* @__PURE__ */ import_react36.default.createElement(import_theme_ui31.Box, __spreadValues({}, props), label && /* @__PURE__ */ import_react36.default.createElement(import_theme_ui31.Box, { sx: sx2.label }, label), /* @__PURE__ */ import_react36.default.createElement(import_theme_ui31.Box, { sx: { mt: label ? [3] : 0 } }, showAll && /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_theme_ui33.Box, __spreadValues({}, props), label && /* @__PURE__ */ import_react41.default.createElement(import_theme_ui33.Box, { sx: sx3.label }, label), /* @__PURE__ */ import_react41.default.createElement(import_theme_ui33.Box, { sx: { mt: label ? [3] : 0 } }, showAll && /* @__PURE__ */ import_react41.default.createElement(
     tag_default,
     {
       label: "all",
@@ -3004,7 +3216,7 @@ var Filter = (_a) => {
       sx: { mr: [2] }
     },
     "All"
-  ), keys.map((d, i) => /* @__PURE__ */ import_react36.default.createElement(
+  ), keys.map((d, i) => /* @__PURE__ */ import_react41.default.createElement(
     tag_default,
     {
       label: String(d),
@@ -3035,18 +3247,18 @@ var Filter = (_a) => {
 var filter_default = Filter;
 
 // src/heading.tsx
-var import_react38 = __toESM(require("react"));
-var import_theme_ui33 = require("theme-ui");
+var import_react43 = __toESM(require("react"));
+var import_theme_ui35 = require("theme-ui");
 
 // src/sidenote.tsx
-var import_react37 = __toESM(require("react"));
-var import_theme_ui32 = require("theme-ui");
+var import_react42 = __toESM(require("react"));
+var import_theme_ui34 = require("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__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(column_default, { start: [1, 4, 8, 8], width: [1, 1, 1, 1] }, /* @__PURE__ */ import_react37.default.createElement(
-    import_theme_ui32.Box,
+  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(column_default, { start: [1, 4, 8, 8], width: [1, 1, 1, 1] }, /* @__PURE__ */ import_react42.default.createElement(
+    import_theme_ui34.Box,
     {
       sx: {
         mt,
@@ -3057,8 +3269,8 @@ var Sidenote = ({ children, variant = "h1" }) => {
       }
     },
     "/"
-  )), /* @__PURE__ */ import_react37.default.createElement(column_default, { start: [2, 5, 9, 9], width: [3, 3, 2, 2] }, /* @__PURE__ */ import_react37.default.createElement(
-    import_theme_ui32.Box,
+  )), /* @__PURE__ */ import_react42.default.createElement(column_default, { start: [2, 5, 9, 9], width: [3, 3, 2, 2] }, /* @__PURE__ */ import_react42.default.createElement(
+    import_theme_ui34.Box,
     {
       sx: {
         mt,
@@ -3081,7 +3293,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) {
@@ -3092,8 +3304,8 @@ var Heading = ({
   if (!["h1", "h2"].includes(variant)) {
     throw new Error(`variant must be 'h1' or 'h2' but got '${variant}'`);
   }
-  return /* @__PURE__ */ import_react38.default.createElement(row_default, { sx: __spreadValues({ mt: [5, 6, 7, 8], mb: [5, 6, 7, 8] }, sx3) }, /* @__PURE__ */ import_react38.default.createElement(column_default, { start: [1, 1, 2, 2], width: titleWidth }, variant === "h1" && /* @__PURE__ */ import_react38.default.createElement(import_theme_ui33.Box, { as: "h1", variant: "styles.h1", sx: { my: [0, 0, 0, 0] } }, children), variant === "h2" && /* @__PURE__ */ import_react38.default.createElement(import_theme_ui33.Box, { as: "h2", variant: "styles.h2", sx: { my: [0, 0, 0, 0] } }, children)), sidenote && /* @__PURE__ */ import_react38.default.createElement(sidenote_default, { variant }, sidenote), description && /* @__PURE__ */ import_react38.default.createElement(column_default, { start: descriptionStart, width: descriptionWidth }, /* @__PURE__ */ import_react38.default.createElement(
-    import_theme_ui33.Box,
+  return /* @__PURE__ */ import_react43.default.createElement(row_default, { sx: __spreadValues({ mt: [5, 6, 7, 8], mb: [5, 6, 7, 8] }, sx4) }, /* @__PURE__ */ import_react43.default.createElement(column_default, { start: [1, 1, 2, 2], width: titleWidth }, variant === "h1" && /* @__PURE__ */ import_react43.default.createElement(import_theme_ui35.Box, { as: "h1", variant: "styles.h1", sx: { my: [0, 0, 0, 0] } }, children), variant === "h2" && /* @__PURE__ */ import_react43.default.createElement(import_theme_ui35.Box, { as: "h2", variant: "styles.h2", sx: { my: [0, 0, 0, 0] } }, children)), sidenote && /* @__PURE__ */ import_react43.default.createElement(sidenote_default, { variant }, sidenote), description && /* @__PURE__ */ import_react43.default.createElement(column_default, { start: descriptionStart, width: descriptionWidth }, /* @__PURE__ */ import_react43.default.createElement(
+    import_theme_ui35.Box,
     {
       sx: {
         mt: [4, "5px", "20px", "31px"],
@@ -3105,47 +3317,10 @@ var Heading = ({
 };
 var heading_default = Heading;
 
-// src/input.tsx
-var import_react39 = __toESM(require("react"));
-var import_theme_ui34 = require("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__ */ import_react39.default.createElement(import_theme_ui34.Input, __spreadProps(__spreadValues({}, props), { ref, sx: styles3 }));
-};
-var input_default = (0, import_react39.forwardRef)(Input);
-
 // src/link-group.tsx
-var import_react40 = __toESM(require("react"));
-var import_theme_ui35 = require("theme-ui");
-var import_icons4 = require("@carbonplan/icons");
+var import_react44 = __toESM(require("react"));
+var import_theme_ui36 = require("theme-ui");
+var import_icons6 = require("@carbonplan/icons");
 var LinkGroup = ({
   members,
   color,
@@ -3154,20 +3329,20 @@ var LinkGroup = ({
   rowGap = [2, 2, 2, 3],
   columnGap = [3, 3, 3, 4],
   direction = "horizontal",
-  sx: sx3
+  sx: sx4
 }) => {
-  return /* @__PURE__ */ import_react40.default.createElement(
-    import_theme_ui35.Flex,
+  return /* @__PURE__ */ import_react44.default.createElement(
+    import_theme_ui36.Flex,
     {
       sx: __spreadValues({
         flexDirection: direction === "horizontal" ? "row" : "column",
         rowGap,
         columnGap,
         flexWrap: "wrap"
-      }, sx3)
+      }, sx4)
     },
     members.map((d, i) => {
-      return /* @__PURE__ */ import_react40.default.createElement(
+      return /* @__PURE__ */ import_react44.default.createElement(
         button_default,
         {
           key: i,
@@ -3175,7 +3350,7 @@ var LinkGroup = ({
           size,
           sx: { color },
           inverted,
-          suffix: /* @__PURE__ */ import_react40.default.createElement(import_icons4.RotatingArrow, null)
+          suffix: /* @__PURE__ */ import_react44.default.createElement(import_icons6.RotatingArrow, null)
         },
         d.label
       );
@@ -3185,14 +3360,14 @@ var LinkGroup = ({
 var link_group_default = LinkGroup;
 
 // src/select.tsx
-var import_react41 = __toESM(require("react"));
-var import_theme_ui36 = require("theme-ui");
-var import_icons5 = require("@carbonplan/icons");
+var import_react45 = __toESM(require("react"));
+var import_theme_ui37 = require("theme-ui");
+var import_icons7 = require("@carbonplan/icons");
 var Select = (_a) => {
   var _b = _a, {
     children,
     size = "sm",
-    sx: sx3,
+    sx: sx4,
     sxSelect,
     onChange
   } = _b, props = __objRest(_b, [
@@ -3202,9 +3377,9 @@ 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 = (0, import_react41.useRef)(null);
+  const ref = (0, import_react45.useRef)(null);
   if (!["xs", "sm", "md"].includes(size)) {
     throw new Error("Size must be xs, sm, or md");
   }
@@ -3230,15 +3405,15 @@ var Select = (_a) => {
   };
   const { height, width, top, ml } = sizeConfig[size];
   const pr = width.map((d) => d + 12);
-  return /* @__PURE__ */ import_react41.default.createElement(
-    import_theme_ui36.Box,
+  return /* @__PURE__ */ import_react45.default.createElement(
+    import_theme_ui37.Box,
     {
       sx: __spreadValues({
         display: "inline-block"
-      }, sx3)
+      }, sx4)
     },
-    /* @__PURE__ */ import_react41.default.createElement(
-      import_theme_ui36.Box,
+    /* @__PURE__ */ import_react45.default.createElement(
+      import_theme_ui37.Box,
       __spreadValues({
         as: "select",
         ref,
@@ -3274,8 +3449,8 @@ var Select = (_a) => {
       }, props),
       children
     ),
-    /* @__PURE__ */ import_react41.default.createElement(
-      import_icons5.Arrow,
+    /* @__PURE__ */ import_react45.default.createElement(
+      import_icons7.Arrow,
       {
         sx: {
           width,
@@ -3294,16 +3469,16 @@ var Select = (_a) => {
 var select_default = Select;
 
 // src/slider.tsx
-var import_react42 = __toESM(require("react"));
-var import_theme_ui37 = require("theme-ui");
+var import_react46 = __toESM(require("react"));
+var import_theme_ui38 = require("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 }
-  } = (0, import_theme_ui37.useThemeUI)();
-  return /* @__PURE__ */ import_react42.default.createElement(
-    import_theme_ui37.Slider,
+  } = (0, import_theme_ui38.useThemeUI)();
+  return /* @__PURE__ */ import_react46.default.createElement(
+    import_theme_ui38.Slider,
     __spreadValues({
       ref,
       sx: __spreadValues({
@@ -3333,15 +3508,15 @@ var Slider = (_a, ref) => {
           }
         },
         color
-      }, sx3)
+      }, sx4)
     }, props)
   );
 };
-var slider_default = (0, import_react42.forwardRef)(Slider);
+var slider_default = (0, import_react46.forwardRef)(Slider);
 
 // src/table.tsx
-var import_react43 = __toESM(require("react"));
-var import_theme_ui38 = require("theme-ui");
+var import_react47 = __toESM(require("react"));
+var import_theme_ui39 = require("theme-ui");
 var styles2 = {
   reset: {
     verticalAlign: "baseline",
@@ -3384,7 +3559,7 @@ var styles2 = {
 };
 var Table = ({
   data,
-  sx: sx3,
+  sx: sx4,
   color,
   header,
   columns,
@@ -3397,7 +3572,7 @@ var Table = ({
   if (!start || !columns || !width) {
     throw new Error("Must provide columns, start, and width");
   }
-  return /* @__PURE__ */ import_react43.default.createElement(import_theme_ui38.Box, { as: "table", sx: __spreadValues({ display: "block" }, sx3) }, /* @__PURE__ */ import_react43.default.createElement(import_theme_ui38.Box, { as: "tbody", sx: { display: "block" } }, header && /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(import_theme_ui39.Box, { as: "table", sx: __spreadValues({ display: "block" }, sx4) }, /* @__PURE__ */ import_react47.default.createElement(import_theme_ui39.Box, { as: "tbody", sx: { display: "block" } }, header && /* @__PURE__ */ import_react47.default.createElement(
     row_default,
     {
       as: "tr",
@@ -3406,9 +3581,9 @@ var Table = ({
         borderTopWidth: !borderTop ? "0px" : "1px"
       })
     },
-    /* @__PURE__ */ import_react43.default.createElement(column_default, { as: "td", start: [1], width: columns, sx: styles2.index }, header)
+    /* @__PURE__ */ import_react47.default.createElement(column_default, { as: "td", start: [1], width: columns, sx: styles2.index }, header)
   ), data.map((row, i) => {
-    return /* @__PURE__ */ import_react43.default.createElement(
+    return /* @__PURE__ */ import_react47.default.createElement(
       row_default,
       {
         as: "tr",
@@ -3421,7 +3596,7 @@ var Table = ({
         })
       },
       row.map((column, j) => {
-        return /* @__PURE__ */ import_react43.default.createElement(
+        return /* @__PURE__ */ import_react47.default.createElement(
           column_default,
           {
             as: "td",
@@ -3439,27 +3614,27 @@ var Table = ({
 var table_default = Table;
 
 // src/table-caption.tsx
-var import_react44 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var TableCaption = ({
   as = "figcaption",
   number,
   children
 }) => {
-  return /* @__PURE__ */ import_react44.default.createElement(caption_default, { as, number, label: "table" }, children);
+  return /* @__PURE__ */ import_react48.default.createElement(caption_default, { as, number, label: "table" }, children);
 };
 TableCaption.displayName = "TableCaption";
 var table_caption_default = TableCaption;
 
 // src/toggle.tsx
-var import_react45 = __toESM(require("react"));
-var import_theme_ui39 = require("theme-ui");
+var import_react49 = __toESM(require("react"));
+var import_theme_ui40 = require("theme-ui");
 var import_color2 = require("@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__ */ import_react45.default.createElement(
-    import_theme_ui39.Box,
+  return /* @__PURE__ */ import_react49.default.createElement(
+    import_theme_ui40.Box,
     __spreadValues({
       ref,
       as: "button",
@@ -3474,10 +3649,10 @@ var Toggle = (_a, ref) => {
         p: [0],
         m: [0],
         display: "inline-block"
-      }, sx3)
+      }, sx4)
     }, props),
-    /* @__PURE__ */ import_react45.default.createElement(
-      import_theme_ui39.Box,
+    /* @__PURE__ */ import_react49.default.createElement(
+      import_theme_ui40.Box,
       {
         sx: {
           width: "50px",
@@ -3489,8 +3664,8 @@ var Toggle = (_a, ref) => {
           display: "inline-block"
         }
       },
-      /* @__PURE__ */ import_react45.default.createElement(
-        import_theme_ui39.Box,
+      /* @__PURE__ */ import_react49.default.createElement(
+        import_theme_ui40.Box,
         {
           sx: {
             width: "14px",
@@ -3507,14 +3682,14 @@ var Toggle = (_a, ref) => {
     )
   );
 };
-var toggle_default = (0, import_react45.forwardRef)(Toggle);
+var toggle_default = (0, import_react49.forwardRef)(Toggle);
 
 // src/tray.tsx
-var import_react46 = __toESM(require("react"));
-var import_theme_ui40 = require("theme-ui");
-var Tray = ({ expanded, sx: sx3, children }) => {
-  return /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement(
-    import_theme_ui40.Box,
+var import_react50 = __toESM(require("react"));
+var import_theme_ui41 = require("theme-ui");
+var Tray = ({ expanded, sx: sx4, children }) => {
+  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement(
+    import_theme_ui41.Box,
     {
       sx: {
         position: "fixed",
@@ -3530,8 +3705,8 @@ var Tray = ({ expanded, sx: sx3, children }) => {
         pointerEvents: expanded ? "all" : "none"
       }
     }
-  ), /* @__PURE__ */ import_react46.default.createElement(
-    import_theme_ui40.Box,
+  ), /* @__PURE__ */ import_react50.default.createElement(
+    import_theme_ui41.Box,
     {
       sx: __spreadValues({
         position: "fixed",
@@ -3551,9 +3726,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__ */ import_react46.default.createElement(row_default, null, /* @__PURE__ */ import_react46.default.createElement(column_default, { start: [1, 1, 1, 1], width: [6, 8, 10, 10] }, children))
+    /* @__PURE__ */ import_react50.default.createElement(row_default, null, /* @__PURE__ */ import_react50.default.createElement(column_default, { start: [1, 1, 1, 1], width: [6, 8, 10, 10] }, children))
   ));
 };
 var tray_default = Tray;
@@ -3589,10 +3764,10 @@ var formatDate = (date, options = defaultOptions) => {
 var format_date_default = formatDate;
 
 // src/utils/use-scrollbar-class.ts
-var import_react47 = require("react");
+var import_react51 = require("react");
 var useScrollbarClass = () => {
-  const [className, setClassName] = (0, import_react47.useState)(null);
-  (0, import_react47.useEffect)(() => {
+  const [className, setClassName] = (0, import_react51.useState)(null);
+  (0, import_react51.useEffect)(() => {
     if (document && get_scrollbar_width_default(document) > 0) {
       setClassName("custom-scrollbar");
     }