@carbonplan/components 11.0.3 → 11.0.5-develop.2

package/dst/index.esm.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';
 
@@ -1612,7 +1611,8 @@ var GitSha = function GitSha() {
     var href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
     return /*#__PURE__*/React.createElement(Box, {
       sx: {
-        display: 'inline-block'
+        display: 'inline-block',
+        width: '87px'
       }
     }, /*#__PURE__*/React.createElement(Separator, {
       color: color
@@ -1634,7 +1634,8 @@ var GitSha = function GitSha() {
     // fallback
     return /*#__PURE__*/React.createElement(Box, {
       sx: {
-        display: 'inline-block'
+        display: 'inline-block',
+        width: '87px'
       }
     }, /*#__PURE__*/React.createElement(Separator, {
       color: color
@@ -1721,8 +1722,8 @@ var Metadata = function Metadata(_ref2) {
     sx: {
       userSelect: 'none',
       position: 'fixed',
-      bottom: 42,
-      right: 24,
+      bottom: '42px',
+      right: '24px',
       transformOrigin: 'right',
       transform: 'rotate(90deg)',
       display: ['none', 'none', 'initial']
@@ -2039,7 +2040,6 @@ 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, {
@@ -2055,11 +2055,24 @@ var Layout = function Layout(_ref) {
     }, /*#__PURE__*/React.createElement(Container, null, content));
   }
 
+  var _useThemeUI = useThemeUI(),
+      theme = _useThemeUI.theme;
+
   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.createElement(Dimmer, {
     key: "dimmer",
     sx: {
@@ -2073,6 +2086,7 @@ var Layout = function Layout(_ref) {
     menuItems.push( /*#__PURE__*/React.createElement(Settings, _extends({
       key: "settings",
       sx: {
+        mr: ['2px'],
         display: ['inherit', 'inherit', 'none', 'none']
       }
     }, settings)));