@automattic/vip-design-system 0.20.0 → 0.21.0

package/.github/workflows/stale.yml

@@ -0,0 +1,15 @@
+name: Stale monitor
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  stale:
+    name: Stale
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: Automattic/vip-actions/stale@trunk

package/build/system/Avatar/Avatar.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _themeUi = require("theme-ui");
@@ -21,7 +23,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["isVIP", "name", "size", "src", "className"];
 
-var Avatar = function Avatar(_ref) {
+var Avatar = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$isVIP = _ref.isVIP,
       isVIP = _ref$isVIP === void 0 ? false : _ref$isVIP,
       _ref$name = _ref.name,
@@ -52,7 +54,8 @@ var Avatar = function Avatar(_ref) {
       textAlign: 'center'
     },
     className: (0, _classnames["default"])('vip-avatar-component', className),
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    ref: forwardRef
   }, props, {
     children: src ? (0, _jsxRuntime.jsx)(_themeUi.Image, {
       src: src,
@@ -74,9 +77,10 @@ var Avatar = function Avatar(_ref) {
       children: name ? name.charAt(0) : null
     })
   }));
-};
+});
 
 exports.Avatar = Avatar;
+Avatar.displayName = 'Avatar';
 Avatar.propTypes = {
   isVIP: _propTypes["default"].bool,
   size: _propTypes["default"].number,

package/build/system/Badge/Badge.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-var Badge = function Badge(_ref) {
+var Badge = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'blue' : _ref$variant,
       sx = _ref.sx,
@@ -40,11 +42,13 @@ var Badge = function Badge(_ref) {
       borderRadius: 1,
       fontWeight: 'heading'
     }, sx),
-    className: (0, _classnames["default"])('vip-badge-component', className)
+    className: (0, _classnames["default"])('vip-badge-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Badge = Badge;
+Badge.displayName = 'Badge';
 Badge.propTypes = {
   variant: _propTypes["default"].string,
   sx: _propTypes["default"].object,

package/build/system/Box/Box.js

@@ -7,12 +7,12 @@ exports.Box = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require("react");
-
 var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -22,12 +22,13 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * External dependencies
  */
-var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var Box = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   return (0, _jsxRuntime.jsx)(_themeUi.Box, (0, _extends2["default"])({
     ref: ref,
     className: (0, _classnames["default"])('vip-box-component', props.className)
   }, props));
 });
+
 exports.Box = Box;
 Box.displayName = 'Box';
 Box.propTypes = {

package/build/system/Code/Code.js

@@ -9,19 +9,23 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require("react");
-
 var _md = require("react-icons/md");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["prompt", "showCopy", "onCopy", "className"];
 
-var Code = function Code(_ref) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$prompt = _ref.prompt,
       prompt = _ref$prompt === void 0 ? false : _ref$prompt,
       _ref$showCopy = _ref.showCopy,
@@ -64,6 +68,7 @@ var Code = function Code(_ref) {
     sx: {
       position: 'relative'
     },
+    ref: forwardRef,
     children: [codeDom, (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Copy code",
       sx: {
@@ -102,9 +107,10 @@ var Code = function Code(_ref) {
       })
     })]
   });
-};
+});
 
 exports.Code = Code;
+Code.displayName = 'Code';
 Code.propTypes = {
   prompt: _propTypes["default"].bool,
   showCopy: _propTypes["default"].bool,

package/build/system/Flex/Flex.js

@@ -7,6 +7,8 @@ exports.Flex = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -16,8 +18,11 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * External dependencies
  */
-var Flex = function Flex(props) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Flex, (0, _extends2["default"])({}, props));
-};
-
-exports.Flex = Flex;
+var Flex = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(_themeUi.Flex, (0, _extends2["default"])({
+    ref: forwardRef
+  }, props));
+});
+
+exports.Flex = Flex;
+Flex.displayName = 'Flex';

package/build/system/Form/Label.js

@@ -7,16 +7,22 @@ exports.Label = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
+
 /**
  * Internal dependencies
  */
-var Label = function Label(props) {
+var Label = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
   return (0, _jsxRuntime.jsx)(_.Heading, (0, _extends2["default"])({
     variant: "h4",
     as: "label",
@@ -24,8 +30,10 @@ var Label = function Label(props) {
       display: 'block',
       mb: 2,
       color: 'muted'
-    }
+    },
+    ref: forwardRef
   }, props));
-};
+});
 
-exports.Label = Label;
+exports.Label = Label;
+Label.displayName = 'Label';

package/build/system/Form/Radio.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,18 +19,20 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["disabled"];
 
-var Radio = function Radio(_ref) {
+var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var disabled = _ref.disabled,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Radio, (0, _extends2["default"])({
     sx: {
       opacity: disabled ? 0.4 : 1
     },
-    disabled: disabled
+    disabled: disabled,
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Radio = Radio;
+Radio.displayName = 'Radio';
 Radio.propTypes = {
   disabled: _propTypes["default"].bool
 };

package/build/system/Form/RadioBoxGroup.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
@@ -25,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var RadioBoxGroup = function RadioBoxGroup(_ref) {
+var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var onChange = _ref.onChange,
       groupLabel = _ref.groupLabel,
       value = _ref.value,
@@ -38,7 +40,8 @@ var RadioBoxGroup = function RadioBoxGroup(_ref) {
     sx: {
       display: 'flex',
       gap: 2
-    }
+    },
+    ref: forwardRef
   }, props, {
     children: options.map(function (option, index) {
       return (0, _jsxRuntime.jsxs)(RadioGroupPrimitive.Item, {
@@ -89,9 +92,10 @@ var RadioBoxGroup = function RadioBoxGroup(_ref) {
       }, option.value);
     })
   }));
-};
+});
 
 exports.RadioBoxGroup = RadioBoxGroup;
+RadioBoxGroup.displayName = 'RadioBoxGroup';
 RadioBoxGroup.propTypes = {
   onChange: _propTypes["default"].func,
   options: _propTypes["default"].array,

package/build/system/Form/Toggle.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Documentation for Radix Switch component
 // https://www.radix-ui.com/docs/primitives/components/switch
-var Toggle = function Toggle(_ref) {
+var Toggle = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
       onChange = _ref.onChange,
@@ -64,7 +66,8 @@ var Toggle = function Toggle(_ref) {
       }
     },
     name: name,
-    onCheckedChange: onChange || undefined
+    onCheckedChange: onChange || undefined,
+    ref: forwardRef
   }, rest, {
     children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
       sx: {
@@ -83,9 +86,10 @@ var Toggle = function Toggle(_ref) {
       }
     })
   }));
-};
+});
 
 exports.Toggle = Toggle;
+Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
   name: _propTypes["default"].string,
   className: _propTypes["default"].any,

package/build/system/Form/ToggleGroup.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
@@ -21,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var ToggleGroup = function ToggleGroup(_ref) {
+var ToggleGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var onChange = _ref.onChange,
       groupLabel = _ref.groupLabel,
       value = _ref.value,
@@ -36,7 +38,8 @@ var ToggleGroup = function ToggleGroup(_ref) {
       p: 1,
       display: 'flex',
       alignItems: 'center'
-    }
+    },
+    ref: forwardRef
   }, props, {
     children: options.map(function (option, index) {
       return (0, _jsxRuntime.jsx)(RadioGroupPrimitive.Item, {
@@ -66,9 +69,10 @@ var ToggleGroup = function ToggleGroup(_ref) {
       }, option.value);
     })
   }));
-};
+});
 
 exports.ToggleGroup = ToggleGroup;
+ToggleGroup.displayName = 'ToggleGroup';
 ToggleGroup.propTypes = {
   onChange: _propTypes["default"].func,
   options: _propTypes["default"].array,

package/build/system/Link/Link.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,7 +19,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["active", "sx"];
 
-var Link = function Link(_ref) {
+var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       sx = _ref.sx,
@@ -43,11 +45,13 @@ var Link = function Link(_ref) {
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       }
-    }, sx)
+    }, sx),
+    ref: forwardRef
   }));
-};
+});
 
 exports.Link = Link;
+Link.displayName = 'Link';
 Link.propTypes = {
   active: _propTypes["default"].bool,
   sx: _propTypes["default"].object

package/build/system/Notice/Notice.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -45,7 +47,8 @@ var NoticeIcon = function NoticeIcon(_ref) {
       color: color,
       flex: '0 0 auto'
     },
-    size: 21
+    size: 21,
+    "aria-hidden": "true"
   });
 };
 
@@ -54,7 +57,7 @@ NoticeIcon.propTypes = {
   variant: _propTypes["default"].string
 };
 
-var Notice = function Notice(_ref2) {
+var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
   var _ref2$variant = _ref2.variant,
       variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
       _ref2$inline = _ref2.inline,
@@ -94,7 +97,8 @@ var Notice = function Notice(_ref2) {
         border: 'none'
       }
     }, sx),
-    className: (0, _classnames["default"])('vip-notice-component', className)
+    className: (0, _classnames["default"])('vip-notice-component', className),
+    ref: forwardRef
   }, props, {
     children: (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
@@ -124,9 +128,10 @@ var Notice = function Notice(_ref2) {
       })]
     })
   }));
-};
+});
 
 exports.Notice = Notice;
+Notice.displayName = 'Notice';
 Notice.propTypes = {
   children: _propTypes["default"].node,
   color: _propTypes["default"].string,

package/build/system/Notification/Notification.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Notification = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
 var _md = require("react-icons/md");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -24,7 +26,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var Notification = function Notification(_ref) {
+var Notification = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
       body = _ref.body,
       _ref$status = _ref.status,
@@ -39,6 +41,7 @@ var Notification = function Notification(_ref) {
       position: 'relative',
       variant: "notification." + status
     },
+    ref: forwardRef,
     children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
       children: "Alert,"
     }), (0, _jsxRuntime.jsxs)(_.Flex, {
@@ -90,9 +93,10 @@ var Notification = function Notification(_ref) {
       children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
     })]
   });
-};
+});
 
 exports.Notification = Notification;
+Notification.displayName = 'Notification';
 Notification.propTypes = {
   title: _propTypes["default"].node,
   body: _propTypes["default"].node,

package/build/system/OptionRow/OptionRow.js

@@ -44,7 +44,7 @@ var regularGridStyle = function regularGridStyle(small) {
   };
 };
 
-var OptionRow = function OptionRow(_ref) {
+var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var image = _ref.image,
       icon = _ref.icon,
       badge = _ref.badge,
@@ -71,7 +71,8 @@ var OptionRow = function OptionRow(_ref) {
     columns: [1, 1, 'auto 1fr auto'],
     gap: [3, 3, "" + (small ? 3 : 4)],
     "data-order": order || undefined,
-    className: (0, _classnames["default"])('vip-option-row-component', className)
+    className: (0, _classnames["default"])('vip-option-row-component', className),
+    ref: forwardRef
   }, props, {
     sx: (0, _extends2["default"])({
       alignItems: 'center',
@@ -135,9 +136,10 @@ var OptionRow = function OptionRow(_ref) {
       })
     })]
   }));
-};
+});
 
 exports.OptionRow = OptionRow;
+OptionRow.displayName = 'OptionRow';
 OptionRow.propTypes = {
   image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   icon: _propTypes["default"].node,

package/build/system/Spinner/Spinner.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className"];
 
-var Spinner = function Spinner(_ref) {
+var Spinner = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
@@ -30,11 +32,13 @@ var Spinner = function Spinner(_ref) {
       fill: 'none',
       color: 'primary'
     },
-    className: (0, _classnames["default"])('vip-spinner-component', className)
+    className: (0, _classnames["default"])('vip-spinner-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Spinner = Spinner;
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/Tabs/Tabs.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["className", "sx"];
 
-var Tabs = function Tabs(_ref) {
+var Tabs = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       sx = _ref.sx,
@@ -32,11 +34,13 @@ var Tabs = function Tabs(_ref) {
       listStyleType: 'none',
       margin: 0,
       padding: 0
-    }, sx)
+    }, sx),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Tabs = Tabs;
+Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   className: _propTypes["default"].any,
   sx: _propTypes["default"].object,

package/build/system/Text/Text.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className"];
 
-var Text = function Text(_ref) {
+var Text = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
@@ -30,11 +32,13 @@ var Text = function Text(_ref) {
       lineHeight: 1.5,
       marginBottom: 2
     }, sx),
-    className: (0, _classnames["default"])('vip-text-component', className)
+    className: (0, _classnames["default"])('vip-text-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Text = Text;
+Text.displayName = 'Text';
 Text.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/Wizard/Wizard.js

@@ -23,7 +23,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["steps", "activeStep", "variant", "completed", "className"];
 
-var Wizard = function Wizard(_ref) {
+var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       variant = _ref.variant,
@@ -34,6 +34,7 @@ var Wizard = function Wizard(_ref) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_.Box, {
     className: (0, _classnames["default"])('vip-wizard-component', className),
+    ref: forwardRef,
     children: variant === 'horizontal' ? (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Flex, (0, _extends2["default"])({
         sx: {
@@ -74,9 +75,10 @@ var Wizard = function Wizard(_ref) {
       }, index);
     })
   });
-};
+});
 
 exports.Wizard = Wizard;
+Wizard.displayName = 'Wizard';
 Wizard.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,