@carbonplan/components 11.1.3 → 11.1.4-develop.0

package/dst/index.modern.js

@@ -1,2874 +1,2 @@
-import React, { forwardRef, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
-import { Box, Link as Link$2, Flex, Grid, IconButton, Container, useColorMode, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
-import { transparentize } from '@theme-ui/color';
-import NextLink from 'next/link';
-import { Arrow, Sun } from '@carbonplan/icons';
-import { PoopSad } from '@carbonplan/emoji';
-import Head from 'next/head';
-import { keyframes } from '@emotion/react';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-const _excluded$g = ["sx", "children"];
-
-const Badge = _ref => {
-  let {
-    sx,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
-
-  const color = sx && sx.color ? sx.color : 'primary';
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    sx: _extends({
-      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]
-    }, sx)
-  }, props), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      letterSpacing: '0.02em',
-      fontFamily: 'mono',
-      mt: ['1px', '1px', '1px', '0px'],
-      px: [1, 1, 1, '5px'],
-      color: color
-    }
-  }, children));
-};
-
-const _excluded$f = ["href", "children", "internal", "tracking"];
-
-const event = ({
-  action,
-  category,
-  label,
-  value
-}) => {
-  if (typeof window.gtag !== 'function') {
-    console.warn(`Missing window.gtag, skipping analytics action: '${action}'.`);
-    return;
-  }
-
-  window.gtag('event', action, {
-    event_category: category,
-    event_label: label,
-    value: value
-  });
-};
-
-const Link = (_ref, ref) => {
-  let {
-    href,
-    children,
-    internal = false,
-    tracking = false
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-
-  if (internal || href && href.startsWith('/')) {
-    return /*#__PURE__*/React.createElement(NextLink, {
-      href: href,
-      passHref: true
-    }, /*#__PURE__*/React.createElement(Link$2, _extends({
-      ref: ref
-    }, props), children));
-  } else if (tracking) {
-    let action;
-    let category;
-
-    if (href && href.includes('pdf')) {
-      action = 'PDF';
-      category = 'download';
-    } else {
-      action = 'website';
-      category = 'external';
-    }
-
-    const track = e => {
-      event({
-        action: action,
-        category: category,
-        label: href
-      });
-    };
-
-    return /*#__PURE__*/React.createElement(Link$2, _extends({
-      ref: ref,
-      onClick: track,
-      onContextMenu: track,
-      href: href
-    }, props), children);
-  } else {
-    return /*#__PURE__*/React.createElement(Link$2, _extends({
-      ref: ref,
-      href: href
-    }, props), children);
-  }
-};
-
-var Link$1 = forwardRef(Link);
-
-const 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
-  };
-};
-
-const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
-
-const Button = (_ref, ref) => {
-  let {
-    size = 'sm',
-    prefix,
-    suffix,
-    inverted,
-    sx,
-    children,
-    align,
-    href,
-    internal,
-    tracking
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-
-  if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
-    throw new Error('Size must be xs, sm, md, lg, or xl');
-  }
-
-  let offset, margin, height, width, strokeWidth;
-  const color = sx && sx.color ? sx.color : null;
-  const baseColor = color || (inverted ? 'secondary' : 'primary');
-  const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
-
-  if (size === '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)'
-    };
-  }
-
-  if (size === '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)'
-    };
-  }
-
-  if (size === 'md') {
-    margin = ['8px', '8px', '8px', '8px'];
-    height = [18, 18, 18, 24];
-    width = [18, 18, 18, 24];
-    strokeWidth = [2, 2, 2, 3];
-  }
-
-  if (size === 'lg') {
-    margin = ['10px', '10px', '12px', '16px'];
-    height = [24, 24, 34, 46];
-    width = [24, 24, 34, 46];
-    strokeWidth = [3, 3, 4, 5];
-  }
-
-  if (size === 'xl') {
-    margin = ['12px', '16px', '18px', '20px'];
-    height = [34, 46, 56, 68];
-    width = [34, 46, 56, 68];
-    strokeWidth = [4, 5, 6, 7];
-  }
-
-  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;
-  }
-
-  if (prefix) {
-    prefixHover = {
-      '&:hover > #prefix-span > #prefix': _extends({
-        color: hoverColor
-      }, prefix.type.hover)
-    };
-    prefix = cloneElement(prefix, {
-      id: 'prefix',
-      sx: _extends({
-        position: 'relative',
-        height: height,
-        width: width,
-        mr: children ? margin : [0],
-        strokeWidth: strokeWidth,
-        verticalAlign: prefixAlign,
-        transition: 'color 0.15s, transform 0.15s'
-      }, prefix.props.sx)
-    });
-  }
-
-  if (suffix) {
-    suffixHover = {
-      '&:hover > #suffix-span >#suffix': _extends({
-        color: hoverColor
-      }, suffix.type.hover)
-    };
-    suffix = cloneElement(suffix, {
-      id: 'suffix',
-      sx: _extends({
-        height: height,
-        width: width,
-        ml: children ? margin : [0],
-        strokeWidth: strokeWidth,
-        verticalAlign: suffixAlign,
-        transition: 'color 0.15s, transform 0.15s'
-      }, suffix.props.sx)
-    });
-  }
-
-  let sizeStyles = getSizeStyles(size);
-
-  const style = _extends({}, 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)': _extends({
-      '&:hover': {
-        color: hoverColor
-      }
-    }, suffixHover, prefixHover)
-  }, sx);
-
-  const Inner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    id: "prefix-span",
-    sx: _extends({
-      display: 'inline-block'
-    }, prefixOffset)
-  }, prefix && prefix), /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    sx: {
-      transition: 'color 0.15s'
-    }
-  }, children), /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    id: "suffix-span",
-    sx: _extends({
-      display: 'inline-block'
-    }, suffixOffset)
-  }, suffix && suffix));
-
-  if (href) {
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
-      ref: ref,
-      href: href,
-      internal: internal,
-      tracking: tracking,
-      sx: _extends({}, style, {
-        textDecoration: 'none'
-      })
-    }, props), Inner);
-  } else {
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      ref: ref,
-      as: "button",
-      sx: style
-    }, props), Inner);
-  }
-};
-
-var button = forwardRef(Button);
-
-const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
-
-const Callout = (_ref, ref) => {
-  let {
-    label,
-    children,
-    inverted,
-    color,
-    href,
-    internal,
-    tracking,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-
-  const baseColor = color || (inverted ? 'secondary' : 'primary');
-  const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
-
-  const style = _extends({
-    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
-      }
-    }
-  }, sx);
-
-  const Inner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      transition: '0.15s',
-      letterSpacing: 'body',
-      pb: ['6px']
-    }
-  }, children), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      transition: '0.15s',
-      display: 'inline-block',
-      textTransform: 'uppercase',
-      letterSpacing: 'smallcaps',
-      fontFamily: 'heading',
-      fontSize: [2, 2, 2, 3]
-    }
-  }, label), /*#__PURE__*/React.createElement(Box, {
-    as: "span",
-    id: "container",
-    sx: {
-      ml: [2],
-      display: 'inline-block'
-    }
-  }, /*#__PURE__*/React.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__*/React.createElement(Link$1, _extends({
-      ref: ref,
-      href: href,
-      internal: internal,
-      tracking: tracking,
-      sx: style
-    }, props), Inner);
-  } else {
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      ref: ref,
-      as: "button",
-      sx: style
-    }, props), Inner);
-  }
-};
-
-var callout = forwardRef(Callout);
-
-const _excluded$c = ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"];
-const styles$1 = {
-  clim: setClim => {
-    return {
-      fontFamily: 'mono',
-      fontSize: ['9px', 0, 0, 1],
-      letterSpacing: 'smallcaps',
-      textTransform: 'uppercase',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          borderBottom: setClim ? ({
-            colors
-          }) => `solid 1px ${colors.primary} !important` : 'unset'
-        }
-      },
-      '&:focus': {
-        outline: 'none',
-        borderBottom: setClim ? ({
-          colors
-        }) => `solid 1px ${colors.primary} !important` : 'unset'
-      },
-      transition: 'border 0.15s',
-      userSelect: setClim ? 'none !important' : 'unset',
-      width: 'fit-content',
-      minWidth: 'fit-content'
-    };
-  }
-};
-const DIMENSIONS = {
-  width: ['10px', '16px', '16px', '17px'],
-  height: ['80px', '110px', '110px', '130px']
-};
-
-const Gradient = ({
-  colormap,
-  discrete,
-  horizontal,
-  width,
-  height
-}) => {
-  const step = 1 / colormap.length * 100;
-  const values = colormap.map((d, i) => {
-    return `rgb(${d}) ${i * step}% ${discrete && i < colormap.length - 1 ? `${(i + 1) * step}%` : ''}`;
-  });
-  const css = `linear-gradient(to ${horizontal ? 'right' : 'top'}, ${values.join(',')})`;
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: _extends({}, 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: ({
-        colors
-      }) => `solid 1px ${colors.hinted}`,
-      background: css
-    })
-  });
-};
-
-const Label = ({
-  label,
-  units,
-  horizontal
-}) => /*#__PURE__*/React.createElement(Box, {
-  sx: !horizontal && {
-    width: ['13px', '17px', '17px', '19px'],
-    alignSelf: 'flex-end'
-  }
-}, /*#__PURE__*/React.createElement(Box, {
-  sx: _extends({
-    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__*/React.createElement(Box, {
-  as: "span",
-  sx: {
-    textTransform: 'none',
-    color: 'secondary',
-    display: 'inline-block'
-  }
-}, units)));
-
-const Colorbar = _ref => {
-  let {
-    colormap,
-    label,
-    clim,
-    setClim,
-    setClimStep = 1,
-    discrete,
-    units,
-    width,
-    height,
-    format = d => d,
-    horizontal = false,
-    bottom = false,
-    sx,
-    sxClim
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-
-  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 init = [0, 0];
-  let scale = setClimStep;
-
-  const draggingFunction = e => {
-    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(init[0] + dx * scale, init[1]), prev[1]]);
-      if (id === 'max') setClim(prev => [prev[0], Math.max(init[1] + dx * scale, init[0])]);
-    } else {
-      if (id === 'min') setClim(prev => [Math.min(init[0] - dy * scale, init[1]), prev[1]]);
-      if (id === 'max') setClim(prev => [prev[0], Math.max(init[1] - dy * scale, init[0])]);
-    }
-  };
-
-  const handleMouseDown = e => {
-    y = e.pageY;
-    x = e.pageX;
-    id = e.target.id;
-    init = 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 (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 (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__*/React.createElement(Box, {
-      id: "min",
-      ref: climRef[0],
-      tabIndex: 0,
-      sx: _extends({}, styles$1.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 ? climMinDragging ? ({
-          colors
-        }) => `solid 1px ${colors.primary}` : ({
-          colors
-        }) => `solid 1px ${colors.secondary}` : 'unset',
-        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
-      }, sxClim),
-      onMouseDown: setClim ? handleMouseDown : () => {},
-      onClick: () => climRef[0].current.focus()
-    }, format(clim[0]));
-  };
-
-  const ClimMax = () => {
-    return /*#__PURE__*/React.createElement(Box, {
-      id: "max",
-      ref: climRef[1],
-      tabIndex: 0,
-      sx: _extends({}, styles$1.clim(setClim), {
-        ml: horizontal ? ['2px', '1px', '1px', '2px'] : ['2px', '1px', '1px', '2px'],
-        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
-        borderBottom: setClim ? climMaxDragging ? ({
-          colors
-        }) => `solid 1px ${colors.primary}` : ({
-          colors
-        }) => `solid 1px ${colors.secondary}` : 'unset',
-        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
-      }, sxClim),
-      onMouseDown: setClim ? handleMouseDown : () => {},
-      onClick: () => climRef[1].current.focus()
-    }, format(clim[1]));
-  };
-
-  return /*#__PURE__*/React.createElement(Flex, _extends({}, props, {
-    sx: _extends({
-      flexDirection: 'row',
-      alignItems: 'start',
-      justifyContent: 'flex-start',
-      gap: ['3px', '6px', '6px', '7px'],
-      height: !horizontal ? '100%' : 'unset'
-    }, sx)
-  }), label && /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    units: units,
-    horizontal: horizontal
-  }), /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      flexGrow: horizontal ? 1 : 'unset',
-      flexDirection: 'column',
-      ml: bottom && label ? '4px' : '0px',
-      height: !horizontal ? '100%' : 'unset'
-    }
-  }, /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      gap: ['3px', '6px', '6px', '7px'],
-      height: !horizontal ? '100%' : 'unset'
-    }
-  }, horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
-    colormap: colormap,
-    horizontal: horizontal,
-    discrete: discrete,
-    width: width,
-    height: height
-  }), horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMax, null)), horizontal && clim && bottom && /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(ClimMax, null))), !horizontal && /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      flexDirection: 'column-reverse',
-      justifyContent: 'space-between',
-      height: height || DIMENSIONS.height
-    }
-  }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
-};
-
-const _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
-
-const Column = _ref => {
-  let {
-    start,
-    width,
-    dl,
-    dr,
-    children,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-
-  start = start || 'auto';
-  width = width || 'auto';
-
-  const makeArray = input => {
-    if (input && !Array.isArray(input)) {
-      input = [input];
-    }
-
-    if (![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, d, d, d]).flat();
-    } else if (Array.isArray(input) && input.length == 2) {
-      input = input.map(d => [d, d]).flat();
-    }
-
-    return input;
-  };
-
-  start = makeArray(start);
-  width = makeArray(width);
-  const end = start.map((d, i) => {
-    if (d == 'auto') return 'auto';
-    return d + width[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__*/React.createElement(Box, _extends({}, props, {
-    sx: _extends({
-      gridColumnStart: start,
-      gridColumnEnd: end,
-      ml: ml,
-      mr: mr
-    }, sx)
-  }), children);
-};
-
-const Meta = ({
-  title,
-  description,
-  card
-}) => {
-  title = title ? title : 'carbonplan';
-  description = description ? description : 'Data and science for climate action.';
-  card = card ? card : 'https://images.carbonplan.org/social/homepage.png';
-  return /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("meta", {
-    name: "description",
-    content: description
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "viewport",
-    content: "initial-scale=1.0, width=device-width"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "canonical",
-    content: "https://carbonplan.org/"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "icon",
-    type: "image/svg+xml",
-    href: "https://images.carbonplan.org/favicon.svg"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "preload",
-    href: "https://fonts.carbonplan.org/relative/relative-book-pro.woff2",
-    as: "font",
-    type: "font/woff2",
-    crossOrigin: "anonymous"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "preload",
-    href: "https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",
-    as: "font",
-    type: "font/woff2",
-    crossOrigin: "anonymous"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "preload",
-    href: "https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",
-    as: "font",
-    type: "font/woff2",
-    crossOrigin: "anonymous"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "preload",
-    href: "https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",
-    as: "font",
-    type: "font/woff2",
-    crossOrigin: "anonymous"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "manifest",
-    href: "https://images.carbonplan.org/manifest.json"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "theme-color",
-    content: "#1b1e23"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "alternate icon",
-    type: "image/png",
-    href: "https://images.carbonplan.org/favicon.png"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "mask-icon",
-    href: "https://images.carbonplan.org/safari-pinned-tab.svg",
-    color: "#000000"
-  }), /*#__PURE__*/React.createElement("link", {
-    rel: "apple-touch-icon",
-    sizes: "180x180",
-    href: "https://images.carbonplan.org/apple-touch-icon.png"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "msapplication-TileColor",
-    content: "#1b1e23"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "msapplication-TileImage",
-    content: "https://images.carbonplan.org/mstile-144x144.png"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "msapplication-config",
-    content: "https://images.carbonplan.org/browserconfig.xml"
-  }), /*#__PURE__*/React.createElement("meta", {
-    property: "og:title",
-    content: title
-  }), /*#__PURE__*/React.createElement("meta", {
-    property: "og:description",
-    content: description
-  }), /*#__PURE__*/React.createElement("meta", {
-    property: "og:image",
-    content: card
-  }), /*#__PURE__*/React.createElement("meta", {
-    property: "og:url",
-    content: "https://carbonplan.org"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:title",
-    content: title
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:description",
-    content: description
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:image",
-    content: card
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:card",
-    content: "summary_large_image"
-  }));
-};
-
-const Logo = _ref => {
-  let props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "svg",
-    width: "150",
-    fill: "currentColor",
-    stroke: "none",
-    viewBox: "0 0 151.1 28.8"
-  }, props), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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 C52.9,10.2,51.9,10.7,51.2,11.5z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 C117.3,21.8,117.2,21.7,117.2,21.6z"
-  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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 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 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 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__*/React.createElement("g", null, /*#__PURE__*/React.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 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 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__*/React.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 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__*/React.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 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"
-  })));
-};
-
-const _excluded$a = ["children", "sx", "columns", "gap"];
-
-const Row = _ref => {
-  let {
-    children,
-    sx,
-    columns,
-    gap
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
-  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__*/React.createElement(Grid, _extends({}, props, {
-    columns: columns,
-    sx: _extends({
-      columnGap: columnGap,
-      rowGap: rowGap
-    }, sx)
-  }), children);
-};
-
-const _excluded$9 = ["value", "sx"];
-
-const Menu = _ref => {
-  let {
-    value,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    sx: _extends({
-      cursor: 'pointer',
-      fill: 'none',
-      strokeWidth: '2px',
-      stroke: 'text',
-      '.paren': {
-        opacity: '0'
-      },
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover .paren': {
-          opacity: '1'
-        }
-      }
-    }, sx),
-    "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "52",
-    y1: "29.9",
-    x2: "16",
-    y2: "29.9"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "52",
-    y1: "6.1",
-    x2: "16",
-    y2: "6.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "52",
-    y1: "18",
-    x2: "16",
-    y2: "18"
-  }), /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "50.85",
-    y1: "29.79",
-    x2: "17.15",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "17.15",
-    y1: "29.79",
-    x2: "50.85",
-    y2: "6.21"
-  }), /*#__PURE__*/React.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__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })));
-};
-
-const sx$1 = {
-  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'
-      }
-    };
-  }
-};
-const links = [{
-  url: 'about',
-  display: 'About'
-}, {
-  url: 'research',
-  display: 'Research'
-}, {
-  url: 'blog',
-  display: 'Blog'
-}, {
-  url: 'press',
-  display: 'Press'
-}];
-
-const HoverArrow = () => {
-  return /*#__PURE__*/React.createElement(Arrow, {
-    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]
-    }
-  });
-};
-
-const 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__*/React.createElement(NextLink, {
-      href: href,
-      passHref: true
-    }, /*#__PURE__*/React.createElement(Link$2, {
-      onClick: () => {
-        if (nav === url) setExpanded(false);
-      },
-      sx: sx$1.link(nav, url, first)
-    }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
-  } else {
-    return /*#__PURE__*/React.createElement(Link$2, {
-      href: href,
-      sx: sx$1.link(nav, url, first)
-    }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
-  }
-};
-
-const NavGroup = ({
-  links,
-  nav,
-  mode,
-  setExpanded
-}) => {
-  return links.map((d, i) => {
-    return /*#__PURE__*/React.createElement(Nav, {
-      key: i,
-      link: d,
-      mode: mode,
-      nav: nav,
-      first: i === 0,
-      setExpanded: setExpanded
-    });
-  });
-};
-
-const Header = ({
-  status,
-  mode,
-  nav,
-  menuItems
-}) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const toggle = e => {
-    setExpanded(!expanded);
-  };
-
-  return /*#__PURE__*/React.createElement(Row, {
-    sx: {
-      pt: ['12px'],
-      pb: [3]
-    }
-  }, /*#__PURE__*/React.createElement(Column, {
-    start: [1],
-    width: [2]
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      pointerEvents: 'all',
-      display: 'block',
-      width: 'fit-content'
-    }
-  }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React.createElement(NextLink, {
-    href: "/",
-    passHref: true
-  }, /*#__PURE__*/React.createElement(Link$2, {
-    "aria-label": "CarbonPlan Homepage",
-    sx: {
-      display: 'block'
-    }
-  }, /*#__PURE__*/React.createElement(Logo, {
-    id: "logo",
-    sx: {
-      cursor: 'pointer',
-      color: 'primary'
-    }
-  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$2, {
-    href: "https://carbonplan.org",
-    "aria-label": "CarbonPlan Homepage",
-    sx: {
-      display: 'block'
-    }
-  }, /*#__PURE__*/React.createElement(Logo, {
-    sx: {
-      cursor: 'pointer',
-      color: 'primary'
-    }
-  })))), /*#__PURE__*/React.createElement(Column, {
-    start: [4, 9],
-    width: [2, 2],
-    dr: 1,
-    sx: {
-      display: [status ? 'flex' : 'none', 'flex', 'flex', 'flex'],
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: [1, 2, 3],
-      position: 'relative',
-      top: ['-2px', '-3px', '-3px']
-    }
-  }, status ? `(${status})` : '')), /*#__PURE__*/React.createElement(Column, {
-    start: [status ? 6 : 4, 6, 11, 11],
-    width: [status ? 1 : 3, 3, 2, 2],
-    sx: {
-      zIndex: 5000
-    }
-  }, /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      pointerEvents: 'all',
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      mr: '18px',
-      gap: '18px',
-      opacity: expanded ? 0 : 1,
-      transition: 'opacity 0.15s',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, status ? null : menuItems), /*#__PURE__*/React.createElement(Menu, {
-    sx: {
-      flexShrink: 0,
-      mr: ['-2px']
-    },
-    value: expanded,
-    onClick: toggle
-  }))), /*#__PURE__*/React.createElement(Box, {
-    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: 4000,
-      pt: ['79px'],
-      transition: 'opacity 0.25s'
-    }
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-    start: [2, 4, 7, 7],
-    width: [5, 4, 5, 5]
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: "nav",
-    sx: {
-      display: expanded ? 'inherit' : 'none',
-      mt: [5, 5, 5, 6]
-    }
-  }, /*#__PURE__*/React.createElement(NavGroup, {
-    links: links,
-    nav: nav,
-    mode: mode,
-    setExpanded: setExpanded
-  })))))));
-};
-
-const Monogram = _ref => {
-  let props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: "svg",
-    width: "80",
-    stroke: "none",
-    fill: "currentColor",
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.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__*/React.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__*/React.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"
-  }));
-};
-
-const Footer = () => {
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mt: [7, 7, 7, 8],
-      mb: [7, 7, 7, 8],
-      pb: [2, 1, 0, 0]
-    }
-  }, /*#__PURE__*/React.createElement(Row, {
-    sx: {
-      mb: [0, 0, 4, 5]
-    }
-  }, /*#__PURE__*/React.createElement(Column, {
-    start: [1, 2],
-    width: [3, 3]
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: [2, 2, 2, 3],
-      fontFamily: 'heading',
-      letterSpacing: 'mono',
-      mb: [2]
-    }
-  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
-    href: "mailto:hello@carbonplan.org",
-    sx: {
-      textDecoration: 'none',
-      fontSize: [2, 2, 2, 3]
-    }
-  }, "hello@carbonplan.org"))), /*#__PURE__*/React.createElement(Column, {
-    start: [5],
-    width: [1],
-    dl: 1,
-    dr: 1,
-    sx: {
-      display: ['flex', 'none', 'none', 'none'],
-      justifyContent: ['center']
-    }
-  }, /*#__PURE__*/React.createElement(Monogram, {
-    sx: {
-      mt: ['-4px'],
-      width: '60px',
-      height: '60px'
-    }
-  })), /*#__PURE__*/React.createElement(Column, {
-    start: [1, 5, 5, 5],
-    width: [3, 3],
-    sx: {
-      mt: [3, 0, 0, 0]
-    }
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: [2, 2, 2, 3],
-      fontFamily: 'heading',
-      letterSpacing: 'mono',
-      mb: [2]
-    }
-  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
-    href: "https://twitter.com/carbonplanorg",
-    sx: {
-      textDecoration: 'none',
-      fontSize: [2, 2, 2, 3]
-    }
-  }, "@carbonplanorg"))), /*#__PURE__*/React.createElement(Column, {
-    start: [1, 9],
-    width: [5, 4, 3, 3],
-    sx: {
-      mt: ['42px', '42px', 0, 0],
-      mb: [3, 3, 0, 0]
-    }
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      fontSize: [2, 2, 2, 3],
-      fontFamily: 'body',
-      color: 'secondary'
-    }
-  }, "CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))), /*#__PURE__*/React.createElement(Row, {
-    sx: {
-      mb: ['2px'],
-      mt: [5, 5, 4]
-    }
-  }, /*#__PURE__*/React.createElement(Column, {
-    start: [1, 1, 2, 2],
-    width: [3, 2, 3, 3],
-    sx: {
-      display: 'flex',
-      alignItems: ['flex-start', 'flex-start', 'flex-end']
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      bottom: '0px',
-      borderStyle: 'solid',
-      borderColor: 'muted',
-      borderWidth: '0px',
-      borderTopWidth: '1px',
-      pt: [2]
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      color: 'secondary',
-      fontSize: [1, 1, 1, 2],
-      fontFamily: 'mono',
-      letterSpacing: 'mono'
-    }
-  }, "(c) 2021 CARBONPLAN"))), /*#__PURE__*/React.createElement(Column, {
-    start: [4, 3, 5, 5],
-    width: [2, 2, 3, 3],
-    sx: {
-      display: 'flex',
-      alignItems: ['flex-start', 'flex-start', 'flex-end'],
-      mt: [0, 0, 0, 0]
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      bottom: '0px',
-      borderStyle: 'solid',
-      borderColor: 'muted',
-      borderWidth: '0px',
-      borderTopWidth: '1px',
-      width: ['100%', 'auto', 'auto', 'auto'],
-      pt: [2]
-    }
-  }, /*#__PURE__*/React.createElement(NextLink, {
-    href: "/terms",
-    passHref: true
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: "a",
-    sx: {
-      textDecoration: 'none',
-      fontSize: [1, 1, 1, 2],
-      color: 'secondary',
-      fontFamily: 'mono',
-      letterSpacing: 'mono',
-      display: 'block'
-    }
-  }, "READ OUR TERMS")))), /*#__PURE__*/React.createElement(Column, {
-    start: [5, 7, 9, 9],
-    width: [2, 3, 3, 3],
-    sx: {
-      display: ['none', 'initial', 'initial', 'initial']
-    }
-  }, /*#__PURE__*/React.createElement(Monogram, {
-    sx: {
-      width: 80,
-      height: 80,
-      mt: [0, '-10px', 4, 5],
-      mb: ['-12px']
-    }
-  }))));
-};
-
-const _excluded$8 = ["sx"];
-
-const Dimmer = _ref => {
-  let {
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  const [colorMode, setColorMode] = useColorMode();
-  const toggle = useCallback(() => {
-    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-  }, [colorMode]);
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    "aria-label": "Toggle dark mode",
-    onClick: toggle,
-    role: "checkbox",
-    sx: _extends({
-      width: 32,
-      height: 32,
-      display: 'inline-block',
-      cursor: 'pointer',
-      color: 'secondary'
-    }, sx)
-  }, props), /*#__PURE__*/React.createElement(Sun, {
-    sx: {
-      strokeWidth: '1.75',
-      transition: 'stroke 0.15s',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          stroke: 'primary'
-        }
-      }
-    }
-  }));
-};
-
-const GitSha = () => {
-  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
-  } = useThemeUI();
-  const color = theme.rawColors.secondary;
-
-  if (sha && owner && slug) {
-    const shortSha = sha.substring(0, 7);
-    const href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
-    return /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        display: 'inline-block',
-        width: '87px'
-      }
-    }, /*#__PURE__*/React.createElement(Separator, {
-      color: color
-    }), /*#__PURE__*/React.createElement(Link$2, {
-      href: href,
-      sx: {
-        whiteSpace: 'nowrap',
-        display: 'inline-block',
-        ml: [2],
-        fontFamily: 'mono',
-        letterSpacing: 'body',
-        color: color,
-        fontSize: [1],
-        textTransform: 'uppercase',
-        textDecoration: 'none'
-      }
-    }, shortSha));
-  } else {
-    // fallback
-    return /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        display: 'inline-block',
-        width: '87px'
-      }
-    }, /*#__PURE__*/React.createElement(Separator, {
-      color: color
-    }), /*#__PURE__*/React.createElement(Text, {
-      sx: {
-        whiteSpace: 'nowrap',
-        display: 'inline-block',
-        ml: [2],
-        fontFamily: 'mono',
-        letterSpacing: 'body',
-        color: color,
-        fontSize: [1],
-        textTransform: 'uppercase'
-      }
-    }, color));
-  }
-};
-
-const Separator = ({
-  color
-}) => {
-  return /*#__PURE__*/React.createElement("svg", {
-    fill: color,
-    opacity: "0.8",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24"
-  }, /*#__PURE__*/React.createElement("circle", {
-    r: 5,
-    cx: 19,
-    cy: 19
-  }));
-};
-
-const Value = ({
-  mode
-}) => {
-  const [display, setDisplay] = useState(init(mode));
-  useEffect(() => {
-    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 = e => {
-        const y = scrollFraction(window);
-        setDisplay(`SCROLL: 0.${format((y * 100).toFixed(0), 2)}`);
-      };
-
-      window.addEventListener('scroll', setFromEvent);
-      return () => {
-        window.removeEventListener('scroll', setFromEvent);
-      };
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      whiteSpace: 'nowrap',
-      display: 'inline-block',
-      mr: '-6px',
-      fontFamily: 'mono',
-      letterSpacing: 'body',
-      color: 'secondary',
-      fontSize: [1],
-      textTransform: 'uppercase'
-    }
-  }, display);
-};
-
-const Metadata = ({
-  mode
-}) => {
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      userSelect: 'none',
-      position: 'fixed',
-      bottom: '42px',
-      right: '24px',
-      transformOrigin: 'right',
-      transform: 'rotate(90deg)',
-      display: ['none', 'none', 'initial']
-    }
-  }, /*#__PURE__*/React.createElement(Value, {
-    mode: mode
-  }), /*#__PURE__*/React.createElement(GitSha, 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(window, documnt) {
-  return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
-}
-
-const _excluded$7 = ["duration", "delay", "children"];
-const fade = keyframes({
-  from: {
-    opacity: 0
-  },
-  to: {
-    opacity: 1
-  }
-});
-
-const FadeIn = _ref => {
-  let {
-    duration = 300,
-    delay = 0,
-    children
-  } = _ref,
-      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
-    sx: {
-      animationDuration: duration + 'ms',
-      animationDelay: delay + 'ms',
-      animationName: fade.toString(),
-      animationFillMode: 'backwards'
-    }
-  }), children);
-};
-
-const getScrollbarWidth = document => {
-  const outer = document.createElement('div');
-  outer.style.visibility = 'hidden';
-  outer.style.width = '100px';
-  document.body.appendChild(outer);
-  outer.style.overflow = 'scroll';
-  const inner = document.createElement('div');
-  inner.style.width = '100%';
-  outer.appendChild(inner);
-  const delta = outer.offsetWidth - inner.offsetWidth;
-  outer.parentNode.removeChild(outer);
-  return delta;
-};
-
-const Scrollbar = () => {
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      const delta = getScrollbarWidth(document);
-
-      if (delta > 0) {
-        document.body.classList.add('custom-scrollbar');
-        document.getElementsByTagName('html')[0].classList.add('custom-scrollbar');
-      }
-    }
-  }, []);
-  return null;
-};
-
-const Guide = ({
-  color: _color = 'muted'
-}) => {
-  const [display, setDisplay] = useState(false);
-  useEffect(() => {
-    function handler(event) {
-      const {
-        key,
-        keyCode,
-        metaKey
-      } = event;
-
-      if (key === ';' && metaKey) {
-        setDisplay(prev => !prev);
-      }
-    }
-
-    document.addEventListener('keydown', handler);
-    return () => {
-      document.removeEventListener('keydown', handler);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      position: 'fixed',
-      width: '100%',
-      left: 0,
-      top: 0,
-      zIndex: _color === 'teal' ? 5000 : -1,
-      pointerEvents: 'none',
-      display: display ? 'initial' : 'none'
-    }
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: ['none', 'none', 'initial', 'initial']
-    }
-  }, /*#__PURE__*/React.createElement(GuideColumns, {
-    indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    color: _color
-  })), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: ['none', 'initial', 'none', 'none']
-    }
-  }, /*#__PURE__*/React.createElement(GuideColumns, {
-    indices: [1, 2, 3, 4, 5, 6, 7, 8],
-    color: _color
-  })), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: ['initial', 'none', 'none', 'none']
-    }
-  }, /*#__PURE__*/React.createElement(GuideColumns, {
-    indices: [1, 2, 3, 4, 5, 6],
-    color: _color
-  }))));
-};
-
-const colorCycle = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'pink'];
-
-function GuideColumns({
-  indices,
-  color
-}) {
-  const sx = {
-    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__*/React.createElement(Row, null, indices.map(i => {
-    return /*#__PURE__*/React.createElement(Column, {
-      key: i,
-      start: [i],
-      width: [1, 1],
-      dl: 0.5,
-      dr: 0.5,
-      sx: _extends({
-        bg: color === 'teal' ? 'teal' : 'transparent',
-        height: '100vh'
-      }, sx.innerGuideColumn)
-    }, /*#__PURE__*/React.createElement(Box, {
-      sx: _extends({
-        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'
-      }, sx.outerGuideColumn)
-    }));
-  }));
-}
-
-const _excluded$6 = ["value", "sx"];
-
-const Settings = _ref => {
-  let {
-    value,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    sx: _extends({
-      cursor: 'pointer',
-      fill: 'none',
-      strokeWidth: '2px',
-      stroke: 'text',
-      '.paren': {
-        opacity: '0'
-      },
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover .paren': {
-          opacity: '1'
-        }
-      }
-    }, sx),
-    "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "2.1",
-    x2: "24",
-    y2: "6.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "24.1",
-    x2: "24",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "2.1",
-    x2: "44",
-    y2: "12.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "30.1",
-    x2: "44",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "5"
-  }), /*#__PURE__*/React.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__*/React.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__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "50.85",
-    y1: "29.79",
-    x2: "17.15",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "17.15",
-    y1: "29.79",
-    x2: "50.85",
-    y2: "6.21"
-  }), /*#__PURE__*/React.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__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })));
-};
-
-const Layout = ({
-  title,
-  description,
-  card,
-  children,
-  status,
-  nav,
-  settings,
-  footer: _footer = true,
-  header: _header = true,
-  metadata: _metadata = 'mouse',
-  links: _links = 'remote',
-  dimmer: _dimmer = 'bottom',
-  guide: _guide = true,
-  scrollbar: _scrollbar = true,
-  fade: _fade = true,
-  container: _container = true
-}) => {
-  let content = children;
-
-  if (_fade) {
-    content = /*#__PURE__*/React.createElement(FadeIn, {
-      duration: 250
-    }, content);
-  }
-
-  if (_container) {
-    content = /*#__PURE__*/React.createElement(Box, {
-      sx: {
-        mb: [8, 8, 9, 10]
-      }
-    }, /*#__PURE__*/React.createElement(Container, null, content));
-  }
-
-  const {
-    theme
-  } = useThemeUI();
-  useEffect(() => {
-    if (!theme) return;
-
-    const handler = e => {
-      if (e.matches && settings != null && settings.value && settings != null && settings.onClick) {
-        settings == null ? void 0 : settings.onClick();
-      }
-    };
-
-    const query = window.matchMedia(`(min-width: ${theme.breakpoints[1]})`);
-    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__*/React.createElement(Dimmer, {
-    key: "dimmer",
-    sx: {
-      color: 'primary',
-      mt: '-2px',
-      display: ['block', 'block', _dimmer === 'top' ? 'block' : 'none', _dimmer === 'top' ? 'block' : 'none']
-    }
-  })];
-
-  if (settings) {
-    menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
-      key: "settings",
-      sx: {
-        mr: ['2px'],
-        display: ['inherit', 'inherit', 'none', 'none']
-      }
-    }, settings)));
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _guide && /*#__PURE__*/React.createElement(Guide, {
-    color: _guide
-  }), _scrollbar && /*#__PURE__*/React.createElement(Scrollbar, null), /*#__PURE__*/React.createElement(Meta, {
-    card: card,
-    description: description,
-    title: title
-  }), /*#__PURE__*/React.createElement(Flex, {
-    sx: {
-      flexDirection: 'column',
-      minHeight: '100vh'
-    }
-  }, _header && /*#__PURE__*/React.createElement(Box, {
-    as: "header",
-    sx: {
-      width: '100%',
-      borderStyle: 'solid',
-      borderColor: 'muted',
-      borderWidth: '0px',
-      borderBottomWidth: '1px',
-      position: 'sticky',
-      top: 0,
-      bg: 'background',
-      height: '56px',
-      zIndex: 2000
-    }
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
-    mode: _links,
-    status: status,
-    nav: nav,
-    menuItems: menuItems
-  }))), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: '100%',
-      flex: '1 1 auto'
-    }
-  }, content), _footer && /*#__PURE__*/React.createElement(Box, {
-    as: "footer",
-    sx: {
-      width: '100%',
-      borderStyle: 'solid',
-      borderColor: 'muted',
-      borderWidth: '0px',
-      borderTopWidth: '1px'
-    }
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Footer, null))), _dimmer === 'bottom' && /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: ['none', 'none', 'initial', 'initial'],
-      position: ['fixed'],
-      right: [13],
-      bottom: [17, 17, 15, 15]
-    }
-  }, /*#__PURE__*/React.createElement(Dimmer, null)), _metadata && /*#__PURE__*/React.createElement(Metadata, {
-    mode: _metadata
-  })));
-};
-
-const Custom404 = () => {
-  return /*#__PURE__*/React.createElement(Layout, {
-    footer: false,
-    title: '404 / carbonplan'
-  }, /*#__PURE__*/React.createElement(Row, {
-    sx: {
-      mb: [5, 0, 0],
-      pt: [0, 0, 6]
-    }
-  }, /*#__PURE__*/React.createElement(Column, {
-    start: [1, 1, 3, 3],
-    width: [6, 4, 4, 4]
-  }, /*#__PURE__*/React.createElement(Styled.h1, null, "Oops!"), /*#__PURE__*/React.createElement(Box, {
-    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__*/React.createElement(Box, {
-    sx: {
-      color: 'secondary',
-      fontFamily: 'mono',
-      letterSpacing: 'mono',
-      fontSize: [2, 2, 2, 3],
-      mt: [4, 5, 5]
-    }
-  }, "ERROR CODE 404")), /*#__PURE__*/React.createElement(Column, {
-    start: [2, 5, 7, 7],
-    width: [4, 4, 4, 4]
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: ['100%'],
-      mt: [2, 4, 4, 5],
-      fill: 'primary'
-    }
-  }, /*#__PURE__*/React.createElement(PoopSad, {
-    sx: {
-      width: '100%',
-      height: 'auto'
-    }
-  })))));
-};
-
-const Expander = ({
-  value,
-  id,
-  onClick,
-  sx
-}) => {
-  return /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClick,
-    id: id,
-    role: "checkbox",
-    "aria-checked": value,
-    "aria-label": "Expand",
-    sx: _extends({
-      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'
-        }
-      }
-    }, sx)
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M8,0 V16 M0,8 H16",
-    style: {
-      strokeWidth: 2,
-      transition: '0.25s all',
-      transformOrigin: '8px 8px',
-      transform: value ? 'rotate(45deg)' : ''
-    }
-  })));
-};
-
-const _excluded$5 = ["label", "value", "sx", "children"];
-
-const Tag = _ref => {
-  let {
-    label,
-    value,
-    sx,
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
-  const color = sx && sx.color ? sx.color : 'primary';
-  const isClickable = props && (props.onClick || props.onDoubleClick);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: isClickable ? 'button' : 'span',
-    role: "checkbox",
-    "aria-checked": value,
-    "aria-label": label,
-    sx: _extends({
-      display: 'inline-block',
-      fontSize: [1, 1, 1, 2],
-      fontFamily: 'mono',
-      letterSpacing: 'mono',
-      cursor: isClickable ? 'pointer' : 'inherit',
-      color: 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
-    }, sx)
-  }, props), children);
-};
-
-const _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
-const sx = {
-  label: {
-    fontFamily: 'mono',
-    letterSpacing: 'mono',
-    fontSize: [1, 1, 1, 2],
-    color: 'secondary',
-    userSelect: 'none',
-    textTransform: 'uppercase'
-  }
-};
-
-const duplicateOptions = (options, defaultValue, overrides = {}) => {
-  return Object.keys(options).reduce((o, key) => Object.assign(o, {
-    [key]: overrides[key] || defaultValue
-  }), {});
-};
-
-const isAll = option => {
-  return Object.keys(option).filter(d => option[d]).length == Object.keys(option).length;
-};
-
-const updateValues = ({
-  values,
-  multiSelect,
-  setValues,
-  value
-}) => {
-  const isAllAlreadySelected = isAll(values);
-  const isSelectingAll = value === 'all';
-  let updatedToggle;
-
-  if (multiSelect) {
-    if (isSelectingAll && !isAllAlreadySelected) {
-      // select all
-      updatedToggle = duplicateOptions(values, true);
-    } else if (isSelectingAll && isAllAlreadySelected) {
-      // deselect all
-      updatedToggle = duplicateOptions(values, false);
-    } else {
-      // de/select value, inherit other values
-      updatedToggle = _extends({}, values, {
-        [value]: !values[value]
-      });
-    }
-  } else {
-    if (isSelectingAll && !isAllAlreadySelected) {
-      // select all
-      updatedToggle = duplicateOptions(values, true);
-    } else if (isSelectingAll && isAllAlreadySelected) ; else {
-      // select only value
-      updatedToggle = duplicateOptions(values, false, {
-        [value]: true
-      });
-    }
-  }
-
-  if (updatedToggle) {
-    setValues(updatedToggle);
-  }
-};
-
-const Filter = _ref => {
-  let {
-    values,
-    setValues,
-    label,
-    colors,
-    showAll = false,
-    multiSelect = false
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-
-  return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
-    sx: sx.label
-  }, label), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      mt: label ? [3] : 0
-    }
-  }, showAll && /*#__PURE__*/React.createElement(Tag, {
-    onClick: () => updateValues({
-      values: values,
-      multiSelect,
-      setValues: setValues,
-      value: 'all'
-    }),
-    value: isAll(values),
-    sx: {
-      mr: [2]
-    }
-  }, "All"), Object.keys(values).map((d, i) => /*#__PURE__*/React.createElement(Tag, {
-    onClick: () => updateValues({
-      values: values,
-      multiSelect,
-      setValues: setValues,
-      value: d
-    }),
-    onDoubleClick: () => updateValues({
-      values: values,
-      multiSelect: false,
-      setValues: setValues,
-      value: d
-    }),
-    key: i,
-    value: values[d],
-    sx: {
-      width: 'max-content',
-      color: colors ? colors[d] : 'primary',
-      mr: [2],
-      mb: [1]
-    }
-  }, d))));
-};
-
-const sizes = {
-  xs: [1],
-  sm: [3],
-  md: [5],
-  lg: [7],
-  xl: [9]
-};
-
-const Group = ({
-  children,
-  direction: _direction = 'vertical',
-  spacing: _spacing = 'md'
-}) => {
-  let marginValue;
-
-  if (typeof _spacing === 'string') {
-    marginValue = sizes[_spacing];
-  } else if (typeof _spacing === 'number') {
-    marginValue = [_spacing];
-  } else if (Array.isArray(_spacing) && _spacing.every(el => typeof el === 'number')) {
-    marginValue = _spacing;
-  }
-
-  if (!marginValue) {
-    throw new Error('Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl');
-  }
-
-  if (!['horizontal', 'vertical'].includes(_direction)) {
-    throw new Error('Invalid direction value. Must be either horizontal or vertical');
-  }
-
-  const marginProperty = _direction === 'vertical' ? 'mt' : 'ml';
-  const additionalStyles = _direction === 'horizontal' ? {
-    display: 'inline-block'
-  } : {};
-  return /*#__PURE__*/React.createElement(Box, null, React.Children.map(children, (child, i) => {
-    return /*#__PURE__*/React.createElement(Box, {
-      sx: _extends({
-        [marginProperty]: i > 0 ? marginValue : 0
-      }, additionalStyles)
-    }, child);
-  }));
-};
-
-const _excluded$3 = ["size", "inverted", "sx"];
-
-const Input = (_ref, ref) => {
-  let {
-    size = 'sm',
-    inverted,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-
-  const defaultColor = inverted ? 'secondary' : 'primary';
-
-  const styles = _extends({
-    color: defaultColor,
-    borderColor: 'secondary',
-    borderStyle: 'solid',
-    borderWidth: '0px',
-    borderBottomWidth: '1px',
-    borderRadius: '0px',
-    transition: 'border 0.15s',
-    borderBottomWidth: '1px',
-    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'
-    }
-  }, getSizeStyles(size), sx);
-
-  return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
-    ref: ref,
-    sx: styles
-  }));
-};
-
-var input = forwardRef(Input);
-
-const getProps = test => props => {
-  const next = {};
-
-  for (const key in props) {
-    if (test(key || '')) next[key] = props[key];
-  }
-
-  return next;
-};
-
-const _excluded$2 = ["children", "size", "sx", "sxSelect"];
-
-const Select = _ref => {
-  let {
-    children,
-    size = 'sm',
-    sx,
-    sxSelect
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
-  const color = sx && sx.color ? sx.color : 'primary';
-  const sizeStyles = getSizeStyles(size);
-  const ref = useRef(null);
-  const {
-    onChange
-  } = props;
-  const omitOnChange = getProps(k => k !== 'onChange')(props);
-
-  if (!['xs', 'sm', 'md'].includes(size)) {
-    throw new Error('Size must be xs, sm, or md');
-  }
-
-  let pr, height, width, ml, top;
-
-  if (size === 'xs') {
-    height = [14, 14, 14, 16];
-    width = [14, 14, 14, 14];
-    top = ['1px'];
-    ml = ['-14px', '-14px', '-14px', '-16px'];
-  }
-
-  if (size === 'sm') {
-    height = [15, 15, 15, 20];
-    width = [15, 15, 15, 20];
-    top = ['1px'];
-    ml = ['-16px', '-16px', '-16px', '-20px'];
-  }
-
-  if (size === 'md') {
-    height = [20, 20, 20, 20];
-    width = [20, 20, 20, 20];
-    top = ['2px'];
-    ml = ['-20px', '-20px', '-20px', '-20px'];
-  }
-
-  pr = width.map(d => d + 12);
-  return /*#__PURE__*/React.createElement(Box, {
-    sx: _extends({
-      display: 'inline-block'
-    }, sx)
-  }, /*#__PURE__*/React.createElement(Box, _extends({
-    as: "select",
-    ref: ref,
-    onChange: e => {
-      ref.current.blur();
-      if (onChange) onChange(e);
-    },
-    sx: _extends({}, sizeStyles, {
-      lineHeight: 'normal',
-      cursor: 'pointer',
-      WebkitAppearance: 'none',
-      MozAppearance: 'none',
-      pb: ['5px'],
-      bg: 'transparent',
-      pr: pr,
-      border: 'none',
-      borderBottomStyle: 'solid',
-      borderBottomWidth: '1px',
-      borderBottomColor: 'primary',
-      borderRadius: '0px',
-      color: 'text',
-      width: 'fit-content',
-      color: color,
-      userSelect: 'none',
-      '@media (hover: none) and (pointer: coarse)': {
-        '&:focus-visible': {
-          outline: 'none !important',
-          background: 'transparent !important'
-        }
-      }
-    }, sxSelect)
-  }, omitOnChange), children), /*#__PURE__*/React.createElement(Arrow, {
-    sx: {
-      width: width,
-      height: height,
-      position: 'relative',
-      ml: ml,
-      top: top,
-      fill: 'secondary',
-      transform: 'rotate(135deg)',
-      pointerEvents: 'none'
-    }
-  }));
-};
-
-const _excluded$1 = ["sx"];
-
-const Slider = (_ref, ref) => {
-  let {
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-  const color = sx && sx.color ? sx.color : 'primary';
-  const {
-    theme: {
-      rawColors: colors
-    }
-  } = useThemeUI();
-  return /*#__PURE__*/React.createElement(Slider$1, _extends({
-    ref: ref,
-    sx: _extends({
-      '&::-webkit-slider-thumb': {
-        height: [22, 18, 16],
-        width: [22, 18, 16],
-        boxShadow: `0 0 0 0px ${colors.secondary}`,
-        transition: 'box-shadow .15s ease'
-      },
-      '&::-moz-range-thumb': {
-        height: [22, 18, 16],
-        width: [22, 18, 16],
-        boxShadow: `0 0 0 0px ${colors.secondary}`,
-        transition: 'box-shadow .15s ease'
-      },
-      ':focus-visible': {
-        outline: 'none !important',
-        background: `${colors.secondary} !important`
-      },
-      ':focus': {
-        color: color,
-        '&::-webkit-slider-thumb': {
-          boxShadow: `0 0 0 4px ${colors.secondary}`
-        },
-        '&::-moz-range-thumb': {
-          boxShadow: `0 0 0 4px ${colors.secondary}`
-        }
-      },
-      color: color
-    }, sx)
-  }, props));
-};
-
-var slider = forwardRef(Slider);
-
-const styles = {
-  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]
-  }
-};
-
-const Table = ({
-  data,
-  sx,
-  color,
-  header,
-  columns,
-  start,
-  width,
-  index: _index = true,
-  borderBottom: _borderBottom = true,
-  borderTop: _borderTop = true
-}) => {
-  if (!start || !columns || !width) {
-    throw new Error('Must provide columns, start, and width');
-  }
-
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "table",
-    sx: _extends({
-      display: 'block'
-    }, sx)
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: "tbody",
-    sx: {
-      display: 'block'
-    }
-  }, header && /*#__PURE__*/React.createElement(Row, {
-    as: "tr",
-    sx: _extends({}, styles.reset, styles.header, styles.row, {
-      color: color,
-      borderTopWidth: !_borderTop ? '0px' : '1px'
-    })
-  }, /*#__PURE__*/React.createElement(Column, {
-    as: "td",
-    start: [1],
-    width: columns,
-    sx: styles.index
-  }, header)), data.map((row, i) => {
-    return /*#__PURE__*/React.createElement(Row, {
-      as: "tr",
-      columns: columns,
-      key: i,
-      sx: _extends({}, styles.reset, styles.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__*/React.createElement(Column, {
-        as: "td",
-        key: j,
-        start: start[j],
-        width: width[j],
-        sx: j == 0 && _index ? _extends({}, styles.reset, styles.index) : _extends({}, styles.reset, styles.entry)
-      }, column);
-    }));
-  })));
-};
-
-const _excluded = ["value", "onClick", "disabled", "sx"];
-
-const Toggle = (_ref, ref) => {
-  let {
-    value,
-    onClick,
-    disabled,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const color = sx && sx.color ? sx.color : 'primary';
-  value = disabled ? false : value;
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    ref: ref,
-    as: "button",
-    onClick: onClick,
-    role: "checkbox",
-    "aria-checked": value,
-    "aria-label": "Toggle",
-    sx: _extends({
-      border: 'none',
-      background: 'none',
-      cursor: disabled ? 'default' : 'pointer',
-      p: [0],
-      m: [0],
-      display: 'inline-block'
-    }, sx)
-  }, props), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: '50px',
-      height: '20px',
-      borderRadius: '20px',
-      backgroundColor: value ? transparentize(color, color == 'primary' ? 0.5 : 0.45) : 'muted',
-      position: 'relative',
-      transition: '0.15s',
-      display: 'inline-block'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: '14px',
-      height: '14px',
-      borderRadius: '7px',
-      position: 'absolute',
-      left: value ? '32px' : '4px',
-      top: '3px',
-      backgroundColor: value ? color : 'secondary',
-      transition: '0.15s'
-    }
-  })));
-};
-
-var toggle = forwardRef(Toggle);
-
-const Tracking = ({
-  id
-}) => {
-  if (!id) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("script", {
-    async: true,
-    src: `https://www.googletagmanager.com/gtag/js?id=${id}`
-  }), /*#__PURE__*/React.createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${id}', {
-            page_path: window.location.pathname,
-          });
-        `
-    }
-  }));
-};
-
-const Tray = ({
-  expanded,
-  sx,
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      position: 'fixed',
-      top: '56px',
-      bottom: '0px',
-      left: '0px',
-      width: 'calc(100vw)',
-      mt: ['56px'],
-      bg: 'background',
-      zIndex: 1000,
-      transition: 'opacity 0.15s',
-      opacity: expanded ? 0.9 : 0,
-      pointerEvents: expanded ? 'all' : 'none'
-    }
-  }), /*#__PURE__*/React.createElement(Box, {
-    sx: _extends({
-      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%)'
-    }, sx)
-  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-    start: [1, 1, 1, 1],
-    width: [6, 8, 10, 10]
-  }, children))));
-};
-
-const defaultOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric'
-};
-
-const formatDateElement = (date, element, option) => {
-  if (!option) {
-    return null;
-  }
-
-  const format = typeof option === 'string' ? option : defaultOptions[element];
-  const result = date.toLocaleString('default', {
-    [element]: format
-  });
-
-  if (format === 'numeric' && ['day', 'month'].includes(element)) {
-    return result.padStart(2, '0');
-  } else {
-    return result;
-  }
-};
-
-const formatDate = (date, options = defaultOptions) => {
-  var _options$separator;
-
-  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((_options$separator = options.separator) != null ? _options$separator : ' ');
-};
-
-export { Badge, button as Button, callout as Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, input as Input, Layout, Link$1 as Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, slider as Slider, Table, Tag, toggle as Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+import e,{forwardRef as t,cloneElement as r,useRef as n,useState as o,useEffect as a,useCallback as l}from"react";import{Box as i,Link as c,Flex as s,Grid as m,IconButton as p,Container as d,useColorMode as x,useThemeUI as h,Text as u,Styled as f,Input as g,Slider as y}from"theme-ui";import{transparentize as E}from"@theme-ui/color";import b from"next/link";import{Arrow as w,Sun as v}from"@carbonplan/icons";import{PoopSad as k}from"@carbonplan/emoji";import C from"next/head";import{keyframes as S}from"@emotion/react";function z(){return z=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},z.apply(this,arguments)}function M(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])>=0||(o[r]=e[r]);return o}const A=["sx","children"],L=t=>{let{sx:r,children:n}=t,o=M(t,A);const a=r&&r.color?r.color:"primary";return e.createElement(i,z({sx:z({display:"inline-block",width:"fit-content",height:["24px","24px","24px","26px"],borderRadius:"5px",backgroundColor:"primary"==a||"secondary"==a?"muted":E(a,.7),textAlign:"center",userSelect:"none",fontSize:[2,2,2,3]},r)},o),e.createElement(i,{sx:{letterSpacing:"0.02em",fontFamily:"mono",mt:["1px","1px","1px","0px"],px:[1,1,1,"5px"],color:a}},n))},W=({children:t})=>{const r=t.props.children.slice(0,1);return e.createElement(i,{variant:"styles.blockquote",sx:{textIndent:"“"===r?["-0.4em"]:[0]}},t)},T=["href","children","internal","tracking"];var F=t((t,r)=>{let{href:n,children:o,internal:a=!1,tracking:l=!1}=t,i=M(t,T);if(a||n&&n.startsWith("/"))return e.createElement(b,{href:n,passHref:!0},e.createElement(c,z({ref:r},i),o));if(l){let t,a;n&&n.includes("pdf")?(t="PDF",a="download"):(t="website",a="external");const l=e=>{(({action:e,category:t,label:r,value:n})=>{"function"==typeof window.gtag?window.gtag("event",e,{event_category:t,event_label:r,value:n}):console.warn(`Missing window.gtag, skipping analytics action: '${e}'.`)})({action:t,category:a,label:n})};return e.createElement(c,z({ref:r,onClick:l,onContextMenu:l,href:n},i),o)}return e.createElement(c,z({ref:r,href:n},i),o)});const I=e=>{if(!["xs","sm","md","lg","xl"].includes(e))throw new Error("Size must be xs, sm, md, lg, or xl");let t,r,n,o;return"xs"===e&&(t=[2,2,2,3],r="body",n="body",o=[1.2]),"sm"===e&&(t=[3,3,3,4],r="body",n="body",o=[1.2]),"md"===e&&(t=[4,4,4,5],r="body",n="body",o=[1.2]),"lg"===e&&(t=[5,5,6,7],r="heading",n="heading",o=[1.2,1.2,1.25,1.25]),"xl"===e&&(t=[6,7,8,9],r="heading",n="heading",o=[1.25]),{fontSize:t,fontFamily:r,letterSpacing:n,lineHeight:o}},B=["size","prefix","suffix","inverted","sx","children","align","href","internal","tracking"];var D=t((t,n)=>{let o,a,l,c,s,{size:m="sm",prefix:p,suffix:d,inverted:x,sx:h,children:u,align:f,href:g,internal:y,tracking:E}=t,b=M(t,B);if(!["xs","sm","md","lg","xl"].includes(m))throw new Error("Size must be xs, sm, md, lg, or xl");const w=h&&h.color?h.color:null,v=w||(x?"secondary":"primary"),k=w||x?"primary":"secondary";let C,S,A,L,W,T;"xs"===m&&(a=["6px","6px","6px","6px"],l=[12,12,12,13],c=[12,12,12,13],s=[1.5,1.5,1.5,1.5],o={transform:"translateY(0.25px)"}),"sm"===m&&(a=["7px","7px","7px","7px"],l=[13,13,13,18],c=[13,13,13,18],s=[1.5,1.5,1.5,2],o={transform:"translateY(0.25px)"}),"md"===m&&(a=["8px","8px","8px","8px"],l=[18,18,18,24],c=[18,18,18,24],s=[2,2,2,3]),"lg"===m&&(a=["10px","10px","12px","16px"],l=[24,24,34,46],c=[24,24,34,46],s=[3,3,4,5]),"xl"===m&&(a=["12px","16px","18px","20px"],l=[34,46,56,68],c=[34,46,56,68],s=[4,5,6,7]),f?(A=f,L=f):p&&d?(A="initial",L="initial"):p?A="initial":d&&(L="middle"),W="middle"===A?{}:o,T="middle"===L?{}:o,p&&(C={"&:hover > #prefix-span > #prefix":z({color:k},p.type.hover)},p=r(p,{id:"prefix",sx:z({position:"relative",height:l,width:c,mr:u?a:[0],strokeWidth:s,verticalAlign:A,transition:"color 0.15s, transform 0.15s"},p.props.sx)})),d&&(S={"&:hover > #suffix-span >#suffix":z({color:k},d.type.hover)},d=r(d,{id:"suffix",sx:z({height:l,width:c,ml:u?a:[0],strokeWidth:s,verticalAlign:L,transition:"color 0.15s, transform 0.15s"},d.props.sx)}));const D=z({},I(m),{lineHeight:1.05,border:"none",background:"transparent",display:"block",color:v,padding:[0],textAlign:"left",cursor:"pointer",width:"fit-content","@media (hover: hover) and (pointer: fine)":z({"&:hover":{color:k}},S,C)},h),O=e.createElement(e.Fragment,null,e.createElement(i,{as:"span",id:"prefix-span",sx:z({display:"inline-block"},W)},p&&p),e.createElement(i,{as:"span",sx:{transition:"color 0.15s"}},u),e.createElement(i,{as:"span",id:"suffix-span",sx:z({display:"inline-block"},T)},d&&d));return g?e.createElement(F,z({ref:n,href:g,internal:y,tracking:E,sx:z({},D,{textDecoration:"none"})},b),O):e.createElement(i,z({ref:n,as:"button",sx:D},b),O)});const O=["label","children","inverted","color","href","internal","tracking","sx"];var $=t((t,r)=>{let{label:n,children:o,inverted:a,color:l,href:c,internal:s,tracking:m,sx:p}=t,d=M(t,O);const x=l||(a?"secondary":"primary"),h=l||a?"primary":"secondary",u=z({border:"none",padding:[0],fontSize:[3,3,3,4],color:x,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:h},"&:hover":{color:h}}},p),f=e.createElement(e.Fragment,null,e.createElement(i,{sx:{transition:"0.15s",letterSpacing:"body",pb:["6px"]}},o),e.createElement(i,{sx:{transition:"0.15s",display:"inline-block",textTransform:"uppercase",letterSpacing:"smallcaps",fontFamily:"heading",fontSize:[2,2,2,3]}},n),e.createElement(i,{as:"span",id:"container",sx:{ml:[2],display:"inline-block"}},e.createElement(w,{id:"arrow",sx:{transition:"fill 0.15s, transform 0.15s",position:"relative",top:["2px"],color:x,height:[15,15,15,17],width:[15,15,15,17]}})));return c?e.createElement(F,z({ref:r,href:c,internal:s,tracking:m,sx:u},d),f):e.createElement(i,z({ref:r,as:"button",sx:u},d),f)});const R=["colormap","label","clim","setClim","setClimStep","discrete","units","width","height","format","horizontal","bottom","sx","sxClim"],H=e=>({fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase","@media (hover: hover) and (pointer: fine)":{"&:hover":{borderBottom:e?({colors:e})=>`solid 1px ${e.primary} !important`:"unset"}},"&:focus":{outline:"none",borderBottom:e?({colors:e})=>`solid 1px ${e.primary} !important`:"unset"},transition:"border 0.15s",userSelect:e?"none !important":"unset",width:"fit-content",minWidth:"fit-content"}),_={width:["10px","16px","16px","17px"],height:["80px","110px","110px","130px"]},j=({colormap:t,discrete:r,horizontal:n,width:o,height:a})=>{const l=1/t.length*100,c=`linear-gradient(to ${n?"right":"top"}, ${t.map((e,n)=>`rgb(${e}) ${n*l}% ${r&&n<t.length-1?(n+1)*l+"%":""}`).join(",")})`;return e.createElement(i,{sx:z({},n?{width:o||_.height,height:a||_.width}:{width:o||_.width,minHeight:a||_.height},{mt:n?["1px","1px","1px",0]:0,border:({colors:e})=>`solid 1px ${e.hinted}`,background:c})})},V=({label:t,units:r,horizontal:n})=>e.createElement(i,{sx:!n&&{width:["13px","17px","17px","19px"],alignSelf:"flex-end"}},e.createElement(i,{sx:z({mb:n?0:["-4px","-4px","-4px","-3px"],fontFamily:"mono",fontSize:["9px",0,0,1],letterSpacing:"smallcaps",textTransform:"uppercase"},n?{}:{writingMode:"vertical-rl",transform:"rotate(180deg)",whiteSpace:"nowrap",display:"inline-block",overflow:"visible"})},t," ",e.createElement(i,{as:"span",sx:{textTransform:"none",color:"secondary",display:"inline-block"}},r))),N=t=>{let{colormap:r,label:l,clim:c,setClim:m,setClimStep:p=1,discrete:d,units:x,width:h,height:u,format:f=(e=>e),horizontal:g=!1,bottom:y=!1,sx:E,sxClim:b}=t,w=M(t,R);if(!Array.isArray(r))throw new Error(`expected array for colormap, got '${r}'.`);const v=[n(),n()],[k,C]=o(!1),[S,A]=o(!1);let L,W,T,F=0,I=null,B=[0,0],D=p;const O=e=>{"min"!==I||k||C(!0),"max"!==I||S||A(!0),T=e.pageX-L,F=e.pageY-W,g?("min"===I&&m(e=>[Math.min(B[0]+T*D,B[1]),e[1]]),"max"===I&&m(e=>[e[0],Math.max(B[1]+T*D,B[0])])):("min"===I&&m(e=>[Math.min(B[0]-F*D,B[1]),e[1]]),"max"===I&&m(e=>[e[0],Math.max(B[1]-F*D,B[0])]))},$=e=>{W=e.pageY,L=e.pageX,I=e.target.id,B=c,document.body.setAttribute("style",g?"cursor: ew-resize !important":"cursor: ns-resize !important"),document.addEventListener("mousemove",O);const t=()=>{document.body.setAttribute("style","cursor: unset"),document.removeEventListener("mousemove",O),window.removeEventListener("mouseup",t),"min"===I&&C(!1),"max"===I&&A(!1)};window.addEventListener("mouseup",t)};a(()=>{const e=e=>{(["ArrowUp","ArrowRight"].includes(e.code)||["ArrowUp","ArrowRight"].includes(e.key))&&(e=>{v[0].current===document.activeElement&&(e.preventDefault(),m(e=>[Math.min(e[0]+D,e[1]),e[1]]),v[0].current.focus()),v[1].current===document.activeElement&&(e.preventDefault(),m(e=>[e[0],Math.max(e[1]+D,e[0])]),v[1].current.focus())})(e),(["ArrowDown","ArrowLeft"].includes(e.code)||["ArrowDown","ArrowLeft"].includes(e.key))&&(e=>{v[0].current===document.activeElement&&(e.preventDefault(),m(e=>[Math.min(e[0]-D,e[1]),e[1]]),v[0].current.focus()),v[1].current===document.activeElement&&(e.preventDefault(),m(e=>[e[0],Math.max(e[1]-D,e[0])]),v[1].current.focus())})(e)};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[c]);const N=()=>e.createElement(i,{id:"min",ref:v[0],tabIndex:0,sx:z({},H(m),{ml:l?g?y?"0px":"10px":["2px","1px","1px","2px"]:0,mr:g?["2px","1px","1px","2px"]:0,mb:g?0:["-2px","-2px","-2px","-3px"],borderBottom:m?k?({colors:e})=>`solid 1px ${e.primary}`:({colors:e})=>`solid 1px ${e.secondary}`:"unset",cursor:m?g?"ew-resize":"ns-resize":"default"},b),onMouseDown:m?$:()=>{},onClick:()=>v[0].current.focus()},f(c[0])),P=()=>e.createElement(i,{id:"max",ref:v[1],tabIndex:0,sx:z({},H(m),{ml:["2px","1px","1px","2px"],mt:g?0:["-2px","-3px","-3px","-3px"],borderBottom:m?S?({colors:e})=>`solid 1px ${e.primary}`:({colors:e})=>`solid 1px ${e.secondary}`:"unset",cursor:m?g?"ew-resize":"ns-resize":"default"},b),onMouseDown:m?$:()=>{},onClick:()=>v[1].current.focus()},f(c[1]));return e.createElement(s,z({},w,{sx:z({flexDirection:"row",alignItems:"start",justifyContent:"flex-start",gap:["3px","6px","6px","7px"],height:g?"unset":"100%"},E)}),l&&e.createElement(V,{label:l,units:x,horizontal:g}),e.createElement(s,{sx:{flexGrow:g?1:"unset",flexDirection:"column",ml:y&&l?"4px":"0px",height:g?"unset":"100%"}},e.createElement(s,{sx:{gap:["3px","6px","6px","7px"],height:g?"unset":"100%"}},g&&c&&!y&&e.createElement(N,null),e.createElement(j,{colormap:r,horizontal:g,discrete:d,width:h,height:u}),g&&c&&!y&&e.createElement(P,null)),g&&c&&y&&e.createElement(s,{sx:{justifyContent:"space-between"}},e.createElement(N,null),e.createElement(P,null))),!g&&e.createElement(s,{sx:{flexDirection:"column-reverse",justifyContent:"space-between",height:u||_.height}},c&&e.createElement(N,null),c&&e.createElement(P,null)))},P=["start","width","dl","dr","children","sx"],G=t=>{let{start:r,width:n,dl:o,dr:a,children:l,sx:c}=t,s=M(t,P);r=r||"auto",n=n||"auto";const m=e=>{if(e&&!Array.isArray(e)&&(e=[e]),![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length?e=e.map(e=>[e,e,e,e]).flat():Array.isArray(e)&&2==e.length&&(e=e.map(e=>[e,e]).flat()),e};r=m(r),n=m(n);const p=r.map((e,t)=>"auto"==e?"auto":e+n[t]);let d,x;if(o){if(![.5,1].includes(o))throw new Error("dl must be 0.5 or 1");.5===o&&(d=["-12px",-3,-3,-4]),1===o&&(d=[-4,-5,-5,-6])}if(a){if(![.5,1].includes(a))throw new Error("dr must be 0.5 or 1");.5===a&&(x=["-12px",-3,-3,-4]),1===a&&(x=[-4,-5,-5,-6])}return e.createElement(i,z({},s,{sx:z({gridColumnStart:r,gridColumnEnd:p,ml:d,mr:x},c)}),l)},Y=({title:t,description:r,card:n})=>(r=r||"Data and science for climate action.",n=n||"https://images.carbonplan.org/social/homepage.png",e.createElement(C,null,e.createElement("title",null,t=t||"carbonplan"),e.createElement("meta",{name:"description",content:r}),e.createElement("meta",{name:"viewport",content:"initial-scale=1.0, width=device-width"}),e.createElement("link",{rel:"canonical",content:"https://carbonplan.org/"}),e.createElement("link",{rel:"icon",type:"image/svg+xml",href:"https://images.carbonplan.org/favicon.svg"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-mono-11-pitch-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"preload",href:"https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",as:"font",type:"font/woff2",crossOrigin:"anonymous"}),e.createElement("link",{rel:"manifest",href:"https://images.carbonplan.org/manifest.json"}),e.createElement("meta",{name:"theme-color",content:"#1b1e23"}),e.createElement("link",{rel:"alternate icon",type:"image/png",href:"https://images.carbonplan.org/favicon.png"}),e.createElement("link",{rel:"mask-icon",href:"https://images.carbonplan.org/safari-pinned-tab.svg",color:"#000000"}),e.createElement("link",{rel:"apple-touch-icon",sizes:"180x180",href:"https://images.carbonplan.org/apple-touch-icon.png"}),e.createElement("meta",{name:"msapplication-TileColor",content:"#1b1e23"}),e.createElement("meta",{name:"msapplication-TileImage",content:"https://images.carbonplan.org/mstile-144x144.png"}),e.createElement("meta",{name:"msapplication-config",content:"https://images.carbonplan.org/browserconfig.xml"}),e.createElement("meta",{property:"og:title",content:t}),e.createElement("meta",{property:"og:description",content:r}),e.createElement("meta",{property:"og:image",content:n}),e.createElement("meta",{property:"og:url",content:"https://carbonplan.org"}),e.createElement("meta",{name:"twitter:title",content:t}),e.createElement("meta",{name:"twitter:description",content:r}),e.createElement("meta",{name:"twitter:image",content:n}),e.createElement("meta",{name:"twitter:card",content:"summary_large_image"}))),X=t=>{let r=z({},t);return e.createElement(i,z({as:"svg",width:"150",fill:"currentColor",stroke:"none",viewBox:"0 0 151.1 28.8"},r),e.createElement("g",null,e.createElement("g",null,e.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 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 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 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 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"})),e.createElement("g",null,e.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 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 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 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 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 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"})),e.createElement("g",null,e.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 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 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"})),e.createElement("g",null,e.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 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 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 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 C52.9,10.2,51.9,10.7,51.2,11.5z"})),e.createElement("g",null,e.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 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 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 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"})),e.createElement("g",null,e.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 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 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"})),e.createElement("g",null,e.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 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 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 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"})),e.createElement("g",null,e.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 C117.3,21.8,117.2,21.7,117.2,21.6z"})),e.createElement("g",null,e.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 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 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 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 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 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"})),e.createElement("g",null,e.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 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 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"})),e.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 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"}),e.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 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"})))},U=["children","sx","columns","gap"],q=t=>{let{children:r,sx:n,columns:o,gap:a}=t,l=M(t,U);const i=e=>{if(Array.isArray(e)||(e=[e,e,e,e]),Array.isArray(e)&&![1,2,4].includes(e.length))throw new Error("Array length must be 1, 2, or 4");return Array.isArray(e)&&1==e.length&&(e=e.map(e=>[e]).flat()),Array.isArray(e)&&2==e.length&&(e=e.map(e=>[e,e]).flat()),e};let c,s;return Number.isInteger(a)||Array.isArray(a)?(a=i(a),c=a,s=a):(c=[4,5,5,6],s=[0,0,0,0]),o=Number.isInteger(o)||Array.isArray(o)?i(o):[6,8,12,12],e.createElement(m,z({},l,{columns:o,sx:z({columnGap:c,rowGap:s},n)}),r)},K=["value","sx"],Z=t=>{let{value:r,sx:n}=t,o=M(t,K);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},n),"aria-label":"Toggle Menu"},o),!r&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"52",y1:"29.9",x2:"16",y2:"29.9"}),e.createElement("line",{x1:"52",y1:"6.1",x2:"16",y2:"6.1"}),e.createElement("line",{x1:"52",y1:"18",x2:"16",y2:"18"}),e.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"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),r&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.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"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},J=(e,t,r=!1)=>({width:"auto",color:e===t?"secondary":"text",fontSize:[6,6,7,8],fontFamily:"heading",letterSpacing:"heading",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",borderTopWidth:r?"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:e==t?"secondary":"text"}}),Q=[{url:"about",display:"About"},{url:"research",display:"Research"},{url:"blog",display:"Blog"},{url:"press",display:"Press"}],ee=()=>e.createElement(w,{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]}}),te=({link:t,mode:r,nav:n,first:o,setExpanded:a})=>{const{url:l,display:i}=t,s="remote"===r?"https://carbonplan.org/"+l:"/"+l;return"homepage"===r||"local"===r&&n===l?e.createElement(b,{href:s,passHref:!0},e.createElement(c,{onClick:()=>{n===l&&a(!1)},sx:J(n,l,o)},e.createElement(ee,null),i)):e.createElement(c,{href:s,sx:J(n,l,o)},e.createElement(ee,null),i)},re=({links:t,nav:r,mode:n,setExpanded:o})=>t.map((t,a)=>e.createElement(te,{key:a,link:t,mode:n,nav:r,first:0===a,setExpanded:o})),ne=({status:t,mode:r,nav:n,menuItems:a})=>{const[l,m]=o(!1);return e.createElement(q,{sx:{pt:["12px"],pb:[3]}},e.createElement(G,{start:[1],width:[2]},e.createElement(i,{sx:{pointerEvents:"all",display:"block",width:"fit-content"}},("homepage"==r||"local"==r)&&e.createElement(b,{href:"/",passHref:!0},e.createElement(c,{"aria-label":"CarbonPlan Homepage",sx:{display:"block"}},e.createElement(X,{id:"logo",sx:{cursor:"pointer",color:"primary"}}))),(null==r||"remote"==r)&&e.createElement(c,{href:"https://carbonplan.org","aria-label":"CarbonPlan Homepage",sx:{display:"block"}},e.createElement(X,{sx:{cursor:"pointer",color:"primary"}})))),e.createElement(G,{start:[4,9],width:[2,2],dr:1,sx:{display:[t?"flex":"none","flex","flex","flex"],alignItems:"center"}},e.createElement(i,{sx:{fontSize:[1,2,3],position:"relative",top:["-2px","-3px","-3px"]}},t?`(${t})`:"")),e.createElement(G,{start:[t?6:4,6,11,11],width:[t?1:3,3,2,2],sx:{zIndex:5e3}},e.createElement(s,{sx:{pointerEvents:"all",justifyContent:"flex-end"}},e.createElement(i,{sx:{display:[t?"none":"flex","flex","flex","flex"],mr:"18px",gap:"18px",opacity:l?0:1,transition:"opacity 0.15s",justifyContent:"space-between",alignItems:"center"}},a),e.createElement(Z,{sx:{flexShrink:0,mr:["-2px"]},value:l,onClick:e=>{m(!l)}}))),e.createElement(i,{sx:{opacity:l?1:0,pointerEvents:l?"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"}},e.createElement(d,null,e.createElement(q,null,e.createElement(G,{start:[2,4,7,7],width:[5,4,5,5]},e.createElement(i,{as:"nav",sx:{display:l?"inherit":"none",mt:[5,5,5,6]}},e.createElement(re,{links:Q,nav:n,mode:r,setExpanded:m})))))))},oe=t=>{let r=z({},t);return e.createElement(i,z({as:"svg",width:"80",stroke:"none",fill:"currentColor",viewBox:"0 0 32 32"},r),e.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"}),e.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"}),e.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"}))},ae=()=>e.createElement(i,{sx:{mt:[7,7,7,8],mb:[7,7,7,8],pb:[2,1,0,0]}},e.createElement(q,{sx:{mb:[0,0,4,5]}},e.createElement(G,{start:[1,2],width:[3,3]},e.createElement(i,null,e.createElement(i,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"EMAIL"),e.createElement(c,{href:"mailto:hello@carbonplan.org",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"hello@carbonplan.org"))),e.createElement(G,{start:[5],width:[1],dl:1,dr:1,sx:{display:["flex","none","none","none"],justifyContent:["center"]}},e.createElement(oe,{sx:{mt:["-4px"],width:"60px",height:"60px"}})),e.createElement(G,{start:[1,5,5,5],width:[3,3],sx:{mt:[3,0,0,0]}},e.createElement(i,null,e.createElement(i,{sx:{fontSize:[2,2,2,3],fontFamily:"heading",letterSpacing:"mono",mb:[2]}},"FOLLOW"),e.createElement(c,{href:"https://twitter.com/carbonplanorg",sx:{textDecoration:"none",fontSize:[2,2,2,3]}},"@carbonplanorg"))),e.createElement(G,{start:[1,9],width:[5,4,3,3],sx:{mt:["42px","42px",0,0],mb:[3,3,0,0]}},e.createElement(i,null,e.createElement(i,{sx:{fontSize:[2,2,2,3],fontFamily:"body",color:"secondary"}},"CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))),e.createElement(q,{sx:{mb:["2px"],mt:[5,5,4]}},e.createElement(G,{start:[1,1,2,2],width:[3,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"]}},e.createElement(i,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",pt:[2]}},e.createElement(i,{sx:{color:"secondary",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono"}},"(c) 2021 CARBONPLAN"))),e.createElement(G,{start:[4,3,5,5],width:[2,2,3,3],sx:{display:"flex",alignItems:["flex-start","flex-start","flex-end"],mt:[0,0,0,0]}},e.createElement(i,{sx:{bottom:"0px",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px",width:["100%","auto","auto","auto"],pt:[2]}},e.createElement(b,{href:"/terms",passHref:!0},e.createElement(i,{as:"a",sx:{textDecoration:"none",fontSize:[1,1,1,2],color:"secondary",fontFamily:"mono",letterSpacing:"mono",display:"block"}},"READ OUR TERMS")))),e.createElement(G,{start:[5,7,9,9],width:[2,3,3,3],sx:{display:["none","initial","initial","initial"]}},e.createElement(oe,{sx:{width:80,height:80,mt:[0,"-10px",4,5],mb:["-12px"]}})))),le=["sx"],ie=t=>{let{sx:r}=t,n=M(t,le);const[o,a]=x(),i=l(()=>{a("light"===o?"dark":"light")},[o]);return e.createElement(p,z({"aria-label":"Toggle dark mode",onClick:i,role:"checkbox",sx:z({width:32,height:32,display:"inline-block",cursor:"pointer",color:"secondary"},r)},n),e.createElement(v,{sx:{strokeWidth:"1.75",transition:"stroke 0.15s","@media (hover: hover) and (pointer: fine)":{"&:hover":{stroke:"primary"}}}}))},ce=()=>{const t=process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,r=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER,n=process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG,{theme:o}=h(),a=o.rawColors.secondary;if(t&&r&&n){const o=t.substring(0,7),l="https://github.com/"+r+"/"+n+"/tree/"+t;return e.createElement(i,{sx:{display:"inline-block",width:"87px"}},e.createElement(se,{color:a}),e.createElement(c,{href:l,sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:a,fontSize:[1],textTransform:"uppercase",textDecoration:"none"}},o))}return e.createElement(i,{sx:{display:"inline-block",width:"87px"}},e.createElement(se,{color:a}),e.createElement(u,{sx:{whiteSpace:"nowrap",display:"inline-block",ml:[2],fontFamily:"mono",letterSpacing:"body",color:a,fontSize:[1],textTransform:"uppercase"}},a))},se=({color:t})=>e.createElement("svg",{fill:t,opacity:"0.8",viewBox:"0 0 24 24",width:"24",height:"24"},e.createElement("circle",{r:5,cx:19,cy:19})),me=({mode:t})=>{const[r,n]=o(function(e){return"mouse"===e?`X,Y: ${de(0,4)},${de(0,4)}`:"scroll"===e?`SCROLL: 0.${de((0).toFixed(0),2)}`:e}(t));return a(()=>{if("mouse"===t){const e=e=>{const t=de(e.clientX,4),r=de(e.clientY,4);n(`X,Y: ${t},${r}`)};return window.addEventListener("mousemove",e),()=>{window.removeEventListener("mousemove",e)}}if("scroll"===t){const e=e=>{const t=function(e,t){return Math.min(e.scrollY/(document.body.offsetHeight-770),.99)}(window);n(`SCROLL: 0.${de((100*t).toFixed(0),2)}`)};return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}}},[]),e.createElement(u,{sx:{whiteSpace:"nowrap",display:"inline-block",mr:"-6px",fontFamily:"mono",letterSpacing:"body",color:"secondary",fontSize:[1],textTransform:"uppercase"}},r)},pe=({mode:t})=>e.createElement(i,{sx:{userSelect:"none",position:"fixed",bottom:"42px",right:"24px",transformOrigin:"right",transform:"rotate(90deg)",display:["none","none","initial"]}},e.createElement(me,{mode:t}),e.createElement(ce,null));function de(e,t){return e.toString().padStart(t,"0")}const xe=["duration","delay","children"],he=S({from:{opacity:0},to:{opacity:1}}),ue=t=>{let{duration:r=300,delay:n=0,children:o}=t,a=M(t,xe);return e.createElement(i,z({},a,{sx:{animationDuration:r+"ms",animationDelay:n+"ms",animationName:he.toString(),animationFillMode:"backwards"}}),o)},fe=e=>{const t=e.createElement("div");t.style.visibility="hidden",t.style.width="100px",e.body.appendChild(t),t.style.overflow="scroll";const r=e.createElement("div");r.style.width="100%",t.appendChild(r);const n=t.offsetWidth-r.offsetWidth;return t.parentNode.removeChild(t),n},ge=()=>(a(()=>{"undefined"!=typeof document&&fe(document)>0&&(document.body.classList.add("custom-scrollbar"),document.getElementsByTagName("html")[0].classList.add("custom-scrollbar"))},[]),null),ye=({color:t="muted"})=>{const[r,n]=o(!1);return a(()=>{function e(e){const{key:t,metaKey:r}=e;";"===t&&r&&n(e=>!e)}return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[]),e.createElement(i,{sx:{position:"fixed",width:"100%",left:0,top:0,zIndex:"teal"===t?5e3:-1,pointerEvents:"none",display:r?"initial":"none"}},e.createElement(d,null,e.createElement(i,{sx:{display:["none","none","initial","initial"]}},e.createElement(be,{indices:[1,2,3,4,5,6,7,8,9,10,11,12],color:t})),e.createElement(i,{sx:{display:["none","initial","none","none"]}},e.createElement(be,{indices:[1,2,3,4,5,6,7,8],color:t})),e.createElement(i,{sx:{display:["initial","none","none","none"]}},e.createElement(be,{indices:[1,2,3,4,5,6],color:t}))))},Ee=["red","orange","yellow","green","teal","blue","purple","pink"];function be({indices:t,color:r}){const n={outerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"teal"===r?"0px":"1px",borderRightWidth:"teal"===r?"0px":"1px",opacity:"teal"==r?.4:1},innerGuideColumn:{borderStyle:"solid",borderWidth:"0px",borderLeftWidth:"0px",borderRightWidth:"0px",opacity:"teal"==r?.4:1}};return e.createElement(q,null,t.map(t=>e.createElement(G,{key:t,start:[t],width:[1,1],dl:.5,dr:.5,sx:z({bg:"teal"===r?"teal":"transparent",height:"100vh"},n.innerGuideColumn)},e.createElement(i,{sx:z({mx:["12px",3,3,4],bg:"teal"===r?"background":"transparent",height:"100%",borderLeftColor:"rainbow"===r?Ee[t%8]:"muted",borderRightColor:"rainbow"===r?Ee[t%8]:"muted"},n.outerGuideColumn)}))))}const we=["value","sx"],ve=t=>{let{value:r,sx:n}=t,o=M(t,we);return e.createElement(p,z({sx:z({cursor:"pointer",fill:"none",strokeWidth:"2px",stroke:"text",".paren":{opacity:"0"},"@media (hover: hover) and (pointer: fine)":{"&:hover .paren":{opacity:"1"}}},n),"aria-label":"Toggle Menu"},o),!r&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"24",y1:"2.1",x2:"24",y2:"6.1"}),e.createElement("line",{x1:"24",y1:"24.1",x2:"24",y2:"33.9"}),e.createElement("line",{x1:"44",y1:"2.1",x2:"44",y2:"12.1"}),e.createElement("line",{x1:"44",y1:"30.1",x2:"44",y2:"33.9"}),e.createElement("circle",{cx:"24",cy:"15.1",r:"5"}),e.createElement("circle",{cx:"44",cy:"21.1",r:"5"}),e.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"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})),r&&e.createElement("svg",{style:{width:"50px",height:"30px",transform:"scale(2)",marginTop:"-3px"},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 68 36"},e.createElement("line",{x1:"50.85",y1:"29.79",x2:"17.15",y2:"6.21"}),e.createElement("line",{x1:"17.15",y1:"29.79",x2:"50.85",y2:"6.21"}),e.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"}),e.createElement("path",{style:{transition:"all 0.2s"},className:"paren",d:"M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"})))},ke=({title:t,description:r,card:n,children:o,status:l,nav:c,settings:m,footer:p=!0,header:x=!0,metadata:u="mouse",links:f="remote",dimmer:g="bottom",guide:y=!0,scrollbar:E=!0,fade:b=!0,container:w=!0})=>{let v=o;b&&(v=e.createElement(ue,{duration:250},v)),w&&(v=e.createElement(i,{sx:{mb:[8,8,9,10]}},e.createElement(d,null,v)));const{theme:k}=h();a(()=>{if(!k)return;const e=window.matchMedia(`(min-width: ${k.breakpoints[1]})`);return e.onchange=e=>{e.matches&&null!=m&&m.value&&null!=m&&m.onClick&&(null==m||m.onClick())},()=>{e.onchange=null}},[null==k?void 0:k.breakpoints,null==m?void 0:m.value,null==m?void 0:m.onClick]);const C=[e.createElement(ie,{key:"dimmer",sx:{color:"primary",mt:"-2px",display:["block","block","top"===g?"block":"none","top"===g?"block":"none"]}})];return m&&C.push(e.createElement(ve,z({key:"settings",sx:{mr:["2px"],display:["inherit","inherit","none","none"]}},m))),e.createElement(e.Fragment,null,y&&e.createElement(ye,{color:y}),E&&e.createElement(ge,null),e.createElement(Y,{card:n,description:r,title:t}),e.createElement(s,{sx:{flexDirection:"column",minHeight:"100vh"}},x&&e.createElement(i,{as:"header",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderBottomWidth:"1px",position:"sticky",top:0,bg:"background",height:"56px",zIndex:2e3}},e.createElement(d,null,e.createElement(ne,{mode:f,status:l,nav:c,menuItems:C}))),e.createElement(i,{sx:{width:"100%",flex:"1 1 auto"}},v),p&&e.createElement(i,{as:"footer",sx:{width:"100%",borderStyle:"solid",borderColor:"muted",borderWidth:"0px",borderTopWidth:"1px"}},e.createElement(d,null,e.createElement(ae,null))),"bottom"===g&&e.createElement(i,{sx:{display:["none","none","initial","initial"],position:["fixed"],right:[13],bottom:[17,17,15,15]}},e.createElement(ie,null)),u&&e.createElement(pe,{mode:u})))},Ce=()=>e.createElement(ke,{footer:!1,title:"404 / carbonplan"},e.createElement(q,{sx:{mb:[5,0,0],pt:[0,0,6]}},e.createElement(G,{start:[1,1,3,3],width:[6,4,4,4]},e.createElement(f.h1,null,"Oops!"),e.createElement(i,{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."),e.createElement(i,{sx:{color:"secondary",fontFamily:"mono",letterSpacing:"mono",fontSize:[2,2,2,3],mt:[4,5,5]}},"ERROR CODE 404")),e.createElement(G,{start:[2,5,7,7],width:[4,4,4,4]},e.createElement(i,{sx:{width:["100%"],mt:[2,4,4,5],fill:"primary"}},e.createElement(k,{sx:{width:"100%",height:"auto"}}))))),Se=({value:t,id:r,onClick:n,sx:o})=>e.createElement(p,{onClick:n,id:r,role:"checkbox","aria-checked":t,"aria-label":"Expand",sx:z({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"}}},o)},e.createElement("svg",{viewBox:"0 0 16 16"},e.createElement("path",{d:"M8,0 V16 M0,8 H16",style:{strokeWidth:2,transition:"0.25s all",transformOrigin:"8px 8px",transform:t?"rotate(45deg)":""}}))),ze=["label","value","sx","children"],Me=t=>{let{label:r,value:n,sx:o,children:a}=t,l=M(t,ze);const c=o&&o.color?o.color:"primary",s=l&&(l.onClick||l.onDoubleClick);return e.createElement(i,z({as:s?"button":"span",role:"checkbox","aria-checked":n,"aria-label":r,sx:z({display:"inline-block",fontSize:[1,1,1,2],fontFamily:"mono",letterSpacing:"mono",cursor:s?"pointer":"inherit",color:c,backgroundColor:"transparent",borderStyle:"solid",borderColor:c,lineHeight:"body",borderWidth:"0px",borderBottomWidth:"1px",textTransform:"uppercase",userSelect:"none",transition:"opacity 0.05s",pt:["1px"],pb:["2px"],px:[0],m:[0],opacity:null==n||n?1:"primary"==c?.24:.33},o)},l),a)},Ae=["values","setValues","label","colors","showAll","multiSelect"],Le={label:{fontFamily:"mono",letterSpacing:"mono",fontSize:[1,1,1,2],color:"secondary",userSelect:"none",textTransform:"uppercase"}},We=(e,t,r={})=>Object.keys(e).reduce((e,n)=>Object.assign(e,{[n]:r[n]||t}),{}),Te=e=>Object.keys(e).filter(t=>e[t]).length==Object.keys(e).length,Fe=({values:e,multiSelect:t,setValues:r,value:n})=>{const o=Te(e),a="all"===n;let l;t?l=a&&!o?We(e,!0):a&&o?We(e,!1):z({},e,{[n]:!e[n]}):a&&!o?l=We(e,!0):a&&o||(l=We(e,!1,{[n]:!0})),l&&r(l)},Ie=t=>{let{values:r,setValues:n,label:o,colors:a,showAll:l=!1,multiSelect:c=!1}=t,s=M(t,Ae);return e.createElement(i,s,o&&e.createElement(i,{sx:Le.label},o),e.createElement(i,{sx:{mt:o?[3]:0}},l&&e.createElement(Me,{onClick:()=>Fe({values:r,multiSelect:c,setValues:n,value:"all"}),value:Te(r),sx:{mr:[2]}},"All"),Object.keys(r).map((t,o)=>e.createElement(Me,{onClick:()=>Fe({values:r,multiSelect:c,setValues:n,value:t}),onDoubleClick:()=>Fe({values:r,multiSelect:!1,setValues:n,value:t}),key:o,value:r[t],sx:{width:"max-content",color:a?a[t]:"primary",mr:[2],mb:[1]}},t))))},Be={xs:[1],sm:[3],md:[5],lg:[7],xl:[9]},De=({children:t,direction:r="vertical",spacing:n="md"})=>{let o;if("string"==typeof n?o=Be[n]:"number"==typeof n?o=[n]:Array.isArray(n)&&n.every(e=>"number"==typeof e)&&(o=n),!o)throw new Error("Invalid spacing size. Must be numeric value(s) or one of xs, sm, md, lg, or xl");if(!["horizontal","vertical"].includes(r))throw new Error("Invalid direction value. Must be either horizontal or vertical");const a="vertical"===r?"mt":"ml",l="horizontal"===r?{display:"inline-block"}:{};return e.createElement(i,null,e.Children.map(t,(t,r)=>e.createElement(i,{sx:z({[a]:r>0?o:0},l)},t)))},Oe=({children:t,variant:r="h1"})=>{let n;return"h1"===r&&(n=[4,"27px","42px","54px"]),"h2"===r&&(n=[4,4,"14px","54px"]),e.createElement(e.Fragment,null,e.createElement(G,{start:[1,4,8,8],width:[1,1,1,1]},e.createElement(i,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],textAlign:"right"}},"/")),e.createElement(G,{start:[2,5,9,9],width:[3,3,2,2]},e.createElement(i,{sx:{mt:n,fontFamily:"faux",letterSpacing:"faux",fontSize:[2,2,2,3],height:["100%","0px","0px","0px"]}},t)))},$e=({children:t,sidenote:r,description:n,descriptionStart:o=[1,3,5,5],descriptionWidth:a=[5,5,5,4],sx:l})=>e.createElement(q,{sx:{mt:[5,6,7,8],mb:[5,6,7,8]}},e.createElement(G,{start:[1,1,2,2],width:[6,2,3,3]},e.createElement(i,{as:"h1",variant:"styles.h1",sx:z({my:[0,0,0,0]},l)},t)),r&&e.createElement(Oe,null,r),n&&e.createElement(G,{start:o,width:a},e.createElement(i,{sx:{mt:[4,"5px","20px","31px"],fontSize:[2,2,2,3]}},n))),Re=["size","inverted","sx"];var He=t((t,r)=>{let{size:n="sm",inverted:o,sx:a}=t,l=M(t,Re);const i=z({color:o?"secondary":"primary",borderColor:"secondary",borderStyle:"solid",borderWidth:"0px",borderBottomWidth:"1px",borderRadius:"0px",transition:"border 0.15s",borderBottomWidth:"1px",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"}},I(n),a);return e.createElement(g,z({},l,{ref:r,sx:i}))});const _e=["children","size","sx","sxSelect"],je=t=>{let{children:r,size:o="sm",sx:a,sxSelect:l}=t,c=M(t,_e);const s=a&&a.color?a.color:"primary",m=I(o),p=n(null),{onChange:d}=c,x=(h=e=>"onChange"!==e,e=>{const t={};for(const r in e)h(r||"")&&(t[r]=e[r]);return t})(c);var h;if(!["xs","sm","md"].includes(o))throw new Error("Size must be xs, sm, or md");let u,f,g,y,E;return"xs"===o&&(f=[14,14,14,16],g=[14,14,14,14],E=["1px"],y=["-14px","-14px","-14px","-16px"]),"sm"===o&&(f=[15,15,15,20],g=[15,15,15,20],E=["1px"],y=["-16px","-16px","-16px","-20px"]),"md"===o&&(f=[20,20,20,20],g=[20,20,20,20],E=["2px"],y=["-20px","-20px","-20px","-20px"]),u=g.map(e=>e+12),e.createElement(i,{sx:z({display:"inline-block"},a)},e.createElement(i,z({as:"select",ref:p,onChange:e=>{p.current.blur(),d&&d(e)},sx:z({},m,{lineHeight:"normal",cursor:"pointer",WebkitAppearance:"none",MozAppearance:"none",pb:["5px"],bg:"transparent",pr:u,border:"none",borderBottomStyle:"solid",borderBottomWidth:"1px",borderBottomColor:"primary",borderRadius:"0px",color:"text",width:"fit-content",color:s,userSelect:"none","@media (hover: none) and (pointer: coarse)":{"&:focus-visible":{outline:"none !important",background:"transparent !important"}}},l)},x),r),e.createElement(w,{sx:{width:g,height:f,position:"relative",ml:y,top:E,fill:"secondary",transform:"rotate(135deg)",pointerEvents:"none"}}))},Ve=["sx"];var Ne=t((t,r)=>{let{sx:n}=t,o=M(t,Ve);const a=n&&n.color?n.color:"primary",{theme:{rawColors:l}}=h();return e.createElement(y,z({ref:r,sx:z({"&::-webkit-slider-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:`0 0 0 0px ${l.secondary}`,transition:"box-shadow .15s ease"},"&::-moz-range-thumb":{height:[22,18,16],width:[22,18,16],boxShadow:`0 0 0 0px ${l.secondary}`,transition:"box-shadow .15s ease"},":focus-visible":{outline:"none !important",background:`${l.secondary} !important`},":focus":{color:a,"&::-webkit-slider-thumb":{boxShadow:`0 0 0 4px ${l.secondary}`},"&::-moz-range-thumb":{boxShadow:`0 0 0 4px ${l.secondary}`}},color:a},n)},o))});const Pe={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]}},Ge=({data:t,sx:r,color:n,header:o,columns:a,start:l,width:c,index:s=!0,borderBottom:m=!0,borderTop:p=!0})=>{if(!l||!a||!c)throw new Error("Must provide columns, start, and width");return e.createElement(i,{as:"table",sx:z({display:"block"},r)},e.createElement(i,{as:"tbody",sx:{display:"block"}},o&&e.createElement(q,{as:"tr",sx:z({},Pe.reset,Pe.header,Pe.row,{color:n,borderTopWidth:p?"1px":"0px"})},e.createElement(G,{as:"td",start:[1],width:a,sx:Pe.index},o)),t.map((r,n)=>e.createElement(q,{as:"tr",columns:a,key:n,sx:z({},Pe.reset,Pe.row,{pb:m&&n===t.length-1?["18px","18px","18px","22px"]:[3,3,3,"20px"],borderBottomWidth:m&&n===t.length-1?"1px":"0px",borderTopWidth:p||0!==n||o?"1px":"0px"})},r.map((t,r)=>e.createElement(G,{as:"td",key:r,start:l[r],width:c[r],sx:z({},Pe.reset,0==r&&s?Pe.index:Pe.entry)},t))))))},Ye=["value","onClick","disabled","sx"];var Xe=t((t,r)=>{let{value:n,onClick:o,disabled:a,sx:l}=t,c=M(t,Ye);const s=l&&l.color?l.color:"primary";return n=!a&&n,e.createElement(i,z({ref:r,as:"button",onClick:o,role:"checkbox","aria-checked":n,"aria-label":"Toggle",sx:z({border:"none",background:"none",cursor:a?"default":"pointer",p:[0],m:[0],display:"inline-block"},l)},c),e.createElement(i,{sx:{width:"50px",height:"20px",borderRadius:"20px",backgroundColor:n?E(s,"primary"==s?.5:.45):"muted",position:"relative",transition:"0.15s",display:"inline-block"}},e.createElement(i,{sx:{width:"14px",height:"14px",borderRadius:"7px",position:"absolute",left:n?"32px":"4px",top:"3px",backgroundColor:n?s:"secondary",transition:"0.15s"}})))});const Ue=({id:t})=>t?e.createElement(e.Fragment,null,e.createElement("script",{async:!0,src:`https://www.googletagmanager.com/gtag/js?id=${t}`}),e.createElement("script",{dangerouslySetInnerHTML:{__html:`\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '${t}', {\n            page_path: window.location.pathname,\n          });\n        `}})):null,qe=({expanded:t,sx:r,children:n})=>e.createElement(e.Fragment,null,e.createElement(i,{sx:{position:"fixed",top:"56px",bottom:"0px",left:"0px",width:"calc(100vw)",mt:["56px"],bg:"background",zIndex:1e3,transition:"opacity 0.15s",opacity:t?.9:0,pointerEvents:t?"all":"none"}}),e.createElement(i,{sx:z({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:t?"translateY(0)":"translateY(-100%)"},r)},e.createElement(q,null,e.createElement(G,{start:[1,1,1,1],width:[6,8,10,10]},n)))),Ke={month:"short",day:"numeric",year:"numeric"},Ze=(e,t,r)=>{if(!r)return null;const n="string"==typeof r?r:Ke[t],o=e.toLocaleString("default",{[t]:n});return"numeric"===n&&["day","month"].includes(t)?o.padStart(2,"0"):o},Je=(e,t=Ke)=>{var r;const n=new Date(e.replace(/-/g,"/"));return[Ze(n,"month",t.month),Ze(n,"day",t.day),Ze(n,"year",t.year)].filter(Boolean).join(null!=(r=t.separator)?r:" ")};export{L as Badge,W as Blockquote,D as Button,$ as Callout,N as Colorbar,G as Column,Ce as Custom404,ie as Dimmer,Se as Expander,ue as FadeIn,Ie as Filter,ae as Footer,De as Group,ye as Guide,ne as Header,$e as Heading,He as Input,ke as Layout,F as Link,X as Logo,Z as Menu,Y as Meta,oe as Monogram,q as Row,ge as Scrollbar,je as Select,ve as Settings,Oe as Sidenote,Ne as Slider,Ge as Table,Me as Tag,Xe as Toggle,Ue as Tracking,qe as Tray,Je as formatDate,fe as getScrollbarWidth};
 //# sourceMappingURL=index.modern.js.map