@carbonplan/components 11.0.5-develop.0 → 11.0.5-develop.4

package/dst/index.js

@@ -1617,7 +1617,8 @@ var GitSha = function GitSha() {
     var href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
     return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
       sx: {
-        display: 'inline-block'
+        display: 'inline-block',
+        width: '87px'
       }
     }, /*#__PURE__*/React__default['default'].createElement(Separator, {
       color: color
@@ -1639,7 +1640,8 @@ var GitSha = function GitSha() {
     // fallback
     return /*#__PURE__*/React__default['default'].createElement(themeUi.Box, {
       sx: {
-        display: 'inline-block'
+        display: 'inline-block',
+        width: '87px'
       }
     }, /*#__PURE__*/React__default['default'].createElement(Separator, {
       color: color
@@ -1726,8 +1728,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']
@@ -2065,18 +2067,18 @@ var Layout = function Layout(_ref) {
   React.useEffect(function () {
     if (!theme) return;
 
-    var handler = function handler() {
-      if (settings != null && settings.value && settings != null && settings.onClick) {
+    var handler = function handler(e) {
+      if (e.matches && 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);
+    var query = window.matchMedia("(min-width: " + theme.breakpoints[1] + ")");
+    query.onchange = handler;
     return function () {
-      query.removeListener(handler);
+      query.onchange = null;
     };
-  }, [theme, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
+  }, [theme == null ? void 0 : theme.breakpoints, settings == null ? void 0 : settings.value, settings == null ? void 0 : settings.onClick]);
   var menuItems = [/*#__PURE__*/React__default['default'].createElement(Dimmer, {
     key: "dimmer",
     sx: {