@automattic/vip-design-system 0.10.1 → 0.10.2

package/build/system/Button/Button.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Button = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,18 +19,11 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Button = function Button(_ref) {
   var sx = _ref.sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_themeUi.Button, _extends({
-    sx: _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
+    sx: (0, _extends2["default"])({
       verticalAlign: 'middle',
       display: 'inline-flex',
       alignItems: 'center',

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Button',
+  component: _.Button
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Button, {
+      sx: {
+        mr: 2
+      },
+      children: "Primary"
+    }), (0, _jsxRuntime.jsx)(_.Button, {
+      variant: "secondary",
+      sx: {
+        ml: 2
+      },
+      children: "Secondary"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Button/Button.test.js

@@ -1,5 +1,11 @@
 "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");
@@ -8,15 +14,18 @@ var _Button = require("./Button");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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
+ */
 describe('<Button />', function () {
-  it('renders the Button component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Button component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:

package/build/system/Card/Card.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Card = 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"));
@@ -15,23 +21,16 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       _ref$sx = _ref.sx,
       sx = _ref$sx === void 0 ? {} : _ref$sx,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       // pass variant prop to sx
       variant: "cards." + variant,
       overflow: 'hidden'

package/build/system/Card/Card.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Card',
+  component: _.Card
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    children: "Hello"
+  });
+};
+
+exports.Default = Default;

package/build/system/Card/Card.test.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -10,22 +18,23 @@ var _Card = require("./Card");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function 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 defaultProps = {};
 describe('<Card />', function () {
-  it('renders the Card component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Card component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, _extends({}, defaultProps, {
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, (0, _extends2["default"])({}, defaultProps, {
               children: "This is a Card"
             }))), container = _render.container;
             expect(_react.screen.getByText('This is a Card')).toBeInTheDocument(); // Check for accessibility issues
@@ -46,10 +55,10 @@ describe('<Card />', function () {
       }
     }, _callee);
   })));
-  it('renders the Card component with a different variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  it('renders the Card component with a different variant', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var _render2, container;
 
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:

package/build/system/Code/Code.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Code = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["prompt", "showCopy", "onCopy", "className"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Code = function Code(_ref) {
   var _ref$prompt = _ref.prompt,
       prompt = _ref$prompt === void 0 ? false : _ref$prompt,
@@ -29,10 +29,9 @@ var Code = function Code(_ref) {
       _ref$onCopy = _ref.onCopy,
       onCopy = _ref$onCopy === void 0 ? null : _ref$onCopy,
       className = _ref.className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var ref = (0, _react.useRef)();
-  var codeDom = (0, _jsxRuntime.jsx)("code", _extends({
+  var codeDom = (0, _jsxRuntime.jsx)("code", (0, _extends2["default"])({
     ref: ref,
     sx: {
       fontSize: 1,

package/build/system/Code/Code.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Code',
+  component: _.Code
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Code, {
+      children: "Code"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Code, {
+      showCopy: true,
+      children: "Code with Icon"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Code, {
+      showCopy: true,
+      onCopy: // eslint-disable-next-line no-console
+      function onCopy() {
+        return console.info('Hello world');
+      },
+      children: "Code with Icon and Click callback \u2014 console.info"
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Code/Code.test.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -10,12 +18,13 @@ var _Code = require("./Code");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function 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 defaultProps = {
   showCopy: false
 }; // Mock navigator.clipboard because jsdom doesn't support it
@@ -26,14 +35,14 @@ Object.defineProperty(window.navigator, 'clipboard', {
   }
 });
 describe('<Code />', function () {
-  it('renders the Code component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Code component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, defaultProps, {
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, defaultProps, {
               children: "This is a code"
             }))), container = _render.container;
             expect(_react.screen.getByText('This is a code')).toBeInTheDocument(); // Check for accessibility issues
@@ -55,17 +64,17 @@ describe('<Code />', function () {
     }, _callee);
   }))); // jsdom currently doesn't support pseudo-elements with getComputedStyle
 
-  it.skip('renders "$" in front of the code when in prompt mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  it.skip('renders "$" in front of the code when in prompt mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var props, _render2, container, codeElement;
 
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            props = _extends({}, defaultProps, {
+            props = (0, _extends2["default"])({}, defaultProps, {
               prompt: true
             });
-            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
               children: "This is a code"
             }))), container = _render2.container;
             codeElement = _react.screen.getByText('This is a code');
@@ -87,17 +96,17 @@ describe('<Code />', function () {
       }
     }, _callee2);
   })));
-  it('renders the Code component with a copy button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+  it('renders the Code component with a copy button', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
     var props, _render3, container;
 
-    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            props = _extends({}, defaultProps, {
+            props = (0, _extends2["default"])({}, defaultProps, {
               showCopy: true
             });
-            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
               children: "This is a code"
             }))), container = _render3.container;
             expect(_react.screen.getByRole('button', {
@@ -120,17 +129,17 @@ describe('<Code />', function () {
       }
     }, _callee3);
   })));
-  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
     var props, _render4, container;
 
-    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
-            props = _extends({}, defaultProps, {
+            props = (0, _extends2["default"])({}, defaultProps, {
               showCopy: true
             });
-            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
               children: "This is a code"
             }))), container = _render4.container;
 

package/build/system/ConfirmationDialog/ConfirmationDialog.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.ConfirmationDialogContent = exports.ConfirmationDialog = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["trigger", "onConfirm", "needsConfirm"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var ConfirmationDialogContent = function ConfirmationDialogContent(_ref) {
   var title = _ref.title,
       body = _ref.body,
@@ -80,7 +80,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref2) {
       onConfirm = _ref2.onConfirm,
       _ref2$needsConfirm = _ref2.needsConfirm,
       needsConfirm = _ref2$needsConfirm === void 0 ? true : _ref2$needsConfirm,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   var directTrigger = /*#__PURE__*/_react["default"].cloneElement(trigger, {
     onClick: onConfirm
@@ -97,7 +97,7 @@ var ConfirmationDialog = function ConfirmationDialog(_ref2) {
     },
     content: function content(_ref3) {
       var onClose = _ref3.onClose;
-      return (0, _jsxRuntime.jsx)(ConfirmationDialogContent, _extends({
+      return (0, _jsxRuntime.jsx)(ConfirmationDialogContent, (0, _extends2["default"])({
         onClose: onClose,
         onConfirm: onConfirm
       }, props));

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'ConfirmationDialog',
+  component: _.ConfirmationDialog
+};
+exports["default"] = _default;
+var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  sx: {
+    mr: 3
+  },
+  children: "Dangerous Action"
+});
+var ConfirmationContent = (0, _jsxRuntime.jsxs)(_.Box, {
+  p: 5,
+  children: [(0, _jsxRuntime.jsx)(_.Heading, {
+    children: "This is a Modal"
+  }), (0, _jsxRuntime.jsx)(_.Text, {
+    sx: {
+      fontSize: 3
+    },
+    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
+  })]
+});
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Flex, {
+    children: (0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsx)(_.ConfirmationDialog, {
+        trigger: ConfirmationTrigger,
+        content: ConfirmationContent
+      })
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Dialog/Dialog.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Dialog = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _framerMotion = require("framer-motion");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["trigger", "position", "startOpen", "content", "disabled"];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Dialog = function Dialog(_ref) {
   var trigger = _ref.trigger,
       _ref$position = _ref.position,
@@ -30,7 +30,7 @@ var Dialog = function Dialog(_ref) {
       content = _ref.content,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(startOpen),
       isOpen = _useState[0],
@@ -93,7 +93,7 @@ var Dialog = function Dialog(_ref) {
       "aria-expanded": isOpen,
       children: trigger
     }), (0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
-      children: isOpen && (0, _jsxRuntime.jsx)(_.DialogContent, _extends({}, props, {
+      children: isOpen && (0, _jsxRuntime.jsx)(_.DialogContent, (0, _extends2["default"])({}, props, {
         position: position,
         onClose: function onClose() {
           return setIsOpen(false);

package/build/system/Dialog/Dialog.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Dialog',
+  component: _.Dialog
+};
+exports["default"] = _default;
+var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  children: "Trigger Dropdown"
+});
+var ModalTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+  sx: {
+    mr: 3
+  },
+  children: "Trigger Modal"
+});
+var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
+  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
+    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Profile"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Account"
+    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Dark Mode"
+    })]
+  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
+    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
+      children: "Logout"
+    })
+  })]
+});
+var ModalContent = (0, _jsxRuntime.jsxs)(_.Box, {
+  p: 5,
+  children: [(0, _jsxRuntime.jsx)(_.Heading, {
+    children: "This is a Modal"
+  }), (0, _jsxRuntime.jsx)(_.Text, {
+    sx: {
+      fontSize: 3
+    },
+    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
+  })]
+});
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Flex, {
+    children: [(0, _jsxRuntime.jsx)(_.Box, {
+      children: (0, _jsxRuntime.jsx)(_.Dialog, {
+        trigger: ModalTrigger,
+        content: ModalContent,
+        sx: {
+          width: 480
+        },
+        variant: "modal"
+      })
+    }), (0, _jsxRuntime.jsx)(_.Dialog, {
+      trigger: DropdownTrigger,
+      content: DropdownContent,
+      sx: {
+        width: 200
+      }
+    })]
+  });
+};
+
+exports.Default = Default;