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

package/dst/index.modern.js

@@ -40,12 +40,14 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const Badge = (_ref) => {
+const _excluded$g = ["sx", "children"];
+
+const Badge = _ref => {
   let {
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   const color = sx && sx.color ? sx.color : 'primary';
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -70,6 +72,8 @@ const Badge = (_ref) => {
   }, children));
 };
 
+const _excluded$f = ["href", "children", "internal", "tracking"];
+
 const event = ({
   action,
   category,
@@ -95,7 +99,7 @@ const Link = (_ref, ref) => {
     internal = false,
     tracking = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["href", "children", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   if (internal || href && href.startsWith('/')) {
     return /*#__PURE__*/React.createElement(NextLink, {
@@ -190,6 +194,8 @@ const getSizeStyles = size => {
   };
 };
 
+const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
+
 const Button = (_ref, ref) => {
   let {
     size = 'sm',
@@ -203,7 +209,7 @@ const Button = (_ref, ref) => {
     internal,
     tracking
   } = _ref,
-      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');
@@ -381,6 +387,8 @@ const Button = (_ref, ref) => {
 
 var button = forwardRef(Button);
 
+const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+
 const Callout = (_ref, ref) => {
   let {
     label,
@@ -392,7 +400,7 @@ const Callout = (_ref, ref) => {
     tracking,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   const baseColor = color || (inverted ? 'secondary' : 'primary');
   const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -475,7 +483,8 @@ const Callout = (_ref, ref) => {
 
 var callout = forwardRef(Callout);
 
-const styles = {
+const _excluded$c = ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"];
+const styles$1 = {
   clim: setClim => {
     return {
       fontFamily: 'mono',
@@ -568,7 +577,7 @@ const Label = ({
   }
 }, units)));
 
-const Colorbar = (_ref) => {
+const Colorbar = _ref => {
   let {
     colormap,
     label,
@@ -585,7 +594,7 @@ const Colorbar = (_ref) => {
     sx,
     sxClim
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["colormap", "label", "clim", "setClim", "setClimStep", "discrete", "units", "width", "height", "format", "horizontal", "bottom", "sx", "sxClim"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
   if (!Array.isArray(colormap)) {
     throw new Error(`expected array for colormap, got '${colormap}'.`);
@@ -686,7 +695,7 @@ const Colorbar = (_ref) => {
       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'],
@@ -707,7 +716,7 @@ const Colorbar = (_ref) => {
       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 ? ({
@@ -765,7 +774,9 @@ const Colorbar = (_ref) => {
   }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
 };
 
-const Column = (_ref) => {
+const _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
+const Column = _ref => {
   let {
     start,
     width,
@@ -774,7 +785,7 @@ const Column = (_ref) => {
     children,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -942,7 +953,7 @@ const Meta = ({
   }));
 };
 
-const Logo = (_ref) => {
+const Logo = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -978,14 +989,16 @@ const Logo = (_ref) => {
   })));
 };
 
-const Row = (_ref) => {
+const _excluded$a = ["children", "sx", "columns", "gap"];
+
+const Row = _ref => {
   let {
     children,
     sx,
     columns,
     gap
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   const makeArray = input => {
     if (!Array.isArray(input)) {
@@ -1033,12 +1046,14 @@ const Row = (_ref) => {
   }), children);
 };
 
-const Menu = (_ref) => {
+const _excluded$9 = ["value", "sx"];
+
+const Menu = _ref => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -1126,7 +1141,7 @@ const Menu = (_ref) => {
   })));
 };
 
-const sx = {
+const sx$1 = {
   link: (current, label, first = false) => {
     return {
       width: 'auto',
@@ -1208,12 +1223,12 @@ const Nav = ({
       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);
   }
 };
@@ -1358,7 +1373,7 @@ const Header = ({
   })))))));
 };
 
-const Monogram = (_ref) => {
+const Monogram = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -1525,11 +1540,13 @@ const Footer = () => {
   }))));
 };
 
-const Dimmer = (_ref) => {
+const _excluded$8 = ["sx"];
+
+const Dimmer = _ref => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   const [colorMode, setColorMode] = useColorMode();
   const toggle = useCallback(() => {
@@ -1712,6 +1729,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+const _excluded$7 = ["duration", "delay", "children"];
 const fade = keyframes({
   from: {
     opacity: 0
@@ -1721,13 +1739,13 @@ const fade = keyframes({
   }
 });
 
-const FadeIn = (_ref) => {
+const FadeIn = _ref => {
   let {
     duration = 300,
     delay = 0,
     children
   } = _ref,
-      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
+      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1868,12 +1886,14 @@ function GuideColumns({
   }));
 }
 
-const Settings = (_ref) => {
+const _excluded$6 = ["value", "sx"];
+
+const Settings = _ref => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -2014,18 +2034,18 @@ const Layout = ({
   useEffect(() => {
     if (!theme) return;
 
-    const handler = () => {
-      if (settings != null && settings.value && settings != null && settings.onClick) {
+    const handler = e => {
+      if (e.matches && 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);
+    const query = window.matchMedia(`(min-width: ${theme.breakpoints[1]})`);
+    query.onchange = handler;
     return () => {
-      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]);
   const menuItems = [/*#__PURE__*/React.createElement(Dimmer, {
     key: "dimmer",
     sx: {
@@ -2186,14 +2206,16 @@ const Expander = ({
   })));
 };
 
-const Tag = (_ref) => {
+const _excluded$5 = ["label", "value", "sx", "children"];
+
+const Tag = _ref => {
   let {
     label,
     value,
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const isClickable = props && (props.onClick || props.onDoubleClick);
@@ -2227,7 +2249,8 @@ const Tag = (_ref) => {
   }, props), children);
 };
 
-const sx$1 = {
+const _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
+const sx = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -2288,7 +2311,7 @@ const updateValues = ({
   }
 };
 
-const Filter = (_ref) => {
+const Filter = _ref => {
   let {
     values,
     setValues,
@@ -2297,10 +2320,10 @@ const Filter = (_ref) => {
     showAll = false,
     multiSelect = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref, _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
@@ -2384,13 +2407,15 @@ const Group = ({
   }));
 };
 
+const _excluded$3 = ["size", "inverted", "sx"];
+
 const Input = (_ref, ref) => {
   let {
     size = 'sm',
     inverted,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   const defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2441,14 +2466,16 @@ const getProps = test => props => {
   return next;
 };
 
-const Select = (_ref) => {
+const _excluded$2 = ["children", "size", "sx", "sxSelect"];
+
+const Select = _ref => {
   let {
     children,
     size = 'sm',
     sx,
     sxSelect
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx", "sxSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const sizeStyles = getSizeStyles(size);
@@ -2535,11 +2562,13 @@ const Select = (_ref) => {
   }));
 };
 
+const _excluded$1 = ["sx"];
+
 const Slider = (_ref, ref) => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const {
@@ -2582,7 +2611,7 @@ const Slider = (_ref, ref) => {
 
 var slider = forwardRef(Slider);
 
-const styles$1 = {
+const styles = {
   reset: {
     verticalAlign: 'baseline',
     border: 0,
@@ -2651,7 +2680,7 @@ const Table = ({
     }
   }, 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'
     })
@@ -2659,13 +2688,13 @@ const Table = ({
     as: "td",
     start: [1],
     width: columns,
-    sx: styles$1.index
+    sx: styles.index
   }, header)), data.map((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'
@@ -2676,12 +2705,14 @@ const Table = ({
         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);
     }));
   })));
 };
 
+const _excluded = ["value", "onClick", "disabled", "sx"];
+
 const Toggle = (_ref, ref) => {
   let {
     value,
@@ -2689,7 +2720,7 @@ const Toggle = (_ref, ref) => {
     disabled,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;