@automattic/vip-design-system 0.10.1 → 0.10.2

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

@@ -0,0 +1,64 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Table',
+  component: _.Table
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Table, {
+    children: [(0, _jsxRuntime.jsx)("thead", {
+      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+        head: true,
+        cells: ['User', 'Command', 'Duration', 'Time']
+      })
+    }), (0, _jsxRuntime.jsx)("tbody", {
+      children: (0, _jsxRuntime.jsx)(_.TableRow, {
+        cells: [(0, _jsxRuntime.jsx)(_.Flex, {
+          sx: {
+            alignItems: 'center'
+          },
+          children: (0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            sx: {
+              mb: 0
+            },
+            children: "kwaves"
+          })
+        }, "user"), (0, _jsxRuntime.jsx)(_.Heading, {
+          variant: "h4",
+          sx: {
+            mb: 0,
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: "wp rewrite flush"
+        }, "command"), (0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            mb: 0
+          },
+          children: "2s"
+        }, "duration"), (0, _jsxRuntime.jsx)(_.Text, {
+          sx: {
+            mb: 0,
+            color: 'muted'
+          },
+          children: "11th Mar 2020, 16:49:22"
+        }, "time")]
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

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,24 +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",
     "data-active": active || undefined,
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       cursor: 'pointer',
       background: 'none',
       color: active ? 'heading' : 'muted',

package/build/system/Tabs/Tabs.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Tabs = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,21 +19,14 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["className", "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 Tabs = function Tabs(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Flex, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Flex, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-tabs-component', className),
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       borderBottom: '1px solid',
       borderColor: 'border',
       listStyleType: 'none',

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

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Tabs',
+  component: _.Tabs
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Tabs, {
+    children: [(0, _jsxRuntime.jsx)(_.TabItem, {
+      active: true,
+      children: "All (5)"
+    }), (0, _jsxRuntime.jsx)(_.TabItem, {
+      children: "Live (2)"
+    }), (0, _jsxRuntime.jsx)(_.TabItem, {
+      children: "In Development (3)"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Text/Text.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Text = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,21 +19,14 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className"];
 
-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 Text = function Text(_ref) {
   var sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
+      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),

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

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Text',
+  component: _.Text
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Text, {
+    children: ["Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.", ' ']
+  });
+};
+
+exports.Default = Default;

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,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Time = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,13 +18,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["time", "relativeTime", "timeOnly", "className"];
-
-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 formatter = new Intl.RelativeTimeFormat(undefined, {
   numeric: 'auto'
 });
@@ -64,8 +63,7 @@ var Time = function Time(_ref) {
       timeOnly = _ref$timeOnly === void 0 ? false : _ref$timeOnly,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var formattedTime;
 
   if (relativeTime) {
@@ -76,7 +74,7 @@ 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'
     }),

package/build/system/Timeline/Timeline.js

@@ -1,8 +1,14 @@
 "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");
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["time", "first", "last", "className"];
 
-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 VerticalLine = function VerticalLine() {
   return (0, _jsxRuntime.jsx)("div", {
     sx: {
@@ -40,9 +40,8 @@ var Timeline = function Timeline(_ref) {
       last = _ref$last === void 0 ? false : _ref$last,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsxs)(_themeUi.Flex, _extends({
+      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, {

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

@@ -0,0 +1,46 @@
+"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 _Link = require("../Link");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Timeline',
+  component: _.Timeline
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    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"
+    })]
+  });
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Tooltip',
+  component: _.Tooltip
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Flex, {
+    sx: {
+      alignItems: 'center'
+    },
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      sx: {
+        mb: 0,
+        mr: 2
+      },
+      children: "My Section Heading"
+    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        sx: {
+          fontSize: 1
+        },
+        children: ["This is a tooltip that can be used to describe various pieces of functionality.", (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
+          children: "Find out more \u2192"
+        })]
+      })
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/UsageChart/UsageChart.js

@@ -0,0 +1,60 @@
+"use strict";
+
+exports.__esModule = true;
+exports.UsageChart = void 0;
+
+var _framerMotion = require("framer-motion");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * External dependencies
+ */
+var UsageChart = function UsageChart(_ref) {
+  var total = _ref.total,
+      max = _ref.max,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
+  var width = total / max * 100 + '%';
+  var formattedTotal = total;
+
+  if (total > 1000000) {
+    formattedTotal = (total / 1000000).toFixed(2) + "M";
+  } else if (total > 1000) {
+    formattedTotal = (total / 1000).toFixed(2) + "K";
+  }
+
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      height: variant === 'primary' ? 32 : 8,
+      overflow: 'hidden',
+      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
+    },
+    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      initial: {
+        width: 0
+      },
+      animate: {
+        width: width
+      },
+      transition: {
+        duration: 0.7
+      },
+      sx: {
+        height: '100%',
+        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
+      }
+    })
+  });
+};
+
+exports.UsageChart = UsageChart;
+UsageChart.propTypes = {
+  total: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  variant: _propTypes["default"].string
+};

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"
+  });
+};

package/build/system/UsageChart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _UsageChart = require("./UsageChart");
+
+exports.UsageChart = _UsageChart.UsageChart;