@carbonplan/components 11.0.1 → 11.0.5-develop.0

package/dst/index.modern.js

@@ -4,7 +4,6 @@ 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';
 
@@ -543,7 +542,7 @@ const Label = ({
   horizontal
 }) => /*#__PURE__*/React.createElement(Box, {
   sx: !horizontal && {
-    width: ['12px', '17px', '17px', '19px'],
+    width: ['13px', '17px', '17px', '19px'],
     alignSelf: 'flex-end'
   }
 }, /*#__PURE__*/React.createElement(Box, {
@@ -1992,7 +1991,6 @@ const Layout = ({
   container: _container = true
 }) => {
   let content = children;
-  const index = useBreakpointIndex();
 
   if (_fade) {
     content = /*#__PURE__*/React.createElement(FadeIn, {
@@ -2008,11 +2006,24 @@ const Layout = ({
     }, /*#__PURE__*/React.createElement(Container, null, content));
   }
 
+  const {
+    theme
+  } = useThemeUI();
   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]);
+    if (!theme) return;
+
+    const handler = () => {
+      if (settings != null && settings.value && settings != null && settings.onClick) {
+        settings == null ? void 0 : settings.onClick();
+      }
+    };
+
+    const query = window.matchMedia(`(max-width: ${theme.breakpoints[1]})`);
+    query.addListener(handler);
+    return () => {
+      query.removeListener(handler);
+    };
+  }, [theme, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
   const menuItems = [/*#__PURE__*/React.createElement(Dimmer, {
     key: "dimmer",
     sx: {
@@ -2026,6 +2037,7 @@ const Layout = ({
     menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
       key: "settings",
       sx: {
+        mr: ['2px'],
         display: ['inherit', 'inherit', 'none', 'none']
       }
     }, settings)));