@carbonplan/components 10.2.1 → 11.0.0-alpha.0

package/dst/index.modern.js

@@ -1,5 +1,5 @@
-import React, { cloneElement, useCallback, useState, useEffect, useRef } from 'react';
-import { Box, Link as Link$1, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Flex, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
+import React, { forwardRef, cloneElement, useCallback, useState, useEffect, useRef } from 'react';
+import { Box, Link as Link$2, Flex, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
 import { transparentize } from '@theme-ui/color';
 import NextLink from 'next/link';
 import { Arrow, Sun } from '@carbonplan/icons';
@@ -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,12 +72,19 @@ const Badge = (_ref) => {
   }, children));
 };
 
+const _excluded$f = ["href", "children", "internal", "tracking"];
+
 const event = ({
   action,
   category,
   label,
   value
 }) => {
+  if (typeof window.gtag !== 'function') {
+    console.warn(`Missing window.gtag, skipping analytics action: '${action}'.`);
+    return;
+  }
+
   window.gtag('event', action, {
     event_category: category,
     event_label: label,
@@ -83,20 +92,22 @@ const event = ({
   });
 };
 
-const Link = (_ref) => {
+const Link = (_ref, ref) => {
   let {
     href,
     children,
     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, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, props, children));
+    }, /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     let action;
     let category;
@@ -117,18 +128,22 @@ const Link = (_ref) => {
       });
     };
 
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       onClick: track,
       onContextMenu: track,
       href: href
     }, props), children);
   } else {
-    return /*#__PURE__*/React.createElement(Link$1, _extends({
+    return /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref,
       href: href
     }, props), children);
   }
 };
 
+var Link$1 = forwardRef(Link);
+
 const getSizeStyles = size => {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -179,7 +194,9 @@ const getSizeStyles = size => {
   };
 };
 
-const Button = (_ref) => {
+const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
+
+const Button = (_ref, ref) => {
   let {
     size = 'sm',
     prefix,
@@ -192,7 +209,7 @@ const Button = (_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');
@@ -350,7 +367,8 @@ const Button = (_ref) => {
   }, suffix && suffix));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -360,13 +378,18 @@ const Button = (_ref) => {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
-const Callout = (_ref) => {
+var button = forwardRef(Button);
+
+const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+
+const Callout = (_ref, ref) => {
   let {
     label,
     children,
@@ -377,7 +400,7 @@ const Callout = (_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';
@@ -442,7 +465,8 @@ const Callout = (_ref) => {
   })));
 
   if (href) {
-    return /*#__PURE__*/React.createElement(Link, _extends({
+    return /*#__PURE__*/React.createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -450,13 +474,155 @@ const Callout = (_ref) => {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
-const Column = (_ref) => {
+var callout = forwardRef(Callout);
+
+const _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
+const sx$2 = {
+  clim: {
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }
+};
+const DIMENSIONS = {
+  width: ['10px', '16px', '16px', '17px'],
+  height: ['80px', '110px', '110px', '130px']
+};
+
+const Gradient = ({
+  colormap,
+  discrete,
+  horizontal,
+  width,
+  height
+}) => {
+  const step = 1 / colormap.length * 100;
+  const values = colormap.map((d, i) => {
+    return `rgb(${d}) ${i * step}% ${discrete && i < colormap.length - 1 ? `${(i + 1) * step}%` : ''}`;
+  });
+  const css = `linear-gradient(to ${horizontal ? 'right' : 'top'}, ${values.join(',')})`;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: _extends({}, horizontal ? {
+      width: width || DIMENSIONS.height,
+      height: height || DIMENSIONS.width
+    } : {
+      width: width || DIMENSIONS.width,
+      minHeight: height || DIMENSIONS.height
+    }, {
+      mt: horizontal ? [0, '1px', '1px', 0] : 0,
+      border: ({
+        colors
+      }) => `solid 1px ${colors.hinted}`,
+      background: css
+    })
+  });
+};
+
+const Label = ({
+  label,
+  units,
+  horizontal
+}) => /*#__PURE__*/React.createElement(Box, {
+  sx: !horizontal && {
+    alignSelf: 'flex-end'
+  }
+}, /*#__PURE__*/React.createElement(Box, {
+  sx: _extends({
+    mb: horizontal ? 0 : ['-4px', '-4px', '-4px', '-3px'],
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }, horizontal ? {} : {
+    writingMode: 'vertical-rl',
+    transform: 'rotate(180deg)',
+    whiteSpace: 'nowrap',
+    display: 'inline-block',
+    overflow: 'visible'
+  })
+}, label, ' ', /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  sx: {
+    textTransform: 'none',
+    color: 'secondary',
+    display: 'inline-block'
+  }
+}, units)));
+
+const Colorbar = _ref => {
+  let {
+    colormap,
+    label,
+    clim,
+    discrete,
+    units,
+    width,
+    height,
+    format = d => d,
+    horizontal = false
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
+  if (!Array.isArray(colormap)) {
+    throw new Error(`expected array for colormap, got '${colormap}'.`);
+  }
+
+  const ClimMin = () => {
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: label ? horizontal ? '10px' : '2px' : 0,
+        mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
+        mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px']
+      })
+    }, format(clim[0]));
+  };
+
+  const ClimMax = () => {
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: horizontal ? ['2px', '1px', '1px', '2px'] : '2px',
+        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px']
+      })
+    }, format(clim[1]));
+  };
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    sx: _extends({}, props.sx, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: ['3px', '6px', '6px', '7px']
+    })
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    units: units,
+    horizontal: horizontal
+  }), horizontal && clim && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
+    colormap: colormap,
+    horizontal: horizontal,
+    discrete: discrete,
+    width: width,
+    height: height
+  }), horizontal && clim && /*#__PURE__*/React.createElement(ClimMax, null), !horizontal && /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      flexDirection: 'column-reverse',
+      justifyContent: 'space-between',
+      height: height || DIMENSIONS.height
+    }
+  }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
+};
+
+const _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
+const Column = _ref => {
   let {
     start,
     width,
@@ -465,7 +631,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';
@@ -633,7 +799,7 @@ const Meta = ({
   }));
 };
 
-const Logo = (_ref) => {
+const Logo = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -669,14 +835,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)) {
@@ -724,12 +892,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({
@@ -817,12 +987,14 @@ const Menu = (_ref) => {
   })));
 };
 
-const Settings = (_ref) => {
+const _excluded$8 = ["value", "sx"];
+
+const Settings = _ref => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -830,7 +1002,6 @@ const Settings = (_ref) => {
       fill: 'none',
       strokeWidth: '2px',
       stroke: 'text',
-      fill: 'background',
       '.paren': {
         opacity: '0'
       },
@@ -854,22 +1025,22 @@ const Settings = (_ref) => {
     x1: "24",
     y1: "2.1",
     x2: "24",
+    y2: "6.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24",
+    y1: "24.1",
+    x2: "24",
     y2: "33.9"
   }), /*#__PURE__*/React.createElement("line", {
     x1: "44",
     y1: "2.1",
     x2: "44",
+    y2: "12.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "44",
+    y1: "30.1",
+    x2: "44",
     y2: "33.9"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "9",
-    stroke: "none"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "9",
-    stroke: "none"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: "24",
     cy: "15.1",
@@ -924,11 +1095,13 @@ const Settings = (_ref) => {
   })));
 };
 
-const Dimmer = (_ref) => {
+const _excluded$7 = ["sx"];
+
+const Dimmer = _ref => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const [colorMode, setColorMode] = useColorMode();
   const toggle = useCallback(() => {
@@ -958,7 +1131,7 @@ const Dimmer = (_ref) => {
   }));
 };
 
-const sx = {
+const sx$1 = {
   link: (current, label, first = false) => {
     return {
       width: 'auto',
@@ -1037,16 +1210,16 @@ const Nav = ({
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, {
+    }, /*#__PURE__*/React.createElement(Link$2, {
       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$1, {
+    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);
   }
 };
@@ -1099,7 +1272,7 @@ const Header = ({
   }, (mode == 'homepage' || mode == 'local') && /*#__PURE__*/React.createElement(NextLink, {
     href: "/",
     passHref: true
-  }, /*#__PURE__*/React.createElement(Link$1, {
+  }, /*#__PURE__*/React.createElement(Link$2, {
     "aria-label": "CarbonPlan Homepage",
     sx: {
       display: 'block'
@@ -1110,7 +1283,7 @@ const Header = ({
       cursor: 'pointer',
       color: 'primary'
     }
-  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$1, {
+  }))), (mode == null || mode == 'remote') && /*#__PURE__*/React.createElement(Link$2, {
     href: "https://carbonplan.org",
     "aria-label": "CarbonPlan Homepage",
     sx: {
@@ -1215,7 +1388,7 @@ const Header = ({
   })))))));
 };
 
-const Monogram = (_ref) => {
+const Monogram = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -1254,7 +1427,7 @@ const Footer = () => {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "EMAIL"), /*#__PURE__*/React.createElement(Link$2, {
     href: "mailto:hello@carbonplan.org",
     sx: {
       textDecoration: 'none',
@@ -1288,7 +1461,7 @@ const Footer = () => {
       letterSpacing: 'mono',
       mb: [2]
     }
-  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$1, {
+  }, "FOLLOW"), /*#__PURE__*/React.createElement(Link$2, {
     href: "https://twitter.com/carbonplanorg",
     sx: {
       textDecoration: 'none',
@@ -1382,6 +1555,77 @@ const Footer = () => {
   }))));
 };
 
+const GitSha = () => {
+  const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
+  const slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
+  const {
+    theme
+  } = useThemeUI();
+  const color = theme.rawColors.secondary;
+
+  if (sha && owner && slug) {
+    const shortSha = sha.substring(0, 7);
+    const href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React.createElement(Link$2, {
+      href: href,
+      sx: {
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        ml: [2],
+        fontFamily: 'mono',
+        letterSpacing: 'body',
+        color: color,
+        fontSize: [1],
+        textTransform: 'uppercase',
+        textDecoration: 'none'
+      }
+    }, shortSha));
+  } else {
+    // fallback
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        ml: [2],
+        fontFamily: 'mono',
+        letterSpacing: 'body',
+        color: color,
+        fontSize: [1],
+        textTransform: 'uppercase'
+      }
+    }, color));
+  }
+};
+
+const Separator = ({
+  color
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: color,
+    opacity: "0.8",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, /*#__PURE__*/React.createElement("circle", {
+    r: 5,
+    cx: 19,
+    cy: 19
+  }));
+};
+
 const Value = ({
   mode
 }) => {
@@ -1429,10 +1673,6 @@ const Value = ({
 const Metadata = ({
   mode
 }) => {
-  const {
-    theme
-  } = useThemeUI();
-  const color = theme.rawColors.secondary;
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
       userSelect: 'none',
@@ -1445,28 +1685,7 @@ const Metadata = ({
     }
   }, /*#__PURE__*/React.createElement(Value, {
     mode: mode
-  }), /*#__PURE__*/React.createElement("svg", {
-    fill: color,
-    opacity: "0.8",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24"
-  }, /*#__PURE__*/React.createElement("circle", {
-    r: 5,
-    cx: 19,
-    cy: 19
-  })), /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      whiteSpace: 'nowrap',
-      display: 'inline-block',
-      ml: [2],
-      fontFamily: 'mono',
-      letterSpacing: 'body',
-      color: 'secondary',
-      fontSize: [1],
-      textTransform: 'uppercase'
-    }
-  }, color));
+  }), /*#__PURE__*/React.createElement(GitSha, null));
 };
 
 function init(mode) {
@@ -1487,6 +1706,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+const _excluded$6 = ["duration", "delay", "children"];
 const fade = keyframes({
   from: {
     opacity: 0
@@ -1496,13 +1716,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$6);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1815,14 +2035,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);
@@ -1856,7 +2078,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',
@@ -1917,7 +2140,7 @@ const updateValues = ({
   }
 };
 
-const Filter = (_ref) => {
+const Filter = _ref => {
   let {
     values,
     setValues,
@@ -1926,10 +2149,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
@@ -2013,13 +2236,15 @@ const Group = ({
   }));
 };
 
-const Input = (_ref) => {
+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';
 
@@ -2053,10 +2278,13 @@ const Input = (_ref) => {
   }, getSizeStyles(size), sx);
 
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = forwardRef(Input);
+
 const getProps = test => props => {
   const next = {};
 
@@ -2067,13 +2295,15 @@ const getProps = test => props => {
   return next;
 };
 
-const Select = (_ref) => {
+const _excluded$2 = ["children", "size", "sx"];
+
+const Select = _ref => {
   let {
     children,
     size = 'sm',
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const sizeStyles = getSizeStyles(size);
@@ -2160,11 +2390,13 @@ const Select = (_ref) => {
   }));
 };
 
-const Slider = (_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 {
@@ -2173,6 +2405,7 @@ const Slider = (_ref) => {
     }
   } = useThemeUI();
   return /*#__PURE__*/React.createElement(Slider$1, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2204,6 +2437,8 @@ const Slider = (_ref) => {
   }, props));
 };
 
+var slider = forwardRef(Slider);
+
 const styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2304,18 +2539,21 @@ const Table = ({
   })));
 };
 
-const Toggle = (_ref) => {
+const _excluded = ["value", "onClick", "disabled", "sx"];
+
+const Toggle = (_ref, ref) => {
   let {
     value,
     onClick,
     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;
   return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2353,6 +2591,8 @@ const Toggle = (_ref) => {
   })));
 };
 
+var toggle = forwardRef(Toggle);
+
 const Tracking = ({
   id
 }) => {
@@ -2455,5 +2695,5 @@ const formatDate = (date, options = defaultOptions) => {
   return [month, day, year].filter(Boolean).join(' ');
 };
 
-export { Badge, Button, Callout, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+export { Badge, button as Button, callout as Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, input as Input, Layout, Link$1 as Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, slider as Slider, Table, Tag, toggle as Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
 //# sourceMappingURL=index.modern.js.map