@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/NewForm/Legend.js

@@ -1,41 +1,39 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
+exports.__esModule = true;
+exports.Legend = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Label = require("../Form/Label");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "className", "sx"];
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
 /**
  * Internal dependencies
  */
-
-import { baseLabelStyle } from '../Form/Label';
-
-const Legend = React.forwardRef( ( { children, className, sx = {}, ...props }, forwardRef ) => (
-	<legend
-		ref={ forwardRef }
-		className={ classNames( 'vip-form-legend-component', className ) }
-		sx={ {
-			all: 'unset',
-			...baseLabelStyle,
-			px: 1,
-			mb: 0,
-			...sx,
-		} }
-		{ ...props }
-	>
-		{ children }
-	</legend>
-) );
-
-Legend.propTypes = {
-	children: PropTypes.any,
-	sx: PropTypes.any,
-	className: PropTypes.any,
-};
-
-Legend.displayName = 'Legend';
-
-export { Legend };
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Legend = exports.Legend = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("legend", _extends({
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-form-legend-component', className),
+    sx: _extends({
+      all: 'unset'
+    }, _Label.baseLabelStyle, {
+      px: 1,
+      mb: 0
+    }, sx)
+  }, props, {
+    children: children
+  }));
+});
+Legend.displayName = 'Legend';

package/build/system/NewForm/index.d.ts

@@ -1,5 +1,5 @@
 export default Root;
-export const Root: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export const Root: import("react").ForwardRefExoticComponent<import("./Form").FormProps & import("react").RefAttributes<HTMLFormElement>>;
 export const Select: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export const Autocomplete: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
 export const AutocompleteMulti: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/build/system/OptionRow/OptionRow.js

@@ -77,7 +77,7 @@ const OptionRow = React.forwardRef(
 						<Box
 							sx={ {
 								display: [ 'inline-block', 'inline-block', 'block' ],
-								p: small ? 12 : 20,
+								p: small ? 3 : 5,
 								flex: '0 0 auto',
 								bg: `optionRow.${ variant }.background`,
 								color: `optionRow.${ variant }.icon`,

package/build/system/Progress/Progress.d.ts

@@ -1,2 +1,9 @@
-export const Progress: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/// <reference types="react" />
+import { ProgressProps } from 'theme-ui';
+export interface ThemeProgressProps extends ProgressProps {
+    steps: string[];
+    activeStep: number;
+    forLabel?: string;
+    className?: string;
+}
+export declare const Progress: import("react").ForwardRefExoticComponent<Omit<ThemeProgressProps, "ref"> & import("react").RefAttributes<HTMLProgressElement>>;

package/build/system/Progress/Progress.js

@@ -1,78 +1,83 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
+exports.__esModule = true;
+exports.Progress = void 0;
+var _react = require("react");
+var _themeUi = require("theme-ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Spinner = require("../Spinner");
+var _md = require("react-icons/md");
+var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["steps", "activeStep", "sx", "forLabel", "className"];
 /**
  * External dependencies
  */
-import React from 'react';
-import { Progress as ThemeProgress } from 'theme-ui';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
 /**
  * Internal dependencies
  */
-import { Spinner } from '../Spinner';
-import { MdCheck } from 'react-icons/md';
-import { Box, Text, Flex } from '../';
-
-const prefix = 'vip-progress-component';
-const uniqueID = () => Math.random().toString( 36 ).substring( 7 );
-
-const Progress = React.forwardRef(
-	( { steps, activeStep, sx, forLabel = '', className, ...props }, forwardRef ) => {
-		const stepsTotal = steps.length;
-		const isDone = activeStep === stepsTotal - 1;
-		const instance = uniqueID();
-		const htmlFor = `${ prefix }-${ instance }`;
-		const currentValue = activeStep + 1;
-
-		return (
-			<Box className={ classNames( prefix, className ) }>
-				<ThemeProgress
-					sx={ {
-						color: 'primary',
-						backgroundColor: 'background',
-						...sx,
-					} }
-					max={ stepsTotal }
-					value={ currentValue }
-					id={ htmlFor }
-					aria-label={ forLabel }
-					ref={ forwardRef }
-					{ ...props }
-				/>
-
-				{ steps && (
-					<Flex
-						sx={ { alignItems: 'center', mt: 2 } }
-						aria-live="polite"
-						aria-atomic="true"
-						aria-describedby={ htmlFor }
-					>
-						{ ! isDone && <Spinner size={ 24 } aria-hidden="true" /> }
-						{ isDone && <MdCheck size={ 24 } aria-hidden="true" /> }
-
-						<Text sx={ { ml: 2, mb: 0 } }>
-							<strong>{ `${ currentValue } of ${ stepsTotal }` }: </strong>
-							<Text as="span" sx={ { color: 'muted' } }>
-								{ steps[ activeStep ] }
-							</Text>
-						</Text>
-					</Flex>
-				) }
-			</Box>
-		);
-	}
-);
-
-Progress.displayName = 'Progress';
-
-Progress.propTypes = {
-	steps: PropTypes.array,
-	activeStep: PropTypes.number,
-	forLabel: PropTypes.node,
-	sx: PropTypes.object,
-	className: PropTypes.any,
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 prefix = 'vip-progress-component';
+var uniqueID = function uniqueID() {
+  return Math.random().toString(36).substring(7);
 };
-
-export { Progress };
+var Progress = exports.Progress = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var steps = _ref.steps,
+    activeStep = _ref.activeStep,
+    sx = _ref.sx,
+    _ref$forLabel = _ref.forLabel,
+    forLabel = _ref$forLabel === void 0 ? '' : _ref$forLabel,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var stepsTotal = steps.length;
+  var isDone = activeStep === stepsTotal - 1;
+  var instance = uniqueID();
+  var htmlFor = prefix + "-" + instance;
+  var currentValue = activeStep + 1;
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    className: (0, _classnames["default"])(prefix, className),
+    children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, _extends({
+      sx: _extends({
+        color: 'primary',
+        backgroundColor: 'background'
+      }, sx),
+      max: stepsTotal,
+      value: currentValue,
+      id: htmlFor,
+      "aria-label": forLabel,
+      ref: ref
+    }, props)), steps && (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        alignItems: 'center',
+        mt: 2
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-describedby": htmlFor,
+      children: [!isDone && (0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+        size: 24,
+        "aria-hidden": "true"
+      }), isDone && (0, _jsxRuntime.jsx)(_md.MdCheck, {
+        size: 24,
+        "aria-hidden": "true"
+      }), (0, _jsxRuntime.jsxs)(_.Text, {
+        sx: {
+          ml: 2,
+          mb: 0
+        },
+        children: [(0, _jsxRuntime.jsxs)("strong", {
+          children: [currentValue + " of " + stepsTotal, ": "]
+        }), (0, _jsxRuntime.jsx)(_.Text, {
+          as: "span",
+          sx: {
+            color: 'muted'
+          },
+          children: steps[activeStep]
+        })]
+      })]
+    })]
+  });
+});
+Progress.displayName = 'Progress';

package/build/system/Progress/Progress.stories.d.ts

@@ -1,8 +1,10 @@
-declare namespace _default {
-    export let title: string;
-    export { Progress as component };
-}
-export default _default;
-export function Default(): React.JSX.Element;
-import { Progress } from '..';
+/**
+ * Internal dependencies
+ */
 import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("./Progress").ThemeProgressProps, "ref"> & React.RefAttributes<HTMLProgressElement>>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/build/system/Progress/Progress.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'Progress',
+  component: _.Progress
+};
+var Default = exports.Default = function Default() {
+  var _React$useState = _react["default"].useState(0),
+    counter = _React$useState[0],
+    setCounter = _React$useState[1];
+  var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (counter < steps.length - 1) {
+        setCounter(counter + 1);
+      }
+    }, 2000);
+  }, [counter, setCounter]);
+  return (0, _jsxRuntime.jsx)(_.Progress, {
+    forLabel: "Update site progress",
+    steps: steps,
+    activeStep: counter
+  });
+};

package/build/system/Progress/Progress.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/system/Progress/Progress.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Progress = require("./Progress");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                       * External dependencies
+                                                                                                                                                                                                                                                                                                                                                                                                       */ /**
+                                                                                                                                                                                                                                                                                                                                                                                                           * Internal dependencies
+                                                                                                                                                                                                                                                                                                                                                                                                           */
+var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
+describe('<Progress />', function () {
+  it('renders the progress component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _render, container;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Progress.Progress, {
+            steps: steps,
+            activeStep: 1
+          })), container = _render.container;
+          expect(container.getElementsByClassName('vip-progress-component')).toBeDefined();
+
+          // Check for accessibility issues
+          _context.t0 = expect;
+          _context.next = 5;
+          return (0, _jestAxe.axe)(container);
+        case 5:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('renders the progress component with different label text', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _render2, container;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Progress.Progress, {
+            forLabel: "My progress bar",
+            steps: steps,
+            activeStep: 1
+          })), container = _render2.container;
+          expect(_react.screen.getByLabelText('My progress bar')).toBeInTheDocument();
+
+          // Check for accessibility issues
+          _context2.t0 = expect;
+          _context2.next = 5;
+          return (0, _jestAxe.axe)(container);
+        case 5:
+          _context2.t1 = _context2.sent;
+          (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Progress/index.d.ts

@@ -1,2 +1,4 @@
-export { Progress };
-import { Progress } from './Progress';
+/**
+ * Internal dependencies
+ */
+export { Progress } from './Progress';

package/build/system/Progress/index.js

@@ -1,6 +1,6 @@
-/**
- * Internal dependencies
- */
-import { Progress } from './Progress';
+"use strict";
 
-export { Progress };
+exports.__esModule = true;
+exports.Progress = void 0;
+var _Progress = require("./Progress");
+exports.Progress = _Progress.Progress;

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -32,5 +32,4 @@ var ScreenReaderText = exports.ScreenReaderText = /*#__PURE__*/(0, _react.forwar
     ref: ref,
     children: props.children
   }));
-});
-ScreenReaderText.displayName = 'ScreenReaderText';
+});

package/build/system/Tabs/TabsTrigger.js

@@ -25,7 +25,6 @@ const styles = {
 		color: 'link',
 		fontWeight: 'regular',
 		boxShadow: 'inset 0 -1px 0 0, 0 1px 0 0',
-		boxShadowColor: 'borders.accent',
 	},
 	'&:disabled': {
 		color: 'muted',

package/build/system/Text/Text.js

@@ -20,7 +20,7 @@ var Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
   return (0, _jsxRuntime.jsx)(_themeUi.Text, _extends({
     as: "p",
     sx: _extends({
-      lineHeight: 1.5,
+      lineHeight: 'body',
       marginBottom: 2,
       color: 'text'
     }, sx),

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

@@ -27,6 +27,42 @@ var Default = exports.Default = function Default() {
         color: 'texts.helper'
       },
       children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'body'
+      },
+      children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'heading'
+      },
+      children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'regular'
+      },
+      children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'medium'
+      },
+      children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'bold'
+      },
+      children: "Text Helper"
+    }), (0, _jsxRuntime.jsx)(_.Text, {
+      sx: {
+        color: 'texts.helper',
+        fontWeight: 'light'
+      },
+      children: "Text Helper"
     }), (0, _jsxRuntime.jsx)(_.Text, {
       sx: {
         color: 'texts.secondary'

package/build/system/Tooltip/Tooltip.css

@@ -22,11 +22,15 @@
   [data-vip-tooltip]::before {
 	content: attr(data-vip-tooltip);
 	z-index: 9999;
-	width: 210px;
+	width: max-content;
+	max-width: 210px;
 	color: #fff;
 	background: rgba(0,0,0, .7);
 	border-radius: 5px;
-	padding: 5px;
+	padding-left: 12px;
+	padding-right: 12px;
+	padding-top: 8px;
+	padding-bottom: 8px;
   }
 
   [data-vip-tooltip]::after {

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

@@ -13,7 +13,7 @@ var _default = exports["default"] = {
   parameters: {
     docs: {
       description: {
-        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Kwown issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n### Usability guidance\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>data-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Kwown issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n### Usability guidance\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>vip-tooltip-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
       }
     }
   }
@@ -74,7 +74,7 @@ var Container = exports.Container = function Container() {
       }), " component. To use tooltips you can simply pass ", (0, _jsxRuntime.jsx)("code", {
         children: "data-vip-tooltip"
       }), " as an HTML attribute to your component."]
-    }), (0, _jsxRuntime.jsx)("div", {
+    }), (0, _jsxRuntime.jsx)(_.Box, {
       sx: {
         backgroundColor: 'red'
       },

package/build/system/Wizard/Wizard.d.ts

@@ -1,2 +1,15 @@
-export const Wizard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { WizardStepProps } from './WizardStep';
+export interface WizardProps {
+    steps: WizardStepProps[];
+    activeStep?: number;
+    completed?: number[];
+    skipped?: number[];
+    className?: string;
+    titleAutofocus?: boolean;
+}
+export declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;