@carbonplan/components 10.2.1 → 11.0.0-alpha.0

package/dst/index.esm.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,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,11 +70,19 @@ 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,
       label = _ref.label,
       value = _ref.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,
@@ -80,20 +90,22 @@ var event = function event(_ref) {
   });
 };
 
-var Link = function Link(_ref2) {
+var Link = function Link(_ref2, ref) {
   var href = _ref2.href,
       children = _ref2.children,
       _ref2$internal = _ref2.internal,
       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, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, props, children));
+    }, /*#__PURE__*/React.createElement(Link$2, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     var action;
     var category;
@@ -114,18 +126,22 @@ var Link = function Link(_ref2) {
       });
     };
 
-    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);
+
 var getSizeStyles = function getSizeStyles(size) {
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -176,7 +192,9 @@ var getSizeStyles = function getSizeStyles(size) {
   };
 };
 
-var Button = function Button(_ref) {
+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,
       prefix = _ref.prefix,
@@ -188,7 +206,7 @@ var Button = function Button(_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');
@@ -346,7 +364,8 @@ var Button = function 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,
@@ -356,13 +375,18 @@ var Button = function Button(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
-var Callout = function Callout(_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,
       inverted = _ref.inverted,
@@ -371,7 +395,7 @@ var Callout = function Callout(_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';
@@ -436,7 +460,8 @@ var Callout = function 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,
@@ -444,12 +469,157 @@ var Callout = function Callout(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React.createElement(Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = forwardRef(Callout);
+
+var _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
+var sx$2 = {
+  clim: {
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }
+};
+var DIMENSIONS = {
+  width: ['10px', '16px', '16px', '17px'],
+  height: ['80px', '110px', '110px', '130px']
+};
+
+var Gradient = function Gradient(_ref) {
+  var colormap = _ref.colormap,
+      discrete = _ref.discrete,
+      horizontal = _ref.horizontal,
+      width = _ref.width,
+      height = _ref.height;
+  var step = 1 / colormap.length * 100;
+  var values = colormap.map(function (d, i) {
+    return "rgb(" + d + ") " + i * step + "% " + (discrete && i < colormap.length - 1 ? (i + 1) * step + "%" : '');
+  });
+  var 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: function border(_ref2) {
+        var colors = _ref2.colors;
+        return "solid 1px " + colors.hinted;
+      },
+      background: css
+    })
+  });
+};
+
+var Label = function Label(_ref3) {
+  var label = _ref3.label,
+      units = _ref3.units,
+      horizontal = _ref3.horizontal;
+  return /*#__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)));
+};
+
+var Colorbar = function Colorbar(_ref4) {
+  var colormap = _ref4.colormap,
+      label = _ref4.label,
+      clim = _ref4.clim,
+      discrete = _ref4.discrete,
+      units = _ref4.units,
+      width = _ref4.width,
+      height = _ref4.height,
+      _ref4$format = _ref4.format,
+      format = _ref4$format === void 0 ? function (d) {
+    return d;
+  } : _ref4$format,
+      _ref4$horizontal = _ref4.horizontal,
+      horizontal = _ref4$horizontal === void 0 ? false : _ref4$horizontal,
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded$c);
+
+  if (!Array.isArray(colormap)) {
+    throw new Error("expected array for colormap, got '" + colormap + "'.");
+  }
+
+  var ClimMin = function 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]));
+  };
+
+  var ClimMax = function 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)));
+};
+
+var _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
 var Column = function Column(_ref) {
   var start = _ref.start,
       width = _ref.width,
@@ -457,7 +627,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';
@@ -664,12 +834,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)) {
@@ -721,10 +893,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({
@@ -812,26 +986,28 @@ var Menu = function Menu(_ref) {
   })));
 };
 
-var Settings = function Settings(_ref) {
-  var _extends2;
+var _excluded$8 = ["value", "sx"];
 
+var Settings = function Settings(_ref) {
   var value = _ref.value,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
-    sx: _extends((_extends2 = {
+    sx: _extends({
       cursor: 'pointer',
       fill: 'none',
       strokeWidth: '2px',
-      stroke: 'text'
-    }, _extends2["fill"] = 'background', _extends2['.paren'] = {
-      opacity: '0'
-    }, _extends2['@media (hover: hover) and (pointer: fine)'] = {
-      '&:hover .paren': {
-        opacity: '1'
+      stroke: 'text',
+      '.paren': {
+        opacity: '0'
+      },
+      '@media (hover: hover) and (pointer: fine)': {
+        '&:hover .paren': {
+          opacity: '1'
+        }
       }
-    }, _extends2), sx),
+    }, sx),
     "aria-label": "Toggle Menu"
   }, props), !value && /*#__PURE__*/React.createElement("svg", {
     style: {
@@ -846,22 +1022,22 @@ var Settings = function 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",
@@ -916,9 +1092,11 @@ var Settings = function Settings(_ref) {
   })));
 };
 
+var _excluded$7 = ["sx"];
+
 var Dimmer = function Dimmer(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var _useColorMode = useColorMode(),
       colorMode = _useColorMode[0],
@@ -951,7 +1129,7 @@ var Dimmer = function Dimmer(_ref) {
   }));
 };
 
-var sx = {
+var sx$1 = {
   link: function link(current, label, first) {
     if (first === void 0) {
       first = false;
@@ -1030,16 +1208,16 @@ var Nav = function Nav(_ref) {
     return /*#__PURE__*/React.createElement(NextLink, {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React.createElement(Link$1, {
+    }, /*#__PURE__*/React.createElement(Link$2, {
       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$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);
   }
 };
@@ -1093,7 +1271,7 @@ var Header = function Header(_ref3) {
   }, (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'
@@ -1104,7 +1282,7 @@ var Header = function Header(_ref3) {
       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: {
@@ -1248,7 +1426,7 @@ var Footer = function 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',
@@ -1282,7 +1460,7 @@ var Footer = function 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',
@@ -1376,6 +1554,77 @@ var Footer = function Footer() {
   }))));
 };
 
+var GitSha = function GitSha() {
+  var sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  var owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
+  var slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
+
+  var _useThemeUI = useThemeUI(),
+      theme = _useThemeUI.theme;
+
+  var color = theme.rawColors.secondary;
+
+  if (sha && owner && slug) {
+    var shortSha = sha.substring(0, 7);
+    var 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));
+  }
+};
+
+var Separator = function Separator(_ref) {
+  var color = _ref.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
+  }));
+};
+
 var Value = function Value(_ref) {
   var mode = _ref.mode;
 
@@ -1425,11 +1674,6 @@ var Value = function Value(_ref) {
 
 var Metadata = function Metadata(_ref2) {
   var mode = _ref2.mode;
-
-  var _useThemeUI = useThemeUI(),
-      theme = _useThemeUI.theme;
-
-  var color = theme.rawColors.secondary;
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
       userSelect: 'none',
@@ -1442,28 +1686,7 @@ var Metadata = function Metadata(_ref2) {
     }
   }, /*#__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) {
@@ -1484,6 +1707,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+var _excluded$6 = ["duration", "delay", "children"];
 var fade = keyframes({
   from: {
     opacity: 0
@@ -1499,7 +1723,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$6);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1821,12 +2045,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);
@@ -1860,7 +2086,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',
@@ -1937,10 +2164,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
@@ -2035,14 +2262,16 @@ var Group = function Group(_ref) {
   }));
 };
 
-var Input = function Input(_ref) {
+var _excluded$3 = ["size", "inverted", "sx"];
+
+var Input = function Input(_ref, ref) {
   var _extends2;
 
   var _ref$size = _ref.size,
       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';
 
@@ -2068,10 +2297,13 @@ var Input = function Input(_ref) {
   }, _extends2), getSizeStyles(size), sx);
 
   return /*#__PURE__*/React.createElement(Input$1, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = forwardRef(Input);
+
 var getProps = function getProps(test) {
   return function (props) {
     var next = {};
@@ -2084,6 +2316,8 @@ var getProps = function getProps(test) {
   };
 };
 
+var _excluded$2 = ["children", "size", "sx"];
+
 var Select = function Select(_ref) {
   var _extends2;
 
@@ -2091,7 +2325,7 @@ var Select = function Select(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var color = sx && sx.color ? sx.color : 'primary';
   var sizeStyles = getSizeStyles(size);
@@ -2177,9 +2411,11 @@ var Select = function Select(_ref) {
   }));
 };
 
-var Slider = function Slider(_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';
 
@@ -2187,6 +2423,7 @@ var Slider = function Slider(_ref) {
       colors = _useThemeUI.theme.rawColors;
 
   return /*#__PURE__*/React.createElement(Slider$1, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2218,6 +2455,8 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
+var slider = forwardRef(Slider);
+
 var styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2321,16 +2560,19 @@ var Table = function Table(_ref) {
   })));
 };
 
-var Toggle = function Toggle(_ref) {
+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;
   return /*#__PURE__*/React.createElement(Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2368,6 +2610,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2466,5 +2710,5 @@ var formatDate = function formatDate(date, options) {
   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.esm.js.map