@carbonplan/components 11.0.0-alpha.0 → 11.0.3

package/dst/index.modern.js

@@ -1,9 +1,10 @@
-import React, { forwardRef, cloneElement, useCallback, useState, useEffect, useRef } from 'react';
-import { Box, Link as Link$2, Flex, Grid, IconButton, useColorMode, Container, useThemeUI, Text, 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';
 
@@ -40,14 +41,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$g = ["sx", "children"];
-
-const Badge = _ref => {
+const Badge = (_ref) => {
   let {
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
 
   const color = sx && sx.color ? sx.color : 'primary';
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -72,8 +71,6 @@ const Badge = _ref => {
   }, children));
 };
 
-const _excluded$f = ["href", "children", "internal", "tracking"];
-
 const event = ({
   action,
   category,
@@ -99,7 +96,7 @@ const Link = (_ref, ref) => {
     internal = false,
     tracking = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, ["href", "children", "internal", "tracking"]);
 
   if (internal || href && href.startsWith('/')) {
     return /*#__PURE__*/React.createElement(NextLink, {
@@ -194,8 +191,6 @@ const getSizeStyles = size => {
   };
 };
 
-const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
-
 const Button = (_ref, ref) => {
   let {
     size = 'sm',
@@ -209,7 +204,7 @@ const Button = (_ref, ref) => {
     internal,
     tracking
   } = _ref,
-      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');
@@ -387,8 +382,6 @@ const Button = (_ref, ref) => {
 
 var button = forwardRef(Button);
 
-const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
-
 const Callout = (_ref, ref) => {
   let {
     label,
@@ -400,7 +393,7 @@ const Callout = (_ref, ref) => {
     tracking,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
 
   const baseColor = color || (inverted ? 'secondary' : 'primary');
   const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -483,13 +476,31 @@ const Callout = (_ref, ref) => {
 
 var callout = forwardRef(Callout);
 
-const _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
-const sx$2 = {
-  clim: {
-    fontFamily: 'mono',
-    fontSize: ['9px', 0, 0, 1],
-    letterSpacing: 'smallcaps',
-    textTransform: 'uppercase'
+const styles = {
+  clim: setClim => {
+    return {
+      fontFamily: 'mono',
+      fontSize: ['9px', 0, 0, 1],
+      letterSpacing: 'smallcaps',
+      textTransform: 'uppercase',
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover': {
+          borderBottom: setClim ? ({
+            colors
+          }) => `solid 1px ${colors.primary} !important` : 'unset'
+        }
+      },
+      '&:focus': {
+        outline: 'none',
+        borderBottom: setClim ? ({
+          colors
+        }) => `solid 1px ${colors.primary} !important` : 'unset'
+      },
+      transition: 'border 0.15s',
+      userSelect: setClim ? 'none !important' : 'unset',
+      width: 'fit-content',
+      minWidth: 'fit-content'
+    };
   }
 };
 const DIMENSIONS = {
@@ -517,7 +528,7 @@ const Gradient = ({
       width: width || DIMENSIONS.width,
       minHeight: height || DIMENSIONS.height
     }, {
-      mt: horizontal ? [0, '1px', '1px', 0] : 0,
+      mt: horizontal ? ['1px', '1px', '1px', 0] : 0,
       border: ({
         colors
       }) => `solid 1px ${colors.hinted}`,
@@ -532,6 +543,7 @@ const Label = ({
   horizontal
 }) => /*#__PURE__*/React.createElement(Box, {
   sx: !horizontal && {
+    width: ['13px', '17px', '17px', '19px'],
     alignSelf: 'flex-end'
   }
 }, /*#__PURE__*/React.createElement(Box, {
@@ -557,61 +569,195 @@ const Label = ({
   }
 }, units)));
 
-const Colorbar = _ref => {
+const Colorbar = (_ref) => {
   let {
     colormap,
     label,
     clim,
+    setClim,
+    setClimStep = 1,
     discrete,
     units,
     width,
     height,
     format = d => d,
-    horizontal = false
+    horizontal = false,
+    bottom = false,
+    sx,
+    sxClim
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"]);
 
   if (!Array.isArray(colormap)) {
     throw new Error(`expected array for colormap, got '${colormap}'.`);
   }
 
+  const climRef = [useRef(), useRef()];
+  const [climMinDragging, setClimMinDragging] = useState(false);
+  const [climMaxDragging, setClimMaxDragging] = useState(false);
+  let x,
+      y,
+      dx,
+      dy = 0;
+  let id = null;
+  let init = [0, 0];
+  let scale = setClimStep;
+
+  const draggingFunction = e => {
+    if (id === 'min' && !climMinDragging) setClimMinDragging(true);
+    if (id === 'max' && !climMaxDragging) setClimMaxDragging(true);
+    dx = e.pageX - x;
+    dy = e.pageY - y;
+
+    if (horizontal) {
+      if (id === 'min') setClim(prev => [Math.min(init[0] + dx * scale, init[1]), prev[1]]);
+      if (id === 'max') setClim(prev => [prev[0], Math.max(init[1] + dx * scale, init[0])]);
+    } else {
+      if (id === 'min') setClim(prev => [Math.min(init[0] - dy * scale, init[1]), prev[1]]);
+      if (id === 'max') setClim(prev => [prev[0], Math.max(init[1] - dy * scale, init[0])]);
+    }
+  };
+
+  const handleMouseDown = e => {
+    y = e.pageY;
+    x = e.pageX;
+    id = e.target.id;
+    init = clim;
+    document.body.setAttribute('style', horizontal ? 'cursor: ew-resize !important' : 'cursor: ns-resize !important');
+    document.addEventListener('mousemove', draggingFunction);
+
+    const updater = () => {
+      document.body.setAttribute('style', 'cursor: unset');
+      document.removeEventListener('mousemove', draggingFunction);
+      window.removeEventListener('mouseup', updater);
+      if (id === 'min') setClimMinDragging(false);
+      if (id === 'max') setClimMaxDragging(false);
+    };
+
+    window.addEventListener('mouseup', updater);
+  };
+
+  const increment = e => {
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim(prev => [Math.min(prev[0] + scale, prev[1]), prev[1]]);
+      climRef[0].current.focus();
+    }
+
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim(prev => [prev[0], Math.max(prev[1] + scale, prev[0])]);
+      climRef[1].current.focus();
+    }
+  };
+
+  const decrement = e => {
+    if (climRef[0].current === document.activeElement) {
+      e.preventDefault();
+      setClim(prev => [Math.min(prev[0] - scale, prev[1]), prev[1]]);
+      climRef[0].current.focus();
+    }
+
+    if (climRef[1].current === document.activeElement) {
+      e.preventDefault();
+      setClim(prev => [prev[0], Math.max(prev[1] - scale, prev[0])]);
+      climRef[1].current.focus();
+    }
+  };
+
+  useEffect(() => {
+    const listener = e => {
+      if (['ArrowUp', 'ArrowRight'].includes(e.code) || ['ArrowUp', 'ArrowRight'].includes(e.key)) {
+        increment(e);
+      }
+
+      if (['ArrowDown', 'ArrowLeft'].includes(e.code) || ['ArrowDown', 'ArrowLeft'].includes(e.key)) {
+        decrement(e);
+      }
+    };
+
+    window.addEventListener('keydown', listener);
+    return () => {
+      window.removeEventListener('keydown', listener);
+    };
+  }, [clim]);
+
   const ClimMin = () => {
     return /*#__PURE__*/React.createElement(Box, {
-      sx: _extends({}, sx$2.clim, {
-        ml: label ? horizontal ? '10px' : '2px' : 0,
+      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 ? ({
+          colors
+        }) => `solid 1px ${colors.primary}` : ({
+          colors
+        }) => `solid 1px ${colors.secondary}` : 'unset',
+        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
+      }, sxClim),
+      onMouseDown: setClim ? handleMouseDown : () => {},
+      onClick: () => climRef[0].current.focus()
     }, format(clim[0]));
   };
 
   const ClimMax = () => {
     return /*#__PURE__*/React.createElement(Box, {
-      sx: _extends({}, sx$2.clim, {
-        ml: horizontal ? ['2px', '1px', '1px', '2px'] : '2px',
-        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px']
-      })
+      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 ? ({
+          colors
+        }) => `solid 1px ${colors.primary}` : ({
+          colors
+        }) => `solid 1px ${colors.secondary}` : 'unset',
+        cursor: setClim ? horizontal ? 'ew-resize' : 'ns-resize' : 'default'
+      }, sxClim),
+      onMouseDown: setClim ? handleMouseDown : () => {},
+      onClick: () => climRef[1].current.focus()
     }, format(clim[1]));
   };
 
-  return /*#__PURE__*/React.createElement(Flex, {
-    sx: _extends({}, props.sx, {
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, props, {
+    sx: _extends({
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: 'start',
       justifyContent: 'flex-start',
-      gap: ['3px', '6px', '6px', '7px']
-    })
-  }, label && /*#__PURE__*/React.createElement(Label, {
+      gap: ['3px', '6px', '6px', '7px'],
+      height: !horizontal ? '100%' : 'unset'
+    }, sx)
+  }), label && /*#__PURE__*/React.createElement(Label, {
     label: label,
     units: units,
     horizontal: horizontal
-  }), horizontal && clim && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
+  }), /*#__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 && /*#__PURE__*/React.createElement(ClimMax, null), !horizontal && /*#__PURE__*/React.createElement(Flex, {
+  }), 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',
@@ -620,9 +766,7 @@ const Colorbar = _ref => {
   }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
 };
 
-const _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
-
-const Column = _ref => {
+const Column = (_ref) => {
   let {
     start,
     width,
@@ -631,7 +775,7 @@ const Column = _ref => {
     children,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -799,7 +943,7 @@ const Meta = ({
   }));
 };
 
-const Logo = _ref => {
+const Logo = (_ref) => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -835,16 +979,14 @@ const Logo = _ref => {
   })));
 };
 
-const _excluded$a = ["children", "sx", "columns", "gap"];
-
-const Row = _ref => {
+const Row = (_ref) => {
   let {
     children,
     sx,
     columns,
     gap
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
 
   const makeArray = input => {
     if (!Array.isArray(input)) {
@@ -892,14 +1034,12 @@ const Row = _ref => {
   }), children);
 };
 
-const _excluded$9 = ["value", "sx"];
-
-const Menu = _ref => {
+const Menu = (_ref) => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -987,151 +1127,7 @@ const Menu = _ref => {
   })));
 };
 
-const _excluded$8 = ["value", "sx"];
-
-const Settings = _ref => {
-  let {
-    value,
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    sx: _extends({
-      cursor: 'pointer',
-      fill: 'none',
-      strokeWidth: '2px',
-      stroke: 'text',
-      '.paren': {
-        opacity: '0'
-      },
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover .paren': {
-          opacity: '1'
-        }
-      }
-    }, sx),
-    "aria-label": "Toggle Menu"
-  }, props), !value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "2.1",
-    x2: "24",
-    y2: "6.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "24",
-    y1: "24.1",
-    x2: "24",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "2.1",
-    x2: "44",
-    y2: "12.1"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "44",
-    y1: "30.1",
-    x2: "44",
-    y2: "33.9"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "5"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })), value && /*#__PURE__*/React.createElement("svg", {
-    style: {
-      width: '50px',
-      height: '30px',
-      transform: 'scale(2)',
-      marginTop: '-3px'
-    },
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 68 36"
-  }, /*#__PURE__*/React.createElement("line", {
-    x1: "50.85",
-    y1: "29.79",
-    x2: "17.15",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: "17.15",
-    y1: "29.79",
-    x2: "50.85",
-    y2: "6.21"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M6.4,1.2c-6.3,10.3-6.3,23.3,0,33.6"
-  }), /*#__PURE__*/React.createElement("path", {
-    style: {
-      transition: 'all 0.2s'
-    },
-    className: "paren",
-    d: "M61.6,34.8c6.3-10.3,6.3-23.3,0-33.6"
-  })));
-};
-
-const _excluded$7 = ["sx"];
-
-const Dimmer = _ref => {
-  let {
-    sx
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-
-  const [colorMode, setColorMode] = useColorMode();
-  const toggle = useCallback(() => {
-    setColorMode(colorMode === 'light' ? 'dark' : 'light');
-  }, [colorMode]);
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    "aria-label": "Toggle dark mode",
-    onClick: toggle,
-    role: "checkbox",
-    sx: _extends({
-      width: 32,
-      height: 32,
-      display: 'inline-block',
-      cursor: 'pointer',
-      color: 'secondary'
-    }, sx)
-  }, props), /*#__PURE__*/React.createElement(Sun, {
-    sx: {
-      strokeWidth: '1.75',
-      transition: 'stroke 0.15s',
-      '@media (hover: hover) and (pointer: fine)': {
-        '&:hover': {
-          stroke: 'primary'
-        }
-      }
-    }
-  }));
-};
-
-const sx$1 = {
+const sx = {
   link: (current, label, first = false) => {
     return {
       width: 'auto',
@@ -1197,7 +1193,6 @@ const Nav = ({
   mode,
   nav,
   first,
-  dimmer,
   setExpanded
 }) => {
   const {
@@ -1214,12 +1209,12 @@ const Nav = ({
       onClick: () => {
         if (nav === url) setExpanded(false);
       },
-      sx: sx$1.link(nav, url, first)
+      sx: sx.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
   } else {
     return /*#__PURE__*/React.createElement(Link$2, {
       href: href,
-      sx: sx$1.link(nav, url, first)
+      sx: sx.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
   }
 };
@@ -1246,8 +1241,7 @@ const Header = ({
   status,
   mode,
   nav,
-  dimmer,
-  settings
+  menuItems
 }) => {
   const [expanded, setExpanded] = useState(false);
 
@@ -1257,7 +1251,6 @@ const Header = ({
 
   return /*#__PURE__*/React.createElement(Row, {
     sx: {
-      width: '100%',
       pt: ['12px'],
       pb: [3]
     }
@@ -1309,53 +1302,31 @@ const Header = ({
       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',
@@ -1388,7 +1359,7 @@ const Header = ({
   })))))));
 };
 
-const Monogram = _ref => {
+const Monogram = (_ref) => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -1555,6 +1526,40 @@ const Footer = () => {
   }))));
 };
 
+const Dimmer = (_ref) => {
+  let {
+    sx
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+
+  const [colorMode, setColorMode] = useColorMode();
+  const toggle = useCallback(() => {
+    setColorMode(colorMode === 'light' ? 'dark' : 'light');
+  }, [colorMode]);
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    "aria-label": "Toggle dark mode",
+    onClick: toggle,
+    role: "checkbox",
+    sx: _extends({
+      width: 32,
+      height: 32,
+      display: 'inline-block',
+      cursor: 'pointer',
+      color: 'secondary'
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement(Sun, {
+    sx: {
+      strokeWidth: '1.75',
+      transition: 'stroke 0.15s',
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover': {
+          stroke: 'primary'
+        }
+      }
+    }
+  }));
+};
+
 const GitSha = () => {
   const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
   const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
@@ -1706,7 +1711,6 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
-const _excluded$6 = ["duration", "delay", "children"];
 const fade = keyframes({
   from: {
     opacity: 0
@@ -1716,13 +1720,13 @@ const fade = keyframes({
   }
 });
 
-const FadeIn = _ref => {
+const FadeIn = (_ref) => {
   let {
     duration = 300,
     delay = 0,
     children
   } = _ref,
-      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1863,6 +1867,112 @@ function GuideColumns({
   }));
 }
 
+const Settings = (_ref) => {
+  let {
+    value,
+    sx
+  } = _ref,
+      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"
+  })));
+};
+
 const Layout = ({
   title,
   description,
@@ -1882,6 +1992,7 @@ const Layout = ({
   container: _container = true
 }) => {
   let content = children;
+  const index = useBreakpointIndex();
 
   if (_fade) {
     content = /*#__PURE__*/React.createElement(FadeIn, {
@@ -1890,7 +2001,34 @@ const Layout = ({
   }
 
   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(() => {
+    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]);
+  const menuItems = [/*#__PURE__*/React.createElement(Dimmer, {
+    key: "dimmer",
+    sx: {
+      color: 'primary',
+      mt: '-2px',
+      display: ['block', 'block', _dimmer === 'top' ? 'block' : 'none', _dimmer === 'top' ? 'block' : 'none']
+    }
+  })];
+
+  if (settings) {
+    menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
+      key: "settings",
+      sx: {
+        display: ['inherit', 'inherit', 'none', 'none']
+      }
+    }, settings)));
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, _guide && /*#__PURE__*/React.createElement(Guide, {
@@ -1922,8 +2060,7 @@ const Layout = ({
     mode: _links,
     status: status,
     nav: nav,
-    settings: settings,
-    dimmer: _dimmer
+    menuItems: menuItems
   }))), /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: '100%',
@@ -2035,16 +2172,14 @@ const Expander = ({
   })));
 };
 
-const _excluded$5 = ["label", "value", "sx", "children"];
-
-const Tag = _ref => {
+const Tag = (_ref) => {
   let {
     label,
     value,
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const isClickable = props && (props.onClick || props.onDoubleClick);
@@ -2078,8 +2213,7 @@ const Tag = _ref => {
   }, props), children);
 };
 
-const _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
-const sx = {
+const sx$1 = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -2140,7 +2274,7 @@ const updateValues = ({
   }
 };
 
-const Filter = _ref => {
+const Filter = (_ref) => {
   let {
     values,
     setValues,
@@ -2149,10 +2283,10 @@ const Filter = _ref => {
     showAll = false,
     multiSelect = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
 
   return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
-    sx: sx.label
+    sx: sx$1.label
   }, label), /*#__PURE__*/React.createElement(Box, {
     sx: {
       mt: label ? [3] : 0
@@ -2236,15 +2370,13 @@ const Group = ({
   }));
 };
 
-const _excluded$3 = ["size", "inverted", "sx"];
-
 const Input = (_ref, ref) => {
   let {
     size = 'sm',
     inverted,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
 
   const defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2295,15 +2427,14 @@ const getProps = test => props => {
   return next;
 };
 
-const _excluded$2 = ["children", "size", "sx"];
-
-const Select = _ref => {
+const Select = (_ref) => {
   let {
     children,
     size = 'sm',
-    sx
+    sx,
+    sxSelect
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx", "sxSelect"]);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const sizeStyles = getSizeStyles(size);
@@ -2375,7 +2506,7 @@ const Select = _ref => {
           background: 'transparent !important'
         }
       }
-    })
+    }, sxSelect)
   }, omitOnChange), children), /*#__PURE__*/React.createElement(Arrow, {
     sx: {
       width: width,
@@ -2390,13 +2521,11 @@ const Select = _ref => {
   }));
 };
 
-const _excluded$1 = ["sx"];
-
 const Slider = (_ref, ref) => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const {
@@ -2439,7 +2568,7 @@ const Slider = (_ref, ref) => {
 
 var slider = forwardRef(Slider);
 
-const styles = {
+const styles$1 = {
   reset: {
     verticalAlign: 'baseline',
     border: 0,
@@ -2508,7 +2637,7 @@ const Table = ({
     }
   }, 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'
     })
@@ -2516,13 +2645,13 @@ const Table = ({
     as: "td",
     start: [1],
     width: columns,
-    sx: styles.index
+    sx: styles$1.index
   }, header)), data.map((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'
@@ -2533,14 +2662,12 @@ const Table = ({
         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);
     }));
   })));
 };
 
-const _excluded = ["value", "onClick", "disabled", "sx"];
-
 const Toggle = (_ref, ref) => {
   let {
     value,
@@ -2548,7 +2675,7 @@ const Toggle = (_ref, ref) => {
     disabled,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
 
   const color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
@@ -2624,7 +2751,6 @@ const Tray = ({
 }) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
       top: '56px',
       bottom: '0px',
@@ -2639,7 +2765,6 @@ const Tray = ({
     }
   }), /*#__PURE__*/React.createElement(Box, {
     sx: _extends({
-      display: ['initial', 'initial', 'none', 'none'],
       position: 'fixed',
       width: 'calc(100vw)',
       top: '0px',