@automattic/vip-design-system 0.9.6 → 0.10.2

package/build/system/Box/Box.js

@@ -1,20 +1,35 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Box = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _react = require("react");
 
 var _themeUi = require("theme-ui");
 
 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); }
+/** @jsxImportSource theme-ui */
 
+/**
+ * External dependencies
+ */
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({
-    ref: ref
+  return (0, _jsxRuntime.jsx)(_themeUi.Box, (0, _extends2["default"])({
+    ref: ref,
+    className: (0, _classnames["default"])('vip-box-component', props.className)
   }, props));
 });
 exports.Box = Box;
-Box.displayName = 'Box';
+Box.displayName = 'Box';
+Box.propTypes = {
+  className: _propTypes["default"].any
+};

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

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

package/build/system/Button/Button.js

@@ -1,28 +1,29 @@
 "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"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 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',
@@ -34,11 +35,13 @@ var Button = function Button(_ref) {
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-button-component', props.className)
   }, props));
 };
 
 exports.Button = Button;
 Button.propTypes = {
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };

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

@@ -1,7 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -9,8 +11,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */

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,44 +1,48 @@
 "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"));
 
 var _ = require("..");
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-var _excluded = ["variant", "sx"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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 _excluded = ["variant", "sx", "className"];
 
 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,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+      className = _ref.className,
+      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'
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-card-component', className)
   }, props));
 });
 
 exports.Card = Card;
 Card.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };
 Card.displayName = 'Card';

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

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */

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,16 @@
 "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"));
 
 var _react = require("react");
@@ -11,13 +19,7 @@ var _md = require("react-icons/md");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["prompt", "showCopy", "onCopy"];
-
-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 _excluded = ["prompt", "showCopy", "onCopy", "className"];
 
 var Code = function Code(_ref) {
   var _ref$prompt = _ref.prompt,
@@ -26,10 +28,10 @@ var Code = function Code(_ref) {
       showCopy = _ref$showCopy === void 0 ? false : _ref$showCopy,
       _ref$onCopy = _ref.onCopy,
       onCopy = _ref$onCopy === void 0 ? null : _ref$onCopy,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+      className = _ref.className,
+      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,
@@ -46,7 +48,8 @@ var Code = function Code(_ref) {
         marginRight: 2,
         userSelect: 'none'
       }
-    }
+    },
+    className: (0, _classnames["default"])('vip-code-component', className)
   }, props));
 
   if (!showCopy) {
@@ -100,5 +103,6 @@ exports.Code = Code;
 Code.propTypes = {
   prompt: _propTypes["default"].bool,
   showCopy: _propTypes["default"].bool,
-  onCopy: _propTypes["default"].func
+  onCopy: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };

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

@@ -1,7 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -9,8 +11,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
@@ -25,8 +25,20 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Code, {
-    children: "Code"
+  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"
+    })]
   });
 };
 

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,16 @@
 "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"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -13,21 +21,18 @@ 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,
       onClose = _ref.onClose,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? 'Confirm' : _ref$label,
-      onConfirm = _ref.onConfirm;
+      onConfirm = _ref.onConfirm,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     p: 4,
+    className: (0, _classnames["default"])('vip-confirmation-dialog-component', className),
     children: [(0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h3",
       sx: {
@@ -66,7 +71,8 @@ ConfirmationDialogContent.propTypes = {
   body: _propTypes["default"].node,
   label: _propTypes["default"].string,
   onClose: _propTypes["default"].func,
-  onConfirm: _propTypes["default"].func
+  onConfirm: _propTypes["default"].func,
+  className: _propTypes["default"].any
 };
 
 var ConfirmationDialog = function ConfirmationDialog(_ref2) {
@@ -74,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
@@ -91,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

@@ -1,20 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Default = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-
 /**
  * Internal dependencies
  */