@carbonplan/components 10.4.0 → 11.0.1

package/dst/index.esm.js

@@ -1,9 +1,10 @@
-import React, { cloneElement, useCallback, useState, useEffect, useRef } from 'react';
-import { Box, Link as Link$1, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Flex, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
+import React, { forwardRef, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
+import { Box, Link as Link$2, Flex, Grid, IconButton, Container, useColorMode, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
 import { transparentize } from '@theme-ui/color';
 import NextLink from 'next/link';
 import { Arrow, Sun } from '@carbonplan/icons';
 import { PoopSad } from '@carbonplan/emoji';
+import { useBreakpointIndex } from '@theme-ui/match-media';
 import Head from 'next/head';
 import { keyframes } from '@emotion/react';
 
@@ -86,7 +87,7 @@ 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,
@@ -99,7 +100,9 @@ var Link = function Link(_ref2) {
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, props, children));
+    }, /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     var action;
     var category;
@@ -120,18 +123,22 @@ var Link = function Link(_ref2) {
       });
     };
 
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       onClick: track,
       onContextMenu: track,
       href: href
     }, props), children);
   } else {
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       href: href
     }, props), children);
   }
 };
 
+var Link$1 = forwardRef(Link);
+
 var getSizeStyles = function getSizeStyles(size) {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -182,7 +189,7 @@ var getSizeStyles = function getSizeStyles(size) {
   };
 };
 
-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,
@@ -352,7 +359,8 @@ var Button = function Button(_ref) {
   }, suffix && suffix));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -362,13 +370,16 @@ var Button = function Button(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
-var Callout = function Callout(_ref) {
+var button = forwardRef(Button);
+
+var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
       inverted = _ref.inverted,
@@ -442,7 +453,8 @@ var Callout = function Callout(_ref) {
   })));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -450,12 +462,343 @@ var Callout = function Callout(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = 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 = {
+  width: ['10px', '16px', '16px', '17px'],
+  height: ['80px', '110px', '110px', '130px']
+};
+
+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.createElement(Box, {
+    sx: _extends({}, horizontal ? {
+      width: width || DIMENSIONS.height,
+      height: height || DIMENSIONS.width
+    } : {
+      width: width || DIMENSIONS.width,
+      minHeight: height || DIMENSIONS.height
+    }, {
+      mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
+      border: function border(_ref4) {
+        var colors = _ref4.colors;
+        return "solid 1px " + colors.hinted;
+      },
+      background: css
+    })
+  });
+};
+
+var Label = function Label(_ref5) {
+  var label = _ref5.label,
+      units = _ref5.units,
+      horizontal = _ref5.horizontal;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: !horizontal && {
+      width: ['12px', '17px', '17px', '19px'],
+      alignSelf: 'flex-end'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: _extends({
+      mb: horizontal ? 0 : ['-4px', '-4px', '-4px', '-3px'],
+      fontFamily: 'mono',
+      fontSize: ['9px', 0, 0, 1],
+      letterSpacing: 'smallcaps',
+      textTransform: 'uppercase'
+    }, horizontal ? {} : {
+      writingMode: 'vertical-rl',
+      transform: 'rotate(180deg)',
+      whiteSpace: 'nowrap',
+      display: 'inline-block',
+      overflow: 'visible'
+    })
+  }, label, ' ', /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    sx: {
+      textTransform: 'none',
+      color: 'secondary',
+      display: 'inline-block'
+    }
+  }, units)));
+};
+
+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;
+  } : _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 = [useRef(), useRef()];
+
+  var _useState = useState(false),
+      climMinDragging = _useState[0],
+      setClimMinDragging = _useState[1];
+
+  var _useState2 = 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();
+    }
+  };
+
+  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.createElement(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'],
+        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.createElement(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.createElement(Flex, _extends({}, props, {
+    sx: _extends({
+      flexDirection: 'row',
+      alignItems: 'start',
+      justifyContent: 'flex-start',
+      gap: ['3px', '6px', '6px', '7px'],
+      height: !horizontal ? '100%' : 'unset'
+    }, sx)
+  }), label && /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    units: units,
+    horizontal: horizontal
+  }), /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      flexGrow: horizontal ? 1 : 'unset',
+      flexDirection: 'column',
+      ml: bottom && label ? '4px' : '0px',
+      height: !horizontal ? '100%' : 'unset'
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      gap: ['3px', '6px', '6px', '7px'],
+      height: !horizontal ? '100%' : 'unset'
+    }
+  }, horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
+    colormap: colormap,
+    horizontal: horizontal,
+    discrete: discrete,
+    width: width,
+    height: height
+  }), horizontal && clim && !bottom && /*#__PURE__*/React.createElement(ClimMax, null)), horizontal && clim && bottom && /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(ClimMax, null))), !horizontal && /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      flexDirection: 'column-reverse',
+      justifyContent: 'space-between',
+      height: height || DIMENSIONS.height
+    }
+  }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
+};
+
 var Column = function Column(_ref) {
   var start = _ref.start,
       width = _ref.width,
@@ -818,145 +1161,6 @@ var Menu = function Menu(_ref) {
   })));
 };
 
-var Settings = function Settings(_ref) {
-  var value = _ref.value,
-      sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
-
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    sx: _extends({
-      cursor: 'pointer',
-      fill: 'none',
-      strokeWidth: '2px',
-      stroke: 'text',
-      '.paren': {
-        opacity: '0'
-      },
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover .paren': {
-          opacity: '1'
-        }
-      }
-    }, sx),
-    "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "2.1",
-    x2: "24",
-    y2: "6.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "24.1",
-    x2: "24",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "2.1",
-    x2: "44",
-    y2: "12.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "30.1",
-    x2: "44",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })), value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "50.85",
-    y1: "29.79",
-    x2: "17.15",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "17.15",
-    y1: "29.79",
-    x2: "50.85",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })));
-};
-
-var Dimmer = function Dimmer(_ref) {
-  var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
-
-  var _useColorMode = useColorMode(),
-      colorMode = _useColorMode[0],
-      setColorMode = _useColorMode[1];
-
-  var toggle = useCallback(function () {
-    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-  }, [colorMode]);
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    "aria-label": "Toggle dark mode",
-    onClick: toggle,
-    role: "checkbox",
-    sx: _extends({
-      width: 32,
-      height: 32,
-      display: 'inline-block',
-      cursor: 'pointer',
-      color: 'secondary'
-    }, sx)
-  }, props), /*#__PURE__*/React.createElement(Sun, {
-    sx: {
-      strokeWidth: '1.75',
-      transition: 'stroke 0.15s',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          stroke: 'primary'
-        }
-      }
-    }
-  }));
-};
-
 var sx = {
   link: function link(current, label, first) {
     if (first === void 0) {
@@ -1036,14 +1240,14 @@ var Nav = function Nav(_ref) {
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, {
+    }, /*#__PURE__*/React.createElement(Link$2, {
       onClick: function onClick() {
         if (nav === url) setExpanded(false);
       },
       sx: sx.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
   } else {
-    return /*#__PURE__*/React.createElement(Link$1, {
+    return /*#__PURE__*/React.createElement(Link$2, {
       href: href,
       sx: sx.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
@@ -1071,8 +1275,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 = useState(false),
       expanded = _useState[0],
@@ -1084,7 +1287,6 @@ var Header = function Header(_ref3) {
 
   return /*#__PURE__*/React.createElement(Row, {
     sx: {
-      width: '100%',
       pt: ['12px'],
       pb: [3]
     }
@@ -1099,7 +1301,7 @@ var Header = function Header(_ref3) {
   }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React.createElement(NextLink, {
     href: "/",
     passHref: true
-  }, /*#__PURE__*/React.createElement(Link$1, {
+  }, /*#__PURE__*/React.createElement(Link$2, {
     "aria-label": "CarbonPlan Homepage",
     sx: {
       display: 'block'
@@ -1110,7 +1312,7 @@ var Header = function Header(_ref3) {
       cursor: 'pointer',
       color: 'primary'
     }
-  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$1, {
+  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$2, {
     href: "https://carbonplan.org",
     "aria-label": "CarbonPlan Homepage",
     sx: {
@@ -1136,53 +1338,31 @@ var Header = function Header(_ref3) {
       top: ['-2px', '-3px', '-3px']
     }
   }, status ? "(" + status + ")" : '')), /*#__PURE__*/React.createElement(Column, {
-    start: [status ? 6 : 4, 6, 12, 12],
+    start: [status ? 6 : 4, 6, 11, 11],
     width: [status ? 1 : 3, 3, 2, 2],
     sx: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end'
-    }
-  }, /*#__PURE__*/React.createElement(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.createElement(Dimmer, {
-    sx: {
-      opacity: expanded || settings && settings.value ? 0 : 1,
-      color: 'primary'
+      zIndex: 5000
     }
-  })), settings && /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(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.createElement(Settings, {
-    value: settings.value,
-    onClick: settings.onClick,
+  }, /*#__PURE__*/React.createElement(Flex, {
     sx: {
+      mr: '18px',
+      gap: '18px',
       opacity: expanded ? 0 : 1,
-      stroke: 'primary'
+      transition: 'opacity 0.15s',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     }
-  })), /*#__PURE__*/React.createElement(Menu, {
+  }, menuItems), /*#__PURE__*/React.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.createElement(Box, {
+  }))), /*#__PURE__*/React.createElement(Box, {
     sx: {
       opacity: expanded ? 1 : 0,
       pointerEvents: expanded ? 'all' : 'none',
@@ -1254,7 +1434,7 @@ var Footer = function Footer() {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
     href: "mailto:hello@carbonplan.org",
     sx: {
       textDecoration: 'none',
@@ -1288,7 +1468,7 @@ var Footer = function Footer() {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
     href: "https://twitter.com/carbonplanorg",
     sx: {
       textDecoration: 'none',
@@ -1382,6 +1562,41 @@ var Footer = function Footer() {
   }))));
 };
 
+var Dimmer = function Dimmer(_ref) {
+  var sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+
+  var _useColorMode = useColorMode(),
+      colorMode = _useColorMode[0],
+      setColorMode = _useColorMode[1];
+
+  var toggle = useCallback(function () {
+    setColorMode(colorMode === 'light' ? 'dark' : 'light');
+  }, [colorMode]);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    "aria-label": "Toggle dark mode",
+    onClick: toggle,
+    role: "checkbox",
+    sx: _extends({
+      width: 32,
+      height: 32,
+      display: 'inline-block',
+      cursor: 'pointer',
+      color: 'secondary'
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement(Sun, {
+    sx: {
+      strokeWidth: '1.75',
+      transition: 'stroke 0.15s',
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover': {
+          stroke: 'primary'
+        }
+      }
+    }
+  }));
+};
+
 var GitSha = function GitSha() {
   var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
   var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
@@ -1401,7 +1616,7 @@ var GitSha = function GitSha() {
       }
     }, /*#__PURE__*/React.createElement(Separator, {
       color: color
-    }), /*#__PURE__*/React.createElement(Link$1, {
+    }), /*#__PURE__*/React.createElement(Link$2, {
       href: href,
       sx: {
         whiteSpace: 'nowrap',
@@ -1693,6 +1908,110 @@ function GuideColumns(_ref2) {
   }));
 }
 
+var Settings = function Settings(_ref) {
+  var value = _ref.value,
+      sx = _ref.sx,
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    sx: _extends({
+      cursor: 'pointer',
+      fill: 'none',
+      strokeWidth: '2px',
+      stroke: 'text',
+      '.paren': {
+        opacity: '0'
+      },
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover .paren': {
+          opacity: '1'
+        }
+      }
+    }, sx),
+    "aria-label": "Toggle Menu"
+  }, props), !value && /*#__PURE__*/React.createElement("svg", {
+    style: {
+      width: '50px',
+      height: '30px',
+      transform: 'scale(2)',
+      marginTop: '-3px'
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 68 36"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "24",
+    y1: "2.1",
+    x2: "24",
+    y2: "6.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24",
+    y1: "24.1",
+    x2: "24",
+    y2: "33.9"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "44",
+    y1: "2.1",
+    x2: "44",
+    y2: "12.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "44",
+    y1: "30.1",
+    x2: "44",
+    y2: "33.9"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "24",
+    cy: "15.1",
+    r: "5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "44",
+    cy: "21.1",
+    r: "5"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      transition: 'all 0.2s'
+    },
+    className: "paren",
+    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      transition: 'all 0.2s'
+    },
+    className: "paren",
+    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
+  })), value && /*#__PURE__*/React.createElement("svg", {
+    style: {
+      width: '50px',
+      height: '30px',
+      transform: 'scale(2)',
+      marginTop: '-3px'
+    },
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 68 36"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "50.85",
+    y1: "29.79",
+    x2: "17.15",
+    y2: "6.21"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "17.15",
+    y1: "29.79",
+    x2: "50.85",
+    y2: "6.21"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      transition: 'all 0.2s'
+    },
+    className: "paren",
+    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
+  }), /*#__PURE__*/React.createElement("path", {
+    style: {
+      transition: 'all 0.2s'
+    },
+    className: "paren",
+    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
+  })));
+};
+
 var Layout = function Layout(_ref) {
   var title = _ref.title,
       description = _ref.description,
@@ -1720,6 +2039,7 @@ var Layout = function Layout(_ref) {
       _ref$container = _ref.container,
       container = _ref$container === void 0 ? true : _ref$container;
   var content = children;
+  var index = useBreakpointIndex();
 
   if (fade) {
     content = /*#__PURE__*/React.createElement(FadeIn, {
@@ -1728,7 +2048,34 @@ var Layout = function Layout(_ref) {
   }
 
   if (container) {
-    content = /*#__PURE__*/React.createElement(Container, null, content);
+    content = /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        mb: [8, 8, 9, 10]
+      }
+    }, /*#__PURE__*/React.createElement(Container, null, content));
+  }
+
+  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.createElement(Dimmer, {
+    key: "dimmer",
+    sx: {
+      color: 'primary',
+      mt: '-2px',
+      display: ['block', 'block', dimmer === 'top' ? 'block' : 'none', dimmer === 'top' ? 'block' : 'none']
+    }
+  })];
+
+  if (settings) {
+    menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
+      key: "settings",
+      sx: {
+        display: ['inherit', 'inherit', 'none', 'none']
+      }
+    }, settings)));
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, guide && /*#__PURE__*/React.createElement(Guide, {
@@ -1760,8 +2107,7 @@ var Layout = function Layout(_ref) {
     mode: links,
     status: status,
     nav: nav,
-    settings: settings,
-    dimmer: dimmer
+    menuItems: menuItems
   }))), /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: '100%',
@@ -2086,7 +2432,7 @@ var Group = function Group(_ref) {
   }));
 };
 
-var Input = function Input(_ref) {
+var Input = function Input(_ref, ref) {
   var _extends2;
 
   var _ref$size = _ref.size,
@@ -2119,10 +2465,13 @@ var Input = function Input(_ref) {
   }, _extends2), getSizeStyles(size), sx);
 
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = forwardRef(Input);
+
 var getProps = function getProps(test) {
   return function (props) {
     var next = {};
@@ -2142,7 +2491,8 @@ var Select = function Select(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx"]);
+      sxSelect = _ref.sxSelect,
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx", "sxSelect"]);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var sizeStyles = getSizeStyles(size);
@@ -2213,7 +2563,7 @@ var Select = function Select(_ref) {
         outline: 'none !important',
         background: 'transparent !important'
       }
-    }, _extends2))
+    }, _extends2), sxSelect)
   }, omitOnChange), children), /*#__PURE__*/React.createElement(Arrow, {
     sx: {
       width: width,
@@ -2228,7 +2578,7 @@ var Select = function Select(_ref) {
   }));
 };
 
-var Slider = function Slider(_ref) {
+var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
       props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
 
@@ -2238,6 +2588,7 @@ var Slider = function Slider(_ref) {
       colors = _useThemeUI.theme.rawColors;
 
   return /*#__PURE__*/React.createElement(Slider$1, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2269,7 +2620,9 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
-var styles = {
+var slider = forwardRef(Slider);
+
+var styles$1 = {
   reset: {
     verticalAlign: 'baseline',
     border: 0,
@@ -2341,7 +2694,7 @@ var Table = function Table(_ref) {
     }
   }, header && /*#__PURE__*/React.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'
     })
@@ -2349,13 +2702,13 @@ var Table = function Table(_ref) {
     as: "td",
     start: [1],
     width: columns,
-    sx: styles.index
+    sx: styles$1.index
   }, header)), data.map(function (row, i) {
     return /*#__PURE__*/React.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'
@@ -2366,13 +2719,13 @@ var Table = function Table(_ref) {
         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 Toggle = function Toggle(_ref) {
+var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
@@ -2382,6 +2735,7 @@ var Toggle = function Toggle(_ref) {
   var color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
   return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2419,6 +2773,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2442,7 +2798,6 @@ var Tray = function Tray(_ref) {
       children = _ref.children;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
       top: '56px',
       bottom: '0px',
@@ -2457,7 +2812,6 @@ var Tray = function Tray(_ref) {
     }
   }), /*#__PURE__*/React.createElement(Box, {
     sx: _extends({
-      display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
       width: 'calc(100vw)',
       top: '0px',
@@ -2517,5 +2871,5 @@ var formatDate = function formatDate(date, options) {
   return [month, day, year].filter(Boolean).join(' ');
 };
 
-export { Badge, Button, Callout, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+export { Badge, button as Button, callout as Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, input as Input, Layout, Link$1 as Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, slider as Slider, Table, Tag, toggle as Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
 //# sourceMappingURL=index.esm.js.map