@carbonplan/components 10.5.0 → 11.0.2

package/dst/index.js

@@ -4,6 +4,7 @@ var color = require('@theme-ui/color');
 var NextLink = require('next/link');
 var icons = require('@carbonplan/icons');
 var emoji = require('@carbonplan/emoji');
+var matchMedia = require('@theme-ui/match-media');
 var Head = require('next/head');
 var react = require('@emotion/react');
 
@@ -46,15 +47,13 @@ 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, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
 
   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',
@@ -65,7 +64,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',
@@ -76,8 +75,6 @@ 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,
@@ -96,20 +93,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, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref2, ["href", "children", "internal", "tracking"]);
 
   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;
@@ -130,18 +129,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');
@@ -192,9 +195,7 @@ var getSizeStyles = function getSizeStyles(size) {
   };
 };
 
-var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
-
-var Button = function Button(_ref) {
+var Button = function Button(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       prefix = _ref.prefix,
@@ -206,7 +207,7 @@ var Button = function Button(_ref) {
       href = _ref.href,
       internal = _ref.internal,
       tracking = _ref.tracking,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"]);
 
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -344,18 +345,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({
@@ -364,7 +365,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,
@@ -373,16 +375,17 @@ 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 _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+var button = React.forwardRef(Button);
 
-var Callout = function Callout(_ref) {
+var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
       inverted = _ref.inverted,
@@ -391,7 +394,7 @@ var Callout = function Callout(_ref) {
       internal = _ref.internal,
       tracking = _ref.tracking,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
 
   var baseColor = color || (inverted ? 'secondary' : 'primary');
   var hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -421,13 +424,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',
@@ -436,14 +439,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',
@@ -456,27 +459,51 @@ 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 _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 callout = React.forwardRef(Callout);
+
+var styles = {
+  clim: function clim(setClim) {
+    return {
+      fontFamily: 'mono',
+      fontSize: ['9px', 0, 0, 1],
+      letterSpacing: 'smallcaps',
+      textTransform: 'uppercase',
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover': {
+          borderBottom: setClim ? function (_ref) {
+            var colors = _ref.colors;
+            return "solid 1px " + colors.primary + " !important";
+          } : 'unset'
+        }
+      },
+      '&:focus': {
+        outline: 'none',
+        borderBottom: setClim ? function (_ref2) {
+          var colors = _ref2.colors;
+          return "solid 1px " + colors.primary + " !important";
+        } : 'unset'
+      },
+      transition: 'border 0.15s',
+      userSelect: setClim ? 'none !important' : 'unset',
+      width: 'fit-content',
+      minWidth: 'fit-content'
+    };
   }
 };
 var DIMENSIONS = {
@@ -484,18 +511,18 @@ var DIMENSIONS = {
   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 Gradient = function Gradient(_ref3) {
+  var colormap = _ref3.colormap,
+      discrete = _ref3.discrete,
+      horizontal = _ref3.horizontal,
+      width = _ref3.width,
+      height = _ref3.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, {
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     sx: _extends({}, horizontal ? {
       width: width || DIMENSIONS.height,
       height: height || DIMENSIONS.width
@@ -503,9 +530,9 @@ var Gradient = function Gradient(_ref) {
       width: width || DIMENSIONS.width,
       minHeight: height || DIMENSIONS.height
     }, {
-      mt: horizontal ? [0, '1px', '1px', 0] : 0,
-      border: function border(_ref2) {
-        var colors = _ref2.colors;
+      mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
+      border: function border(_ref4) {
+        var colors = _ref4.colors;
         return "solid 1px " + colors.hinted;
       },
       background: css
@@ -513,15 +540,16 @@ var Gradient = function Gradient(_ref) {
   });
 };
 
-var Label = function Label(_ref3) {
-  var label = _ref3.label,
-      units = _ref3.units,
-      horizontal = _ref3.horizontal;
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+var Label = function Label(_ref5) {
+  var label = _ref5.label,
+      units = _ref5.units,
+      horizontal = _ref5.horizontal;
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     sx: !horizontal && {
+      width: ['13px', '17px', '17px', '19px'],
       alignSelf: 'flex-end'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     sx: _extends({
       mb: horizontal ? 0 : ['-4px', '-4px', '-4px', '-3px'],
       fontFamily: 'mono',
@@ -535,7 +563,7 @@ var Label = function Label(_ref3) {
       display: 'inline-block',
       overflow: 'visible'
     })
-  }, label, ' ', /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+  }, label, ' ', /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     as: "span",
     sx: {
       textTransform: 'none',
@@ -545,73 +573,238 @@ var Label = function Label(_ref3) {
   }, 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) {
+var Colorbar = function Colorbar(_ref6) {
+  var colormap = _ref6.colormap,
+      label = _ref6.label,
+      clim = _ref6.clim,
+      setClim = _ref6.setClim,
+      _ref6$setClimStep = _ref6.setClimStep,
+      setClimStep = _ref6$setClimStep === void 0 ? 1 : _ref6$setClimStep,
+      discrete = _ref6.discrete,
+      units = _ref6.units,
+      width = _ref6.width,
+      height = _ref6.height,
+      _ref6$format = _ref6.format,
+      format = _ref6$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);
+  } : _ref6$format,
+      _ref6$horizontal = _ref6.horizontal,
+      horizontal = _ref6$horizontal === void 0 ? false : _ref6$horizontal,
+      _ref6$bottom = _ref6.bottom,
+      bottom = _ref6$bottom === void 0 ? false : _ref6$bottom,
+      sx = _ref6.sx,
+      sxClim = _ref6.sxClim,
+      props = _objectWithoutPropertiesLoose(_ref6, ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"]);
 
   if (!Array.isArray(colormap)) {
     throw new Error("expected array for colormap, got '" + colormap + "'.");
   }
 
+  var climRef = [React.useRef(), React.useRef()];
+
+  var _useState = React.useState(false),
+      climMinDragging = _useState[0],
+      setClimMinDragging = _useState[1];
+
+  var _useState2 = React.useState(false),
+      climMaxDragging = _useState2[0],
+      setClimMaxDragging = _useState2[1];
+
+  var x,
+      y,
+      dx,
+      dy = 0;
+  var id = null;
+  var init = [0, 0];
+  var scale = setClimStep;
+
+  var draggingFunction = function 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(function (prev) {
+        return [Math.min(init[0] + dx * scale, init[1]), prev[1]];
+      });
+      if (id === 'max') setClim(function (prev) {
+        return [prev[0], Math.max(init[1] + dx * scale, init[0])];
+      });
+    } else {
+      if (id === 'min') setClim(function (prev) {
+        return [Math.min(init[0] - dy * scale, init[1]), prev[1]];
+      });
+      if (id === 'max') setClim(function (prev) {
+        return [prev[0], Math.max(init[1] - dy * scale, init[0])];
+      });
+    }
+  };
+
+  var handleMouseDown = function 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);
+
+    var updater = function 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);
+  };
+
+  var increment = function increment(e) {
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim(function (prev) {
+        return [Math.min(prev[0] + scale, prev[1]), prev[1]];
+      });
+      climRef[0].current.focus();
+    }
+
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim(function (prev) {
+        return [prev[0], Math.max(prev[1] + scale, prev[0])];
+      });
+      climRef[1].current.focus();
+    }
+  };
+
+  var decrement = function decrement(e) {
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim(function (prev) {
+        return [Math.min(prev[0] - scale, prev[1]), prev[1]];
+      });
+      climRef[0].current.focus();
+    }
+
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim(function (prev) {
+        return [prev[0], Math.max(prev[1] - scale, prev[0])];
+      });
+      climRef[1].current.focus();
+    }
+  };
+
+  React.useEffect(function () {
+    var listener = function 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 function () {
+      window.removeEventListener('keydown', listener);
+    };
+  }, [clim]);
+
   var ClimMin = function ClimMin() {
-    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
-      sx: _extends({}, sx$2.clim, {
-        ml: label ? horizontal ? '10px' : '2px' : 0,
+    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+      id: "min",
+      ref: climRef[0],
+      tabIndex: 0,
+      sx: _extends({}, styles.clim(setClim), {
+        ml: label ? horizontal ? bottom ? '0px' : '10px' : ['2px', '1px', '1px', '2px'] : 0,
         mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
-        mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px']
-      })
+        mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px'],
+        borderBottom: setClim ? climMinDragging ? function (_ref7) {
+          var colors = _ref7.colors;
+          return "solid 1px " + colors.primary;
+        } : function (_ref8) {
+          var colors = _ref8.colors;
+          return "solid 1px " + colors.secondary;
+        } : 'unset',
+        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
+      }, sxClim),
+      onMouseDown: setClim ? handleMouseDown : function () {},
+      onClick: function onClick() {
+        return climRef[0].current.focus();
+      }
     }, 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']
-      })
+    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
+      id: "max",
+      ref: climRef[1],
+      tabIndex: 0,
+      sx: _extends({}, styles.clim(setClim), {
+        ml: horizontal ? ['2px', '1px', '1px', '2px'] : ['2px', '1px', '1px', '2px'],
+        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
+        borderBottom: setClim ? climMaxDragging ? function (_ref9) {
+          var colors = _ref9.colors;
+          return "solid 1px " + colors.primary;
+        } : function (_ref10) {
+          var colors = _ref10.colors;
+          return "solid 1px " + colors.secondary;
+        } : 'unset',
+        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
+      }, sxClim),
+      onMouseDown: setClim ? handleMouseDown : function () {},
+      onClick: function onClick() {
+        return climRef[1].current.focus();
+      }
     }, format(clim[1]));
   };
 
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.Flex, {
-    sx: _extends({}, props.sx, {
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, _extends({}, props, {
+    sx: _extends({
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: 'start',
       justifyContent: 'flex-start',
-      gap: ['3px', '6px', '6px', '7px']
-    })
-  }, label && /*#__PURE__*/React__default["default"].createElement(Label, {
+      gap: ['3px', '6px', '6px', '7px'],
+      height: !horizontal ? '100%' : 'unset'
+    }, sx)
+  }), 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, {
+  }), /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
+    sx: {
+      flexGrow: horizontal ? 1 : 'unset',
+      flexDirection: 'column',
+      ml: bottom && label ? '4px' : '0px',
+      height: !horizontal ? '100%' : 'unset'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
+    sx: {
+      gap: ['3px', '6px', '6px', '7px'],
+      height: !horizontal ? '100%' : 'unset'
+    }
+  }, horizontal && clim && !bottom && /*#__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, {
+  }), horizontal && clim && !bottom && /*#__PURE__*/React__default['default'].createElement(ClimMax, null)), horizontal && clim && bottom && /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
+    sx: {
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ClimMin, null), /*#__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)));
+  }, 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,
@@ -619,7 +812,7 @@ var Column = function Column(_ref) {
       dr = _ref.dr,
       children = _ref.children,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -682,7 +875,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,
@@ -699,92 +892,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"
   }));
@@ -793,47 +986,45 @@ 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, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
 
   var makeArray = function makeArray(input) {
     if (!Array.isArray(input)) {
@@ -876,7 +1067,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,
@@ -885,14 +1076,12 @@ 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, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
 
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.IconButton, _extends({
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.IconButton, _extends({
     sx: _extends({
       cursor: 'pointer',
       fill: 'none',
@@ -908,7 +1097,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',
@@ -917,34 +1106,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',
@@ -953,23 +1142,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'
     },
@@ -978,150 +1167,7 @@ var Menu = function Menu(_ref) {
   })));
 };
 
-var _excluded$8 = ["value", "sx"];
-
-var Settings = function Settings(_ref) {
-  var value = _ref.value,
-      sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.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__default["default"].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__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", {
-    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: "5"
-  }), /*#__PURE__*/React__default["default"].createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "5"
-  }), /*#__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", {
-    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", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React__default["default"].createElement("line", {
-    x1: "50.85",
-    y1: "29.79",
-    x2: "17.15",
-    y2: "6.21"
-  }), /*#__PURE__*/React__default["default"].createElement("line", {
-    x1: "17.15",
-    y1: "29.79",
-    x2: "50.85",
-    y2: "6.21"
-  }), /*#__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", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })));
-};
-
-var _excluded$7 = ["sx"];
-
-var Dimmer = function Dimmer(_ref) {
-  var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  var _useColorMode = themeUi.useColorMode(),
-      colorMode = _useColorMode[0],
-      setColorMode = _useColorMode[1];
-
-  var toggle = React.useCallback(function () {
-    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-  }, [colorMode]);
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.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__default["default"].createElement(icons.Sun, {
-    sx: {
-      strokeWidth: '1.75',
-      transition: 'stroke 0.15s',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          stroke: 'primary'
-        }
-      }
-    }
-  }));
-};
-
-var sx$1 = {
+var sx = {
   link: function link(current, label, first) {
     if (first === void 0) {
       first = false;
@@ -1169,7 +1215,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',
@@ -1197,20 +1243,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$1.link(nav, url, first)
-    }, /*#__PURE__*/React__default["default"].createElement(HoverArrow, null), display));
+      sx: sx.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$1.link(nav, url, first)
-    }, /*#__PURE__*/React__default["default"].createElement(HoverArrow, null), display);
+      sx: sx.link(nav, url, first)
+    }, /*#__PURE__*/React__default['default'].createElement(HoverArrow, null), display);
   }
 };
 
@@ -1220,7 +1266,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,
@@ -1235,8 +1281,7 @@ var Header = function Header(_ref3) {
   var status = _ref3.status,
       mode = _ref3.mode,
       nav = _ref3.nav,
-      dimmer = _ref3.dimmer,
-      settings = _ref3.settings;
+      menuItems = _ref3.menuItems;
 
   var _useState = React.useState(false),
       expanded = _useState[0],
@@ -1246,46 +1291,45 @@ 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,
@@ -1293,60 +1337,38 @@ 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, {
-    start: [status ? 6 : 4, 6, 12, 12],
+  }, status ? "(" + status + ")" : '')), /*#__PURE__*/React__default['default'].createElement(Column, {
+    start: [status ? 6 : 4, 6, 11, 11],
     width: [status ? 1 : 3, 3, 2, 2],
     sx: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
-    sx: {
-      mr: ['18px'],
-      position: 'relative',
-      top: ['-1px'],
-      pointerEvents: expanded || settings && settings.value ? 'none' : 'all',
-      transition: 'opacity 0.15s',
-      display: [status ? 'none' : 'block', 'block', dimmer === 'top' ? 'block' : 'none', dimmer === 'top' ? 'block' : 'none']
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Dimmer, {
-    sx: {
-      opacity: expanded || settings && settings.value ? 0 : 1,
-      color: 'primary'
+      zIndex: 5000
     }
-  })), settings && /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
     sx: {
-      mr: ['21px'],
-      position: 'relative',
-      pointerEvents: expanded ? 'none' : 'all',
-      transition: 'opacity 0.15s',
-      display: [status ? 'none' : 'block', 'block', 'none', 'none']
+      justifyContent: 'flex-end'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Settings, {
-    value: settings.value,
-    onClick: settings.onClick,
+  }, /*#__PURE__*/React__default['default'].createElement(themeUi.Flex, {
     sx: {
+      mr: '18px',
+      gap: '18px',
       opacity: expanded ? 0 : 1,
-      stroke: 'primary'
+      transition: 'opacity 0.15s',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     }
-  })), /*#__PURE__*/React__default["default"].createElement(Menu, {
+  }, menuItems), /*#__PURE__*/React__default['default'].createElement(Menu, {
     sx: {
-      transition: 'opacity 0.15s',
-      pointerEvents: settings && settings.value ? 'none' : 'all',
-      opacity: settings && settings.value ? 0 : 1,
-      mr: ['-2px'],
-      zIndex: 5000
+      mr: ['-2px']
     },
     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',
@@ -1362,16 +1384,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,
@@ -1382,49 +1404,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,
@@ -1433,57 +1455,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',
@@ -1492,14 +1514,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: {
@@ -1507,7 +1529,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',
@@ -1517,10 +1539,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',
@@ -1530,13 +1552,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,
@@ -1546,6 +1568,41 @@ var Footer = function Footer() {
   }))));
 };
 
+var Dimmer = function Dimmer(_ref) {
+  var sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+
+  var _useColorMode = themeUi.useColorMode(),
+      colorMode = _useColorMode[0],
+      setColorMode = _useColorMode[1];
+
+  var toggle = React.useCallback(function () {
+    setColorMode(colorMode === 'light' ? 'dark' : 'light');
+  }, [colorMode]);
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.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__default['default'].createElement(icons.Sun, {
+    sx: {
+      strokeWidth: '1.75',
+      transition: 'stroke 0.15s',
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover': {
+          stroke: 'primary'
+        }
+      }
+    }
+  }));
+};
+
 var GitSha = function GitSha() {
   var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
   var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
@@ -1559,13 +1616,13 @@ var GitSha = function GitSha() {
   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, {
+    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
       sx: {
         display: 'inline-block'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+    }, /*#__PURE__*/React__default['default'].createElement(Separator, {
       color: color
-    }), /*#__PURE__*/React__default["default"].createElement(themeUi.Link, {
+    }), /*#__PURE__*/React__default['default'].createElement(themeUi.Link, {
       href: href,
       sx: {
         whiteSpace: 'nowrap',
@@ -1581,13 +1638,13 @@ var GitSha = function GitSha() {
     }, shortSha));
   } else {
     // fallback
-    return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+    return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
       sx: {
         display: 'inline-block'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Separator, {
+    }, /*#__PURE__*/React__default['default'].createElement(Separator, {
       color: color
-    }), /*#__PURE__*/React__default["default"].createElement(themeUi.Text, {
+    }), /*#__PURE__*/React__default['default'].createElement(themeUi.Text, {
       sx: {
         whiteSpace: 'nowrap',
         display: 'inline-block',
@@ -1604,13 +1661,13 @@ var GitSha = function GitSha() {
 
 var Separator = function Separator(_ref) {
   var color = _ref.color;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  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", {
+  }, /*#__PURE__*/React__default['default'].createElement("circle", {
     r: 5,
     cx: 19,
     cy: 19
@@ -1650,7 +1707,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',
@@ -1666,7 +1723,7 @@ var Value = function Value(_ref) {
 
 var Metadata = function Metadata(_ref2) {
   var mode = _ref2.mode;
-  return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, {
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     sx: {
       userSelect: 'none',
       position: 'fixed',
@@ -1676,9 +1733,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(GitSha, null));
+  }), /*#__PURE__*/React__default['default'].createElement(GitSha, null));
 };
 
 function init(mode) {
@@ -1699,7 +1756,6 @@ 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
@@ -1715,9 +1771,9 @@ var FadeIn = function FadeIn(_ref) {
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 0 : _ref$delay,
       children = _ref.children,
-      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
 
-  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',
@@ -1780,7 +1836,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%',
@@ -1790,25 +1846,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
   }))));
@@ -1835,8 +1891,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],
@@ -1846,7 +1902,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',
@@ -1858,6 +1914,110 @@ function GuideColumns(_ref2) {
   }));
 }
 
+var Settings = function Settings(_ref) {
+  var value = _ref.value,
+      sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+
+  return /*#__PURE__*/React__default['default'].createElement(themeUi.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__default['default'].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__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", {
+    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: "5"
+  }), /*#__PURE__*/React__default['default'].createElement("circle", {
+    cx: "44",
+    cy: "21.1",
+    r: "5"
+  }), /*#__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", {
+    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", {
+    style: {
+      width: '50px',
+      height: '30px',
+      transform: 'scale(2)',
+      marginTop: '-3px'
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 68 36"
+  }, /*#__PURE__*/React__default['default'].createElement("line", {
+    x1: "50.85",
+    y1: "29.79",
+    x2: "17.15",
+    y2: "6.21"
+  }), /*#__PURE__*/React__default['default'].createElement("line", {
+    x1: "17.15",
+    y1: "29.79",
+    x2: "50.85",
+    y2: "6.21"
+  }), /*#__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", {
+    style: {
+      transition: 'all 0.2s'
+    },
+    className: "paren",
+    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
+  })));
+};
+
 var Layout = function Layout(_ref) {
   var title = _ref.title,
       description = _ref.description,
@@ -1885,29 +2045,57 @@ var Layout = function Layout(_ref) {
       _ref$container = _ref.container,
       container = _ref$container === void 0 ? true : _ref$container;
   var content = children;
+  var index = matchMedia.useBreakpointIndex();
 
   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.Box, {
+      sx: {
+        mb: [8, 8, 9, 10]
+      }
+    }, /*#__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, {
+  React.useEffect(function () {
+    if (index > 2 && settings != null && settings.value && settings != null && settings.onClick) {
+      settings == null ? void 0 : settings.onClick();
+    }
+  }, [index, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
+  var menuItems = [/*#__PURE__*/React__default['default'].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__default['default'].createElement(Settings, _extends({
+      key: "settings",
+      sx: {
+        display: ['inherit', 'inherit', 'none', 'none']
+      }
+    }, settings)));
+  }
+
+  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%',
@@ -1921,18 +2109,17 @@ 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, {
+    menuItems: menuItems
+  }))), /*#__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%',
@@ -1941,31 +2128,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',
@@ -1973,7 +2160,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',
@@ -1981,16 +2168,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'
@@ -2003,7 +2190,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",
@@ -2024,9 +2211,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,
@@ -2037,18 +2224,16 @@ 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, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
 
   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,
@@ -2078,8 +2263,7 @@ var Tag = function Tag(_ref) {
   }, props), children);
 };
 
-var _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
-var sx = {
+var sx$1 = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -2156,15 +2340,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, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref2, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
 
-  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, {
+  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, {
     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,
@@ -2178,7 +2362,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,
@@ -2245,25 +2429,23 @@ 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 _excluded$3 = ["size", "inverted", "sx"];
-
-var Input = function Input(_ref) {
+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, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
 
   var defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2288,11 +2470,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 = {};
@@ -2305,8 +2490,6 @@ var getProps = function getProps(test) {
   };
 };
 
-var _excluded$2 = ["children", "size", "sx"];
-
 var Select = function Select(_ref) {
   var _extends2;
 
@@ -2314,7 +2497,8 @@ var Select = function Select(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      sxSelect = _ref.sxSelect,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx", "sxSelect"]);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var sizeStyles = getSizeStyles(size);
@@ -2354,11 +2538,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) {
@@ -2385,8 +2569,8 @@ var Select = function Select(_ref) {
         outline: 'none !important',
         background: 'transparent !important'
       }
-    }, _extends2))
-  }, omitOnChange), children), /*#__PURE__*/React__default["default"].createElement(icons.Arrow, {
+    }, _extends2), sxSelect)
+  }, omitOnChange), children), /*#__PURE__*/React__default['default'].createElement(icons.Arrow, {
     sx: {
       width: width,
       height: height,
@@ -2400,18 +2584,17 @@ var Select = function Select(_ref) {
   }));
 };
 
-var _excluded$1 = ["sx"];
-
-var Slider = function Slider(_ref) {
+var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
 
   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],
@@ -2443,7 +2626,9 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
-var styles = {
+var slider = React.forwardRef(Slider);
+
+var styles$1 = {
   reset: {
     verticalAlign: 'baseline',
     border: 0,
@@ -2503,61 +2688,60 @@ 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, {
+    sx: _extends({}, styles$1.reset, styles$1.header, styles$1.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
+    sx: styles$1.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,
-      sx: _extends({}, styles.reset, styles.row, {
+      sx: _extends({}, styles$1.reset, styles$1.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(function (column, j) {
-      return /*#__PURE__*/React__default["default"].createElement(Column, {
+      return /*#__PURE__*/React__default['default'].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)
+        sx: j == 0 && index ? _extends({}, styles$1.reset, styles$1.index) : _extends({}, styles$1.reset, styles$1.entry)
       }, column);
     }));
   })));
 };
 
-var _excluded = ["value", "onClick", "disabled", "sx"];
-
-var Toggle = function Toggle(_ref) {
+var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
 
   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",
@@ -2571,7 +2755,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',
@@ -2581,7 +2765,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',
@@ -2595,6 +2779,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = React.forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2602,10 +2788,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        "
     }
@@ -2616,9 +2802,8 @@ 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',
       top: '56px',
       bottom: '0px',
@@ -2631,9 +2816,8 @@ 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',
       width: 'calc(100vw)',
       top: '0px',
@@ -2652,7 +2836,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))));
@@ -2694,8 +2878,8 @@ 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;
@@ -2707,9 +2891,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;
@@ -2718,10 +2902,10 @@ exports.Row = Row;
 exports.Scrollbar = Scrollbar;
 exports.Select = Select;
 exports.Settings = Settings;
-exports.Slider = Slider;
+exports.Slider = slider;
 exports.Table = Table;
 exports.Tag = Tag;
-exports.Toggle = Toggle;
+exports.Toggle = toggle;
 exports.Tracking = Tracking;
 exports.Tray = Tray;
 exports.formatDate = formatDate;