@carbonplan/components 11.0.5-develop.2 → 11.0.6-develop.0

package/dst/index.esm.js

@@ -40,10 +40,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$g = ["sx", "children"];
+
 var Badge = function Badge(_ref) {
   var sx = _ref.sx,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var color = sx && sx.color ? sx.color : 'primary';
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -68,6 +70,8 @@ var Badge = function Badge(_ref) {
   }, children));
 };
 
+var _excluded$f = ["href", "children", "internal", "tracking"];
+
 var event = function event(_ref) {
   var action = _ref.action,
       category = _ref.category,
@@ -93,7 +97,7 @@ var Link = function Link(_ref2, ref) {
       internal = _ref2$internal === void 0 ? false : _ref2$internal,
       _ref2$tracking = _ref2.tracking,
       tracking = _ref2$tracking === void 0 ? false : _ref2$tracking,
-      props = _objectWithoutPropertiesLoose(_ref2, ["href", "children", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
   if (internal || href && href.startsWith('/')) {
     return /*#__PURE__*/React.createElement(NextLink, {
@@ -188,6 +192,8 @@ var getSizeStyles = function getSizeStyles(size) {
   };
 };
 
+var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
+
 var Button = function Button(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
@@ -200,7 +206,7 @@ var Button = function Button(_ref, ref) {
       href = _ref.href,
       internal = _ref.internal,
       tracking = _ref.tracking,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -378,6 +384,8 @@ var Button = function Button(_ref, ref) {
 
 var button = forwardRef(Button);
 
+var _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+
 var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
@@ -387,7 +395,7 @@ var Callout = function Callout(_ref, ref) {
       internal = _ref.internal,
       tracking = _ref.tracking,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var baseColor = color || (inverted ? 'secondary' : 'primary');
   var hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -470,7 +478,8 @@ var Callout = function Callout(_ref, ref) {
 
 var callout = forwardRef(Callout);
 
-var styles = {
+var _excluded$c = ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"];
+var styles$1 = {
   clim: function clim(setClim) {
     return {
       fontFamily: 'mono',
@@ -587,7 +596,7 @@ var Colorbar = function Colorbar(_ref6) {
       bottom = _ref6$bottom === void 0 ? false : _ref6$bottom,
       sx = _ref6.sx,
       sxClim = _ref6.sxClim,
-      props = _objectWithoutPropertiesLoose(_ref6, ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded$c);
 
   if (!Array.isArray(colormap)) {
     throw new Error("expected array for colormap, got '" + colormap + "'.");
@@ -711,7 +720,7 @@ var Colorbar = function Colorbar(_ref6) {
       id: "min",
       ref: climRef[0],
       tabIndex: 0,
-      sx: _extends({}, styles.clim(setClim), {
+      sx: _extends({}, styles$1.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'],
@@ -736,7 +745,7 @@ var Colorbar = function Colorbar(_ref6) {
       id: "max",
       ref: climRef[1],
       tabIndex: 0,
-      sx: _extends({}, styles.clim(setClim), {
+      sx: _extends({}, styles$1.clim(setClim), {
         ml: horizontal ? ['2px', '1px', '1px', '2px'] : ['2px', '1px', '1px', '2px'],
         mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px'],
         borderBottom: setClim ? climMaxDragging ? function (_ref9) {
@@ -798,6 +807,8 @@ var Colorbar = function Colorbar(_ref6) {
   }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
 };
 
+var _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
 var Column = function Column(_ref) {
   var start = _ref.start,
       width = _ref.width,
@@ -805,7 +816,7 @@ var Column = function Column(_ref) {
       dr = _ref.dr,
       children = _ref.children,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -1012,12 +1023,14 @@ var Logo = function Logo(_ref) {
   })));
 };
 
+var _excluded$a = ["children", "sx", "columns", "gap"];
+
 var Row = function Row(_ref) {
   var children = _ref.children,
       sx = _ref.sx,
       columns = _ref.columns,
       gap = _ref.gap,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var makeArray = function makeArray(input) {
     if (!Array.isArray(input)) {
@@ -1069,10 +1082,12 @@ var Row = function Row(_ref) {
   }), children);
 };
 
+var _excluded$9 = ["value", "sx"];
+
 var Menu = function Menu(_ref) {
   var value = _ref.value,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -1160,7 +1175,7 @@ var Menu = function Menu(_ref) {
   })));
 };
 
-var sx = {
+var sx$1 = {
   link: function link(current, label, first) {
     if (first === void 0) {
       first = false;
@@ -1243,12 +1258,12 @@ var Nav = function Nav(_ref) {
       onClick: function onClick() {
         if (nav === url) setExpanded(false);
       },
-      sx: sx.link(nav, url, first)
+      sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
   } else {
     return /*#__PURE__*/React.createElement(Link$2, {
       href: href,
-      sx: sx.link(nav, url, first)
+      sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
   }
 };
@@ -1561,9 +1576,11 @@ var Footer = function Footer() {
   }))));
 };
 
+var _excluded$8 = ["sx"];
+
 var Dimmer = function Dimmer(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   var _useColorMode = useColorMode(),
       colorMode = _useColorMode[0],
@@ -1751,6 +1768,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+var _excluded$7 = ["duration", "delay", "children"];
 var fade = keyframes({
   from: {
     opacity: 0
@@ -1766,7 +1784,7 @@ var FadeIn = function FadeIn(_ref) {
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 0 : _ref$delay,
       children = _ref.children,
-      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
+      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1909,10 +1927,12 @@ function GuideColumns(_ref2) {
   }));
 }
 
+var _excluded$6 = ["value", "sx"];
+
 var Settings = function Settings(_ref) {
   var value = _ref.value,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -2061,18 +2081,18 @@ var Layout = function Layout(_ref) {
   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.createElement(Dimmer, {
     key: "dimmer",
     sx: {
@@ -2232,12 +2252,14 @@ var Expander = function Expander(_ref) {
   })));
 };
 
+var _excluded$5 = ["label", "value", "sx", "children"];
+
 var Tag = function Tag(_ref) {
   var label = _ref.label,
       value = _ref.value,
       sx = _ref.sx,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var isClickable = props && (props.onClick || props.onDoubleClick);
@@ -2271,7 +2293,8 @@ var Tag = function Tag(_ref) {
   }, props), children);
 };
 
-var sx$1 = {
+var _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
+var sx = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -2348,10 +2371,10 @@ var Filter = function Filter(_ref2) {
       showAll = _ref2$showAll === void 0 ? false : _ref2$showAll,
       _ref2$multiSelect = _ref2.multiSelect,
       multiSelect = _ref2$multiSelect === void 0 ? false : _ref2$multiSelect,
-      props = _objectWithoutPropertiesLoose(_ref2, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
 
   return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
-    sx: sx$1.label
+    sx: sx.label
   }, label), /*#__PURE__*/React.createElement(Box, {
     sx: {
       mt: label ? [3] : 0
@@ -2446,6 +2469,8 @@ var Group = function Group(_ref) {
   }));
 };
 
+var _excluded$3 = ["size", "inverted", "sx"];
+
 var Input = function Input(_ref, ref) {
   var _extends2;
 
@@ -2453,7 +2478,7 @@ var Input = function Input(_ref, ref) {
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       inverted = _ref.inverted,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2498,6 +2523,8 @@ var getProps = function getProps(test) {
   };
 };
 
+var _excluded$2 = ["children", "size", "sx", "sxSelect"];
+
 var Select = function Select(_ref) {
   var _extends2;
 
@@ -2506,7 +2533,7 @@ var Select = function Select(_ref) {
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       sx = _ref.sx,
       sxSelect = _ref.sxSelect,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx", "sxSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var sizeStyles = getSizeStyles(size);
@@ -2592,9 +2619,11 @@ var Select = function Select(_ref) {
   }));
 };
 
+var _excluded$1 = ["sx"];
+
 var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var color = sx && sx.color ? sx.color : 'primary';
 
@@ -2636,7 +2665,7 @@ var Slider = function Slider(_ref, ref) {
 
 var slider = forwardRef(Slider);
 
-var styles$1 = {
+var styles = {
   reset: {
     verticalAlign: 'baseline',
     border: 0,
@@ -2708,7 +2737,7 @@ var Table = function Table(_ref) {
     }
   }, header && /*#__PURE__*/React.createElement(Row, {
     as: "tr",
-    sx: _extends({}, styles$1.reset, styles$1.header, styles$1.row, {
+    sx: _extends({}, styles.reset, styles.header, styles.row, {
       color: color,
       borderTopWidth: !borderTop ? '0px' : '1px'
     })
@@ -2716,13 +2745,13 @@ var Table = function Table(_ref) {
     as: "td",
     start: [1],
     width: columns,
-    sx: styles$1.index
+    sx: styles.index
   }, header)), data.map(function (row, i) {
     return /*#__PURE__*/React.createElement(Row, {
       as: "tr",
       columns: columns,
       key: i,
-      sx: _extends({}, styles$1.reset, styles$1.row, {
+      sx: _extends({}, styles.reset, styles.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'
@@ -2733,18 +2762,20 @@ var Table = function Table(_ref) {
         key: j,
         start: start[j],
         width: width[j],
-        sx: j == 0 && index ? _extends({}, styles$1.reset, styles$1.index) : _extends({}, styles$1.reset, styles$1.entry)
+        sx: j == 0 && index ? _extends({}, styles.reset, styles.index) : _extends({}, styles.reset, styles.entry)
       }, column);
     }));
   })));
 };
 
+var _excluded = ["value", "onClick", "disabled", "sx"];
+
 var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;