@automattic/vip-design-system 1.2.0 → 1.2.2

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { Badge } from '..';
+declare const _default: {
+    component: import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+    title: string;
+};
+export default _default;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Variants: () => import("react").JSX.Element;
+export declare const WithLink: Story;

package/build/system/Badge/Badge.stories.js

@@ -1,86 +1,85 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.WithLinks = exports.Default = void 0;
+exports["default"] = exports.WithLink = exports.Variants = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 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); } /**
-                                                                                                                                                                                                                                                                                                                                                     * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                     */
-var _default = {
-  title: 'Badge',
-  component: _.Badge
+                                                                                                                                                                                                                                                                                                                                                     * External dependencies
+                                                                                                                                                                                                                                                                                                                                                     */ /**
+                                                                                                                                                                                                                                                                                                                                                         * Internal dependencies
+                                                                                                                                                                                                                                                                                                                                                         */
+var _default = exports["default"] = {
+  component: _.Badge,
+  title: 'Badge'
 };
-exports["default"] = _default;
-var Template = function Template(props) {
-  return (0, _jsxRuntime.jsx)(_.Badge, _extends({}, props, {
-    sx: {
-      m: 2
-    }
-  }));
+var Default = exports.Default = {
+  args: {
+    children: 'Badge',
+    sx: undefined
+  }
 };
-var TemplateLink = function TemplateLink(props) {
-  return (0, _jsxRuntime.jsx)(Template, _extends({}, props, {
-    sx: {
-      m: 2
-    },
-    children: (0, _jsxRuntime.jsx)(_.Link, {
-      href: "http://google.com",
-      children: "Google.com"
-    })
-  }));
-};
-var Default = function Default() {
+var Variants = exports.Variants = function Variants() {
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(Template, {
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
-      variant: "red",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
-      variant: "yellow",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
-      variant: "green",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
+    children: [(0, _jsxRuntime.jsx)(_.Badge, {
+      variant: "blue",
+      sx: {
+        m: 2
+      },
+      children: "Blue"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
+      variant: "gold",
+      sx: {
+        m: 2
+      },
+      children: "Gold"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
       variant: "gray",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
+      sx: {
+        m: 2
+      },
+      children: "Gray"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
+      variant: "green",
+      sx: {
+        m: 2
+      },
+      children: "Green"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
       variant: "orange",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
-      variant: "gold",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
-      variant: "pink",
-      children: "Badge"
-    }), (0, _jsxRuntime.jsx)(Template, {
+      sx: {
+        m: 2
+      },
+      children: "Orange"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
+      variant: "red",
+      sx: {
+        m: 2
+      },
+      children: "Red"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
       variant: "salmon",
-      children: "Badge"
-    })]
-  });
-};
-exports.Default = Default;
-var WithLinks = function WithLinks() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(TemplateLink, {}), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "red"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "yellow"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "green"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "gray"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "orange"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "gold"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "pink"
-    }), (0, _jsxRuntime.jsx)(TemplateLink, {
-      variant: "salmon"
+      sx: {
+        m: 2
+      },
+      children: "Salmon"
+    }), (0, _jsxRuntime.jsx)(_.Badge, {
+      variant: "yellow",
+      sx: {
+        m: 2
+      },
+      children: "Yellow"
     })]
   });
 };
-exports.WithLinks = WithLinks;
+var WithLink = exports.WithLink = {
+  args: {},
+  render: function render(args) {
+    return (0, _jsxRuntime.jsx)(_.Badge, _extends({
+      children: (0, _jsxRuntime.jsx)(_.Link, {
+        href: "https://google.com",
+        children: "Google"
+      })
+    }, args));
+  }
+};

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

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

package/build/system/Badge/Badge.test.js

@@ -4,7 +4,7 @@ var _react = require("@testing-library/react");
 var _jestAxe = require("jest-axe");
 var _Badge = require("./Badge");
 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 exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+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
@@ -28,9 +28,8 @@ describe('<Badge />', function () {
           return (0, _jestAxe.axe)(container);
         case 5:
           _context.t1 = _context.sent;
-          _context.next = 8;
-          return (0, _context.t0)(_context.t1).toHaveNoViolations();
-        case 8:
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 7:
         case "end":
           return _context.stop();
       }
@@ -42,7 +41,7 @@ describe('<Badge />', function () {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Badge.Badge, {
-            variant: "primary",
+            variant: "red",
             children: "Badge text"
           })), container = _render2.container;
           expect(_react.screen.getByText('Badge text')).toBeInTheDocument();
@@ -53,9 +52,8 @@ describe('<Badge />', function () {
           return (0, _jestAxe.axe)(container);
         case 5:
           _context2.t1 = _context2.sent;
-          _context2.next = 8;
-          return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
-        case 8:
+          (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+        case 7:
         case "end":
           return _context2.stop();
       }

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

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Badge } from './Badge';

package/build/system/Badge/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
+exports.Badge = void 0;
 var _Badge = require("./Badge");
 exports.Badge = _Badge.Badge;

package/build/system/Box/Box.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps as ThemeBoxProps } from 'theme-ui';
+export declare const Box: import("react").ForwardRefExoticComponent<ThemeBoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/{Form/Label.stories.js → Box/Box.js}

@@ -1,35 +1,19 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Required = exports.Default = void 0;
-var _ = require("..");
+exports.Box = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _themeUi = require("theme-ui");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */
-var _default = {
-  title: 'Form/Label'
-};
-exports["default"] = _default;
-var DefaultComponent = function DefaultComponent(props) {
-  return (0, _jsxRuntime.jsx)(_.Form.Root, {
-    children: (0, _jsxRuntime.jsx)(_.Label, _extends({}, props, {
-      children: "Label"
-    }))
-  });
-};
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, {})
-  });
-};
-exports.Default = Default;
-var Required = function Required() {
-  var args = {
-    required: true
-  };
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, _extends({}, args))
-  });
-};
-exports.Required = Required;
+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); } /**
+                                                                                                                                                                                                                                                                                                                                                     * External dependencies
+                                                                                                                                                                                                                                                                                                                                                     */
+var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({}, props, {
+    className: (0, _classnames["default"])('vip-box-component', props.className),
+    ref: ref
+  }));
+});
+Box.displayName = 'Box';

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { Box } from '..';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("theme-ui").BoxProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default _default;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;

package/build/system/Box/Box.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _ = require("..");
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'Box',
+  component: _.Box
+};
+var Default = exports.Default = {
+  args: {
+    children: 'Hello',
+    sx: undefined
+  }
+};

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

@@ -0,0 +1,2 @@
+export { Box };
+import { Box } from './Box';

package/build/system/Box/index.js

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

package/build/system/Button/Button.d.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { ButtonProps as ThemeButtonProps } from 'theme-ui';
+type ButtonClickType = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export interface ButtonProps extends ThemeButtonProps {
+    disabled?: boolean;
+    onClick?: (event: ButtonClickType) => void;
+}
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Button };

package/build/system/Button/Button.js

@@ -3,12 +3,10 @@
 exports.__esModule = true;
 exports.Button = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _themeUi = require("theme-ui");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["disabled", "onClick", "sx"];
-/** @jsxImportSource theme-ui */
+var _excluded = ["className", "disabled", "onClick", "sx"];
 /**
  * External dependencies
  */
@@ -17,11 +15,12 @@ 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 _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 Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var disabled = _ref.disabled,
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    disabled = _ref.disabled,
     onClick = _ref.onClick,
     sx = _ref.sx,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var handleOnClick = (0, _react.useCallback)(function (event) {
     if (disabled) {
       return event.preventDefault();
@@ -51,18 +50,11 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
         pointerEvents: 'all'
       }
     }, sx)
-  }, props, {
+  }, rest, {
     "aria-disabled": disabled,
     onClick: handleOnClick,
-    className: (0, _classnames["default"])('vip-button-component', props.className),
-    ref: forwardRef
+    className: (0, _classnames["default"])('vip-button-component', className),
+    ref: ref
   }));
 });
-exports.Button = Button;
-Button.displayName = 'Button';
-Button.propTypes = {
-  className: _propTypes["default"].any,
-  disabled: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  sx: _propTypes["default"].object
-};
+Button.displayName = 'Button';

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

@@ -0,0 +1,30 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("./Button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    argTypes: {
+        children: {};
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            type: string;
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/build/system/Button/Button.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.WithOnClick = exports.Link = exports.Default = void 0;
+exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _bi = require("react-icons/bi");
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
@@ -14,7 +14,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
                                                                                                                                                                                                                                                                                                                                                                                       */ /**
                                                                                                                                                                                                                                                                                                                                                                                           * Internal dependencies
                                                                                                                                                                                                                                                                                                                                                                                           */
-var _default = {
+var _default = exports["default"] = {
   title: 'Button',
   component: _.Button,
   argTypes: {
@@ -28,9 +28,15 @@ var _default = {
       type: 'select',
       options: _variants["default"]
     }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "\nA button draws attention to important actions with a large selectable surface.\n\n## Guidance\n\n### When to use the button component\n\n**Important actions**. Use buttons for the most important actions you want users to take on your site, such as Download, Toggle states or submitting forms.\n\n### When to consider something else\n\nLinking between a site\u2019s pages. Use regular links instead.\nIf the action is less popular or less important. Less popular or less important actions may be visually styled as links.\n\n### Usability guidance\n\n- Keep button text short. Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View, or Sign up).\n\n### Accessibility\n\n- Buttons should display a visible focus state when users tab to them.\n\n- Screen readers handle buttons and links differently. When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.\n\n- Icons can be helpful. Consider adding an icon to signal specific actions (Download, Open in a new window, etc).\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/button/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+      }
+    }
   }
 };
-exports["default"] = _default;
 var Template = function Template(args) {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [(0, _jsxRuntime.jsx)(_.Button, _extends({}, args, {
@@ -105,20 +111,4 @@ var Template = function Template(args) {
     })]
   });
 };
-var Default = Template.bind({});
-exports.Default = Default;
-var Link = Template.bind({});
-exports.Link = Link;
-Link.args = {
-  variant: 'text',
-  as: 'a',
-  href: 'https://www.google.com'
-};
-var WithOnClick = Template.bind({});
-exports.WithOnClick = WithOnClick;
-Link.args = {
-  onClick: function onClick() {
-    // eslint-disable-next-line no-alert
-    alert('Clicked');
-  }
-};
+var Default = exports.Default = Template.bind({});

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

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