@carbonplan/components 10.5.0 → 11.0.0-alpha.0

package/dst/index.js

@@ -96,7 +96,7 @@ 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,
@@ -109,7 +109,9 @@ var Link = function Link(_ref2) {
     return /*#__PURE__*/React__default["default"].createElement(NextLink__default["default"], {
       href: href,
       passHref: true
-    }, /*#__PURE__*/React__default["default"].createElement(themeUi.Link, props, children));
+    }, /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref
+    }, props), children));
   } else if (tracking) {
     var action;
     var category;
@@ -131,17 +133,21 @@ var Link = function Link(_ref2) {
     };
 
     return /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref,
       onClick: track,
       onContextMenu: track,
       href: href
     }, props), children);
   } else {
     return /*#__PURE__*/React__default["default"].createElement(themeUi.Link, _extends({
+      ref: ref,
       href: href
     }, props), children);
   }
 };
 
+var Link$1 = React.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');
@@ -194,7 +200,7 @@ var getSizeStyles = function getSizeStyles(size) {
 
 var _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
 
-var Button = function Button(_ref) {
+var Button = function Button(_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
       prefix = _ref.prefix,
@@ -364,7 +370,8 @@ var Button = function Button(_ref) {
   }, suffix && suffix));
 
   if (href) {
-    return /*#__PURE__*/React__default["default"].createElement(Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -374,15 +381,18 @@ var Button = function Button(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var button = React.forwardRef(Button);
+
 var _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
 
-var Callout = function Callout(_ref) {
+var Callout = function Callout(_ref, ref) {
   var label = _ref.label,
       children = _ref.children,
       inverted = _ref.inverted,
@@ -456,7 +466,8 @@ var Callout = function Callout(_ref) {
   })));
 
   if (href) {
-    return /*#__PURE__*/React__default["default"].createElement(Link, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Link$1, _extends({
+      ref: ref,
       href: href,
       internal: internal,
       tracking: tracking,
@@ -464,12 +475,15 @@ var Callout = function Callout(_ref) {
     }, props), Inner);
   } else {
     return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+      ref: ref,
       as: "button",
       sx: style
     }, props), Inner);
   }
 };
 
+var callout = React.forwardRef(Callout);
+
 var _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
 var sx$2 = {
   clim: {
@@ -2256,7 +2270,7 @@ var Group = function Group(_ref) {
 
 var _excluded$3 = ["size", "inverted", "sx"];
 
-var Input = function Input(_ref) {
+var Input = function Input(_ref, ref) {
   var _extends2;
 
   var _ref$size = _ref.size,
@@ -2289,10 +2303,13 @@ var Input = function Input(_ref) {
   }, _extends2), getSizeStyles(size), sx);
 
   return /*#__PURE__*/React__default["default"].createElement(themeUi.Input, _extends({}, props, {
+    ref: ref,
     sx: styles
   }));
 };
 
+var input = React.forwardRef(Input);
+
 var getProps = function getProps(test) {
   return function (props) {
     var next = {};
@@ -2402,7 +2419,7 @@ var Select = function Select(_ref) {
 
 var _excluded$1 = ["sx"];
 
-var Slider = function Slider(_ref) {
+var Slider = function Slider(_ref, ref) {
   var sx = _ref.sx,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
@@ -2412,6 +2429,7 @@ var Slider = function Slider(_ref) {
       colors = _useThemeUI.theme.rawColors;
 
   return /*#__PURE__*/React__default["default"].createElement(themeUi.Slider, _extends({
+    ref: ref,
     sx: _extends({
       '&::-webkit-slider-thumb': {
         height: [22, 18, 16],
@@ -2443,6 +2461,8 @@ var Slider = function Slider(_ref) {
   }, props));
 };
 
+var slider = React.forwardRef(Slider);
+
 var styles = {
   reset: {
     verticalAlign: 'baseline',
@@ -2548,7 +2568,7 @@ var Table = function Table(_ref) {
 
 var _excluded = ["value", "onClick", "disabled", "sx"];
 
-var Toggle = function Toggle(_ref) {
+var Toggle = function Toggle(_ref, ref) {
   var value = _ref.value,
       onClick = _ref.onClick,
       disabled = _ref.disabled,
@@ -2558,6 +2578,7 @@ var Toggle = function Toggle(_ref) {
   var color$1 = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
   return /*#__PURE__*/React__default["default"].createElement(themeUi.Box, _extends({
+    ref: ref,
     as: "button",
     onClick: onClick,
     role: "checkbox",
@@ -2595,6 +2616,8 @@ var Toggle = function Toggle(_ref) {
   })));
 };
 
+var toggle = React.forwardRef(Toggle);
+
 var Tracking = function Tracking(_ref) {
   var id = _ref.id;
 
@@ -2694,8 +2717,8 @@ var formatDate = function formatDate(date, options) {
 };
 
 exports.Badge = Badge;
-exports.Button = Button;
-exports.Callout = Callout;
+exports.Button = button;
+exports.Callout = callout;
 exports.Colorbar = Colorbar;
 exports.Column = Column;
 exports.Custom404 = Custom404;
@@ -2707,9 +2730,9 @@ exports.Footer = Footer;
 exports.Group = Group;
 exports.Guide = Guide;
 exports.Header = Header;
-exports.Input = Input;
+exports.Input = input;
 exports.Layout = Layout;
-exports.Link = Link;
+exports.Link = Link$1;
 exports.Logo = Logo;
 exports.Menu = Menu;
 exports.Meta = Meta;
@@ -2718,10 +2741,10 @@ exports.Row = Row;
 exports.Scrollbar = Scrollbar;
 exports.Select = Select;
 exports.Settings = Settings;
-exports.Slider = Slider;
+exports.Slider = slider;
 exports.Table = Table;
 exports.Tag = Tag;
-exports.Toggle = Toggle;
+exports.Toggle = toggle;
 exports.Tracking = Tracking;
 exports.Tray = Tray;
 exports.formatDate = formatDate;