@automattic/vip-design-system 0.23.6 → 0.24.0

package/build/system/Accordion/Accordion.js

@@ -0,0 +1,246 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.TriggerWithIcon = exports.Trigger = exports.Root = exports.Item = exports.Content = void 0;
+
+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 _md = require("react-icons/md");
+
+var AccordionPrimitive = _interopRequireWildcard(require("@radix-ui/react-accordion"));
+
+var _react2 = require("@emotion/react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Heading = require("../Heading");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["children"],
+    _excluded2 = ["children", "headingVariant"],
+    _excluded3 = ["children", "icon"],
+    _excluded4 = ["children", "sx"];
+
+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 slideDown = (0, _react2.keyframes)({
+  from: {
+    height: 0
+  },
+  to: {
+    height: 'var(--radix-accordion-content-height)'
+  }
+});
+var slideUp = (0, _react2.keyframes)({
+  from: {
+    height: 'var(--radix-accordion-content-height)'
+  },
+  to: {
+    height: 0
+  }
+});
+
+var Item = function Item(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Item, (0, _extends2["default"])({}, props, {
+    sx: {
+      overflow: 'hidden',
+      borderWidth: '0 1px 1px 1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      '&:first-of-type': {
+        borderTopWidth: '1px',
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      },
+      '&:last-child': {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4
+      },
+      '&:focus-within': function focusWithin(theme) {
+        return theme.outline;
+      }
+    },
+    children: children
+  }));
+};
+
+exports.Item = Item;
+Item.displayName = 'Accordion.Item';
+Item.propTypes = {
+  children: _propTypes["default"].node.isRequired
+};
+
+var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardedRef) {
+  var children = _ref2.children,
+      _ref2$headingVariant = _ref2.headingVariant,
+      headingVariant = _ref2$headingVariant === void 0 ? 'h3' : _ref2$headingVariant,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
+  return (0, _jsxRuntime.jsx)(_Heading.Heading, {
+    sx: {
+      all: 'unset',
+      display: 'flex'
+    },
+    variant: headingVariant,
+    children: (0, _jsxRuntime.jsxs)(AccordionPrimitive.Trigger, (0, _extends2["default"])({
+      sx: {
+        color: 'heading',
+        cursor: 'pointer',
+        all: 'unset',
+        fontFamily: 'inherit',
+        px: 3,
+        height: 45,
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: 1,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        '&[data-state="closed"]': {
+          backgroundColor: 'transparent'
+        },
+        '&[data-state="open"]': {
+          backgroundColor: 'backgroundSecondary',
+          borderBottom: function borderBottom(theme) {
+            return "1px solid " + theme.colors.border;
+          }
+        },
+        '&:hover': {
+          backgroundColor: 'backgroundSecondary'
+        }
+      }
+    }, props, {
+      ref: forwardedRef,
+      children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
+        sx: {
+          fontSize: 3,
+          color: 'text',
+          transform: 'rotate(90deg)',
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          '[data-state=open] &': {
+            transform: 'rotate(270deg)'
+          }
+        },
+        "aria-hidden": true
+      })]
+    }))
+  });
+});
+
+exports.Trigger = Trigger;
+Trigger.displayName = 'Accordion.Trigger';
+Trigger.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  headingVariant: _propTypes["default"].string
+};
+
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
+  var children = _ref3.children,
+      icon = _ref3.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
+  return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
+    ref: forwardedRef,
+    children: [(0, _jsxRuntime.jsx)("span", {
+      sx: {
+        color: 'text',
+        fontSize: 3
+      },
+      children: icon
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        color: 'heading',
+        flexGrow: 1,
+        textAlign: 'left',
+        ml: 3
+      },
+      children: children
+    })]
+  }));
+});
+
+exports.TriggerWithIcon = TriggerWithIcon;
+TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
+TriggerWithIcon.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  icon: _propTypes["default"].node.isRequired
+};
+
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
+  var children = _ref4.children,
+      _ref4$sx = _ref4.sx,
+      sx = _ref4$sx === void 0 ? {} : _ref4$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
+      backgroundColor: 'transparent',
+      color: 'text',
+      fontSize: 2,
+      overflow: 'hidden',
+      '&[data-state="open"]': {
+        animation: slideDown + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      },
+      '&[data-state="closed"]': {
+        animation: slideUp + " 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+      }
+    }, sx)
+  }, props, {
+    ref: forwardedRef,
+    children: (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        px: 3,
+        py: 2
+      },
+      children: children
+    })
+  }));
+});
+
+exports.Content = Content;
+Content.displayName = 'Accordion.Content';
+Content.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  sx: _propTypes["default"].object
+};
+
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
+  var _ref5$sx = _ref5.sx,
+      sx = _ref5$sx === void 0 ? {} : _ref5$sx,
+      defaultValue = _ref5.defaultValue,
+      type = _ref5.type,
+      children = _ref5.children,
+      className = _ref5.className;
+  return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
+    className: (0, _classnames["default"])('vip-accordion-component', className),
+    collapsible: true,
+    defaultValue: defaultValue,
+    ref: forwardRef,
+    sx: (0, _extends2["default"])({
+      borderRadius: 6
+    }, sx),
+    type: type,
+    children: children
+  });
+});
+
+exports.Root = Root;
+Root.displayName = 'Accordion';
+Root.propTypes = {
+  children: _propTypes["default"].node,
+  className: _propTypes["default"].any,
+  defaultValue: _propTypes["default"].any,
+  sx: _propTypes["default"].object,
+  type: _propTypes["default"].oneOf(['single', 'multiple'])
+};

package/build/system/Accordion/Accordion.stories.js

@@ -0,0 +1,83 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ri = require("react-icons/ri");
+
+var _bi = require("react-icons/bi");
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Accordion',
+  component: _.Accordion
+};
+exports["default"] = _default;
+
+var ExampleContent = function ExampleContent() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mt: 0
+      },
+      children: "Add your key team members to the VIP Dashboard."
+    }), (0, _jsxRuntime.jsx)("p", {
+      children: "Add developers to GitHub."
+    }), (0, _jsxRuntime.jsx)("p", {
+      sx: {
+        mb: 0
+      },
+      children: "Add content editors and developers to WordPress admin."
+    })]
+  });
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Box, {
+    children: (0, _jsxRuntime.jsxs)(_.Accordion.Root, {
+      defaultValue: "teamPermissions",
+      sx: {
+        width: '450px'
+      },
+      children: [(0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "teamPermissions",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_ri.RiUserAddLine, {}),
+          children: "Team & Permissions"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "addContentMedia",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_bi.BiBookContent, {}),
+          children: "Add Content & Media"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      }), (0, _jsxRuntime.jsxs)(_.Accordion.Item, {
+        value: "addCode",
+        children: [(0, _jsxRuntime.jsx)(_.Accordion.TriggerWithIcon, {
+          icon: (0, _jsxRuntime.jsx)(_ri.RiCodeSSlashFill, {}),
+          children: "Add Code"
+        }), (0, _jsxRuntime.jsx)(_.Accordion.Content, {
+          children: (0, _jsxRuntime.jsx)(ExampleContent, {})
+        })]
+      })]
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Accordion/Accordion.test.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _themeUi = require("theme-ui");
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+var _ = require("../");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var renderWithTheme = function renderWithTheme(children) {
+  return (0, _react.render)((0, _jsxRuntime.jsx)(_themeUi.ThemeProvider, {
+    theme: _.theme,
+    children: children
+  }));
+};
+
+var renderComponent = function renderComponent() {
+  return renderWithTheme((0, _jsxRuntime.jsxs)(Accordion.Root, {
+    defaultValue: "one",
+    sx: {
+      width: '400px'
+    },
+    children: [(0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "one",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger one"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content one"
+      })]
+    }), (0, _jsxRuntime.jsxs)(Accordion.Item, {
+      value: "two",
+      children: [(0, _jsxRuntime.jsx)(Accordion.Trigger, {
+        children: "trigger two"
+      }), (0, _jsxRuntime.jsx)(Accordion.Content, {
+        children: "content two"
+      })]
+    })]
+  }));
+};
+
+describe('<Accordion />', function () {
+  it('renders the Accordion component with default value visible', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _renderComponent, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _renderComponent = renderComponent(), container = _renderComponent.container; // Should find the open content
+
+            expect(_react.screen.getByText('content one')).toBeInTheDocument(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeNull(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context.t1 = _context.sent;
+            _context.next = 9;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should open the content when clicking on its trigger', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _renderComponent2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _renderComponent2 = renderComponent(), container = _renderComponent2.container;
+
+            _react.fireEvent.click(_react.screen.getByRole('button', {
+              name: 'trigger two'
+            })); // Should find the open content
+
+
+            expect(_react.screen.queryByText('content one')).toBeNull(); // Should not find the closed content
+
+            expect(_react.screen.queryByText('content two')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Accordion/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Accordion = void 0;
+
+var Accordion = _interopRequireWildcard(require("./Accordion"));
+
+exports.Accordion = Accordion;
+
+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; }

package/build/system/Form/MultiSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MultiSelect = void 0;
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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); }
+
+var vipGold = '#c29c69'; // hardcoding for now
+
+var vipGrey2 = '#d7dee2';
+var customStyles = {
+  control: function control(styles) {
+    return _extends({}, styles, {
+      border: "1px solid " + vipGrey2,
+      boxShadow: 'none',
+      '&:hover': {
+        border: "1px solid " + vipGold
+      },
+      '&:focus': {
+        border: "1px solid " + vipGold
+      }
+    });
+  }
+};
+
+var MultiSelect = function MultiSelect(props) {
+  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
+    styles: customStyles
+  }));
+};
+
+exports.MultiSelect = MultiSelect;

package/build/system/Link/Link.js

@@ -26,9 +26,9 @@ var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Link, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
-      color: active ? 'links.active' : 'link',
       textDdecorationThickness: '0.1em',
       textUnderlineOffset: '0.1em',
+      color: active ? 'links.active' : 'link',
       '&:visited': {
         color: 'links.visited'
       },

package/build/system/Notice/Notice.js

@@ -96,7 +96,16 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
       color: color + ".90",
       a: {
         color: color + ".90",
-        border: 'none'
+        '&:visited': {
+          color: color + ".90"
+        },
+        '&:active': {
+          color: color + ".90"
+        },
+        '&:hover, &:focus': {
+          color: color + ".90",
+          textDecoration: 'none'
+        }
       }
     }, sx),
     className: (0, _classnames["default"])('vip-notice-component', className),

package/build/system/Notice/Notice.stories.js

@@ -44,8 +44,8 @@ var Default = function Default() {
       sx: {
         mb: 4
       },
-      children: ["It looks like you\u2018re ready to share your ", (0, _jsxRuntime.jsx)("a", {
-        href: "#",
+      children: ["It looks like you\u2018re ready to share your", ' ', (0, _jsxRuntime.jsx)(_.Link, {
+        href: "https://google.com/",
         children: "application with the world."
       })]
     }), (0, _jsxRuntime.jsx)(_.Notice, {

package/build/system/ResourceList/ResourceList.js

@@ -53,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'borders.2',
+      borderColor: 'border',
       listStyleType: 'none',
       margin: 0,
       px: 0

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/index.js

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

package/build/system/Wizard/Wizard.js

@@ -64,13 +64,15 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
     }) : steps.map(function (_ref3, index) {
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
-          children = _ref3.children;
+          children = _ref3.children,
+          titleVariant = _ref3.titleVariant;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
         order: index + 1,
         subTitle: subTitle,
         title: title,
+        titleVariant: titleVariant,
         children: children
       }, index);
     })