@carbonplan/components 11.0.1 → 11.0.5-develop.0

package/dst/index.js

@@ -4,7 +4,6 @@ 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');
 
@@ -546,7 +545,7 @@ var Label = function Label(_ref5) {
       horizontal = _ref5.horizontal;
   return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
     sx: !horizontal && {
-      width: ['12px', '17px', '17px', '19px'],
+      width: ['13px', '17px', '17px', '19px'],
       alignSelf: 'flex-end'
     }
   }, /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
@@ -2045,7 +2044,6 @@ 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, {
@@ -2061,11 +2059,24 @@ var Layout = function Layout(_ref) {
     }, /*#__PURE__*/React__default['default'].createElement(themeUi.Container, null, content));
   }
 
+  var _useThemeUI = themeUi.useThemeUI(),
+      theme = _useThemeUI.theme;
+
   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]);
+    if (!theme) return;
+
+    var handler = function handler() {
+      if (settings != null && settings.value && settings != null && settings.onClick) {
+        settings == null ? void 0 : settings.onClick();
+      }
+    };
+
+    var query = window.matchMedia("(max-width: " + theme.breakpoints[1] + ")");
+    query.addListener(handler);
+    return function () {
+      query.removeListener(handler);
+    };
+  }, [theme, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
   var menuItems = [/*#__PURE__*/React__default['default'].createElement(Dimmer, {
     key: "dimmer",
     sx: {
@@ -2079,6 +2090,7 @@ var Layout = function Layout(_ref) {
     menuItems.push( /*#__PURE__*/React__default['default'].createElement(Settings, _extends({
       key: "settings",
       sx: {
+        mr: ['2px'],
         display: ['inherit', 'inherit', 'none', 'none']
       }
     }, settings)));