@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/Spinner/Spinner.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Table/Table.js

@@ -1,32 +1,29 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Table = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Table = function Table(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)("div", {
     sx: {
-      overflowX: 'auto',
-      pb: 300,
-      mb: -300
+      overflowX: 'auto'
     },
-    children: (0, _jsxRuntime.jsx)("table", _extends({
-      sx: _extends({
+    children: (0, _jsxRuntime.jsx)("table", (0, _extends2["default"])({
+      sx: (0, _extends2["default"])({
         width: '100%',
         minWidth: 1024
       }, sx),

package/build/system/Table/Table.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Table/TableRow.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.TableRow = void 0;
 
@@ -9,8 +11,6 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**

package/build/system/Tabs/TabItem.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.TabItem = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("..");
@@ -11,23 +17,17 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["active", "sx"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var TabItem = function TabItem(_ref) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Link, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Link, (0, _extends2["default"])({
     variant: "h4",
     as: "button",
     tabIndex: "0",
-    sx: _extends({
+    "data-active": active || undefined,
+    sx: (0, _extends2["default"])({
       cursor: 'pointer',
       background: 'none',
       color: active ? 'heading' : 'muted',

package/build/system/Tabs/Tabs.js

@@ -1,28 +1,32 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Tabs = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _ = require("..");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["sx"];
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _ = require("..");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["className", "sx"];
 
 var Tabs = function Tabs(_ref) {
-  var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Flex, _extends({
-    sx: _extends({
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      sx = _ref.sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Flex, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-tabs-component', className),
+    sx: (0, _extends2["default"])({
       borderBottom: '1px solid',
       borderColor: 'border',
       listStyleType: 'none',
@@ -34,6 +38,7 @@ var Tabs = function Tabs(_ref) {
 
 exports.Tabs = Tabs;
 Tabs.propTypes = {
-  variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  className: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  variant: _propTypes["default"].string
 };

package/build/system/Tabs/Tabs.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Text/Text.js

@@ -1,36 +1,41 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Text = void 0;
 
-var _themeUi = require("theme-ui");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _themeUi = require("theme-ui");
 
-var _excluded = ["sx"];
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["sx", "className"];
 
 var Text = function Text(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Text, (0, _extends2["default"])({
     as: "p",
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       lineHeight: 1.5,
       marginBottom: 2
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-text-component', className)
   }, props));
 };
 
 exports.Text = Text;
 Text.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

package/build/system/Text/Text.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Time/Time.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Time',
+  component: _.Time
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_.Grid, {
+      gap: 2,
+      columns: [2, '100px 300px'],
+      sx: {
+        mb: '20px'
+      },
+      children: [(0, _jsxRuntime.jsx)(_.Time, {
+        time: "7pm"
+      }), (0, _jsxRuntime.jsx)(_.Box, {
+        children: "It looks like everything is recovered now. You can forget about the last event."
+      })]
+    }), (0, _jsxRuntime.jsxs)(_.Grid, {
+      gap: 2,
+      columns: [2, '100px 200px'],
+      children: [(0, _jsxRuntime.jsx)(_.Time, {
+        time: "6pm"
+      }), (0, _jsxRuntime.jsx)(_.Box, {
+        children: "At this particular moment in the day, something happened with your environment."
+      })]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Time/index.js

@@ -1,22 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Time = void 0;
 
-var _themeUi = require("theme-ui");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _excluded = ["time", "relativeTime", "timeOnly"];
+var _themeUi = require("theme-ui");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["time", "relativeTime", "timeOnly", "className"];
 var formatter = new Intl.RelativeTimeFormat(undefined, {
   numeric: 'auto'
 });
@@ -60,8 +61,9 @@ var Time = function Time(_ref) {
       relativeTime = _ref$relativeTime === void 0 ? false : _ref$relativeTime,
       _ref$timeOnly = _ref.timeOnly,
       timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var formattedTime;
 
   if (relativeTime) {
@@ -72,12 +74,13 @@ var Time = function Time(_ref) {
     formattedTime = time.toLocaleString();
   }
 
-  return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
+  return (0, _jsxRuntime.jsx)(_themeUi.Text, (0, _extends2["default"])({
     title: time.toLocaleString('sv', {
       timeZoneName: 'short'
     }),
     datetime: time,
-    as: "time"
+    as: "time",
+    className: (0, _classnames["default"])('vip-time-component', className)
   }, props, {
     children: formattedTime
   }));
@@ -87,5 +90,6 @@ exports.Time = Time;
 Time.propTypes = {
   time: _propTypes["default"].string,
   timeOnly: _propTypes["default"].bool,
-  relativeTime: _propTypes["default"].bool
+  relativeTime: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

package/build/system/Timeline/Timeline.js

@@ -1,23 +1,25 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Timeline = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _md = require("react-icons/md");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["time", "first", "last"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var _excluded = ["time", "first", "last", "className"];
 
 var VerticalLine = function VerticalLine() {
   return (0, _jsxRuntime.jsx)("div", {
@@ -36,9 +38,12 @@ var Timeline = function Timeline(_ref) {
       first = _ref$first === void 0 ? false : _ref$first,
       _ref$last = _ref.last,
       last = _ref$last === void 0 ? false : _ref$last,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({}, props, {
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('vip-timeline-component', className)
+  }, props, {
     children: [(0, _jsxRuntime.jsxs)(_themeUi.Flex, {
       sx: {
         flexDirection: 'column',
@@ -66,5 +71,6 @@ exports.Timeline = Timeline;
 Timeline.propTypes = {
   first: _propTypes["default"].bool,
   time: _propTypes["default"].node,
-  last: _propTypes["default"].bool
+  last: _propTypes["default"].bool,
+  className: _propTypes["default"].any
 };

package/build/system/Timeline/Timeline.stories.js

@@ -1,15 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _ = require("..");
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _Link = require("../Link");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /**
  * External dependencies
@@ -26,25 +28,17 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_.Grid, {
-      gap: 2,
-      columns: [2, '100px 300px'],
-      sx: {
-        mb: '20px'
-      },
-      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
-        time: "7pm"
-      }), (0, _jsxRuntime.jsx)(_.Box, {
-        children: "It looks like everything is recovered now. You can forget about the last event."
-      })]
-    }), (0, _jsxRuntime.jsxs)(_.Grid, {
-      gap: 2,
-      columns: [2, '100px 200px'],
-      children: [(0, _jsxRuntime.jsx)(_.Timeline, {
-        time: "6pm"
-      }), (0, _jsxRuntime.jsx)(_.Box, {
-        children: "At this particular moment in the day, something happened with your environment."
-      })]
+    children: [(0, _jsxRuntime.jsx)(_.Timeline, {
+      time: "13:00",
+      title: "21:00 UTC"
+    }), (0, _jsxRuntime.jsx)(_.Timeline, {
+      time: (0, _jsxRuntime.jsx)(_Link.Link, {
+        children: "14:00"
+      }),
+      title: "22:00 UTC"
+    }), (0, _jsxRuntime.jsx)(_.Timeline, {
+      time: "15:00",
+      title: "23:00 UTC"
     })]
   });
 };

package/build/system/Tooltip/Tooltip.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Tooltip = void 0;
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
@@ -19,14 +25,8 @@ 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var StyledArrow = function StyledArrow(props) {
-  return (0, _jsxRuntime.jsx)(TTip.Arrow, _extends({
+  return (0, _jsxRuntime.jsx)(TTip.Arrow, (0, _extends2["default"])({
     sx: {
       fill: 'white'
     }
@@ -42,9 +42,8 @@ var Tooltip = function Tooltip(_ref) {
       width = _ref$width === void 0 ? 200 : _ref$width,
       children = _ref.children,
       tooltipProps = _ref.tooltipProps,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(TTip.Root, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(TTip.Root, (0, _extends2["default"])({
     skipDelayDuration: 700,
     sx: {
       display: 'inline-block',
@@ -72,7 +71,7 @@ var Tooltip = function Tooltip(_ref) {
         m: 0
       },
       children: [trigger, (0, _jsxRuntime.jsxs)(TTip.Content, {
-        children: [(0, _jsxRuntime.jsx)(_.Card, _extends({
+        children: [(0, _jsxRuntime.jsx)(_.Card, (0, _extends2["default"])({
           className: "tooltip-content",
           sx: {
             width: width

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/UsageChart/UsageChart.stories.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+
+import { UsageChart } from '..';
+export default {
+  title: 'UsageChart',
+  component: UsageChart
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(UsageChart, {
+    total: 50,
+    max: 75,
+    variant: "primary"
+  });
+};