@carbonplan/components 13.2.2 → 13.4.0-develop.0

package/dst/index.mjs

@@ -0,0 +1,3760 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/avatar.tsx
+import React from "react";
+import { Box, Image } from "theme-ui";
+var Avatar = (_a) => {
+  var _b = _a, {
+    color = "transparent",
+    width = "90px",
+    maxWidth,
+    name,
+    github,
+    alt,
+    src,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "color",
+    "width",
+    "maxWidth",
+    "name",
+    "github",
+    "alt",
+    "src",
+    "sx"
+  ]);
+  if (!name && !src && !github) {
+    console.warn("must specify either name, github, or src");
+  }
+  let srcProp, altProp;
+  if (name) {
+    srcProp = `https://images.carbonplan.org/team/${name.toLowerCase().replaceAll(" ", "-")}.png`;
+    altProp = alt || name;
+  } else if (github) {
+    srcProp = `https://github.com/${github}.png`;
+    altProp = alt || github;
+  } else {
+    srcProp = src;
+    altProp = alt;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadValues({
+      sx: __spreadValues({
+        width,
+        maxWidth,
+        height: "auto",
+        borderRadius: "50%",
+        overflow: "hidden",
+        position: "relative",
+        display: "inline-block",
+        verticalAlign: "top"
+      }, sx4)
+    }, props),
+    /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        alt: altProp,
+        src: srcProp,
+        sx: {
+          filter: color && color !== "transparent" ? "grayscale(100%) contrast(200%) brightness(100%)" : "none",
+          width: "100%",
+          display: "block"
+        }
+      }
+    ),
+    color && color !== "transparent" && /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          top: 0,
+          bg: color,
+          width: "100%",
+          height: "100%",
+          opacity: 0.75,
+          pointerEvents: "none"
+        }
+      }
+    )
+  );
+};
+var avatar_default = Avatar;
+
+// src/avatar-group.tsx
+import React5 from "react";
+import { Box as Box4 } from "theme-ui";
+
+// src/row.tsx
+import React2 from "react";
+import { Grid } from "theme-ui";
+var Row = (_a) => {
+  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];
+    }
+    if (Array.isArray(input) && ![1, 2, 4].includes(input.length)) {
+      throw new Error("Array length must be 1, 2, or 4");
+    }
+    if (Array.isArray(input) && input.length === 1) {
+      input = input.map((d) => [d]).flat();
+    }
+    if (Array.isArray(input) && input.length === 2) {
+      input = input.map((d) => [d, d]).flat();
+    }
+    return input;
+  };
+  let columnGap, rowGap;
+  if (Number.isInteger(gap) || Array.isArray(gap)) {
+    gap = makeArray(gap);
+    columnGap = gap;
+    rowGap = gap;
+  } else {
+    columnGap = [4, 5, 5, 6];
+    rowGap = [0, 0, 0, 0];
+  }
+  if (Number.isInteger(columns) || Array.isArray(columns)) {
+    columns = makeArray(columns);
+  } else {
+    columns = [6, 8, 12, 12];
+  }
+  return /* @__PURE__ */ React2.createElement(
+    Grid,
+    __spreadProps(__spreadValues({}, props), {
+      columns,
+      sx: __spreadValues({
+        columnGap,
+        rowGap
+      }, sx4)
+    }),
+    children
+  );
+};
+var row_default = Row;
+
+// src/column.tsx
+import React3 from "react";
+import { Box as Box2 } from "theme-ui";
+var Column = (_a) => {
+  var _b = _a, {
+    start,
+    width,
+    dl,
+    dr,
+    children,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "start",
+    "width",
+    "dl",
+    "dr",
+    "children",
+    "sx"
+  ]);
+  start = start || "auto";
+  width = width || "auto";
+  const makeArray = (input) => {
+    let arr = Array.isArray(input) ? input : [input];
+    if (![1, 2, 4].includes(arr.length)) {
+      throw new Error("Array length must be 1, 2, or 4");
+    }
+    if (arr.length === 1) {
+      arr = arr.map((d) => [d, d, d, d]).flat();
+    } else if (arr.length === 2) {
+      arr = arr.map((d) => [d, d]).flat();
+    }
+    return arr;
+  };
+  const startArray = makeArray(start);
+  const widthArray = makeArray(width);
+  const end = startArray.map((d, i) => {
+    if (d === "auto" || widthArray[i] === "auto") return "auto";
+    return d + widthArray[i];
+  });
+  let ml, mr;
+  if (dl) {
+    if (![0.5, 1].includes(dl)) {
+      throw new Error("dl must be 0.5 or 1");
+    }
+    if (dl === 0.5) {
+      ml = ["-12px", -3, -3, -4];
+    }
+    if (dl === 1) {
+      ml = [-4, -5, -5, -6];
+    }
+  }
+  if (dr) {
+    if (![0.5, 1].includes(dr)) {
+      throw new Error("dr must be 0.5 or 1");
+    }
+    if (dr === 0.5) {
+      mr = ["-12px", -3, -3, -4];
+    }
+    if (dr === 1) {
+      mr = [-4, -5, -5, -6];
+    }
+  }
+  return /* @__PURE__ */ React3.createElement(
+    Box2,
+    __spreadProps(__spreadValues({}, props), {
+      sx: __spreadValues({
+        gridColumnStart: startArray,
+        gridColumnEnd: end,
+        ml,
+        mr
+      }, sx4)
+    }),
+    children
+  );
+};
+var column_default = Column;
+
+// src/group.tsx
+import React4 from "react";
+import { Box as Box3 } from "theme-ui";
+var sizes = {
+  xs: [1],
+  sm: [3],
+  md: [5],
+  lg: [7],
+  xl: [9]
+};
+var Group = ({
+  children,
+  direction = "vertical",
+  spacing = "md",
+  sx: sx4
+}) => {
+  let marginValue;
+  if (typeof spacing === "string" && spacing in sizes) {
+    marginValue = sizes[spacing];
+  } else {
+    marginValue = spacing;
+  }
+  if (!["horizontal", "vertical"].includes(direction)) {
+    throw new Error(
+      "Invalid direction value. Must be either horizontal or vertical"
+    );
+  }
+  const marginProperty = direction === "vertical" ? "mb" : "mr";
+  const additionalStyles = direction === "horizontal" ? { display: "inline-block" } : {};
+  return /* @__PURE__ */ React4.createElement(Box3, { sx: sx4 }, React4.Children.map(children, (child, i) => {
+    const childrenCount = React4.Children.count(children);
+    return /* @__PURE__ */ React4.createElement(
+      Box3,
+      {
+        sx: __spreadValues({
+          [marginProperty]: i < childrenCount - 1 ? marginValue : 0
+        }, additionalStyles)
+      },
+      child
+    );
+  }));
+};
+var group_default = Group;
+
+// src/avatar-group.tsx
+var sizes2 = {
+  xs: [1],
+  sm: [3],
+  md: [5],
+  lg: [7],
+  xl: [9]
+};
+var Blank = ({ overflow, maxWidth }) => {
+  return /* @__PURE__ */ React5.createElement(
+    Box4,
+    {
+      sx: {
+        bg: "muted",
+        height: "100%",
+        maxWidth,
+        borderRadius: "50%"
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      Box4,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(
+        Box4,
+        {
+          sx: {
+            fontFamily: "mono",
+            letterSpacing: "mono",
+            fontSize: [3, 3, 3, 4]
+          }
+        },
+        "+",
+        overflow
+      )
+    )
+  );
+};
+var AvatarGroup = (_a) => {
+  var _b = _a, {
+    members,
+    direction = "horizontal",
+    align,
+    spacing = "md",
+    limit,
+    width,
+    maxWidth,
+    fixedCount,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "members",
+    "direction",
+    "align",
+    "spacing",
+    "limit",
+    "width",
+    "maxWidth",
+    "fixedCount",
+    "sx"
+  ]);
+  let gap;
+  if (typeof spacing === "string" && spacing in sizes2) {
+    gap = sizes2[spacing];
+  } else {
+    gap = spacing;
+  }
+  let start = (_idx) => "auto";
+  if (align) {
+    const alignArray = Array.isArray(align) ? align : [align];
+    start = (idx) => {
+      return alignArray.map((d) => {
+        if (d === "left") {
+          return "auto";
+        } else if (d === "right") {
+          const offset = Math.max(0, (fixedCount != null ? fixedCount : 0) - members.length);
+          return (offset + idx) % (fixedCount != null ? fixedCount : 1) + 1;
+        } else {
+          throw Error(`alignment '${d}' not recognized`);
+        }
+      });
+    };
+  }
+  const excess = limit !== void 0 && members.length > limit;
+  const overflow = limit !== void 0 ? members.length - limit + 1 : 0;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, fixedCount && /* @__PURE__ */ React5.createElement(row_default, __spreadValues({ columns: fixedCount, gap, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(column_default, { key: idx, start: start(idx) }, (!excess || limit !== void 0 && idx < limit - 1) && /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({}, props2), { width, maxWidth })), excess && limit !== void 0 && idx === limit - 1 && /* @__PURE__ */ React5.createElement(Blank, { overflow, maxWidth })))), !fixedCount && /* @__PURE__ */ React5.createElement(group_default, __spreadValues({ direction, spacing, sx: sx4 }, props), members.map((props2, idx) => /* @__PURE__ */ React5.createElement(avatar_default, __spreadProps(__spreadValues({ key: idx }, props2), { width, maxWidth })))));
+};
+var avatar_group_default = AvatarGroup;
+
+// src/badge.tsx
+import React6 from "react";
+import { Box as Box5 } from "theme-ui";
+import { transparentize } from "@theme-ui/color";
+
+// src/utils/get-sx-color.ts
+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: sx4, children } = _b, props = __objRest(_b, ["sx", "children"]);
+  const color = get_sx_color_default(sx4);
+  return /* @__PURE__ */ React6.createElement(
+    Box5,
+    __spreadValues({
+      sx: __spreadValues({
+        display: "inline-block",
+        width: "fit-content",
+        height: ["24px", "24px", "24px", "26px"],
+        borderRadius: "5px",
+        backgroundColor: color === "primary" || color === "secondary" ? "muted" : transparentize(color, 0.7),
+        textAlign: "center",
+        userSelect: "none",
+        fontSize: [2, 2, 2, 3]
+      }, sx4)
+    }, props),
+    /* @__PURE__ */ React6.createElement(
+      Box5,
+      {
+        sx: {
+          letterSpacing: "0.02em",
+          fontFamily: "mono",
+          mt: ["1px", "1px", "1px", "0px"],
+          px: [1, 1, 1, "5px"],
+          color
+        }
+      },
+      children
+    )
+  );
+};
+var badge_default = Badge;
+
+// src/blockquote.tsx
+import React7, { Children } from "react";
+import { Box as Box6 } from "theme-ui";
+var specialChars = ["\u201C", '"', "'", "\u2018"];
+var Blockquote = ({ children }) => {
+  return /* @__PURE__ */ React7.createElement(Box6, { variant: "styles.blockquote" }, Children.map(children, (d) => {
+    let firstChar = "";
+    let remaining = d;
+    if (React7.isValidElement(d) && typeof d.props.children === "string") {
+      firstChar = d.props.children.slice(0, 1);
+      remaining = d.props.children.slice(1);
+    } else if (typeof d === "string") {
+      firstChar = d.slice(0, 1);
+      remaining = d.slice(1);
+    }
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, specialChars.includes(firstChar) && /* @__PURE__ */ React7.createElement(Box6, { as: "span", sx: { position: "absolute", ml: "-0.4em" } }, firstChar), specialChars.includes(firstChar) ? remaining : d);
+  }));
+};
+var blockquote_default = Blockquote;
+
+// src/button.tsx
+import React9, { forwardRef as forwardRef2, cloneElement } from "react";
+import { Box as Box7 } from "theme-ui";
+
+// src/link.tsx
+import React8, { forwardRef } from "react";
+import { Link as ThemedLink } from "theme-ui";
+import { default as NextLink } from "next/link";
+var Link = (_a, ref) => {
+  var _b = _a, { href, children, internal = false } = _b, props = __objRest(_b, ["href", "children", "internal"]);
+  if (href && (internal || href.startsWith("/"))) {
+    return /* @__PURE__ */ React8.createElement(NextLink, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ React8.createElement(ThemedLink, __spreadValues({ ref }, props), children));
+  } else {
+    return /* @__PURE__ */ React8.createElement(ThemedLink, __spreadValues({ ref, href }, props), children);
+  }
+};
+var link_default = forwardRef(Link);
+
+// src/utils/get-size-styles.ts
+var getSizeStyles = (size) => {
+  if (!["xs", "sm", "md", "lg", "xl"].includes(size)) {
+    throw new Error("Size must be xs, sm, md, lg, or xl");
+  }
+  let fontSize, fontFamily, letterSpacing, lineHeight;
+  if (size === "xs") {
+    fontSize = [2, 2, 2, 3];
+    fontFamily = "body";
+    letterSpacing = "body";
+    lineHeight = [1.2];
+  }
+  if (size === "sm") {
+    fontSize = [3, 3, 3, 4];
+    fontFamily = "body";
+    letterSpacing = "body";
+    lineHeight = [1.2];
+  }
+  if (size === "md") {
+    fontSize = [4, 4, 4, 5];
+    fontFamily = "body";
+    letterSpacing = "body";
+    lineHeight = [1.2];
+  }
+  if (size === "lg") {
+    fontSize = [5, 5, 6, 7];
+    fontFamily = "heading";
+    letterSpacing = "heading";
+    lineHeight = [1.2, 1.2, 1.25, 1.25];
+  }
+  if (size === "xl") {
+    fontSize = [6, 7, 8, 9];
+    fontFamily = "heading";
+    letterSpacing = "heading";
+    lineHeight = [1.25];
+  }
+  return { fontSize, fontFamily, letterSpacing, lineHeight };
+};
+var get_size_styles_default = getSizeStyles;
+
+// src/button.tsx
+var hasHoverProp = (comp) => {
+  if (comp == null) return false;
+  const isObjectOrFunction = typeof comp === "object" || typeof comp === "function";
+  return isObjectOrFunction && "hover" in comp;
+};
+var Button = (_a, ref) => {
+  var _b = _a, {
+    size = "sm",
+    prefix,
+    suffix,
+    inverted,
+    sx: sx4,
+    children,
+    align,
+    href,
+    internal
+  } = _b, props = __objRest(_b, [
+    "size",
+    "prefix",
+    "suffix",
+    "inverted",
+    "sx",
+    "children",
+    "align",
+    "href",
+    "internal"
+  ]);
+  var _b2, _c;
+  if (!["xs", "sm", "md", "lg", "xl"].includes(size)) {
+    throw new Error("Size must be xs, sm, md, lg, or xl");
+  }
+  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 = {
+    xs: {
+      margin: ["6px", "6px", "6px", "6px"],
+      height: [12, 12, 12, 13],
+      width: [12, 12, 12, 13],
+      strokeWidth: [1.5, 1.5, 1.5, 1.5],
+      offset: { transform: "translateY(0.25px)" }
+    },
+    sm: {
+      margin: ["7px", "7px", "7px", "7px"],
+      height: [13, 13, 13, 18],
+      width: [13, 13, 13, 18],
+      strokeWidth: [1.5, 1.5, 1.5, 2],
+      offset: { transform: "translateY(0.25px)" }
+    },
+    md: {
+      margin: ["8px", "8px", "8px", "8px"],
+      height: [18, 18, 18, 24],
+      width: [18, 18, 18, 24],
+      strokeWidth: [2, 2, 2, 3],
+      offset: {}
+    },
+    lg: {
+      margin: ["10px", "10px", "12px", "16px"],
+      height: [24, 24, 34, 46],
+      width: [24, 24, 34, 46],
+      strokeWidth: [3, 3, 4, 5],
+      offset: {}
+    },
+    xl: {
+      margin: ["12px", "16px", "18px", "20px"],
+      height: [34, 46, 56, 68],
+      width: [34, 46, 56, 68],
+      strokeWidth: [4, 5, 6, 7],
+      offset: {}
+    }
+  };
+  const { margin, height, width, strokeWidth, offset } = sizeConfig[size];
+  let prefixHover, suffixHover, prefixAlign, suffixAlign, prefixOffset, suffixOffset;
+  if (align) {
+    prefixAlign = align;
+    suffixAlign = align;
+  } else {
+    if (prefix && suffix) {
+      prefixAlign = "initial";
+      suffixAlign = "initial";
+    } else if (prefix) {
+      prefixAlign = "initial";
+    } else if (suffix) {
+      suffixAlign = "middle";
+    }
+  }
+  if (prefixAlign === "middle") {
+    prefixOffset = {};
+  } else {
+    prefixOffset = offset;
+  }
+  if (suffixAlign === "middle") {
+    suffixOffset = {};
+  } else {
+    suffixOffset = offset;
+  }
+  let clonedPrefix, clonedSuffix;
+  if (prefix) {
+    prefixHover = {
+      "&:hover > #prefix-span > #prefix": __spreadValues({
+        color: hoverColor
+      }, hasHoverProp(prefix.type) ? prefix.type.hover : {})
+    };
+    clonedPrefix = cloneElement(prefix, {
+      id: "prefix",
+      sx: __spreadValues({
+        position: "relative",
+        height,
+        width,
+        mr: children ? margin : [0],
+        strokeWidth,
+        verticalAlign: prefixAlign,
+        transition: "color 0.15s, transform 0.15s"
+      }, (_b2 = prefix.props) == null ? void 0 : _b2.sx)
+    });
+  }
+  if (suffix) {
+    suffixHover = {
+      "&:hover > #suffix-span >#suffix": __spreadValues({
+        color: hoverColor
+      }, hasHoverProp(suffix.type) ? suffix.type.hover : {})
+    };
+    clonedSuffix = cloneElement(suffix, {
+      id: "suffix",
+      sx: __spreadValues({
+        height,
+        width,
+        ml: children ? margin : [0],
+        strokeWidth,
+        verticalAlign: suffixAlign,
+        transition: "color 0.15s, transform 0.15s"
+      }, (_c = suffix.props) == null ? void 0 : _c.sx)
+    });
+  }
+  let sizeStyles = get_size_styles_default(size);
+  const style = __spreadValues(__spreadProps(__spreadValues({}, sizeStyles), {
+    lineHeight: 1.05,
+    border: "none",
+    background: "transparent",
+    display: "block",
+    color: baseColor,
+    padding: [0],
+    textAlign: "left",
+    cursor: "pointer",
+    width: "fit-content",
+    "@media (hover: hover) and (pointer: fine)": __spreadValues(__spreadValues({
+      "&:hover": {
+        color: hoverColor
+      }
+    }, suffixHover), prefixHover)
+  }), sxProp);
+  const Inner = /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    Box7,
+    {
+      as: "span",
+      id: "prefix-span",
+      sx: __spreadValues({ display: "inline-block" }, prefixOffset)
+    },
+    clonedPrefix
+  ), /* @__PURE__ */ React9.createElement(Box7, { as: "span", sx: { transition: "color 0.15s" } }, children), /* @__PURE__ */ React9.createElement(
+    Box7,
+    {
+      as: "span",
+      id: "suffix-span",
+      sx: __spreadValues({ display: "inline-block" }, suffixOffset)
+    },
+    clonedSuffix
+  ));
+  if (href) {
+    return /* @__PURE__ */ React9.createElement(
+      link_default,
+      __spreadProps(__spreadValues({
+        ref,
+        internal,
+        sx: __spreadProps(__spreadValues({}, style), {
+          textDecoration: "none"
+        })
+      }, props), {
+        href
+      }),
+      Inner
+    );
+  } else {
+    return /* @__PURE__ */ React9.createElement(
+      Box7,
+      __spreadValues({
+        ref,
+        as: "button",
+        sx: style
+      }, props),
+      Inner
+    );
+  }
+};
+var button_default = forwardRef2(
+  Button
+);
+
+// src/callout.tsx
+import React10, { forwardRef as forwardRef3 } from "react";
+import { Box as Box8 } from "theme-ui";
+import { Arrow } from "@carbonplan/icons";
+var Callout = (_a, ref) => {
+  var _b = _a, {
+    label,
+    children,
+    inverted,
+    color,
+    href,
+    internal,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "label",
+    "children",
+    "inverted",
+    "color",
+    "href",
+    "internal",
+    "sx"
+  ]);
+  const baseColor = color || (inverted ? "secondary" : "primary");
+  const hoverColor = color ? "primary" : inverted ? "primary" : "secondary";
+  const style = __spreadValues({
+    border: "none",
+    padding: [0],
+    fontSize: [3, 3, 3, 4],
+    color: baseColor,
+    background: "transparent",
+    textDecoration: "none",
+    fontFamily: "body",
+    lineHeight: "h3",
+    letterSpacing: "body",
+    width: "fit-content",
+    cursor: "pointer",
+    textAlign: "left",
+    mb: [1],
+    "@media (hover: hover) and (pointer: fine)": {
+      "&:hover > #container > #arrow": {
+        transform: "rotate(45deg)",
+        fill: hoverColor
+      },
+      "&:hover": {
+        color: hoverColor
+      }
+    }
+  }, sx4);
+  const Inner = /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Box8, { sx: { transition: "0.15s", letterSpacing: "body", pb: ["6px"] } }, children), /* @__PURE__ */ React10.createElement(
+    Box8,
+    {
+      sx: {
+        transition: "0.15s",
+        display: "inline-block",
+        textTransform: "uppercase",
+        letterSpacing: "smallcaps",
+        fontFamily: "heading",
+        fontSize: [2, 2, 2, 3]
+      }
+    },
+    label
+  ), /* @__PURE__ */ React10.createElement(
+    Box8,
+    {
+      as: "span",
+      id: "container",
+      sx: {
+        ml: [2],
+        display: "inline-block"
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      Arrow,
+      {
+        id: "arrow",
+        sx: {
+          transition: "fill 0.15s, transform 0.15s",
+          position: "relative",
+          top: ["2px"],
+          color: baseColor,
+          height: [15, 15, 15, 17],
+          width: [15, 15, 15, 17]
+        }
+      }
+    )
+  ));
+  if (href) {
+    return /* @__PURE__ */ React10.createElement(
+      link_default,
+      __spreadValues({
+        ref,
+        href,
+        internal,
+        sx: style
+      }, props),
+      Inner
+    );
+  } else {
+    return /* @__PURE__ */ React10.createElement(
+      Box8,
+      __spreadValues({
+        ref,
+        as: "button",
+        sx: style
+      }, props),
+      Inner
+    );
+  }
+};
+var callout_default = forwardRef3(
+  Callout
+);
+
+// src/caption.tsx
+import React11 from "react";
+import { Box as Box9 } from "theme-ui";
+var Caption = ({
+  as = "figcaption",
+  number,
+  children,
+  label = "figure"
+}) => {
+  return /* @__PURE__ */ React11.createElement(
+    Box9,
+    {
+      as,
+      sx: {
+        color: "secondary",
+        display: "block",
+        textAlign: "left",
+        fontSize: [2, 2, 2, 3],
+        "& a": { color: "secondary" },
+        "& a:hover": { color: "primary" },
+        "& > p": {
+          display: "inline",
+          fontSize: [2, 2, 2, 3]
+        }
+      }
+    },
+    number && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+      Box9,
+      {
+        sx: {
+          textTransform: "uppercase",
+          letterSpacing: "smallcaps",
+          display: "inline-block"
+        }
+      },
+      label,
+      " ",
+      number
+    ), " ", /* @__PURE__ */ React11.createElement(Box9, { sx: { display: "inline-block", mx: [1], pr: [1] } }, "/")),
+    children
+  );
+};
+var caption_default = Caption;
+
+// src/colorbar.tsx
+import React12, {
+  useState,
+  useEffect,
+  useRef
+} from "react";
+import {
+  Box as Box10,
+  Flex,
+  get
+} from "theme-ui";
+var styles = {
+  clim: (setClim) => {
+    return {
+      bg: "unset",
+      border: "none",
+      color: "primary",
+      px: 0,
+      fontFamily: "mono",
+      fontSize: ["9px", 0, 0, 1],
+      letterSpacing: "smallcaps",
+      textTransform: "uppercase",
+      transition: "border 0.15s",
+      // !important suffix isn't representable in CSS property types
+      userSelect: setClim ? "none !important" : "unset",
+      width: "fit-content",
+      minWidth: "fit-content"
+    };
+  }
+};
+var DIMENSIONS = {
+  width: ["10px", "16px", "16px", "17px"],
+  height: ["80px", "110px", "110px", "130px"]
+};
+var hexToRgb = (hex) => {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+    result[3],
+    16
+  )}` : null;
+};
+var Gradient = ({
+  colormap,
+  discrete,
+  horizontal,
+  width,
+  height
+}) => {
+  const hasColors = colormap.length > 0;
+  const step = hasColors ? 1 / colormap.length * 100 : 0;
+  const firstColor = colormap[0];
+  const isHex = typeof firstColor === "string" && firstColor.startsWith("#");
+  const values = colormap.map((color, i) => {
+    const normalizedColor = String(color);
+    const rgbColor = isHex ? hexToRgb(normalizedColor) : normalizedColor;
+    const position = `${i * step}% ${discrete && i < colormap.length - 1 ? `${(i + 1) * step}%` : ""}`;
+    return `rgb(${rgbColor}) ${position}`;
+  });
+  const css = values.length > 0 ? `linear-gradient(to ${horizontal ? "right" : "top"}, ${values.join(
+    ","
+  )})` : "none";
+  return /* @__PURE__ */ React12.createElement(
+    Box10,
+    {
+      sx: __spreadProps(__spreadValues({}, horizontal ? {
+        width: width || DIMENSIONS.height,
+        height: height || DIMENSIONS.width
+      } : {
+        width: width || DIMENSIONS.width,
+        minHeight: height || DIMENSIONS.height
+      }), {
+        mt: horizontal ? ["1px", "1px", "1px", 0] : 0,
+        border: (t) => `solid 1px ${get(t, "colors.hinted")}`,
+        background: css
+      })
+    }
+  );
+};
+var Label = ({
+  label,
+  units,
+  horizontal
+}) => /* @__PURE__ */ React12.createElement(
+  Box10,
+  {
+    sx: horizontal ? void 0 : {
+      width: ["13px", "17px", "17px", "19px"],
+      alignSelf: "flex-end"
+    }
+  },
+  /* @__PURE__ */ React12.createElement(
+    Box10,
+    {
+      sx: __spreadValues({
+        mb: horizontal ? 0 : ["-4px", "-4px", "-4px", "-3px"],
+        fontFamily: "mono",
+        fontSize: ["9px", 0, 0, 1],
+        letterSpacing: "smallcaps",
+        textTransform: "uppercase"
+      }, horizontal ? {} : {
+        writingMode: "vertical-rl",
+        transform: "rotate(180deg)",
+        whiteSpace: "nowrap",
+        display: "inline-block",
+        overflow: "visible"
+      })
+    },
+    label,
+    " ",
+    /* @__PURE__ */ React12.createElement(
+      Box10,
+      {
+        as: "span",
+        sx: {
+          textTransform: "none",
+          color: "secondary",
+          display: "inline-block"
+        }
+      },
+      units
+    )
+  )
+);
+var Colorbar = (_a) => {
+  var _b = _a, {
+    colormap,
+    label,
+    clim,
+    setClim,
+    setClimStep = 1,
+    discrete,
+    units,
+    width,
+    height,
+    format: format2 = (d) => d,
+    horizontal = false,
+    bottom = false,
+    sx: sx4,
+    sxClim
+  } = _b, props = __objRest(_b, [
+    "colormap",
+    "label",
+    "clim",
+    "setClim",
+    "setClimStep",
+    "discrete",
+    "units",
+    "width",
+    "height",
+    "format",
+    "horizontal",
+    "bottom",
+    "sx",
+    "sxClim"
+  ]);
+  if (!Array.isArray(colormap)) {
+    throw new Error(`expected array for colormap, got '${colormap}'.`);
+  }
+  const climRef = [useRef(), useRef()];
+  const [climMinDragging, setClimMinDragging] = useState(false);
+  const [climMaxDragging, setClimMaxDragging] = useState(false);
+  let x, y, dx, dy = 0;
+  let id = null;
+  let init2 = [0, 0];
+  let scale = setClimStep;
+  const draggingFunction = (e) => {
+    if (!setClim) return;
+    if (id === "min" && !climMinDragging) setClimMinDragging(true);
+    if (id === "max" && !climMaxDragging) setClimMaxDragging(true);
+    dx = e.pageX - x;
+    dy = e.pageY - y;
+    if (horizontal) {
+      if (id === "min")
+        setClim((prev) => [Math.min(init2[0] + dx * scale, init2[1]), prev[1]]);
+      if (id === "max")
+        setClim((prev) => [prev[0], Math.max(init2[1] + dx * scale, init2[0])]);
+    } else {
+      if (id === "min")
+        setClim((prev) => [Math.min(init2[0] - dy * scale, init2[1]), prev[1]]);
+      if (id === "max")
+        setClim((prev) => [prev[0], Math.max(init2[1] - dy * scale, init2[0])]);
+    }
+  };
+  const handleMouseDown = (e) => {
+    y = e.pageY;
+    x = e.pageX;
+    id = e.currentTarget.id;
+    init2 = clim;
+    document.body.setAttribute(
+      "style",
+      horizontal ? "cursor: ew-resize !important" : "cursor: ns-resize !important"
+    );
+    document.addEventListener("mousemove", draggingFunction);
+    const updater = () => {
+      document.body.setAttribute("style", "cursor: unset");
+      document.removeEventListener("mousemove", draggingFunction);
+      window.removeEventListener("mouseup", updater);
+      if (id === "min") setClimMinDragging(false);
+      if (id === "max") setClimMaxDragging(false);
+    };
+    window.addEventListener("mouseup", updater);
+  };
+  const increment = (e) => {
+    if (!setClim) return;
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim((prev) => [Math.min(prev[0] + scale, prev[1]), prev[1]]);
+      climRef[0].current.focus();
+    }
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim((prev) => [prev[0], Math.max(prev[1] + scale, prev[0])]);
+      climRef[1].current.focus();
+    }
+  };
+  const decrement = (e) => {
+    if (!setClim) return;
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim((prev) => [Math.min(prev[0] - scale, prev[1]), prev[1]]);
+      climRef[0].current.focus();
+    }
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim((prev) => [prev[0], Math.max(prev[1] - scale, prev[0])]);
+      climRef[1].current.focus();
+    }
+  };
+  useEffect(() => {
+    const listener = (e) => {
+      if (["ArrowUp", "ArrowRight"].includes(e.code) || ["ArrowUp", "ArrowRight"].includes(e.key)) {
+        increment(e);
+      }
+      if (["ArrowDown", "ArrowLeft"].includes(e.code) || ["ArrowDown", "ArrowLeft"].includes(e.key)) {
+        decrement(e);
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [clim]);
+  const ClimMin = () => {
+    return /* @__PURE__ */ React12.createElement(
+      Box10,
+      {
+        id: "min",
+        as: setClim ? "button" : "div",
+        ref: climRef[0],
+        tabIndex: 0,
+        sx: __spreadValues(__spreadProps(__spreadValues({}, styles.clim(setClim)), {
+          ml: label ? horizontal ? bottom ? "0px" : "10px" : ["2px", "1px", "1px", "2px"] : 0,
+          mr: horizontal ? ["2px", "1px", "1px", "2px"] : 0,
+          mb: horizontal ? 0 : ["-2px", "-2px", "-2px", "-3px"],
+          borderBottom: setClim ? (t) => `solid 1px ${get(t, "colors.primary")}` : "unset",
+          cursor: setClim ? horizontal ? "ew-resize" : "ns-resize" : "default"
+        }), sxClim),
+        onMouseDown: setClim ? handleMouseDown : () => {
+        },
+        onClick: () => {
+          var _a2;
+          return (_a2 = climRef[0].current) == null ? void 0 : _a2.focus();
+        }
+      },
+      format2(clim[0])
+    );
+  };
+  const ClimMax = () => {
+    return /* @__PURE__ */ React12.createElement(
+      Box10,
+      {
+        id: "max",
+        as: setClim ? "button" : "div",
+        ref: climRef[1],
+        tabIndex: 0,
+        sx: __spreadValues(__spreadProps(__spreadValues({}, styles.clim(setClim)), {
+          ml: horizontal ? ["2px", "1px", "1px", "2px"] : ["2px", "1px", "1px", "2px"],
+          mt: horizontal ? 0 : ["-2px", "-3px", "-3px", "-3px"],
+          borderBottom: setClim ? (t) => `solid 1px ${get(t, "colors.primary")}` : "unset",
+          cursor: setClim ? horizontal ? "ew-resize" : "ns-resize" : "default"
+        }), sxClim),
+        onMouseDown: setClim ? handleMouseDown : () => {
+        },
+        onClick: () => {
+          var _a2;
+          return (_a2 = climRef[1].current) == null ? void 0 : _a2.focus();
+        }
+      },
+      format2(clim[1])
+    );
+  };
+  return /* @__PURE__ */ React12.createElement(
+    Flex,
+    __spreadProps(__spreadValues({}, props), {
+      sx: __spreadValues({
+        flexDirection: "row",
+        alignItems: "start",
+        justifyContent: "flex-start",
+        gap: ["3px", "6px", "6px", "7px"],
+        height: !horizontal ? "100%" : "unset"
+      }, sx4)
+    }),
+    label && /* @__PURE__ */ React12.createElement(Label, { label, units, horizontal }),
+    /* @__PURE__ */ React12.createElement(
+      Flex,
+      {
+        sx: {
+          flexGrow: horizontal ? 1 : "unset",
+          flexDirection: "column",
+          ml: bottom && label ? "4px" : "0px",
+          height: !horizontal ? "100%" : "unset"
+        }
+      },
+      /* @__PURE__ */ React12.createElement(
+        Flex,
+        {
+          sx: {
+            gap: ["3px", "6px", "6px", "7px"],
+            height: !horizontal ? "100%" : "unset"
+          }
+        },
+        horizontal && clim && !bottom && /* @__PURE__ */ React12.createElement(ClimMin, null),
+        /* @__PURE__ */ React12.createElement(
+          Gradient,
+          {
+            colormap,
+            horizontal,
+            discrete,
+            width,
+            height
+          }
+        ),
+        horizontal && clim && !bottom && /* @__PURE__ */ React12.createElement(ClimMax, null)
+      ),
+      horizontal && clim && bottom && /* @__PURE__ */ React12.createElement(Flex, { sx: { justifyContent: "space-between" } }, /* @__PURE__ */ React12.createElement(ClimMin, null), /* @__PURE__ */ React12.createElement(ClimMax, null))
+    ),
+    !horizontal && /* @__PURE__ */ React12.createElement(
+      Flex,
+      {
+        sx: {
+          flexDirection: "column-reverse",
+          justifyContent: "space-between",
+          height: height || DIMENSIONS.height
+        }
+      },
+      clim && /* @__PURE__ */ React12.createElement(ClimMin, null),
+      clim && /* @__PURE__ */ React12.createElement(ClimMax, null)
+    )
+  );
+};
+var colorbar_default = Colorbar;
+
+// src/colors.tsx
+var colors_exports = {};
+__export(colors_exports, {
+  Background: () => Background,
+  Blue: () => Blue,
+  Green: () => Green,
+  Grey: () => Grey,
+  Orange: () => Orange,
+  Pink: () => Pink,
+  Primary: () => Primary,
+  Purple: () => Purple,
+  Red: () => Red,
+  Secondary: () => Secondary,
+  Teal: () => Teal,
+  Yellow: () => Yellow
+});
+import React13 from "react";
+import { Box as Box11 } from "theme-ui";
+var InlineColor = (_a) => {
+  var _b = _a, { sx: sx4, color, children } = _b, props = __objRest(_b, ["sx", "color", "children"]);
+  return /* @__PURE__ */ React13.createElement(
+    Box11,
+    __spreadValues({
+      as: "span",
+      sx: __spreadValues({ display: "inline-block", color }, sx4)
+    }, props),
+    children
+  );
+};
+var Primary = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "primary" }, props));
+};
+var Secondary = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "secondary" }, props));
+};
+var Background = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "background" }, props));
+};
+var Red = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "red" }, props));
+};
+var Orange = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "orange" }, props));
+};
+var Yellow = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "yellow" }, props));
+};
+var Green = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "green" }, props));
+};
+var Teal = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "teal" }, props));
+};
+var Blue = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "blue" }, props));
+};
+var Purple = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "purple" }, props));
+};
+var Pink = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "pink" }, props));
+};
+var Grey = (props) => {
+  return /* @__PURE__ */ React13.createElement(InlineColor, __spreadValues({ color: "grey" }, props));
+};
+
+// src/custom-404.tsx
+import React32 from "react";
+import { Box as Box22 } from "theme-ui";
+import { PoopSad } from "@carbonplan/emoji";
+
+// src/layout.tsx
+import React31, { useEffect as useEffect7 } from "react";
+import { useThemeUI as useThemeUI3, Container as Container3, Flex as Flex5, Box as Box21 } from "theme-ui";
+
+// src/meta.tsx
+import React14 from "react";
+import Head from "next/head";
+import { useThemeUI } from "theme-ui";
+var Meta = ({ title, description, card, url }) => {
+  var _a, _b;
+  const { theme, colorMode } = useThemeUI();
+  if (!description) {
+    console.warn(
+      "a custom description should be used for search engine optimization"
+    );
+  }
+  if (!title) {
+    console.warn("a custom title should be used for search engine optimization");
+  }
+  const titleProp = title || "CarbonPlan";
+  const descriptionProp = description || "Improving the transparency and scientific integrity of climate solutions with open data and tools.";
+  const cardProp = card || "https://images.carbonplan.org/social/homepage.png";
+  const urlProp = url || "https://carbonplan.org";
+  return /* @__PURE__ */ React14.createElement(Head, null, /* @__PURE__ */ React14.createElement("title", null, titleProp), /* @__PURE__ */ React14.createElement("meta", { name: "description", content: descriptionProp }), /* @__PURE__ */ React14.createElement("meta", { name: "viewport", content: "initial-scale=1.0, width=device-width" }), url && /* @__PURE__ */ React14.createElement("link", { rel: "canonical", href: url }), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "alternate icon",
+      type: "image/png",
+      href: "https://images.carbonplan.org/favicon.png"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "icon",
+      type: "image/svg+xml",
+      href: "https://images.carbonplan.org/favicon.svg"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "preload",
+      href: "https://fonts.carbonplan.org/relative/relative-book-pro.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "preload",
+      href: "https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "preload",
+      href: "https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "preload",
+      href: "https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous"
+    }
+  ), /* @__PURE__ */ React14.createElement("link", { rel: "manifest", href: "https://images.carbonplan.org/manifest.json" }), /* @__PURE__ */ React14.createElement(
+    "meta",
+    {
+      name: "theme-color",
+      content: typeof ((_a = theme.colors) == null ? void 0 : _a.background) === "string" ? theme.colors.background : ""
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "meta",
+    {
+      name: "color-scheme",
+      content: colorMode === "light" ? "light" : "dark"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "mask-icon",
+      href: "https://images.carbonplan.org/safari-pinned-tab.svg",
+      color: "#000000"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "link",
+    {
+      rel: "apple-touch-icon",
+      sizes: "180x180",
+      href: "https://images.carbonplan.org/apple-touch-icon.png"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "meta",
+    {
+      name: "msapplication-TileColor",
+      content: typeof ((_b = theme.colors) == null ? void 0 : _b.background) === "string" ? theme.colors.background : ""
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "meta",
+    {
+      name: "msapplication-TileImage",
+      content: "https://images.carbonplan.org/mstile-144x144.png"
+    }
+  ), /* @__PURE__ */ React14.createElement(
+    "meta",
+    {
+      name: "msapplication-config",
+      content: "https://images.carbonplan.org/browserconfig.xml"
+    }
+  ), /* @__PURE__ */ React14.createElement("meta", { property: "og:title", content: titleProp }), /* @__PURE__ */ React14.createElement("meta", { property: "og:description", content: descriptionProp }), /* @__PURE__ */ React14.createElement("meta", { property: "og:image", content: cardProp }), /* @__PURE__ */ React14.createElement("meta", { property: "og:url", content: urlProp }), /* @__PURE__ */ React14.createElement("meta", { name: "twitter:title", content: titleProp }), /* @__PURE__ */ React14.createElement("meta", { name: "twitter:description", content: descriptionProp }), /* @__PURE__ */ React14.createElement("meta", { name: "twitter:image", content: cardProp }), /* @__PURE__ */ React14.createElement("meta", { name: "twitter:card", content: "summary_large_image" }), /* @__PURE__ */ React14.createElement("meta", { name: "format-detection", content: "telephone=no" }));
+};
+var meta_default = Meta;
+
+// src/header/header.tsx
+import React22, { useState as useState3 } from "react";
+import { default as NextLink3 } from "next/link";
+import { Box as Box14, Flex as Flex3, Container, Link as Link4 } from "theme-ui";
+
+// src/logo.tsx
+import React15 from "react";
+import { Box as Box12 } from "theme-ui";
+var Logo = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ React15.createElement(
+    Box12,
+    __spreadValues(__spreadValues({
+      as: "svg"
+    }, {
+      width: "150",
+      fill: "currentColor",
+      stroke: "none",
+      viewBox: "0 0 151.1 28.8"
+    }), props),
+    /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M9.7,20.1c-1.3-1.4-2-3.1-2-5.2c0-2.1,0.7-3.9,2-5.2c1.3-1.4,3-2,5.1-2c1.7,0,3.1,0.4,4.3,1.3\n    c1.1,0.9,1.8,2.1,2.1,3.5c0,0.1,0,0.2,0,0.3s-0.1,0.2-0.2,0.2h-2.3c-0.2,0-0.3-0.1-0.4-0.2c-0.3-0.8-0.7-1.4-1.3-1.8\n    c-0.6-0.4-1.4-0.6-2.2-0.6c-1.3,0-2.3,0.4-3,1.2c-0.8,0.8-1.1,1.9-1.1,3.4c0,1.5,0.4,2.6,1.1,3.4c0.8,0.8,1.8,1.2,3,1.2\n    c0.8,0,1.6-0.2,2.2-0.6c0.6-0.4,1.1-1,1.3-1.8c0.1-0.2,0.2-0.2,0.4-0.3H21c0.1,0,0.2,0.1,0.2,0.2c0,0.1,0,0.2,0,0.3\n    c-0.3,1.4-1,2.6-2.1,3.5c-1.1,0.9-2.5,1.3-4.3,1.3C12.7,22.1,11,21.4,9.7,20.1z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M22.5,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1\n    c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3\n    c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1C30.6,7.6,32,8.1,33,9c1,0.9,1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6\n    c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2\n    C23,20.1,22.5,19,22.5,17.6z M25.4,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9\n    c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C25.7,16.3,25.4,16.8,25.4,17.5z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M37,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.1c1-1.1,2.3-1.6,3.7-1.6\n    c0.8,0,1.7,0.1,2.5,0.4c0.2,0.1,0.3,0.3,0.3,0.5v2.2c0,0.2-0.1,0.3-0.2,0.3c0,0-0.1,0-0.2-0.1c-1.1-0.5-2-0.8-2.9-0.8\n    c-0.9,0-1.7,0.4-2.3,1.1c-0.6,0.7-0.9,1.7-0.9,3v7.3c0,0.2-0.1,0.3-0.3,0.3h-2.2C37.1,21.8,37,21.7,37,21.6z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M47.6,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3H50c0.2,0,0.3,0.1,0.3,0.3v6.5c1.3-1.1,2.7-1.6,4.3-1.6\n    c1.9,0,3.4,0.7,4.6,2c1.1,1.3,1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.8,0-3.2-0.5-4.3-1.6v1\n    c0,0.2-0.1,0.3-0.3,0.3h-2.2C47.7,21.8,47.6,21.7,47.6,21.6z M51.2,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3\n    s1.7,1.3,2.9,1.3c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3\n    C52.9,10.2,51.9,10.7,51.2,11.5z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M64.3,20.1c-1.4-1.4-2.1-3.1-2.1-5.2c0-2.1,0.7-3.9,2.1-5.2c1.4-1.4,3.1-2,5.2-2c2.1,0,3.8,0.7,5.2,2\n    c1.4,1.4,2.1,3.1,2.1,5.2c0,2.1-0.7,3.9-2.1,5.2c-1.4,1.4-3.1,2-5.2,2C67.4,22.1,65.7,21.4,64.3,20.1z M66.4,11.5\n    c-0.8,0.8-1.2,2-1.2,3.4c0,1.4,0.4,2.5,1.2,3.4s1.9,1.3,3.1,1.3c1.3,0,2.3-0.4,3.1-1.3c0.8-0.8,1.2-2,1.2-3.4\n    c0-1.4-0.4-2.5-1.2-3.4c-0.8-0.8-1.9-1.3-3.1-1.3C68.2,10.2,67.2,10.7,66.4,11.5z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M78.7,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8\n    c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1\n    c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C78.7,21.8,78.7,21.7,78.7,21.6z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M101.7,27.1V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1c1.1-1.1,2.5-1.6,4.3-1.6\n    c1.9,0,3.4,0.7,4.6,2s1.7,3.1,1.7,5.3c0,2.2-0.6,4-1.7,5.3c-1.1,1.3-2.7,2-4.6,2c-1.5,0-3-0.5-4.3-1.6v6.6c0,0.2-0.1,0.3-0.3,0.3\n    H102C101.8,27.3,101.7,27.2,101.7,27.1z M105.3,11.5c-0.7,0.9-1.1,2-1.1,3.3c0,1.4,0.4,2.5,1.1,3.3s1.7,1.3,2.9,1.3\n    c1.2,0,2.2-0.4,2.9-1.3c0.7-0.9,1.1-2,1.1-3.3c0-1.4-0.4-2.5-1.1-3.3c-0.7-0.9-1.7-1.3-2.9-1.3C107,10.2,106,10.7,105.3,11.5z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M117.2,21.6V2.7c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v18.9c0,0.2-0.1,0.3-0.3,0.3h-2.2\n    C117.3,21.8,117.2,21.7,117.2,21.6z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M122,17.6c0-1.5,0.5-2.6,1.6-3.5c1.1-0.8,2.4-1.2,4.1-1.2c1.1,0,2.4,0.2,3.7,0.6V13c0-0.9-0.3-1.6-0.8-2.1\n    c-0.5-0.5-1.2-0.8-2.2-0.8c-1.4,0-2.4,0.6-2.9,1.8c-0.1,0.2-0.2,0.2-0.4,0.2h-2.3c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0-0.3\n    c0.3-1.2,0.9-2.2,1.9-2.9c1-0.8,2.3-1.1,3.8-1.1c1.7,0,3.1,0.5,4.2,1.4s1.5,2.2,1.5,3.8V19c0,1.1,0.2,1.9,0.5,2.6\n    c0,0.1,0.1,0.1,0.1,0.1c0,0.1-0.1,0.1-0.3,0.1h-2.8c-0.2,0-0.3-0.1-0.3-0.3v-1c-1.1,1.1-2.5,1.6-4.3,1.6c-1.4,0-2.6-0.4-3.6-1.2\n    C122.5,20.1,122,19,122,17.6z M124.9,17.5c0,0.6,0.2,1.1,0.7,1.5c0.4,0.4,1.1,0.5,1.9,0.5c1.1,0,2-0.3,2.8-0.9\n    c0.8-0.6,1.1-1.5,1.1-2.6c-1.3-0.4-2.5-0.6-3.6-0.6c-0.8,0-1.5,0.2-2.1,0.5C125.2,16.3,124.9,16.8,124.9,17.5z"
+      }
+    )), /* @__PURE__ */ React15.createElement("g", null, /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M136.9,21.6V8.2c0-0.2,0.1-0.3,0.3-0.3h2.2c0.2,0,0.3,0.1,0.3,0.3v1.3c1.3-1.2,2.7-1.8,4.4-1.8\n    c1.5,0,2.7,0.4,3.5,1.3c0.8,0.9,1.3,2,1.3,3.6v9.1c0,0.2-0.1,0.3-0.3,0.3h-2.2c-0.2,0-0.3-0.1-0.3-0.3v-8.3c0-2-0.9-3.1-2.8-3.1\n    c-1.1,0-1.9,0.4-2.7,1.2c-0.7,0.8-1.1,2-1.1,3.5v6.6c0,0.2-0.1,0.3-0.3,0.3h-2.2C137,21.8,136.9,21.7,136.9,21.6z"
+      }
+    )), /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M97.6,14.9c0,4.2-0.6,8.3-1.6,12.3c0,0.1-0.1,0.2-0.2,0.2h-2.4c-0.1,0-0.2-0.1-0.2-0.3c1.1-3.9,1.7-8,1.7-12.2\n  s-0.6-8.3-1.7-12.2c0-0.1,0.1-0.3,0.2-0.3l2.4,0c0.1,0,0.2,0.1,0.2,0.2C97.1,6.5,97.6,10.6,97.6,14.9z"
+      }
+    ), /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        d: "M1.4,14.9C1.4,10.6,2,6.5,3,2.6c0-0.1,0.1-0.2,0.2-0.2l2.4,0c0.1,0,0.2,0.1,0.2,0.3c-1.1,3.9-1.7,8-1.7,12.2\n  s0.6,8.3,1.7,12.2c0,0.1-0.1,0.3-0.2,0.3H3.3c-0.1,0-0.2-0.1-0.2-0.2C2,23.2,1.4,19.1,1.4,14.9z"
+      }
+    ))
+  );
+};
+var logo_default = Logo;
+
+// src/header/menu.tsx
+import React17 from "react";
+
+// src/header/header-icon.tsx
+import React16 from "react";
+import { IconButton } from "theme-ui";
+var HeaderIcon = (_a) => {
+  var _b = _a, {
+    label = "Toggle Menu",
+    children,
+    value,
+    sx: sx4
+  } = _b, props = __objRest(_b, [
+    "label",
+    "children",
+    "value",
+    "sx"
+  ]);
+  return /* @__PURE__ */ React16.createElement(
+    IconButton,
+    __spreadValues({
+      sx: __spreadValues({
+        cursor: "pointer",
+        fill: "none",
+        strokeWidth: "2px",
+        stroke: "text",
+        ".paren": {
+          opacity: "0"
+        },
+        "@media (hover: hover) and (pointer: fine)": {
+          "&:hover .paren": {
+            opacity: "1"
+          }
+        }
+      }, sx4),
+      "aria-label": label
+    }, props),
+    !value && /* @__PURE__ */ React16.createElement(
+      "svg",
+      {
+        style: {
+          width: "50px",
+          height: "30px",
+          marginTop: "-3px",
+          flexShrink: 0
+        },
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 68 36"
+      },
+      children,
+      /* @__PURE__ */ React16.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__ */ React16.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__ */ React16.createElement(
+      "svg",
+      {
+        style: {
+          width: "50px",
+          height: "30px",
+          marginTop: "-3px",
+          flexShrink: 0
+        },
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 68 36"
+      },
+      /* @__PURE__ */ React16.createElement("line", { x1: "50.85", y1: "29.79", x2: "17.15", y2: "6.21" }),
+      /* @__PURE__ */ React16.createElement("line", { x1: "17.15", y1: "29.79", x2: "50.85", y2: "6.21" }),
+      /* @__PURE__ */ React16.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__ */ React16.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 header_icon_default = HeaderIcon;
+
+// src/header/menu.tsx
+var Menu = (props) => {
+  return /* @__PURE__ */ React17.createElement(header_icon_default, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "29.9", x2: "16", y2: "29.9" }), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "6.1", x2: "16", y2: "6.1" }), /* @__PURE__ */ React17.createElement("line", { x1: "52", y1: "18", x2: "16", y2: "18" }));
+};
+var menu_default = Menu;
+
+// src/header/navigation-menu.tsx
+import React18 from "react";
+import { default as NextLink2 } from "next/link";
+import { Link as Link2 } from "theme-ui";
+import { Arrow as Arrow2 } from "@carbonplan/icons";
+var sx = {
+  link: (current, label, first = false) => {
+    return {
+      width: "auto",
+      color: current === label ? "secondary" : "text",
+      fontSize: [6, 6, 7, 8],
+      fontFamily: "heading",
+      letterSpacing: "heading",
+      borderStyle: "solid",
+      borderColor: "muted",
+      borderWidth: "0px",
+      borderBottomWidth: "1px",
+      borderTopWidth: first ? "1px" : "0px",
+      py: [3, 3, 4, 5],
+      textDecoration: "none",
+      display: "block",
+      position: "relative",
+      transition: "color 0.15s",
+      "@media (hover: hover) and (pointer: fine)": {
+        "&:hover > #arrow": {
+          opacity: 1
+        }
+      },
+      "&:hover": {
+        color: current == label ? "secondary" : "text"
+      }
+    };
+  }
+};
+var links = [
+  { url: "about", display: "About" },
+  { url: "research", display: "Research" },
+  { url: "blog", display: "Blog" },
+  { url: "press", display: "Press" }
+];
+var HoverArrow = () => {
+  return /* @__PURE__ */ React18.createElement(
+    Arrow2,
+    {
+      id: "arrow",
+      sx: {
+        pointerEvents: "none",
+        display: "inline-block",
+        position: "absolute",
+        left: ["-60px", "-68px", "-80px", "-104px"],
+        top: ["32px", "32px", "46px", "62px"],
+        opacity: 0,
+        transition: "opacity 0.2s ease-out",
+        transform: "rotate(45deg)",
+        width: [36, 36, 48, 56],
+        height: [36, 36, 48, 56]
+      }
+    }
+  );
+};
+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__ */ React18.createElement(NextLink2, { href, passHref: true, legacyBehavior: true }, /* @__PURE__ */ React18.createElement(
+      Link2,
+      {
+        onClick: () => {
+          if (nav === url) setExpanded(false);
+        },
+        sx: sx.link(nav, url, first)
+      },
+      /* @__PURE__ */ React18.createElement(HoverArrow, null),
+      display
+    ));
+  } else {
+    return /* @__PURE__ */ React18.createElement(Link2, { href, sx: sx.link(nav, url, first) }, /* @__PURE__ */ React18.createElement(HoverArrow, null), display);
+  }
+};
+var NavigationMenu = ({ nav, mode, setExpanded }) => {
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, links.map((d, i) => /* @__PURE__ */ React18.createElement(
+    Nav,
+    {
+      key: i,
+      link: d,
+      mode,
+      nav,
+      first: i === 0,
+      setExpanded
+    }
+  )));
+};
+var navigation_menu_default = NavigationMenu;
+
+// src/header/search.tsx
+import React19 from "react";
+import { Search as SearchIcon } from "@carbonplan/icons";
+var Search = (props) => {
+  return /* @__PURE__ */ React19.createElement(header_icon_default, __spreadProps(__spreadValues({}, props), { label: "Toggle Search" }), /* @__PURE__ */ React19.createElement(SearchIcon, { width: 50, height: 30, x: 8 }));
+};
+var search_default = Search;
+
+// src/header/search-menu.tsx
+import React21, { useEffect as useEffect2, useState as useState2 } from "react";
+import { Box as Box13, Flex as Flex2, Link as Link3 } from "theme-ui";
+import { Arrow as Arrow3, RotatingArrow } from "@carbonplan/icons";
+
+// src/input.tsx
+import React20, { forwardRef as forwardRef4 } from "react";
+import { Input as ThemedInput } from "theme-ui";
+var Input = (_a, ref) => {
+  var _b = _a, { size = "sm", inverted, sx: sx4 } = _b, props = __objRest(_b, ["size", "inverted", "sx"]);
+  const defaultColor = inverted ? "secondary" : "primary";
+  const styles3 = __spreadValues(__spreadValues({
+    color: defaultColor,
+    borderColor: "secondary",
+    borderStyle: "solid",
+    borderWidth: "0px",
+    borderBottomWidth: "1px",
+    borderRadius: "0px",
+    transition: "border 0.15s",
+    width: "calc(min(15ch, 100%))",
+    p: [0],
+    py: ["2px"],
+    "input::-webkit-outer-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    "input::-webkit-inner-spin-button": {
+      WebkitAppearance: "none",
+      margin: 0
+    },
+    ":focus": {
+      borderColor: "primary"
+    },
+    ":focus-visible": {
+      outline: "none !important",
+      background: "none !important"
+    }
+  }, get_size_styles_default(size)), sx4);
+  return /* @__PURE__ */ React20.createElement(ThemedInput, __spreadProps(__spreadValues({}, props), { ref, sx: styles3 }));
+};
+var input_default = forwardRef4(Input);
+
+// src/header/search-menu.tsx
+var HoverArrow2 = ({ sx: sx4 }) => {
+  return /* @__PURE__ */ React21.createElement(
+    Arrow3,
+    {
+      id: "arrow",
+      sx: __spreadValues({
+        display: "inline-block",
+        position: "absolute",
+        right: ["4px", "-68px", "-80px", "-104px"],
+        top: [void 0, void 0, "46px", "62px"],
+        bottom: ["4px", "4px", void 0, void 0],
+        opacity: 0,
+        transition: "opacity 0.2s ease-out",
+        transform: "rotate(45deg)",
+        width: [24, 36, 48, 56],
+        height: [24, 36, 48, 56]
+      }, sx4)
+    }
+  );
+};
+var RESOURCES = [
+  {
+    label: "Carbon accounting",
+    links: []
+  },
+  {
+    label: "Climate impacts",
+    links: []
+  },
+  {
+    label: "Organization",
+    links: []
+  }
+];
+var sx2 = {
+  highlight: {
+    mb: [2, 2, 3, 3],
+    mt: [3, 3, 0, 0],
+    fontSize: [3, 3, 3, 4],
+    fontFamily: "heading",
+    letterSpacing: "smallcaps",
+    textTransform: "uppercase",
+    color: "secondary"
+  }
+};
+var SearchMenu = ({}) => {
+  const [value, setValue] = useState2("");
+  const [resources, setResources] = useState2(RESOURCES);
+  const destination = `/search?query=${value.trim()}`;
+  useEffect2(() => {
+    fetch("/resources.json").then((res) => res.json()).then((res) => {
+      if (res.length === 3 && res.every((el) => el.label && Array.isArray(el.links))) {
+        setResources(res);
+      }
+    }).catch(() => {
+      setResources(RESOURCES);
+    });
+  }, []);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(row_default, { columns: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: [6, 6, 10, 10] }, /* @__PURE__ */ React21.createElement(
+    Flex2,
+    {
+      as: "form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (value.trim()) {
+          window.location.href = destination;
+        }
+      },
+      sx: {
+        flexDirection: ["column", "column", "row", "row"],
+        gap: [0, 0, 7, 7],
+        mt: ["1px", 0, 2, "29px"],
+        position: "relative",
+        borderStyle: "solid",
+        borderColor: ["secondary", "secondary", "muted", "muted"],
+        borderWidth: "0px",
+        borderBottomWidth: "1px",
+        "@media (hover: hover) and (pointer: fine)": {
+          "&:hover  #arrow": {
+            opacity: 1
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      Box13,
+      __spreadProps(__spreadValues({
+        as: "label"
+      }, { htmlFor: "search" }), {
+        sx: {
+          color: "primary",
+          fontSize: [6, 6, 7, 8],
+          fontFamily: "heading",
+          letterSpacing: "heading",
+          py: [0, 3, 4, 5],
+          textDecoration: "none",
+          display: "block",
+          transition: "color 0.15s"
+        }
+      }),
+      "Search"
+    ),
+    /* @__PURE__ */ React21.createElement(
+      input_default,
+      {
+        id: "search",
+        size: "xl",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        sx: {
+          borderBottomWidth: 0,
+          fontSize: [4, 6, 7, 8],
+          flexShrink: 0
+        },
+        color: "secondary"
+      }
+    ),
+    /* @__PURE__ */ React21.createElement(Link3, { href: destination }, /* @__PURE__ */ React21.createElement(
+      HoverArrow2,
+      {
+        sx: {
+          opacity: value ? 1 : [1, 1, 0, 0],
+          pointerEvents: value ? "all" : "none"
+        }
+      }
+    ))
+  ))), /* @__PURE__ */ React21.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["none", "grid", "grid", "grid"] }
+    },
+    /* @__PURE__ */ React21.createElement(
+      column_default,
+      {
+        start: 1,
+        width: 5,
+        sx: { mt: [2, 2, 8, 8], mb: [1, 1, , 6, 6] }
+      },
+      /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")
+    ),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [4, 4, 5, 5], width: 3 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: [1, 1, 8, 8], width: 3, sx: { mt: [0, 4, 0, 0] } }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "md",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    )))
+  ), /* @__PURE__ */ React21.createElement(
+    row_default,
+    {
+      columns: [6, 6, 10, 10],
+      sx: { display: ["grid", "none", "none", "none"] }
+    },
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { as: "h2", variant: "styles.h3", sx: { my: 4 } }, "Popular resources"), /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    ))),
+    /* @__PURE__ */ React21.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ React21.createElement(Box13, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ React21.createElement(
+      button_default,
+      {
+        key: href,
+        href,
+        size: "xs",
+        sx: { mb: [1] },
+        suffix: /* @__PURE__ */ React21.createElement(RotatingArrow, null)
+      },
+      label
+    )))
+  ));
+};
+var search_menu_default = SearchMenu;
+
+// src/header/header.tsx
+var Header = ({ status, mode, nav, menuItems }) => {
+  const [menuExpanded, setMenuExpanded] = useState3(false);
+  const [searchExpanded, setSearchExpanded] = useState3(false);
+  const expanded = searchExpanded || menuExpanded;
+  return /* @__PURE__ */ React22.createElement(
+    row_default,
+    {
+      sx: {
+        pt: ["12px"],
+        pb: [3]
+      }
+    },
+    /* @__PURE__ */ React22.createElement(column_default, { start: [1], width: [2] }, /* @__PURE__ */ React22.createElement(
+      Box14,
+      {
+        sx: { pointerEvents: "all", display: "block", width: "fit-content" }
+      },
+      (mode == "homepage" || mode == "local") && /* @__PURE__ */ React22.createElement(NextLink3, { href: "/", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React22.createElement(
+        Link4,
+        {
+          "aria-label": "CarbonPlan Homepage",
+          sx: {
+            display: "block"
+          }
+        },
+        /* @__PURE__ */ React22.createElement(
+          logo_default,
+          {
+            id: "logo",
+            sx: {
+              cursor: "pointer",
+              color: "primary"
+            }
+          }
+        )
+      )),
+      (mode == null || mode == "remote") && /* @__PURE__ */ React22.createElement(
+        Link4,
+        {
+          href: "https://carbonplan.org",
+          "aria-label": "CarbonPlan Homepage",
+          sx: { display: "block" }
+        },
+        /* @__PURE__ */ React22.createElement(logo_default, { sx: { cursor: "pointer", color: "primary" } })
+      )
+    )),
+    /* @__PURE__ */ React22.createElement(
+      column_default,
+      {
+        start: [4, 9],
+        width: [2, 2],
+        dr: 1,
+        sx: {
+          display: [status ? "flex" : "none", "flex", "flex", "flex"],
+          alignItems: "center"
+        }
+      },
+      /* @__PURE__ */ React22.createElement(
+        Box14,
+        {
+          sx: {
+            fontSize: [1, 2, 3],
+            position: "relative",
+            top: ["-2px", "-3px", "-3px"]
+          }
+        },
+        status ? `(${status})` : ""
+      )
+    ),
+    /* @__PURE__ */ React22.createElement(
+      column_default,
+      {
+        start: [status ? 6 : 4, 6, 11, 11],
+        width: [status ? 1 : 3, 3, 2, 2],
+        sx: { zIndex: 5e3 }
+      },
+      /* @__PURE__ */ React22.createElement(Flex3, { sx: { pointerEvents: "all", justifyContent: "flex-end" } }, /* @__PURE__ */ React22.createElement(
+        Box14,
+        {
+          sx: {
+            display: [status ? "none" : "flex", "flex", "flex", "flex"],
+            mr: "18px",
+            gap: "18px",
+            opacity: expanded ? 0 : 1,
+            transition: "opacity 0.15s",
+            justifyContent: "space-between",
+            alignItems: "center"
+          }
+        },
+        menuItems
+      ), /* @__PURE__ */ React22.createElement(Flex3, { sx: { gap: 4 } }, /* @__PURE__ */ React22.createElement(
+        search_default,
+        {
+          value: searchExpanded,
+          onClick: () => {
+            setSearchExpanded(!searchExpanded);
+            !searchExpanded && setMenuExpanded(false);
+          }
+        }
+      ), /* @__PURE__ */ React22.createElement(
+        menu_default,
+        {
+          sx: {
+            flexShrink: 0,
+            mr: ["-2px"]
+          },
+          value: menuExpanded,
+          onClick: () => {
+            setMenuExpanded(!menuExpanded);
+            !menuExpanded && setSearchExpanded(false);
+          }
+        }
+      )))
+    ),
+    /* @__PURE__ */ React22.createElement(
+      Box14,
+      {
+        sx: {
+          opacity: expanded ? 1 : 0,
+          pointerEvents: expanded ? "all" : "none",
+          position: "fixed",
+          top: "0px",
+          right: "0px",
+          bottom: "0px",
+          minWidth: "0px",
+          maxHeight: "100vh",
+          width: "100vw",
+          backgroundColor: "background",
+          zIndex: 4e3,
+          pt: ["79px"],
+          transition: "opacity 0.25s"
+        }
+      },
+      /* @__PURE__ */ React22.createElement(Container, null, /* @__PURE__ */ React22.createElement(row_default, null, menuExpanded ? /* @__PURE__ */ React22.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ React22.createElement(
+        Box14,
+        {
+          as: "nav",
+          sx: {
+            display: menuExpanded ? "inherit" : "none",
+            mt: [5, 5, 5, 6]
+          }
+        },
+        /* @__PURE__ */ React22.createElement(
+          navigation_menu_default,
+          {
+            nav,
+            mode,
+            setExpanded: setMenuExpanded
+          }
+        )
+      )) : /* @__PURE__ */ React22.createElement(column_default, { start: [1, 2, 2, 2], width: [6, 6, 10, 10] }, /* @__PURE__ */ React22.createElement(search_menu_default, { setExpanded: setSearchExpanded }))))
+    )
+  );
+};
+var header_default = Header;
+
+// src/footer.tsx
+import React24, { useState as useState4, useEffect as useEffect3 } from "react";
+import { Box as Box16, Flex as Flex4, Link as Link5 } from "theme-ui";
+import { default as NextLink4 } from "next/link";
+
+// src/monogram.tsx
+import React23 from "react";
+import { Box as Box15 } from "theme-ui";
+var Monogram = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ React23.createElement(
+    Box15,
+    __spreadValues(__spreadValues({
+      as: "svg"
+    }, {
+      width: "80",
+      stroke: "none",
+      fill: "currentColor",
+      viewBox: "0 0 32 32"
+    }), props),
+    /* @__PURE__ */ React23.createElement("path", { d: "M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z" }),
+    /* @__PURE__ */ React23.createElement("path", { d: "M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4" }),
+    /* @__PURE__ */ React23.createElement("path", { d: "M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15" })
+  );
+};
+var monogram_default = Monogram;
+
+// src/footer.tsx
+var Footer = () => {
+  const [year, setYear] = useState4(null);
+  useEffect3(() => {
+    setYear((/* @__PURE__ */ new Date()).getFullYear());
+  }, []);
+  return /* @__PURE__ */ React24.createElement(
+    Box16,
+    {
+      sx: {
+        mt: [7, 7, 7, 8],
+        mb: [7, 7, 7, 8],
+        pb: [2, 1, 0, 0]
+      }
+    },
+    /* @__PURE__ */ React24.createElement(row_default, { sx: { mb: [0, 0, 4, 5] } }, /* @__PURE__ */ React24.createElement(column_default, { start: [1, 2], width: [3, 3] }, /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+      Box16,
+      {
+        sx: {
+          fontSize: [2, 2, 2, 3],
+          fontFamily: "heading",
+          letterSpacing: "mono",
+          mb: [2]
+        }
+      },
+      "EMAIL"
+    ), /* @__PURE__ */ React24.createElement(
+      Link5,
+      {
+        href: "mailto:hello@carbonplan.org",
+        sx: {
+          textDecoration: "none",
+          fontSize: [2, 2, 2, 3]
+        }
+      },
+      "hello@carbonplan.org"
+    ))), /* @__PURE__ */ React24.createElement(
+      column_default,
+      {
+        start: [5],
+        width: [1],
+        dl: 1,
+        dr: 1,
+        sx: {
+          display: ["flex", "none", "none", "none"],
+          justifyContent: ["center"]
+        }
+      },
+      /* @__PURE__ */ React24.createElement(monogram_default, { sx: { mt: ["-4px"], width: "60px", height: "60px" } })
+    ), /* @__PURE__ */ React24.createElement(column_default, { start: [1, 5, 5, 5], width: [3, 3], sx: { mt: [3, 0, 0, 0] } }, /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+      Box16,
+      {
+        sx: {
+          fontSize: [2, 2, 2, 3],
+          fontFamily: "heading",
+          letterSpacing: "mono",
+          mb: [2]
+        }
+      },
+      "NEWSLETTER"
+    ), /* @__PURE__ */ React24.createElement(
+      Link5,
+      {
+        href: "https://carbonplan.org/newsletter",
+        sx: {
+          textDecoration: "none",
+          fontSize: [2, 2, 2, 3]
+        }
+      },
+      "Subscribe"
+    ))), /* @__PURE__ */ React24.createElement(
+      column_default,
+      {
+        start: [1, 9],
+        width: [5, 4, 3, 3],
+        sx: { mt: ["42px", "42px", 0, 0], mb: [3, 3, 0, 0] }
+      },
+      /* @__PURE__ */ React24.createElement(Box16, null, /* @__PURE__ */ React24.createElement(
+        Box16,
+        {
+          sx: {
+            fontSize: [2, 2, 2, 3],
+            fontFamily: "body",
+            color: "secondary"
+          }
+        },
+        "CarbonPlan is a registered nonprofit public benefit corporation in California with 501(c)(3) status."
+      ))
+    )),
+    /* @__PURE__ */ React24.createElement(row_default, { sx: { mb: ["2px"], mt: [5, 5, 4] } }, /* @__PURE__ */ React24.createElement(
+      column_default,
+      {
+        start: [1, 1, 2, 2],
+        width: [3, 2, 3, 3],
+        sx: {
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "flex-end"]
+        }
+      },
+      /* @__PURE__ */ React24.createElement(
+        Box16,
+        {
+          sx: {
+            bottom: "0px",
+            borderStyle: "solid",
+            borderColor: "muted",
+            borderWidth: "0px",
+            borderTopWidth: "1px",
+            display: "inline-block",
+            pt: [2]
+          }
+        },
+        /* @__PURE__ */ React24.createElement(
+          Box16,
+          {
+            sx: {
+              color: "secondary",
+              fontSize: [1, 1, 1, 2],
+              fontFamily: "mono",
+              letterSpacing: "mono"
+            }
+          },
+          /* @__PURE__ */ React24.createElement(
+            Flex4,
+            {
+              sx: {
+                flexDirection: ["column", "column", "row", "row"],
+                gap: [0, 0, "10px", "12px"]
+              }
+            },
+            /* @__PURE__ */ React24.createElement(Box16, null, "(c) ", year),
+            /* @__PURE__ */ React24.createElement(Box16, null, "CARBONPLAN")
+          )
+        )
+      )
+    ), /* @__PURE__ */ React24.createElement(
+      column_default,
+      {
+        start: [4, 3, 5, 5],
+        width: [3, 3, 4, 4],
+        sx: {
+          display: "flex",
+          alignItems: ["flex-start", "flex-start", "flex-end"],
+          mt: [0, 0, 0, 0]
+        }
+      },
+      /* @__PURE__ */ React24.createElement(
+        Box16,
+        {
+          sx: {
+            bottom: "0px",
+            borderStyle: "solid",
+            borderColor: "muted",
+            borderWidth: "0px",
+            borderTopWidth: "1px",
+            pt: [2]
+          }
+        },
+        /* @__PURE__ */ React24.createElement(
+          Flex4,
+          {
+            sx: {
+              color: "secondary",
+              fontSize: [1, 1, 1, 2],
+              fontFamily: "mono",
+              letterSpacing: "mono",
+              flexDirection: ["column", "column", "row", "row"],
+              gap: [0, 0, "10px", "12px"]
+            }
+          },
+          /* @__PURE__ */ React24.createElement(NextLink4, { href: "/terms", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React24.createElement(
+            Box16,
+            {
+              as: "a",
+              sx: {
+                color: "secondary",
+                "&:hover": {
+                  color: "primary"
+                }
+              }
+            },
+            "TERMS OF USE"
+          )),
+          /* @__PURE__ */ React24.createElement(Box16, { sx: { display: ["none", "none", "initial", "initial"] } }, " / "),
+          /* @__PURE__ */ React24.createElement(NextLink4, { href: "/privacy", passHref: true, legacyBehavior: true }, /* @__PURE__ */ React24.createElement(
+            Box16,
+            {
+              as: "a",
+              sx: {
+                color: "secondary",
+                "&:hover": {
+                  color: "primary"
+                }
+              }
+            },
+            "PRIVACY POLICY"
+          ))
+        )
+      )
+    ), /* @__PURE__ */ React24.createElement(
+      column_default,
+      {
+        start: [5, 7, 9, 9],
+        width: [2, 2, 3, 3],
+        sx: { display: ["none", "initial", "initial", "initial"] }
+      },
+      /* @__PURE__ */ React24.createElement(
+        monogram_default,
+        {
+          sx: {
+            width: 80,
+            height: 80,
+            mt: [0, "-10px", 4, 5],
+            mb: ["-12px"]
+          }
+        }
+      )
+    ))
+  );
+};
+var footer_default = Footer;
+
+// src/dimmer.tsx
+import React25 from "react";
+import { IconButton as IconButton2, useColorMode } from "theme-ui";
+import { useCallback } from "react";
+import { Sun } from "@carbonplan/icons";
+var Dimmer = (_a) => {
+  var _b = _a, { sx: sx4 = {} } = _b, props = __objRest(_b, ["sx"]);
+  const [colorMode, setColorMode] = useColorMode();
+  const toggle = useCallback(() => {
+    setColorMode(colorMode === "light" ? "dark" : "light");
+  }, [colorMode]);
+  return /* @__PURE__ */ React25.createElement(
+    IconButton2,
+    __spreadValues({
+      "aria-label": "Toggle dark mode",
+      onClick: toggle,
+      role: "checkbox",
+      sx: __spreadValues({
+        width: 32,
+        height: 32,
+        display: "inline-block",
+        cursor: "pointer",
+        color: "secondary"
+      }, sx4)
+    }, props),
+    /* @__PURE__ */ React25.createElement(
+      Sun,
+      {
+        sx: {
+          strokeWidth: "1.75",
+          transition: "stroke 0.15s",
+          "@media (hover: hover) and (pointer: fine)": {
+            "&:hover": {
+              stroke: "primary"
+            }
+          }
+        }
+      }
+    )
+  );
+};
+var dimmer_default = Dimmer;
+
+// src/metadata.tsx
+import React27 from "react";
+import { Box as Box18, Text as Text2 } from "theme-ui";
+import { useState as useState5, useEffect as useEffect4 } from "react";
+
+// src/gitsha.tsx
+import React26 from "react";
+import { Box as Box17, Text, Link as Link6, useThemeUI as useThemeUI2 } from "theme-ui";
+var GitSha = () => {
+  var _a;
+  const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
+  const slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
+  const { theme } = useThemeUI2();
+  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__ */ React26.createElement(Box17, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React26.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React26.createElement(
+      Link6,
+      {
+        href,
+        sx: {
+          whiteSpace: "nowrap",
+          display: "inline-block",
+          ml: [2],
+          fontFamily: "mono",
+          letterSpacing: "body",
+          color,
+          fontSize: [1],
+          textTransform: "uppercase",
+          textDecoration: "none"
+        }
+      },
+      shortSha
+    ));
+  } else {
+    return /* @__PURE__ */ React26.createElement(Box17, { sx: { display: "inline-block", width: "87px" } }, /* @__PURE__ */ React26.createElement(Separator, { color: typeof color === "string" ? color : void 0 }), /* @__PURE__ */ React26.createElement(
+      Text,
+      {
+        sx: {
+          whiteSpace: "nowrap",
+          display: "inline-block",
+          ml: [2],
+          fontFamily: "mono",
+          letterSpacing: "body",
+          color,
+          fontSize: [1],
+          textTransform: "uppercase"
+        }
+      },
+      typeof color === "string" ? color : ""
+    ));
+  }
+};
+var Separator = ({ color = "secondary" }) => {
+  return /* @__PURE__ */ React26.createElement("svg", { fill: color, opacity: "0.8", viewBox: "0 0 24 24", width: "24", height: "24" }, /* @__PURE__ */ React26.createElement("circle", { r: 5, cx: 19, cy: 19 }));
+};
+var gitsha_default = GitSha;
+
+// src/metadata.tsx
+var Value = ({ mode }) => {
+  const [display, setDisplay] = useState5(init(mode));
+  useEffect4(() => {
+    if (mode === "mouse") {
+      const setFromEvent = (e) => {
+        const x = format(e.clientX, 4);
+        const y = format(e.clientY, 4);
+        setDisplay(`X,Y: ${x},${y}`);
+      };
+      window.addEventListener("mousemove", setFromEvent);
+      return () => {
+        window.removeEventListener("mousemove", setFromEvent);
+      };
+    }
+    if (mode === "scroll") {
+      const setFromEvent = () => {
+        const y = scrollFraction(window, document);
+        setDisplay(`SCROLL: 0.${format((y * 100).toFixed(0), 2)}`);
+      };
+      window.addEventListener("scroll", setFromEvent);
+      return () => {
+        window.removeEventListener("scroll", setFromEvent);
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ React27.createElement(
+    Text2,
+    {
+      sx: {
+        whiteSpace: "nowrap",
+        display: "inline-block",
+        mr: "-6px",
+        fontFamily: "mono",
+        letterSpacing: "body",
+        color: "secondary",
+        fontSize: [1],
+        textTransform: "uppercase"
+      }
+    },
+    display
+  );
+};
+var Metadata = ({ mode }) => {
+  return /* @__PURE__ */ React27.createElement(
+    Box18,
+    {
+      sx: {
+        userSelect: "none",
+        position: "fixed",
+        bottom: "42px",
+        right: "24px",
+        transformOrigin: "right",
+        transform: "rotate(90deg)",
+        display: ["none", "none", "initial"]
+      }
+    },
+    /* @__PURE__ */ React27.createElement(Value, { mode }),
+    /* @__PURE__ */ React27.createElement(gitsha_default, null)
+  );
+};
+function init(mode) {
+  if (mode === "mouse") {
+    return `X,Y: ${format(0, 4)},${format(0, 4)}`;
+  } else if (mode === "scroll") {
+    return `SCROLL: 0.${format(0 .toFixed(0), 2)}`;
+  } else {
+    return mode;
+  }
+}
+function format(num, pad) {
+  return num.toString().padStart(pad, "0");
+}
+function scrollFraction(window2, document2) {
+  return Math.min(window2.scrollY / (document2.body.offsetHeight - 770), 0.99);
+}
+var metadata_default = Metadata;
+
+// src/fade-in.tsx
+import React28 from "react";
+import { Box as Box19 } from "theme-ui";
+import { keyframes } from "@emotion/react";
+var fade = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+var FadeIn = (_a) => {
+  var _b = _a, {
+    duration = 300,
+    delay = 0,
+    children
+  } = _b, delegated = __objRest(_b, [
+    "duration",
+    "delay",
+    "children"
+  ]);
+  return /* @__PURE__ */ React28.createElement(
+    Box19,
+    __spreadProps(__spreadValues({}, delegated), {
+      sx: {
+        animationDuration: duration + "ms",
+        animationDelay: delay + "ms",
+        animationName: fade.toString(),
+        animationFillMode: "backwards",
+        WebkitTransform: "translateZ(0)"
+      }
+    }),
+    children
+  );
+};
+var fade_in_default = FadeIn;
+
+// src/scrollbar.tsx
+import { useEffect as useEffect5 } from "react";
+
+// src/utils/get-scrollbar-width.ts
+var getScrollbarWidth = (document2) => {
+  const outer = document2.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.width = "100px";
+  document2.body.appendChild(outer);
+  outer.style.overflow = "scroll";
+  const inner = document2.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+  const delta = outer.offsetWidth - inner.offsetWidth;
+  document2.body.removeChild(outer);
+  return delta;
+};
+var get_scrollbar_width_default = getScrollbarWidth;
+
+// src/scrollbar.tsx
+var Scrollbar = () => {
+  useEffect5(() => {
+    if (typeof document !== "undefined") {
+      const delta = get_scrollbar_width_default(document);
+      if (delta > 0) {
+        document.body.classList.add("custom-scrollbar");
+        document.getElementsByTagName("html")[0].classList.add("custom-scrollbar");
+      }
+    }
+  }, []);
+  return null;
+};
+var scrollbar_default = Scrollbar;
+
+// src/guide.tsx
+import React29, { useState as useState6, useEffect as useEffect6 } from "react";
+import { Box as Box20, Container as Container2 } from "theme-ui";
+var Guide = ({ color = "muted" }) => {
+  const [display, setDisplay] = useState6(false);
+  useEffect6(() => {
+    function handler(event) {
+      const { key, metaKey } = event;
+      if (key === ";" && metaKey) {
+        setDisplay((prev) => !prev);
+      }
+    }
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, []);
+  return /* @__PURE__ */ React29.createElement(
+    Box20,
+    {
+      sx: {
+        position: "fixed",
+        width: "100%",
+        left: 0,
+        top: 0,
+        zIndex: color === "teal" ? 5e3 : -1,
+        pointerEvents: "none",
+        display: display ? "initial" : "none"
+      }
+    },
+    /* @__PURE__ */ React29.createElement(Container2, null, /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["none", "none", "initial", "initial"] } }, /* @__PURE__ */ React29.createElement(
+      GuideColumns,
+      {
+        indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+        color
+      }
+    )), /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["none", "initial", "none", "none"] } }, /* @__PURE__ */ React29.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6, 7, 8], color })), /* @__PURE__ */ React29.createElement(Box20, { sx: { display: ["initial", "none", "none", "none"] } }, /* @__PURE__ */ React29.createElement(GuideColumns, { indices: [1, 2, 3, 4, 5, 6], color })))
+  );
+};
+var colorCycle = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
+  "purple",
+  "pink"
+];
+function GuideColumns({
+  indices,
+  color
+}) {
+  const sx4 = {
+    outerGuideColumn: {
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderLeftWidth: color === "teal" ? "0px" : "1px",
+      borderRightWidth: color === "teal" ? "0px" : "1px",
+      opacity: color === "teal" ? 0.4 : 1
+    },
+    innerGuideColumn: {
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderLeftWidth: "0px",
+      borderRightWidth: "0px",
+      opacity: color === "teal" ? 0.4 : 1
+    }
+  };
+  return /* @__PURE__ */ React29.createElement(row_default, null, indices.map((i) => {
+    return /* @__PURE__ */ React29.createElement(
+      column_default,
+      {
+        key: i,
+        start: [i],
+        width: [1, 1],
+        dl: 0.5,
+        dr: 0.5,
+        sx: __spreadValues({
+          bg: color === "teal" ? "teal" : "transparent",
+          height: "100vh"
+        }, sx4.innerGuideColumn)
+      },
+      /* @__PURE__ */ React29.createElement(
+        Box20,
+        {
+          sx: __spreadValues({
+            mx: ["12px", 3, 3, 4],
+            bg: color === "teal" ? "background" : "transparent",
+            height: "100%",
+            borderLeftColor: color === "rainbow" ? colorCycle[i % 8] : "muted",
+            borderRightColor: color === "rainbow" ? colorCycle[i % 8] : "muted"
+          }, sx4.outerGuideColumn)
+        }
+      )
+    );
+  }));
+}
+var guide_default = Guide;
+
+// src/settings.tsx
+import React30 from "react";
+var Settings = (props) => {
+  return /* @__PURE__ */ React30.createElement(header_icon_default, __spreadValues({ label: "Toggle Settings" }, props), /* @__PURE__ */ React30.createElement("line", { x1: "24", y1: "2.1", x2: "24", y2: "6.1" }), /* @__PURE__ */ React30.createElement("line", { x1: "24", y1: "24.1", x2: "24", y2: "33.9" }), /* @__PURE__ */ React30.createElement("line", { x1: "44", y1: "2.1", x2: "44", y2: "12.1" }), /* @__PURE__ */ React30.createElement("line", { x1: "44", y1: "30.1", x2: "44", y2: "33.9" }), /* @__PURE__ */ React30.createElement("circle", { cx: "24", cy: "15.1", r: "5" }), /* @__PURE__ */ React30.createElement("circle", { cx: "44", cy: "21.1", r: "5" }));
+};
+var settings_default = Settings;
+
+// src/layout.tsx
+var Layout = ({
+  title,
+  description,
+  url,
+  card,
+  children,
+  status,
+  nav,
+  settings,
+  footer = true,
+  header = true,
+  metadata = "mouse",
+  links: links2 = "remote",
+  dimmer = "bottom",
+  guide = true,
+  scrollbar = false,
+  fade: fade2 = true,
+  container = true,
+  printable = false
+}) => {
+  let content = children;
+  if (fade2) {
+    content = /* @__PURE__ */ React31.createElement(fade_in_default, { duration: 250 }, content);
+  }
+  if (container) {
+    content = /* @__PURE__ */ React31.createElement(Box21, { sx: { mb: [8, 8, 9, 10] } }, /* @__PURE__ */ React31.createElement(Container3, null, content));
+  }
+  const { theme } = useThemeUI3();
+  const hideOnPrint = printable ? {
+    "@media print": {
+      display: "none"
+    }
+  } : {};
+  useEffect7(() => {
+    var _a;
+    if (!theme) return;
+    const handler = (e) => {
+      if (e.matches && (settings == null ? void 0 : settings.value) && (settings == null ? void 0 : settings.onClick)) {
+        settings.onClick();
+      }
+    };
+    const query = window.matchMedia(
+      `(min-width: ${((_a = theme == null ? void 0 : theme.breakpoints) == null ? void 0 : _a[1]) || "64em"})`
+    );
+    query.onchange = handler;
+    return () => {
+      query.onchange = null;
+    };
+  }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
+  const menuItems = [
+    /* @__PURE__ */ React31.createElement(
+      dimmer_default,
+      {
+        key: "dimmer",
+        sx: {
+          color: "primary",
+          mt: "-2px",
+          display: [
+            "block",
+            "block",
+            dimmer === "top" ? "block" : "none",
+            dimmer === "top" ? "block" : "none"
+          ]
+        }
+      }
+    )
+  ];
+  if (settings) {
+    menuItems.push(
+      /* @__PURE__ */ React31.createElement(
+        settings_default,
+        __spreadValues({
+          key: "settings",
+          sx: { mr: ["2px"], display: ["inherit", "inherit", "none", "none"] }
+        }, settings)
+      )
+    );
+  }
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, guide && /* @__PURE__ */ React31.createElement(guide_default, { color: typeof guide === "string" ? guide : void 0 }), scrollbar && /* @__PURE__ */ React31.createElement(scrollbar_default, null), /* @__PURE__ */ React31.createElement(meta_default, { card, description, title, url }), /* @__PURE__ */ React31.createElement(
+    Flex5,
+    {
+      sx: {
+        flexDirection: "column",
+        minHeight: "100vh"
+      }
+    },
+    header && /* @__PURE__ */ React31.createElement(
+      Box21,
+      {
+        as: "header",
+        sx: __spreadValues({
+          width: "100%",
+          borderStyle: "solid",
+          borderColor: "muted",
+          borderWidth: "0px",
+          borderBottomWidth: "1px",
+          position: "sticky",
+          top: 0,
+          bg: "background",
+          height: "56px",
+          zIndex: 2e3
+        }, hideOnPrint)
+      },
+      /* @__PURE__ */ React31.createElement(Container3, null, /* @__PURE__ */ React31.createElement(
+        header_default,
+        {
+          mode: links2,
+          status,
+          nav,
+          menuItems
+        }
+      ))
+    ),
+    /* @__PURE__ */ React31.createElement(
+      Box21,
+      {
+        sx: {
+          width: "100%",
+          flex: "1 1 auto"
+        }
+      },
+      content
+    ),
+    footer && /* @__PURE__ */ React31.createElement(
+      Box21,
+      {
+        as: "footer",
+        sx: __spreadValues({
+          width: "100%",
+          borderStyle: "solid",
+          borderColor: "muted",
+          borderWidth: "0px",
+          borderTopWidth: "1px"
+        }, hideOnPrint)
+      },
+      /* @__PURE__ */ React31.createElement(Container3, null, /* @__PURE__ */ React31.createElement(footer_default, null))
+    ),
+    dimmer === "bottom" && /* @__PURE__ */ React31.createElement(
+      Box21,
+      {
+        sx: {
+          display: ["none", "none", "initial", "initial"],
+          position: ["fixed"],
+          right: [13],
+          bottom: [17, 17, 15, 15]
+        }
+      },
+      /* @__PURE__ */ React31.createElement(dimmer_default, null)
+    ),
+    metadata && /* @__PURE__ */ React31.createElement(metadata_default, { mode: typeof metadata === "string" ? metadata : "mouse" })
+  ));
+};
+var layout_default = Layout;
+
+// src/custom-404.tsx
+var Custom404 = () => {
+  return /* @__PURE__ */ React32.createElement(
+    layout_default,
+    {
+      footer: false,
+      title: "404 \u2013 CarbonPlan",
+      description: "Sorry but we can't seem to find the page you are looking for."
+    },
+    /* @__PURE__ */ React32.createElement(row_default, { sx: { mb: [5, 0, 0], pt: [0, 0, 6] } }, /* @__PURE__ */ React32.createElement(column_default, { start: [1, 1, 3, 3], width: [6, 4, 4, 4] }, /* @__PURE__ */ React32.createElement(Box22, { as: "h1", variant: "styles.h1" }, "Oops!"), /* @__PURE__ */ React32.createElement(
+      Box22,
+      {
+        sx: {
+          fontSize: [4, 4, 4, 5],
+          lineHeight: "h3",
+          mt: [3, 4, 4],
+          mb: [2, 3, 3],
+          maxWidth: ["90%", "90%", "400px"]
+        }
+      },
+      "Sorry but we can't seem to find the page you are looking for."
+    ), /* @__PURE__ */ React32.createElement(
+      Box22,
+      {
+        sx: {
+          color: "secondary",
+          fontFamily: "mono",
+          letterSpacing: "mono",
+          fontSize: [2, 2, 2, 3],
+          mt: [4, 5, 5]
+        }
+      },
+      "ERROR CODE 404"
+    )), /* @__PURE__ */ React32.createElement(column_default, { start: [2, 5, 7, 7], width: [4, 4, 4, 4] }, /* @__PURE__ */ React32.createElement(
+      Box22,
+      {
+        sx: {
+          width: ["100%"],
+          mt: [2, 4, 4, 5],
+          fill: "primary"
+        }
+      },
+      /* @__PURE__ */ React32.createElement(PoopSad, { sx: { width: "100%", height: "auto" } })
+    )))
+  );
+};
+var custom_404_default = Custom404;
+
+// src/expander.tsx
+import React33 from "react";
+import { IconButton as IconButton3 } from "theme-ui";
+var Expander = ({ value, id, onClick, sx: sx4 }) => {
+  return /* @__PURE__ */ React33.createElement(
+    IconButton3,
+    {
+      onClick,
+      id,
+      role: "checkbox",
+      "aria-checked": value,
+      "aria-label": "Expand",
+      sx: __spreadValues({
+        display: "inline-block",
+        width: 24,
+        height: 24,
+        p: [1],
+        cursor: "pointer",
+        fill: "secondary",
+        stroke: "secondary",
+        "@media (hover: hover) and (pointer: fine)": {
+          "&:hover": {
+            fill: "primary",
+            stroke: "primary"
+          }
+        }
+      }, sx4)
+    },
+    /* @__PURE__ */ React33.createElement("svg", { viewBox: "0 0 16 16" }, /* @__PURE__ */ React33.createElement(
+      "path",
+      {
+        d: "M8,0 V16 M0,8 H16",
+        style: {
+          strokeWidth: 2,
+          transition: "0.25s all",
+          transformOrigin: "8px 8px",
+          transform: value ? "rotate(45deg)" : "rotate(0deg)"
+        }
+      }
+    ))
+  );
+};
+var expander_default = Expander;
+
+// src/figure.tsx
+import React34 from "react";
+import { Box as Box23 } from "theme-ui";
+var Figure = ({ as = "figure", children, sx: sx4 }) => {
+  const childrenArray = React34.Children.toArray(children);
+  const captionElement = childrenArray.find((child) => {
+    if (!React34.isValidElement(child)) return false;
+    const type = child.type;
+    return typeof type !== "string" && "displayName" in type && (type.displayName === "FigureCaption" || type.displayName === "TableCaption");
+  });
+  const captionProps = React34.isValidElement(captionElement) ? captionElement.props : void 0;
+  const captionType = React34.isValidElement(captionElement) ? captionElement.type : void 0;
+  const elementNumber = captionProps == null ? void 0 : captionProps.number;
+  const elementType = typeof captionType !== "string" && captionType && "displayName" in captionType && captionType.displayName === "TableCaption" ? "table" : "figure";
+  const id = elementNumber ? `${elementType}-${elementNumber}` : void 0;
+  return /* @__PURE__ */ React34.createElement(
+    Box23,
+    {
+      as,
+      id,
+      sx: __spreadValues({
+        my: [6, 6, 6, 7],
+        scrollMarginTop: "60px",
+        // account for header height
+        "@media print": {
+          breakInside: "avoid"
+        }
+      }, sx4)
+    },
+    /* @__PURE__ */ React34.createElement(group_default, { spacing: [4, 4, 4, 5] }, children)
+  );
+};
+var figure_default = Figure;
+
+// src/figure-caption.tsx
+import React35 from "react";
+var FigureCaption = ({
+  as = "figcaption",
+  number,
+  children
+}) => {
+  return /* @__PURE__ */ React35.createElement(caption_default, { as, number, label: "figure" }, children);
+};
+FigureCaption.displayName = "FigureCaption";
+var figure_caption_default = FigureCaption;
+
+// src/filter.tsx
+import React37, { useMemo } from "react";
+import { Box as Box25 } from "theme-ui";
+
+// src/tag.tsx
+import React36 from "react";
+import { Box as Box24 } from "theme-ui";
+var Tag = (_a) => {
+  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__ */ React36.createElement(
+    Box24,
+    __spreadValues({
+      as: isClickable ? "button" : "span",
+      role: "checkbox",
+      "aria-checked": value,
+      "aria-label": label,
+      sx: __spreadValues({
+        display: "inline-block",
+        fontSize: [1, 1, 1, 2],
+        fontFamily: "mono",
+        letterSpacing: "mono",
+        cursor: isClickable ? "pointer" : "inherit",
+        color,
+        backgroundColor: "transparent",
+        borderStyle: "solid",
+        borderColor: color,
+        lineHeight: "body",
+        borderWidth: "0px",
+        borderBottomWidth: "1px",
+        textTransform: "uppercase",
+        userSelect: "none",
+        transition: "opacity 0.05s",
+        pt: ["1px"],
+        pb: ["2px"],
+        px: [0],
+        m: [0],
+        opacity: value == null || value ? 1 : color === "primary" ? 0.24 : 0.33
+      }, sx4)
+    }, props),
+    children
+  );
+};
+var tag_default = Tag;
+
+// src/filter.tsx
+var sx3 = {
+  label: {
+    fontFamily: "mono",
+    letterSpacing: "mono",
+    fontSize: [1, 1, 1, 2],
+    color: "secondary",
+    userSelect: "none",
+    textTransform: "uppercase"
+  }
+};
+var duplicateOptions = (options, defaultValue, overrides = {}) => {
+  let result = __spreadValues({}, options);
+  Object.keys(options).forEach((key) => {
+    result[key] = !!overrides[key] || defaultValue;
+  });
+  return result;
+};
+var isAll = (option) => {
+  return Object.keys(option).filter((d) => option[d]).length === Object.keys(option).length;
+};
+var updateValues = ({
+  values,
+  multiSelect,
+  setValues,
+  value
+}) => {
+  const isAllAlreadySelected = isAll(values);
+  let updatedToggle;
+  if (value === "all") {
+    if (!isAllAlreadySelected) {
+      updatedToggle = duplicateOptions(values, true);
+    } else if (multiSelect) {
+      updatedToggle = duplicateOptions(values, false);
+    }
+  } else if (multiSelect) {
+    updatedToggle = __spreadProps(__spreadValues({}, values), { [value]: !values[value] });
+  } else {
+    updatedToggle = duplicateOptions(values, false, {
+      [value]: true
+    });
+  }
+  if (updatedToggle) {
+    setValues(updatedToggle);
+  }
+};
+var Filter = (_a) => {
+  var _b = _a, {
+    values,
+    setValues,
+    label,
+    colors,
+    order,
+    labels,
+    showAll = false,
+    multiSelect = false
+  } = _b, props = __objRest(_b, [
+    "values",
+    "setValues",
+    "label",
+    "colors",
+    "order",
+    "labels",
+    "showAll",
+    "multiSelect"
+  ]);
+  const keys = useMemo(() => {
+    if (order) {
+      return order;
+    } else {
+      return Object.keys(values);
+    }
+  }, [order, ...Object.keys(values).sort()]);
+  return /* @__PURE__ */ React37.createElement(Box25, __spreadValues({}, props), label && /* @__PURE__ */ React37.createElement(Box25, { sx: sx3.label }, label), /* @__PURE__ */ React37.createElement(Box25, { sx: { mt: label ? [3] : 0 } }, showAll && /* @__PURE__ */ React37.createElement(
+    tag_default,
+    {
+      label: "all",
+      onClick: () => updateValues({
+        values,
+        multiSelect,
+        setValues,
+        value: "all"
+      }),
+      value: isAll(values),
+      sx: { mr: [2] }
+    },
+    "All"
+  ), keys.map((d, i) => /* @__PURE__ */ React37.createElement(
+    tag_default,
+    {
+      label: String(d),
+      onClick: () => updateValues({
+        values,
+        multiSelect,
+        setValues,
+        value: d
+      }),
+      onDoubleClick: () => updateValues({
+        values,
+        multiSelect: false,
+        setValues,
+        value: d
+      }),
+      key: i,
+      value: values[d],
+      sx: {
+        width: "max-content",
+        color: colors ? colors[d] : "primary",
+        mr: [2],
+        mb: [1]
+      }
+    },
+    labels ? labels[d] : String(d)
+  ))));
+};
+var filter_default = Filter;
+
+// src/heading.tsx
+import React39 from "react";
+import { Box as Box27 } from "theme-ui";
+
+// src/sidenote.tsx
+import React38 from "react";
+import { Box as Box26 } from "theme-ui";
+var Sidenote = ({ children, variant = "h1" }) => {
+  let mt;
+  if (variant === "h1") mt = [4, "27px", "42px", "54px"];
+  if (variant === "h2") mt = [4, 4, "14px", "25px"];
+  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(column_default, { start: [1, 4, 8, 8], width: [1, 1, 1, 1] }, /* @__PURE__ */ React38.createElement(
+    Box26,
+    {
+      sx: {
+        mt,
+        fontFamily: "faux",
+        letterSpacing: "faux",
+        fontSize: [2, 2, 2, 3],
+        textAlign: "right"
+      }
+    },
+    "/"
+  )), /* @__PURE__ */ React38.createElement(column_default, { start: [2, 5, 9, 9], width: [3, 3, 2, 2] }, /* @__PURE__ */ React38.createElement(
+    Box26,
+    {
+      sx: {
+        mt,
+        fontFamily: "faux",
+        letterSpacing: "faux",
+        fontSize: [2, 2, 2, 3],
+        height: ["100%", "0px", "0px", "0px"]
+      }
+    },
+    children
+  )));
+};
+var sidenote_default = Sidenote;
+
+// src/heading.tsx
+var Heading = ({
+  children,
+  sidenote,
+  variant = "h1",
+  description,
+  descriptionStart = [1, 3, 5, 5],
+  descriptionWidth = [5, 5, 5, 4],
+  sx: sx4
+}) => {
+  let titleWidth = [6, 6, 6, 6];
+  if (description) {
+    titleWidth[1] = descriptionStart[1] - 1;
+    titleWidth[2] = descriptionStart[2] - 2;
+    titleWidth[3] = descriptionStart[3] - 2;
+  }
+  if (!["h1", "h2"].includes(variant)) {
+    throw new Error(`variant must be 'h1' or 'h2' but got '${variant}'`);
+  }
+  return /* @__PURE__ */ React39.createElement(row_default, { sx: __spreadValues({ mt: [5, 6, 7, 8], mb: [5, 6, 7, 8] }, sx4) }, /* @__PURE__ */ React39.createElement(column_default, { start: [1, 1, 2, 2], width: titleWidth }, variant === "h1" && /* @__PURE__ */ React39.createElement(Box27, { as: "h1", variant: "styles.h1", sx: { my: [0, 0, 0, 0] } }, children), variant === "h2" && /* @__PURE__ */ React39.createElement(Box27, { as: "h2", variant: "styles.h2", sx: { my: [0, 0, 0, 0] } }, children)), sidenote && /* @__PURE__ */ React39.createElement(sidenote_default, { variant }, sidenote), description && /* @__PURE__ */ React39.createElement(column_default, { start: descriptionStart, width: descriptionWidth }, /* @__PURE__ */ React39.createElement(
+    Box27,
+    {
+      sx: {
+        mt: [4, "5px", "20px", "31px"],
+        fontSize: [2, 2, 2, 3]
+      }
+    },
+    description
+  )));
+};
+var heading_default = Heading;
+
+// src/link-group.tsx
+import React40 from "react";
+import { Flex as Flex6 } from "theme-ui";
+import { RotatingArrow as RotatingArrow2 } from "@carbonplan/icons";
+var LinkGroup = ({
+  members,
+  color,
+  inverted,
+  size = "xs",
+  rowGap = [2, 2, 2, 3],
+  columnGap = [3, 3, 3, 4],
+  direction = "horizontal",
+  sx: sx4
+}) => {
+  return /* @__PURE__ */ React40.createElement(
+    Flex6,
+    {
+      sx: __spreadValues({
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        rowGap,
+        columnGap,
+        flexWrap: "wrap"
+      }, sx4)
+    },
+    members.map((d, i) => {
+      return /* @__PURE__ */ React40.createElement(
+        button_default,
+        {
+          key: i,
+          href: d.href,
+          size,
+          sx: { color },
+          inverted,
+          suffix: /* @__PURE__ */ React40.createElement(RotatingArrow2, null)
+        },
+        d.label
+      );
+    })
+  );
+};
+var link_group_default = LinkGroup;
+
+// src/select.tsx
+import React41, { useRef as useRef2 } from "react";
+import { Box as Box28 } from "theme-ui";
+import { Arrow as Arrow4 } from "@carbonplan/icons";
+var Select = (_a) => {
+  var _b = _a, {
+    children,
+    size = "sm",
+    sx: sx4,
+    sxSelect,
+    onChange
+  } = _b, props = __objRest(_b, [
+    "children",
+    "size",
+    "sx",
+    "sxSelect",
+    "onChange"
+  ]);
+  const color = get_sx_color_default(sx4);
+  const sizeStyles = get_size_styles_default(size);
+  const ref = useRef2(null);
+  if (!["xs", "sm", "md"].includes(size)) {
+    throw new Error("Size must be xs, sm, or md");
+  }
+  const sizeConfig = {
+    xs: {
+      height: [14, 14, 14, 16],
+      width: [14, 14, 14, 14],
+      top: ["1px"],
+      ml: ["-14px", "-14px", "-14px", "-16px"]
+    },
+    sm: {
+      height: [15, 15, 15, 20],
+      width: [15, 15, 15, 20],
+      top: ["1px"],
+      ml: ["-16px", "-16px", "-16px", "-20px"]
+    },
+    md: {
+      height: [20, 20, 20, 20],
+      width: [20, 20, 20, 20],
+      top: ["2px"],
+      ml: ["-20px", "-20px", "-20px", "-20px"]
+    }
+  };
+  const { height, width, top, ml } = sizeConfig[size];
+  const pr = width.map((d) => d + 12);
+  return /* @__PURE__ */ React41.createElement(
+    Box28,
+    {
+      sx: __spreadValues({
+        display: "inline-block"
+      }, sx4)
+    },
+    /* @__PURE__ */ React41.createElement(
+      Box28,
+      __spreadValues({
+        as: "select",
+        ref,
+        onChange: (e) => {
+          var _a2;
+          (_a2 = ref.current) == null ? void 0 : _a2.blur();
+          if (onChange)
+            onChange(e);
+        },
+        sx: __spreadValues(__spreadProps(__spreadValues({}, sizeStyles), {
+          lineHeight: "normal",
+          cursor: "pointer",
+          WebkitAppearance: "none",
+          MozAppearance: "none",
+          pb: ["5px"],
+          bg: "background",
+          pr,
+          border: "none",
+          borderBottomStyle: "solid",
+          borderBottomWidth: "1px",
+          borderBottomColor: "primary",
+          borderRadius: "0px",
+          width: "fit-content",
+          color,
+          userSelect: "none",
+          "@media (hover: none) and (pointer: coarse)": {
+            "&:focus-visible": {
+              outline: "none !important",
+              background: "transparent !important"
+            }
+          }
+        }), sxSelect)
+      }, props),
+      children
+    ),
+    /* @__PURE__ */ React41.createElement(
+      Arrow4,
+      {
+        sx: {
+          width,
+          height,
+          position: "relative",
+          ml,
+          top,
+          fill: "secondary",
+          transform: "rotate(135deg)",
+          pointerEvents: "none"
+        }
+      }
+    )
+  );
+};
+var select_default = Select;
+
+// src/slider.tsx
+import React42, { forwardRef as forwardRef5 } from "react";
+import { useThemeUI as useThemeUI4, Slider as ThemeSlider } from "theme-ui";
+var Slider = (_a, ref) => {
+  var _b = _a, { sx: sx4 } = _b, props = __objRest(_b, ["sx"]);
+  const color = get_sx_color_default(sx4);
+  const {
+    theme: { rawColors: colors }
+  } = useThemeUI4();
+  return /* @__PURE__ */ React42.createElement(
+    ThemeSlider,
+    __spreadValues({
+      ref,
+      sx: __spreadValues({
+        "&::-webkit-slider-thumb": {
+          height: [22, 18, 16],
+          width: [22, 18, 16],
+          boxShadow: `0 0 0 0px ${colors == null ? void 0 : colors.secondary}`,
+          transition: "box-shadow .15s ease"
+        },
+        "&::-moz-range-thumb": {
+          height: [22, 18, 16],
+          width: [22, 18, 16],
+          boxShadow: `0 0 0 0px ${colors == null ? void 0 : colors.secondary}`,
+          transition: "box-shadow .15s ease"
+        },
+        ":focus-visible": {
+          outline: "none !important",
+          background: `${colors == null ? void 0 : colors.secondary} !important`
+        },
+        ":focus": {
+          color,
+          "&::-webkit-slider-thumb": {
+            boxShadow: `0 0 0 4px ${colors == null ? void 0 : colors.secondary}`
+          },
+          "&::-moz-range-thumb": {
+            boxShadow: `0 0 0 4px ${colors == null ? void 0 : colors.secondary}`
+          }
+        },
+        color
+      }, sx4)
+    }, props)
+  );
+};
+var slider_default = forwardRef5(Slider);
+
+// src/table.tsx
+import React43 from "react";
+import { Box as Box29 } from "theme-ui";
+var styles2 = {
+  reset: {
+    verticalAlign: "baseline",
+    border: 0,
+    outline: 0,
+    margin: 0,
+    padding: 0
+  },
+  row: {
+    borderStyle: "solid",
+    borderWidth: "0px",
+    borderTopWidth: "1px",
+    borderColor: "muted",
+    pt: [3, 3, 3, "20px"],
+    pb: [3, 3, 3, "20px"],
+    mb: ["2px"]
+  },
+  header: {
+    display: "block",
+    textTransform: "uppercase",
+    letterSpacing: "smallcaps",
+    fontFamily: "heading",
+    fontSize: [2, 2, 2, 3]
+  },
+  index: {
+    display: "block",
+    textTransform: "uppercase",
+    letterSpacing: "smallcaps",
+    fontFamily: "heading",
+    fontSize: [2, 2, 2, 3]
+  },
+  entry: {
+    display: "block",
+    fontSize: [2, 2, 2, 3],
+    fontFamily: "faux",
+    letterSpacing: "faux",
+    mb: ["1px"],
+    mt: [2, 0, 0, 0]
+  }
+};
+var Table = ({
+  data,
+  sx: sx4,
+  color,
+  header,
+  columns,
+  start,
+  width,
+  index = true,
+  borderBottom = true,
+  borderTop = true
+}) => {
+  if (!start || !columns || !width) {
+    throw new Error("Must provide columns, start, and width");
+  }
+  return /* @__PURE__ */ React43.createElement(Box29, { as: "table", sx: __spreadValues({ display: "block" }, sx4) }, /* @__PURE__ */ React43.createElement(Box29, { as: "tbody", sx: { display: "block" } }, header && /* @__PURE__ */ React43.createElement(
+    row_default,
+    {
+      as: "tr",
+      sx: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, styles2.reset), styles2.header), styles2.row), {
+        color,
+        borderTopWidth: !borderTop ? "0px" : "1px"
+      })
+    },
+    /* @__PURE__ */ React43.createElement(column_default, { as: "td", start: [1], width: columns, sx: styles2.index }, header)
+  ), data.map((row, i) => {
+    return /* @__PURE__ */ React43.createElement(
+      row_default,
+      {
+        as: "tr",
+        columns,
+        key: i,
+        sx: __spreadProps(__spreadValues(__spreadValues({}, styles2.reset), styles2.row), {
+          pb: borderBottom && i === data.length - 1 ? ["18px", "18px", "18px", "22px"] : [3, 3, 3, "20px"],
+          borderBottomWidth: borderBottom && i === data.length - 1 ? "1px" : "0px",
+          borderTopWidth: !borderTop && i === 0 && !header ? "0px" : "1px"
+        })
+      },
+      row.map((column, j) => {
+        return /* @__PURE__ */ React43.createElement(
+          column_default,
+          {
+            as: "td",
+            key: j,
+            start: start[j],
+            width: width[j],
+            sx: j === 0 && index ? __spreadValues(__spreadValues({}, styles2.reset), styles2.index) : __spreadValues(__spreadValues({}, styles2.reset), styles2.entry)
+          },
+          column
+        );
+      })
+    );
+  })));
+};
+var table_default = Table;
+
+// src/table-caption.tsx
+import React44 from "react";
+var TableCaption = ({
+  as = "figcaption",
+  number,
+  children
+}) => {
+  return /* @__PURE__ */ React44.createElement(caption_default, { as, number, label: "table" }, children);
+};
+TableCaption.displayName = "TableCaption";
+var table_caption_default = TableCaption;
+
+// src/toggle.tsx
+import React45, { forwardRef as forwardRef6 } from "react";
+import { Box as Box30 } from "theme-ui";
+import { transparentize as transparentize2 } from "@theme-ui/color";
+var Toggle = (_a, ref) => {
+  var _b = _a, { value, onClick, disabled, sx: sx4 } = _b, props = __objRest(_b, ["value", "onClick", "disabled", "sx"]);
+  const color = get_sx_color_default(sx4);
+  const active = disabled ? false : value;
+  return /* @__PURE__ */ React45.createElement(
+    Box30,
+    __spreadValues({
+      ref,
+      as: "button",
+      onClick,
+      role: "checkbox",
+      "aria-checked": active,
+      "aria-label": "Toggle",
+      sx: __spreadValues({
+        border: "none",
+        background: "none",
+        cursor: disabled ? "default" : "pointer",
+        p: [0],
+        m: [0],
+        display: "inline-block"
+      }, sx4)
+    }, props),
+    /* @__PURE__ */ React45.createElement(
+      Box30,
+      {
+        sx: {
+          width: "50px",
+          height: "20px",
+          borderRadius: "20px",
+          backgroundColor: active ? transparentize2(color, color === "primary" ? 0.5 : 0.45) : "muted",
+          position: "relative",
+          transition: "0.15s",
+          display: "inline-block"
+        }
+      },
+      /* @__PURE__ */ React45.createElement(
+        Box30,
+        {
+          sx: {
+            width: "14px",
+            height: "14px",
+            borderRadius: "7px",
+            position: "absolute",
+            left: active ? "32px" : "4px",
+            top: "3px",
+            backgroundColor: active ? color : "secondary",
+            transition: "0.15s"
+          }
+        }
+      )
+    )
+  );
+};
+var toggle_default = forwardRef6(Toggle);
+
+// src/tray.tsx
+import React46 from "react";
+import { Box as Box31 } from "theme-ui";
+var Tray = ({ expanded, sx: sx4, children }) => {
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+    Box31,
+    {
+      sx: {
+        position: "fixed",
+        top: "56px",
+        bottom: "0px",
+        left: "0px",
+        width: "calc(100vw)",
+        mt: ["56px"],
+        bg: "background",
+        zIndex: 1e3,
+        transition: "opacity 0.15s",
+        opacity: expanded ? 0.9 : 0,
+        pointerEvents: expanded ? "all" : "none"
+      }
+    }
+  ), /* @__PURE__ */ React46.createElement(
+    Box31,
+    {
+      sx: __spreadValues({
+        position: "fixed",
+        width: "calc(100vw)",
+        top: "0px",
+        mt: ["56px"],
+        pb: [6, 7, 7, 8],
+        pt: [5, 6, 7, 8],
+        bg: "background",
+        zIndex: 1100,
+        borderStyle: "solid",
+        borderColor: "muted",
+        borderWidth: "0px",
+        borderBottomWidth: "1px",
+        transition: "transform 0.15s",
+        ml: [-3, -4, -5, -6],
+        pl: [3, 4, 5, 6],
+        pr: [3, 4, 5, 6],
+        transform: expanded ? "translateY(0)" : "translateY(-100%)"
+      }, sx4)
+    },
+    /* @__PURE__ */ React46.createElement(row_default, null, /* @__PURE__ */ React46.createElement(column_default, { start: [1, 1, 1, 1], width: [6, 8, 10, 10] }, children))
+  ));
+};
+var tray_default = Tray;
+
+// src/utils/format-date.ts
+var defaultOptions = {
+  month: "short",
+  day: "numeric",
+  year: "numeric"
+};
+var formatDateElement = (date, element, option) => {
+  if (!option) {
+    return null;
+  }
+  const format2 = typeof option === "string" ? option : defaultOptions[element];
+  const result = date.toLocaleString("default", {
+    [element]: format2
+  });
+  if (format2 === "numeric" && ["day", "month"].includes(element)) {
+    return result.padStart(2, "0");
+  } else {
+    return result;
+  }
+};
+var formatDate = (date, options = defaultOptions) => {
+  var _a;
+  const d = new Date(date.replace(/-/g, "/"));
+  const month = formatDateElement(d, "month", options.month);
+  const day = formatDateElement(d, "day", options.day);
+  const year = formatDateElement(d, "year", options.year);
+  return [month, day, year].filter(Boolean).join((_a = options.separator) != null ? _a : " ");
+};
+var format_date_default = formatDate;
+
+// src/utils/use-scrollbar-class.ts
+import { useEffect as useEffect8, useState as useState7 } from "react";
+var useScrollbarClass = () => {
+  const [className, setClassName] = useState7(null);
+  useEffect8(() => {
+    if (document && get_scrollbar_width_default(document) > 0) {
+      setClassName("custom-scrollbar");
+    }
+  }, []);
+  return className;
+};
+var use_scrollbar_class_default = useScrollbarClass;
+export {
+  avatar_default as Avatar,
+  avatar_group_default as AvatarGroup,
+  badge_default as Badge,
+  blockquote_default as Blockquote,
+  button_default as Button,
+  callout_default as Callout,
+  caption_default as Caption,
+  colorbar_default as Colorbar,
+  colors_exports as Colors,
+  column_default as Column,
+  custom_404_default as Custom404,
+  dimmer_default as Dimmer,
+  expander_default as Expander,
+  fade_in_default as FadeIn,
+  figure_default as Figure,
+  figure_caption_default as FigureCaption,
+  filter_default as Filter,
+  footer_default as Footer,
+  group_default as Group,
+  guide_default as Guide,
+  header_default as Header,
+  heading_default as Heading,
+  input_default as Input,
+  layout_default as Layout,
+  link_default as Link,
+  link_group_default as LinkGroup,
+  logo_default as Logo,
+  menu_default as Menu,
+  meta_default as Meta,
+  metadata_default as Metadata,
+  monogram_default as Monogram,
+  row_default as Row,
+  scrollbar_default as Scrollbar,
+  select_default as Select,
+  settings_default as Settings,
+  sidenote_default as Sidenote,
+  slider_default as Slider,
+  table_default as Table,
+  table_caption_default as TableCaption,
+  tag_default as Tag,
+  toggle_default as Toggle,
+  tray_default as Tray,
+  format_date_default as formatDate,
+  get_scrollbar_width_default as getScrollbarWidth,
+  use_scrollbar_class_default as useScrollbarClass
+};
+//# sourceMappingURL=index.mjs.map