@carbonplan/components 10.2.1 → 11.0.0-alpha.0

package/dst/index.js

@@ -46,13 +46,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$g = ["sx", "children"];
+
 var Badge = function Badge(_ref) {
   var sx = _ref.sx,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var color$1 = sx && sx.color ? sx.color : 'primary';
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
     sx: _extends({
       display: 'inline-block',
       width: 'fit-content',
@@ -63,7 +65,7 @@ var Badge = function Badge(_ref) {
       userSelect: 'none',
       fontSize: [2, 2, 2, 3]
     }, sx)
-  }, props), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, props), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       letterSpacing: '0.02em',
       fontFamily: 'mono',
@@ -74,11 +76,19 @@ var Badge = function Badge(_ref) {
   }, children));
 };
 
+var _excluded$f = ["href", "children", "internal", "tracking"];
+
 var event = function event(_ref) {
   var action = _ref.action,
       category = _ref.category,
       label = _ref.label,
       value = _ref.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,
@@ -86,20 +96,22 @@ var event = function event(_ref) {
   });
 };
 
-var Link = function Link(_ref2) {
+var Link = function Link(_ref2, ref) {
   var href = _ref2.href,
       children = _ref2.children,
       _ref2$internal = _ref2.internal,
       internal = _ref2$internal === void 0 ? false : _ref2$internal,
       _ref2$tracking = _ref2.tracking,
       tracking = _ref2$tracking === void 0 ? false : _ref2$tracking,
-      props = _objectWithoutPropertiesLoose(_ref2, ["href", "children", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
   if (internal || href && href.startsWith('/')) {
-    return /*#__PURE__*/React__default['default'].createElement(NextLink__default['default'], {
+    return /*#__PURE__*/React__default["default"].createElement(NextLink__default["default"], {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React__default['default'].createElement(themeUi.Link, props, children));
+    }, /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     var action;
     var category;
@@ -120,18 +132,22 @@ var Link = function Link(_ref2) {
       });
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref,
       onClick: track,
       onContextMenu: track,
       href: href
     }, props), children);
   } else {
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref,
       href: href
     }, props), children);
   }
 };
 
+var Link$1 = React.forwardRef(Link);
+
 var getSizeStyles = function getSizeStyles(size) {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -182,7 +198,9 @@ var getSizeStyles = function getSizeStyles(size) {
   };
 };
 
-var Button = function Button(_ref) {
+var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
+
+var Button = function Button(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       prefix = _ref.prefix,
@@ -194,7 +212,7 @@ var Button = function Button(_ref) {
       href = _ref.href,
       internal = _ref.internal,
       tracking = _ref.tracking,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"]);
+      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');
@@ -332,18 +350,18 @@ var Button = function Button(_ref) {
     }, suffixHover, prefixHover)
   }, sx);
 
-  var Inner = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  var Inner = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "span",
     id: "prefix-span",
     sx: _extends({
       display: 'inline-block'
     }, prefixOffset)
-  }, prefix && prefix), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, prefix && prefix), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "span",
     sx: {
       transition: 'color 0.15s'
     }
-  }, children), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, children), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "span",
     id: "suffix-span",
     sx: _extends({
@@ -352,7 +370,8 @@ var Button = function Button(_ref) {
   }, suffix && suffix));
 
   if (href) {
-    return /*#__PURE__*/React__default['default'].createElement(Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -361,14 +380,19 @@ var Button = function Button(_ref) {
       })
     }, props), Inner);
   } else {
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
-var Callout = function Callout(_ref) {
+var button = React.forwardRef(Button);
+
+var _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+
+var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
       inverted = _ref.inverted,
@@ -377,7 +401,7 @@ var Callout = function Callout(_ref) {
       internal = _ref.internal,
       tracking = _ref.tracking,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var baseColor = color || (inverted ? 'secondary' : 'primary');
   var hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -407,13 +431,13 @@ var Callout = function Callout(_ref) {
     }
   }, sx);
 
-  var Inner = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  var Inner = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       transition: '0.15s',
       letterSpacing: 'body',
       pb: ['6px']
     }
-  }, children), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, children), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       transition: '0.15s',
       display: 'inline-block',
@@ -422,14 +446,14 @@ var Callout = function Callout(_ref) {
       fontFamily: 'heading',
       fontSize: [2, 2, 2, 3]
     }
-  }, label), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, label), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "span",
     id: "container",
     sx: {
       ml: [2],
       display: 'inline-block'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(icons.Arrow, {
+  }, /*#__PURE__*/React__default["default"].createElement(icons.Arrow, {
     id: "arrow",
     sx: {
       transition: 'fill 0.15s, transform 0.15s',
@@ -442,20 +466,166 @@ var Callout = function Callout(_ref) {
   })));
 
   if (href) {
-    return /*#__PURE__*/React__default['default'].createElement(Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
       sx: style
     }, props), Inner);
   } else {
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = React.forwardRef(Callout);
+
+var _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
+var sx$2 = {
+  clim: {
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }
+};
+var DIMENSIONS = {
+  width: ['10px', '16px', '16px', '17px'],
+  height: ['80px', '110px', '110px', '130px']
+};
+
+var Gradient = function Gradient(_ref) {
+  var colormap = _ref.colormap,
+      discrete = _ref.discrete,
+      horizontal = _ref.horizontal,
+      width = _ref.width,
+      height = _ref.height;
+  var step = 1 / colormap.length * 100;
+  var values = colormap.map(function (d, i) {
+    return "rgb(" + d + ") " + i * step + "% " + (discrete && i < colormap.length - 1 ? (i + 1) * step + "%" : '');
+  });
+  var css = "linear-gradient(to " + (horizontal ? 'right' : 'top') + ", " + values.join(',') + ")";
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+    sx: _extends({}, horizontal ? {
+      width: width || DIMENSIONS.height,
+      height: height || DIMENSIONS.width
+    } : {
+      width: width || DIMENSIONS.width,
+      minHeight: height || DIMENSIONS.height
+    }, {
+      mt: horizontal ? [0, '1px', '1px', 0] : 0,
+      border: function border(_ref2) {
+        var colors = _ref2.colors;
+        return "solid 1px " + colors.hinted;
+      },
+      background: css
+    })
+  });
+};
+
+var Label = function Label(_ref3) {
+  var label = _ref3.label,
+      units = _ref3.units,
+      horizontal = _ref3.horizontal;
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+    sx: !horizontal && {
+      alignSelf: 'flex-end'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.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__default["default"].createElement(themeUi.Box, {
+    as: "span",
+    sx: {
+      textTransform: 'none',
+      color: 'secondary',
+      display: 'inline-block'
+    }
+  }, units)));
+};
+
+var Colorbar = function Colorbar(_ref4) {
+  var colormap = _ref4.colormap,
+      label = _ref4.label,
+      clim = _ref4.clim,
+      discrete = _ref4.discrete,
+      units = _ref4.units,
+      width = _ref4.width,
+      height = _ref4.height,
+      _ref4$format = _ref4.format,
+      format = _ref4$format === void 0 ? function (d) {
+    return d;
+  } : _ref4$format,
+      _ref4$horizontal = _ref4.horizontal,
+      horizontal = _ref4$horizontal === void 0 ? false : _ref4$horizontal,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded$c);
+
+  if (!Array.isArray(colormap)) {
+    throw new Error("expected array for colormap, got '" + colormap + "'.");
+  }
+
+  var ClimMin = function ClimMin() {
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: label ? horizontal ? '10px' : '2px' : 0,
+        mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
+        mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px']
+      })
+    }, format(clim[0]));
+  };
+
+  var ClimMax = function ClimMax() {
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: horizontal ? ['2px', '1px', '1px', '2px'] : '2px',
+        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px']
+      })
+    }, format(clim[1]));
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Flex, {
+    sx: _extends({}, props.sx, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: ['3px', '6px', '6px', '7px']
+    })
+  }, label && /*#__PURE__*/React__default["default"].createElement(Label, {
+    label: label,
+    units: units,
+    horizontal: horizontal
+  }), horizontal && clim && /*#__PURE__*/React__default["default"].createElement(ClimMin, null), /*#__PURE__*/React__default["default"].createElement(Gradient, {
+    colormap: colormap,
+    horizontal: horizontal,
+    discrete: discrete,
+    width: width,
+    height: height
+  }), horizontal && clim && /*#__PURE__*/React__default["default"].createElement(ClimMax, null), !horizontal && /*#__PURE__*/React__default["default"].createElement(themeUi.Flex, {
+    sx: {
+      flexDirection: 'column-reverse',
+      justifyContent: 'space-between',
+      height: height || DIMENSIONS.height
+    }
+  }, clim && /*#__PURE__*/React__default["default"].createElement(ClimMin, null), clim && /*#__PURE__*/React__default["default"].createElement(ClimMax, null)));
+};
+
+var _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
 var Column = function Column(_ref) {
   var start = _ref.start,
       width = _ref.width,
@@ -463,7 +633,7 @@ var Column = function Column(_ref) {
       dr = _ref.dr,
       children = _ref.children,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -526,7 +696,7 @@ var Column = function Column(_ref) {
     }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({}, props, {
     sx: _extends({
       gridColumnStart: start,
       gridColumnEnd: end,
@@ -543,92 +713,92 @@ var Meta = function Meta(_ref) {
   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__default['default'].createElement(Head__default['default'], null, /*#__PURE__*/React__default['default'].createElement("title", null, title), /*#__PURE__*/React__default['default'].createElement("meta", {
+  return /*#__PURE__*/React__default["default"].createElement(Head__default["default"], null, /*#__PURE__*/React__default["default"].createElement("title", null, title), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "description",
     content: description
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "viewport",
     content: "initial-scale=1.0, width=device-width"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "canonical",
     content: "https://carbonplan.org/"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "icon",
     type: "image/svg+xml",
     href: "https://images.carbonplan.org/favicon.svg"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "preload",
     href: "https://fonts.carbonplan.org/relative/relative-book-pro.woff2",
     as: "font",
     type: "font/woff2",
     crossOrigin: "anonymous"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "preload",
     href: "https://fonts.carbonplan.org/relative/relative-medium-pro.woff2",
     as: "font",
     type: "font/woff2",
     crossOrigin: "anonymous"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].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__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "preload",
     href: "https://fonts.carbonplan.org/relative/relative-faux-book-pro.woff2",
     as: "font",
     type: "font/woff2",
     crossOrigin: "anonymous"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "manifest",
     href: "https://images.carbonplan.org/manifest.json"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "theme-color",
     content: "#1b1e23"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "alternate icon",
     type: "image/png",
     href: "https://images.carbonplan.org/favicon.png"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "mask-icon",
     href: "https://images.carbonplan.org/safari-pinned-tab.svg",
     color: "#000000"
-  }), /*#__PURE__*/React__default['default'].createElement("link", {
+  }), /*#__PURE__*/React__default["default"].createElement("link", {
     rel: "apple-touch-icon",
     sizes: "180x180",
     href: "https://images.carbonplan.org/apple-touch-icon.png"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "msapplication-TileColor",
     content: "#1b1e23"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "msapplication-TileImage",
     content: "https://images.carbonplan.org/mstile-144x144.png"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "msapplication-config",
     content: "https://images.carbonplan.org/browserconfig.xml"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     property: "og:title",
     content: title
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     property: "og:description",
     content: description
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     property: "og:image",
     content: card
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     property: "og:url",
     content: "https://carbonplan.org"
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "twitter:title",
     content: title
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "twitter:description",
     content: description
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "twitter:image",
     content: card
-  }), /*#__PURE__*/React__default['default'].createElement("meta", {
+  }), /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "twitter:card",
     content: "summary_large_image"
   }));
@@ -637,45 +807,47 @@ var Meta = function Meta(_ref) {
 var Logo = function Logo(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
     as: "svg",
     width: "150",
     fill: "currentColor",
     stroke: "none",
     viewBox: "0 0 151.1 28.8"
-  }, props), /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, props), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].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__default['default'].createElement("path", {
+  })), /*#__PURE__*/React__default["default"].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__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].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"
   })));
 };
 
+var _excluded$a = ["children", "sx", "columns", "gap"];
+
 var Row = function Row(_ref) {
   var children = _ref.children,
       sx = _ref.sx,
       columns = _ref.columns,
       gap = _ref.gap,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var makeArray = function makeArray(input) {
     if (!Array.isArray(input)) {
@@ -718,7 +890,7 @@ var Row = function Row(_ref) {
     columns = [6, 8, 12, 12];
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Grid, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Grid, _extends({}, props, {
     columns: columns,
     sx: _extends({
       columnGap: columnGap,
@@ -727,12 +899,14 @@ var Row = function Row(_ref) {
   }), children);
 };
 
+var _excluded$9 = ["value", "sx"];
+
 var Menu = function Menu(_ref) {
   var value = _ref.value,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.IconButton, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.IconButton, _extends({
     sx: _extends({
       cursor: 'pointer',
       fill: 'none',
@@ -748,7 +922,7 @@ var Menu = function Menu(_ref) {
       }
     }, sx),
     "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React__default['default'].createElement("svg", {
+  }, props), !value && /*#__PURE__*/React__default["default"].createElement("svg", {
     style: {
       width: '50px',
       height: '30px',
@@ -757,34 +931,34 @@ var Menu = function Menu(_ref) {
     },
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
+  }, /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "52",
     y1: "29.9",
     x2: "16",
     y2: "29.9"
-  }), /*#__PURE__*/React__default['default'].createElement("line", {
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "52",
     y1: "6.1",
     x2: "16",
     y2: "6.1"
-  }), /*#__PURE__*/React__default['default'].createElement("line", {
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "52",
     y1: "18",
     x2: "16",
     y2: "18"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })), value && /*#__PURE__*/React__default['default'].createElement("svg", {
+  })), value && /*#__PURE__*/React__default["default"].createElement("svg", {
     style: {
       width: '50px',
       height: '30px',
@@ -793,23 +967,23 @@ var Menu = function Menu(_ref) {
     },
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
+  }, /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "50.85",
     y1: "29.79",
     x2: "17.15",
     y2: "6.21"
-  }), /*#__PURE__*/React__default['default'].createElement("line", {
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "17.15",
     y1: "29.79",
     x2: "50.85",
     y2: "6.21"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
@@ -818,28 +992,30 @@ var Menu = function Menu(_ref) {
   })));
 };
 
-var Settings = function Settings(_ref) {
-  var _extends2;
+var _excluded$8 = ["value", "sx"];
 
+var Settings = function Settings(_ref) {
   var value = _ref.value,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.IconButton, _extends({
-    sx: _extends((_extends2 = {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.IconButton, _extends({
+    sx: _extends({
       cursor: 'pointer',
       fill: 'none',
       strokeWidth: '2px',
-      stroke: 'text'
-    }, _extends2["fill"] = 'background', _extends2['.paren'] = {
-      opacity: '0'
-    }, _extends2['@media (hover: hover) and (pointer: fine)'] = {
-      '&:hover .paren': {
-        opacity: '1'
+      stroke: 'text',
+      '.paren': {
+        opacity: '0'
+      },
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover .paren': {
+          opacity: '1'
+        }
       }
-    }, _extends2), sx),
+    }, sx),
     "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React__default['default'].createElement("svg", {
+  }, props), !value && /*#__PURE__*/React__default["default"].createElement("svg", {
     style: {
       width: '50px',
       height: '30px',
@@ -848,47 +1024,47 @@ var Settings = function Settings(_ref) {
     },
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
+  }, /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "24",
     y1: "2.1",
     x2: "24",
+    y2: "6.1"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "24",
+    y1: "24.1",
+    x2: "24",
     y2: "33.9"
-  }), /*#__PURE__*/React__default['default'].createElement("line", {
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "44",
     y1: "2.1",
     x2: "44",
+    y2: "12.1"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "44",
+    y1: "30.1",
+    x2: "44",
     y2: "33.9"
-  }), /*#__PURE__*/React__default['default'].createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "9",
-    stroke: "none"
-  }), /*#__PURE__*/React__default['default'].createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "9",
-    stroke: "none"
-  }), /*#__PURE__*/React__default['default'].createElement("circle", {
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
     cx: "24",
     cy: "15.1",
     r: "5"
-  }), /*#__PURE__*/React__default['default'].createElement("circle", {
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
     cx: "44",
     cy: "21.1",
     r: "5"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })), value && /*#__PURE__*/React__default['default'].createElement("svg", {
+  })), value && /*#__PURE__*/React__default["default"].createElement("svg", {
     style: {
       width: '50px',
       height: '30px',
@@ -897,23 +1073,23 @@ var Settings = function Settings(_ref) {
     },
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React__default['default'].createElement("line", {
+  }, /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "50.85",
     y1: "29.79",
     x2: "17.15",
     y2: "6.21"
-  }), /*#__PURE__*/React__default['default'].createElement("line", {
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
     x1: "17.15",
     y1: "29.79",
     x2: "50.85",
     y2: "6.21"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
     className: "paren",
     d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     style: {
       transition: 'all 0.2s'
     },
@@ -922,9 +1098,11 @@ var Settings = function Settings(_ref) {
   })));
 };
 
+var _excluded$7 = ["sx"];
+
 var Dimmer = function Dimmer(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var _useColorMode = themeUi.useColorMode(),
       colorMode = _useColorMode[0],
@@ -933,7 +1111,7 @@ var Dimmer = function Dimmer(_ref) {
   var toggle = React.useCallback(function () {
     setColorMode(colorMode === 'light' ? 'dark' : 'light');
   }, [colorMode]);
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.IconButton, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.IconButton, _extends({
     "aria-label": "Toggle dark mode",
     onClick: toggle,
     role: "checkbox",
@@ -944,7 +1122,7 @@ var Dimmer = function Dimmer(_ref) {
       cursor: 'pointer',
       color: 'secondary'
     }, sx)
-  }, props), /*#__PURE__*/React__default['default'].createElement(icons.Sun, {
+  }, props), /*#__PURE__*/React__default["default"].createElement(icons.Sun, {
     sx: {
       strokeWidth: '1.75',
       transition: 'stroke 0.15s',
@@ -957,7 +1135,7 @@ var Dimmer = function Dimmer(_ref) {
   }));
 };
 
-var sx = {
+var sx$1 = {
   link: function link(current, label, first) {
     if (first === void 0) {
       first = false;
@@ -1005,7 +1183,7 @@ var links = [{
 }];
 
 var HoverArrow = function HoverArrow() {
-  return /*#__PURE__*/React__default['default'].createElement(icons.Arrow, {
+  return /*#__PURE__*/React__default["default"].createElement(icons.Arrow, {
     id: "arrow",
     sx: {
       pointerEvents: 'none',
@@ -1033,20 +1211,20 @@ var Nav = function Nav(_ref) {
   var href = mode === 'remote' ? 'https://carbonplan.org/' + url : '/' + url;
 
   if (mode === 'homepage' || mode === 'local' && nav === url) {
-    return /*#__PURE__*/React__default['default'].createElement(NextLink__default['default'], {
+    return /*#__PURE__*/React__default["default"].createElement(NextLink__default["default"], {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+    }, /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
       onClick: function onClick() {
         if (nav === url) setExpanded(false);
       },
-      sx: sx.link(nav, url, first)
-    }, /*#__PURE__*/React__default['default'].createElement(HoverArrow, null), display));
+      sx: sx$1.link(nav, url, first)
+    }, /*#__PURE__*/React__default["default"].createElement(HoverArrow, null), display));
   } else {
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
       href: href,
-      sx: sx.link(nav, url, first)
-    }, /*#__PURE__*/React__default['default'].createElement(HoverArrow, null), display);
+      sx: sx$1.link(nav, url, first)
+    }, /*#__PURE__*/React__default["default"].createElement(HoverArrow, null), display);
   }
 };
 
@@ -1056,7 +1234,7 @@ var NavGroup = function NavGroup(_ref2) {
       mode = _ref2.mode,
       setExpanded = _ref2.setExpanded;
   return links.map(function (d, i) {
-    return /*#__PURE__*/React__default['default'].createElement(Nav, {
+    return /*#__PURE__*/React__default["default"].createElement(Nav, {
       key: i,
       link: d,
       mode: mode,
@@ -1082,46 +1260,46 @@ var Header = function Header(_ref3) {
     setExpanded(!expanded);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Row, {
+  return /*#__PURE__*/React__default["default"].createElement(Row, {
     sx: {
       width: '100%',
       pt: ['12px'],
       pb: [3]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1],
     width: [2]
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: 'block',
       width: 'fit-content'
     }
-  }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React__default['default'].createElement(NextLink__default['default'], {
+  }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React__default["default"].createElement(NextLink__default["default"], {
     href: "/",
     passHref: true
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
     "aria-label": "CarbonPlan Homepage",
     sx: {
       display: 'block'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Logo, {
+  }, /*#__PURE__*/React__default["default"].createElement(Logo, {
     id: "logo",
     sx: {
       cursor: 'pointer',
       color: 'primary'
     }
-  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
     href: "https://carbonplan.org",
     "aria-label": "CarbonPlan Homepage",
     sx: {
       display: 'block'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Logo, {
+  }, /*#__PURE__*/React__default["default"].createElement(Logo, {
     sx: {
       cursor: 'pointer',
       color: 'primary'
     }
-  })))), /*#__PURE__*/React__default['default'].createElement(Column, {
+  })))), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [4, 9],
     width: [2, 2],
     dr: 1,
@@ -1129,13 +1307,13 @@ var Header = function Header(_ref3) {
       display: [status ? 'flex' : 'none', 'flex', 'flex', 'flex'],
       alignItems: 'center'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       fontSize: [1, 2, 3],
       position: 'relative',
       top: ['-2px', '-3px', '-3px']
     }
-  }, status ? "(" + status + ")" : '')), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, status ? "(" + status + ")" : '')), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [status ? 6 : 4, 6, 12, 12],
     width: [status ? 1 : 3, 3, 2, 2],
     sx: {
@@ -1143,7 +1321,7 @@ var Header = function Header(_ref3) {
       alignItems: 'center',
       justifyContent: 'flex-end'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       mr: ['18px'],
       position: 'relative',
@@ -1152,12 +1330,12 @@ var Header = function Header(_ref3) {
       transition: 'opacity 0.15s',
       display: [status ? 'none' : 'block', 'block', dimmer === 'top' ? 'block' : 'none', dimmer === 'top' ? 'block' : 'none']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Dimmer, {
+  }, /*#__PURE__*/React__default["default"].createElement(Dimmer, {
     sx: {
       opacity: expanded || settings && settings.value ? 0 : 1,
       color: 'primary'
     }
-  })), settings && /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  })), settings && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       mr: ['21px'],
       position: 'relative',
@@ -1165,14 +1343,14 @@ var Header = function Header(_ref3) {
       transition: 'opacity 0.15s',
       display: [status ? 'none' : 'block', 'block', 'none', 'none']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Settings, {
+  }, /*#__PURE__*/React__default["default"].createElement(Settings, {
     value: settings.value,
     onClick: settings.onClick,
     sx: {
       opacity: expanded ? 0 : 1,
       stroke: 'primary'
     }
-  })), /*#__PURE__*/React__default['default'].createElement(Menu, {
+  })), /*#__PURE__*/React__default["default"].createElement(Menu, {
     sx: {
       transition: 'opacity 0.15s',
       pointerEvents: settings && settings.value ? 'none' : 'all',
@@ -1182,7 +1360,7 @@ var Header = function Header(_ref3) {
     },
     value: expanded,
     onClick: toggle
-  })), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  })), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       opacity: expanded ? 1 : 0,
       pointerEvents: expanded ? 'all' : 'none',
@@ -1198,16 +1376,16 @@ var Header = function Header(_ref3) {
       pt: ['79px'],
       transition: 'opacity 0.25s'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, /*#__PURE__*/React__default['default'].createElement(Row, null, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Container, null, /*#__PURE__*/React__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [2, 4, 7, 7],
     width: [5, 4, 5, 5]
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "nav",
     sx: {
       display: expanded ? 'inherit' : 'none',
       mt: [5, 5, 5, 6]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(NavGroup, {
+  }, /*#__PURE__*/React__default["default"].createElement(NavGroup, {
     links: links,
     nav: nav,
     mode: mode,
@@ -1218,49 +1396,49 @@ var Header = function Header(_ref3) {
 var Monogram = function Monogram(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
     as: "svg",
     width: "80",
     stroke: "none",
     fill: "currentColor",
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React__default['default'].createElement("path", {
+  }, props), /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M21.9395,14.9395 L17.5005,19.3785 L17.5005,7.0005 L14.5005,7.0005 L14.5005,19.3785 L10.0605,14.9395 L7.9395,17.0605 L14.9395,24.0605 C15.2325,24.3535 15.6165,24.5005 16.0005,24.5005 C16.3835,24.5005 16.7675,24.3535 17.0605,24.0605 L24.0605,17.0605 L21.9395,14.9395 Z"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M27.5986,4 L22.8966,4 C26.5556,6.303 28.9996,10.366 28.9996,15 C28.9996,20.4 25.6896,25.039 20.9926,27 L26.5586,27 C29.8886,24.068 31.9996,19.785 31.9996,15 C31.9996,10.734 30.3196,6.868 27.5986,4"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M3,15 C3,10.366 5.444,6.303 9.104,4 L4.401,4 C1.68,6.868 0,10.734 0,15 C0,19.785 2.112,24.068 5.441,27 L11.008,27 C6.311,25.039 3,20.4 3,15"
   }));
 };
 
 var Footer = function Footer() {
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       mt: [7, 7, 7, 8],
       mb: [7, 7, 7, 8],
       pb: [2, 1, 0, 0]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Row, {
+  }, /*#__PURE__*/React__default["default"].createElement(Row, {
     sx: {
       mb: [0, 0, 4, 5]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 2],
     width: [3, 3]
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       fontSize: [2, 2, 2, 3],
       fontFamily: 'heading',
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "EMAIL"), /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+  }, "EMAIL"), /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
     href: "mailto:hello@carbonplan.org",
     sx: {
       textDecoration: 'none',
       fontSize: [2, 2, 2, 3]
     }
-  }, "hello@carbonplan.org"))), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, "hello@carbonplan.org"))), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [5],
     width: [1],
     dl: 1,
@@ -1269,57 +1447,57 @@ var Footer = function Footer() {
       display: ['flex', 'none', 'none', 'none'],
       justifyContent: ['center']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Monogram, {
+  }, /*#__PURE__*/React__default["default"].createElement(Monogram, {
     sx: {
       mt: ['-4px'],
       width: '60px',
       height: '60px'
     }
-  })), /*#__PURE__*/React__default['default'].createElement(Column, {
+  })), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 5, 5, 5],
     width: [3, 3],
     sx: {
       mt: [3, 0, 0, 0]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       fontSize: [2, 2, 2, 3],
       fontFamily: 'heading',
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "FOLLOW"), /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
+  }, "FOLLOW"), /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
     href: "https://twitter.com/carbonplanorg",
     sx: {
       textDecoration: 'none',
       fontSize: [2, 2, 2, 3]
     }
-  }, "@carbonplanorg"))), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, "@carbonplanorg"))), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 9],
     width: [5, 4, 3, 3],
     sx: {
       mt: ['42px', '42px', 0, 0],
       mb: [3, 3, 0, 0]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, null, /*#__PURE__*/React__default["default"].createElement(themeUi.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__default['default'].createElement(Row, {
+  }, "CarbonPlan is a registered non-profit public benefit corporation in California with 501(c)(3) status.")))), /*#__PURE__*/React__default["default"].createElement(Row, {
     sx: {
       mb: ['2px'],
       mt: [5, 5, 4]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 1, 2, 2],
     width: [3, 2, 3, 3],
     sx: {
       display: 'flex',
       alignItems: ['flex-start', 'flex-start', 'flex-end']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       bottom: '0px',
       borderStyle: 'solid',
@@ -1328,14 +1506,14 @@ var Footer = function Footer() {
       borderTopWidth: '1px',
       pt: [2]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       color: 'secondary',
       fontSize: [1, 1, 1, 2],
       fontFamily: 'mono',
       letterSpacing: 'mono'
     }
-  }, "(c) 2021 CARBONPLAN"))), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, "(c) 2021 CARBONPLAN"))), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [4, 3, 5, 5],
     width: [2, 2, 3, 3],
     sx: {
@@ -1343,7 +1521,7 @@ var Footer = function Footer() {
       alignItems: ['flex-start', 'flex-start', 'flex-end'],
       mt: [0, 0, 0, 0]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       bottom: '0px',
       borderStyle: 'solid',
@@ -1353,10 +1531,10 @@ var Footer = function Footer() {
       width: ['100%', 'auto', 'auto', 'auto'],
       pt: [2]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(NextLink__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement(NextLink__default["default"], {
     href: "/terms",
     passHref: true
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "a",
     sx: {
       textDecoration: 'none',
@@ -1366,13 +1544,13 @@ var Footer = function Footer() {
       letterSpacing: 'mono',
       display: 'block'
     }
-  }, "READ OUR TERMS")))), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, "READ OUR TERMS")))), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [5, 7, 9, 9],
     width: [2, 3, 3, 3],
     sx: {
       display: ['none', 'initial', 'initial', 'initial']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Monogram, {
+  }, /*#__PURE__*/React__default["default"].createElement(Monogram, {
     sx: {
       width: 80,
       height: 80,
@@ -1382,6 +1560,77 @@ var Footer = function Footer() {
   }))));
 };
 
+var GitSha = function GitSha() {
+  var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
+  var slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
+
+  var _useThemeUI = themeUi.useThemeUI(),
+      theme = _useThemeUI.theme;
+
+  var color = theme.rawColors.secondary;
+
+  if (sha && owner && slug) {
+    var shortSha = sha.substring(0, 7);
+    var href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
+      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__default["default"].createElement(themeUi.Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React__default["default"].createElement(themeUi.Text, {
+      sx: {
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        ml: [2],
+        fontFamily: 'mono',
+        letterSpacing: 'body',
+        color: color,
+        fontSize: [1],
+        textTransform: 'uppercase'
+      }
+    }, color));
+  }
+};
+
+var Separator = function Separator(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    fill: color,
+    opacity: "0.8",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    r: 5,
+    cx: 19,
+    cy: 19
+  }));
+};
+
 var Value = function Value(_ref) {
   var mode = _ref.mode;
 
@@ -1415,7 +1664,7 @@ var Value = function Value(_ref) {
       };
     }
   }, []);
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Text, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Text, {
     sx: {
       whiteSpace: 'nowrap',
       display: 'inline-block',
@@ -1431,12 +1680,7 @@ var Value = function Value(_ref) {
 
 var Metadata = function Metadata(_ref2) {
   var mode = _ref2.mode;
-
-  var _useThemeUI = themeUi.useThemeUI(),
-      theme = _useThemeUI.theme;
-
-  var color = theme.rawColors.secondary;
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       userSelect: 'none',
       position: 'fixed',
@@ -1446,30 +1690,9 @@ var Metadata = function Metadata(_ref2) {
       transform: 'rotate(90deg)',
       display: ['none', 'none', 'initial']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Value, {
+  }, /*#__PURE__*/React__default["default"].createElement(Value, {
     mode: mode
-  }), /*#__PURE__*/React__default['default'].createElement("svg", {
-    fill: color,
-    opacity: "0.8",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24"
-  }, /*#__PURE__*/React__default['default'].createElement("circle", {
-    r: 5,
-    cx: 19,
-    cy: 19
-  })), /*#__PURE__*/React__default['default'].createElement(themeUi.Text, {
-    sx: {
-      whiteSpace: 'nowrap',
-      display: 'inline-block',
-      ml: [2],
-      fontFamily: 'mono',
-      letterSpacing: 'body',
-      color: 'secondary',
-      fontSize: [1],
-      textTransform: 'uppercase'
-    }
-  }, color));
+  }), /*#__PURE__*/React__default["default"].createElement(GitSha, null));
 };
 
 function init(mode) {
@@ -1490,6 +1713,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+var _excluded$6 = ["duration", "delay", "children"];
 var fade = react.keyframes({
   from: {
     opacity: 0
@@ -1505,9 +1729,9 @@ var FadeIn = function FadeIn(_ref) {
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 0 : _ref$delay,
       children = _ref.children,
-      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
+      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({}, delegated, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({}, delegated, {
     sx: {
       animationDuration: duration + 'ms',
       animationDelay: delay + 'ms',
@@ -1570,7 +1794,7 @@ var Guide = function Guide(_ref) {
       document.removeEventListener('keydown', handler);
     };
   }, []);
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       position: 'fixed',
       width: '100%',
@@ -1580,25 +1804,25 @@ var Guide = function Guide(_ref) {
       pointerEvents: 'none',
       display: display ? 'initial' : 'none'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Container, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: ['none', 'none', 'initial', 'initial']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(GuideColumns, {
+  }, /*#__PURE__*/React__default["default"].createElement(GuideColumns, {
     indices: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
     color: color
-  })), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  })), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: ['none', 'initial', 'none', 'none']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(GuideColumns, {
+  }, /*#__PURE__*/React__default["default"].createElement(GuideColumns, {
     indices: [1, 2, 3, 4, 5, 6, 7, 8],
     color: color
-  })), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  })), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: ['initial', 'none', 'none', 'none']
     }
-  }, /*#__PURE__*/React__default['default'].createElement(GuideColumns, {
+  }, /*#__PURE__*/React__default["default"].createElement(GuideColumns, {
     indices: [1, 2, 3, 4, 5, 6],
     color: color
   }))));
@@ -1625,8 +1849,8 @@ function GuideColumns(_ref2) {
       opacity: color == 'teal' ? 0.4 : 1
     }
   };
-  return /*#__PURE__*/React__default['default'].createElement(Row, null, indices.map(function (i) {
-    return /*#__PURE__*/React__default['default'].createElement(Column, {
+  return /*#__PURE__*/React__default["default"].createElement(Row, null, indices.map(function (i) {
+    return /*#__PURE__*/React__default["default"].createElement(Column, {
       key: i,
       start: [i],
       width: [1, 1],
@@ -1636,7 +1860,7 @@ function GuideColumns(_ref2) {
         bg: color === 'teal' ? 'teal' : 'transparent',
         height: '100vh'
       }, sx.innerGuideColumn)
-    }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+    }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
       sx: _extends({
         mx: ['12px', 3, 3, 4],
         bg: color === 'teal' ? 'background' : 'transparent',
@@ -1677,27 +1901,27 @@ var Layout = function Layout(_ref) {
   var content = children;
 
   if (fade) {
-    content = /*#__PURE__*/React__default['default'].createElement(FadeIn, {
+    content = /*#__PURE__*/React__default["default"].createElement(FadeIn, {
       duration: 250
     }, content);
   }
 
   if (container) {
-    content = /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, content);
+    content = /*#__PURE__*/React__default["default"].createElement(themeUi.Container, null, content);
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, guide && /*#__PURE__*/React__default['default'].createElement(Guide, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, guide && /*#__PURE__*/React__default["default"].createElement(Guide, {
     color: guide
-  }), scrollbar && /*#__PURE__*/React__default['default'].createElement(Scrollbar, null), /*#__PURE__*/React__default['default'].createElement(Meta, {
+  }), scrollbar && /*#__PURE__*/React__default["default"].createElement(Scrollbar, null), /*#__PURE__*/React__default["default"].createElement(Meta, {
     card: card,
     description: description,
     title: title
-  }), /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
+  }), /*#__PURE__*/React__default["default"].createElement(themeUi.Flex, {
     sx: {
       flexDirection: 'column',
       minHeight: '100vh'
     }
-  }, header && /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, header && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "header",
     sx: {
       width: '100%',
@@ -1711,18 +1935,18 @@ var Layout = function Layout(_ref) {
       height: '56px',
       zIndex: 2000
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, /*#__PURE__*/React__default['default'].createElement(Header, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Container, null, /*#__PURE__*/React__default["default"].createElement(Header, {
     mode: links,
     status: status,
     nav: nav,
     settings: settings,
     dimmer: dimmer
-  }))), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }))), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       width: '100%',
       flex: '1 1 auto'
     }
-  }, content), footer && /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, content), footer && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "footer",
     sx: {
       width: '100%',
@@ -1731,31 +1955,31 @@ var Layout = function Layout(_ref) {
       borderWidth: '0px',
       borderTopWidth: '1px'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, /*#__PURE__*/React__default['default'].createElement(Footer, null))), dimmer === 'bottom' && /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Container, null, /*#__PURE__*/React__default["default"].createElement(Footer, null))), dimmer === 'bottom' && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: ['none', 'none', 'initial', 'initial'],
       position: ['fixed'],
       right: [13],
       bottom: [17, 17, 15, 15]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Dimmer, null)), metadata && /*#__PURE__*/React__default['default'].createElement(Metadata, {
+  }, /*#__PURE__*/React__default["default"].createElement(Dimmer, null)), metadata && /*#__PURE__*/React__default["default"].createElement(Metadata, {
     mode: metadata
   })));
 };
 
 var Custom404 = function Custom404() {
-  return /*#__PURE__*/React__default['default'].createElement(Layout, {
+  return /*#__PURE__*/React__default["default"].createElement(Layout, {
     footer: false,
     title: '404 / carbonplan'
-  }, /*#__PURE__*/React__default['default'].createElement(Row, {
+  }, /*#__PURE__*/React__default["default"].createElement(Row, {
     sx: {
       mb: [5, 0, 0],
       pt: [0, 0, 6]
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 1, 3, 3],
     width: [6, 4, 4, 4]
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Styled.h1, null, "Oops!"), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Styled.h1, null, "Oops!"), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       fontSize: [4, 4, 4, 5],
       lineHeight: 'h3',
@@ -1763,7 +1987,7 @@ var Custom404 = function Custom404() {
       mb: [2, 3, 3],
       maxWidth: ['90%', '90%', '400px']
     }
-  }, "Sorry but we can't seem to find the page you are looking for."), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, "Sorry but we can't seem to find the page you are looking for."), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       color: 'secondary',
       fontFamily: 'mono',
@@ -1771,16 +1995,16 @@ var Custom404 = function Custom404() {
       fontSize: [2, 2, 2, 3],
       mt: [4, 5, 5]
     }
-  }, "ERROR CODE 404")), /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, "ERROR CODE 404")), /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [2, 5, 7, 7],
     width: [4, 4, 4, 4]
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       width: ['100%'],
       mt: [2, 4, 4, 5],
       fill: 'primary'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(emoji.PoopSad, {
+  }, /*#__PURE__*/React__default["default"].createElement(emoji.PoopSad, {
     sx: {
       width: '100%',
       height: 'auto'
@@ -1793,7 +2017,7 @@ var Expander = function Expander(_ref) {
       id = _ref.id,
       onClick = _ref.onClick,
       sx = _ref.sx;
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.IconButton, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.IconButton, {
     onClick: onClick,
     id: id,
     role: "checkbox",
@@ -1814,9 +2038,9 @@ var Expander = function Expander(_ref) {
         }
       }
     }, sx)
-  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+  }, /*#__PURE__*/React__default["default"].createElement("svg", {
     viewBox: "0 0 16 16"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M8,0 V16 M0,8 H16",
     style: {
       strokeWidth: 2,
@@ -1827,16 +2051,18 @@ var Expander = function Expander(_ref) {
   })));
 };
 
+var _excluded$5 = ["label", "value", "sx", "children"];
+
 var Tag = function Tag(_ref) {
   var label = _ref.label,
       value = _ref.value,
       sx = _ref.sx,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var isClickable = props && (props.onClick || props.onDoubleClick);
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
     as: isClickable ? 'button' : 'span',
     role: "checkbox",
     "aria-checked": value,
@@ -1866,7 +2092,8 @@ var Tag = function Tag(_ref) {
   }, props), children);
 };
 
-var sx$1 = {
+var _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
+var sx = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -1943,15 +2170,15 @@ var Filter = function Filter(_ref2) {
       showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
       _ref2$multiSelect = _ref2.multiSelect,
       multiSelect = _ref2$multiSelect === void 0 ? false : _ref2$multiSelect,
-      props = _objectWithoutPropertiesLoose(_ref2, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, props, label && /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
-    sx: sx$1.label
-  }, label), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, props, label && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+    sx: sx.label
+  }, label), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       mt: label ? [3] : 0
     }
-  }, showAll && /*#__PURE__*/React__default['default'].createElement(Tag, {
+  }, showAll && /*#__PURE__*/React__default["default"].createElement(Tag, {
     onClick: function onClick() {
       return updateValues({
         values: values,
@@ -1965,7 +2192,7 @@ var Filter = function Filter(_ref2) {
       mr: [2]
     }
   }, "All"), Object.keys(values).map(function (d, i) {
-    return /*#__PURE__*/React__default['default'].createElement(Tag, {
+    return /*#__PURE__*/React__default["default"].createElement(Tag, {
       onClick: function onClick() {
         return updateValues({
           values: values,
@@ -2032,23 +2259,25 @@ var Group = function Group(_ref) {
   var additionalStyles = direction === 'horizontal' ? {
     display: 'inline-block'
   } : {};
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, null, React__default['default'].Children.map(children, function (child, i) {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, null, React__default["default"].Children.map(children, function (child, i) {
     var _extends2;
 
-    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
       sx: _extends((_extends2 = {}, _extends2[marginProperty] = i > 0 ? marginValue : 0, _extends2), additionalStyles)
     }, child);
   }));
 };
 
-var Input = function Input(_ref) {
+var _excluded$3 = ["size", "inverted", "sx"];
+
+var Input = function Input(_ref, ref) {
   var _extends2;
 
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       inverted = _ref.inverted,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2073,11 +2302,14 @@ var Input = function Input(_ref) {
     background: 'none !important'
   }, _extends2), getSizeStyles(size), sx);
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Input, _extends({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Input, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = React.forwardRef(Input);
+
 var getProps = function getProps(test) {
   return function (props) {
     var next = {};
@@ -2090,6 +2322,8 @@ var getProps = function getProps(test) {
   };
 };
 
+var _excluded$2 = ["children", "size", "sx"];
+
 var Select = function Select(_ref) {
   var _extends2;
 
@@ -2097,7 +2331,7 @@ var Select = function Select(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var sizeStyles = getSizeStyles(size);
@@ -2137,11 +2371,11 @@ var Select = function Select(_ref) {
   pr = width.map(function (d) {
     return d + 12;
   });
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: _extends({
       display: 'inline-block'
     }, sx)
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
     as: "select",
     ref: ref,
     onChange: function onChange(e) {
@@ -2169,7 +2403,7 @@ var Select = function Select(_ref) {
         background: 'transparent !important'
       }
     }, _extends2))
-  }, omitOnChange), children), /*#__PURE__*/React__default['default'].createElement(icons.Arrow, {
+  }, omitOnChange), children), /*#__PURE__*/React__default["default"].createElement(icons.Arrow, {
     sx: {
       width: width,
       height: height,
@@ -2183,16 +2417,19 @@ var Select = function Select(_ref) {
   }));
 };
 
-var Slider = function Slider(_ref) {
+var _excluded$1 = ["sx"];
+
+var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var color = sx && sx.color ? sx.color : 'primary';
 
   var _useThemeUI = themeUi.useThemeUI(),
       colors = _useThemeUI.theme.rawColors;
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Slider, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Slider, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2224,6 +2461,8 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
+var slider = React.forwardRef(Slider);
+
 var styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2284,29 +2523,29 @@ var Table = function Table(_ref) {
     throw new Error('Must provide columns, start, and width');
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "table",
     sx: _extends({
       display: 'block'
     }, sx)
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     as: "tbody",
     sx: {
       display: 'block'
     }
-  }, header && /*#__PURE__*/React__default['default'].createElement(Row, {
+  }, header && /*#__PURE__*/React__default["default"].createElement(Row, {
     as: "tr",
     sx: _extends({}, styles.reset, styles.header, styles.row, {
       color: color,
       borderTopWidth: !borderTop ? '0px' : '1px'
     })
-  }, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Column, {
     as: "td",
     start: [1],
     width: columns,
     sx: styles.index
   }, header)), data.map(function (row, i) {
-    return /*#__PURE__*/React__default['default'].createElement(Row, {
+    return /*#__PURE__*/React__default["default"].createElement(Row, {
       as: "tr",
       columns: columns,
       key: i,
@@ -2316,7 +2555,7 @@ var Table = function Table(_ref) {
         borderTopWidth: !borderTop && i === 0 && !header ? '0px' : '1px'
       })
     }, row.map(function (column, j) {
-      return /*#__PURE__*/React__default['default'].createElement(Column, {
+      return /*#__PURE__*/React__default["default"].createElement(Column, {
         as: "td",
         key: j,
         start: start[j],
@@ -2327,16 +2566,19 @@ var Table = function Table(_ref) {
   })));
 };
 
-var Toggle = function Toggle(_ref) {
+var _excluded = ["value", "onClick", "disabled", "sx"];
+
+var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var color$1 = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
-  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2350,7 +2592,7 @@ var Toggle = function Toggle(_ref) {
       m: [0],
       display: 'inline-block'
     }, sx)
-  }, props), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, props), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       width: '50px',
       height: '20px',
@@ -2360,7 +2602,7 @@ var Toggle = function Toggle(_ref) {
       transition: '0.15s',
       display: 'inline-block'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       width: '14px',
       height: '14px',
@@ -2374,6 +2616,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = React.forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2381,10 +2625,10 @@ var Tracking = function Tracking(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("script", {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("script", {
     async: true,
     src: "https://www.googletagmanager.com/gtag/js?id=" + id
-  }), /*#__PURE__*/React__default['default'].createElement("script", {
+  }), /*#__PURE__*/React__default["default"].createElement("script", {
     dangerouslySetInnerHTML: {
       __html: "\n          window.dataLayer = window.dataLayer || [];\n          function gtag(){dataLayer.push(arguments);}\n          gtag('js', new Date());\n          gtag('config', '" + id + "', {\n            page_path: window.location.pathname,\n          });\n        "
     }
@@ -2395,7 +2639,7 @@ var Tray = function Tray(_ref) {
   var expanded = _ref.expanded,
       sx = _ref.sx,
       children = _ref.children;
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: {
       display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
@@ -2410,7 +2654,7 @@ var Tray = function Tray(_ref) {
       opacity: expanded ? 0.9 : 0,
       pointerEvents: expanded ? 'all' : 'none'
     }
-  }), /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
     sx: _extends({
       display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
@@ -2431,7 +2675,7 @@ var Tray = function Tray(_ref) {
       pr: [3, 4, 5, 6],
       transform: expanded ? 'translateY(0)' : 'translateY(-100%)'
     }, sx)
-  }, /*#__PURE__*/React__default['default'].createElement(Row, null, /*#__PURE__*/React__default['default'].createElement(Column, {
+  }, /*#__PURE__*/React__default["default"].createElement(Row, null, /*#__PURE__*/React__default["default"].createElement(Column, {
     start: [1, 1, 1, 1],
     width: [6, 8, 10, 10]
   }, children))));
@@ -2473,8 +2717,9 @@ var formatDate = function formatDate(date, options) {
 };
 
 exports.Badge = Badge;
-exports.Button = Button;
-exports.Callout = Callout;
+exports.Button = button;
+exports.Callout = callout;
+exports.Colorbar = Colorbar;
 exports.Column = Column;
 exports.Custom404 = Custom404;
 exports.Dimmer = Dimmer;
@@ -2485,9 +2730,9 @@ exports.Footer = Footer;
 exports.Group = Group;
 exports.Guide = Guide;
 exports.Header = Header;
-exports.Input = Input;
+exports.Input = input;
 exports.Layout = Layout;
-exports.Link = Link;
+exports.Link = Link$1;
 exports.Logo = Logo;
 exports.Menu = Menu;
 exports.Meta = Meta;
@@ -2495,10 +2740,11 @@ exports.Monogram = Monogram;
 exports.Row = Row;
 exports.Scrollbar = Scrollbar;
 exports.Select = Select;
-exports.Slider = Slider;
+exports.Settings = Settings;
+exports.Slider = slider;
 exports.Table = Table;
 exports.Tag = Tag;
-exports.Toggle = Toggle;
+exports.Toggle = toggle;
 exports.Tracking = Tracking;
 exports.Tray = Tray;
 exports.formatDate = formatDate;