@automattic/vip-design-system 0.11.0 → 0.13.0

package/build/system/NewDialog/DialogDescription.test.js

@@ -0,0 +1,95 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogDescription = require("./DialogDescription");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+var defaultProps = {
+  description: 'My Custom Text'
+};
+
+var getParagraph = function getParagraph() {
+  return _react.screen.getByText(defaultProps.description);
+};
+
+describe('<DialogDescription />', function () {
+  it('renders the DialogDescription component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(getParagraph()).toHaveTextContent(defaultProps.description); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders text visually hidden for a11y purposes', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, (0, _extends2["default"])({}, defaultProps, {
+                hidden: true
+              }))
+            })), container = _render2.container; // Small check to make sure we are hiding with the css class
+
+            expect(container.innerHTML).toContain('screen-reader-text');
+            expect(getParagraph()).toHaveTextContent(defaultProps.description);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/NewDialog/DialogOverlay.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogOverlay = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Dialog = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var DialogOverlay = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(Dialog.Overlay, (0, _extends2["default"])({
+    sx: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      inset: 0,
+      opacity: 0.7,
+      background: // eslint-disable-next-line max-len
+      'linear-gradient(198.09deg,#E5F0F6 2.01%, rgba(235, 238, 242, 0) 43.18%,rgba(249, 234, 232, 0) 47.86%, #FFE9D1 94.31%), linear-gradient(98.65deg, #FFE8E6 0.58%, rgba(255, 233, 214, 0) 52.45%, rgba(255, 233, 219, 0) 53.76%,#FFE9D1 105.86%), #F5F2F1'
+    }
+  }, props, {
+    ref: forwardedRef
+  }));
+});
+
+exports.DialogOverlay = DialogOverlay;
+DialogOverlay.displayName = 'DialogOverlay';

package/build/system/NewDialog/DialogOverlay.test.js

@@ -0,0 +1,63 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogOverlay = require("./DialogOverlay");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+describe('<DialogOverlay />', function () {
+  it('renders the DialogOverlay component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {})
+            })), container = _render.container; // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 4;
+            return (0, _jestAxe.axe)(container);
+
+          case 4:
+            _context.t1 = _context.sent;
+            _context.next = 7;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewDialog/DialogTitle.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogTitle = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var DialogTitle = function DialogTitle(_ref) {
+  var title = _ref.title,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var titleNode = title;
+
+  if (hidden) {
+    titleNode = (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: titleNode
+    });
+  }
+
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+    children: titleNode
+  });
+};
+
+exports.DialogTitle = DialogTitle;
+DialogTitle.propTypes = {
+  title: _propTypes["default"].string,
+  hidden: _propTypes["default"].bool
+};

package/build/system/NewDialog/DialogTitle.test.js

@@ -0,0 +1,95 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+var defaultProps = {
+  title: 'This is a DialogTitle'
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading');
+};
+
+describe('<DialogTitle />', function () {
+  it('renders the DialogTitle component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(getTitle()).toHaveTextContent(defaultProps.title); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders text visually hidden for a11y purposes', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps, {
+                hidden: true
+              }))
+            })), container = _render2.container; // Small check to make sure we are hiding with the css class
+
+            expect(container.innerHTML).toContain('screen-reader-text');
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/NewDialog/NewDialog.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewDialog = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _DialogOverlay = require("./DialogOverlay");
+
+var _DialogClose = require("./DialogClose");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _DialogDescription = require("./DialogDescription");
+
+var _DialogContent = require("./DialogContent");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewDialog = function NewDialog(_ref) {
+  var _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? null : _ref$trigger,
+      description = _ref.description,
+      title = _ref.title,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? null : _ref$content,
+      _ref$showHeading = _ref.showHeading,
+      showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      extraStyles = _ref.style,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$allowPinchZoom = _ref.allowPinchZoom,
+      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+      _ref$onOpenAutoFocus = _ref.onOpenAutoFocus,
+      onOpenAutoFocus = _ref$onOpenAutoFocus === void 0 ? null : _ref$onOpenAutoFocus,
+      _ref$onCloseAutoFocus = _ref.onCloseAutoFocus,
+      onCloseAutoFocus = _ref$onCloseAutoFocus === void 0 ? null : _ref$onCloseAutoFocus,
+      _ref$onEscapeKeyDown = _ref.onEscapeKeyDown,
+      onEscapeKeyDown = _ref$onEscapeKeyDown === void 0 ? null : _ref$onEscapeKeyDown,
+      _ref$onPointerDownOut = _ref.onPointerDownOutside,
+      onPointerDownOutside = _ref$onPointerDownOut === void 0 ? null : _ref$onPointerDownOut,
+      _ref$onInteractOutsid = _ref.onInteractOutside,
+      onInteractOutside = _ref$onInteractOutsid === void 0 ? null : _ref$onInteractOutsid;
+
+  if (disabled) {
+    return;
+  }
+
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    defaultOpen: defaultOpen,
+    allowPinchZoom: allowPinchZoom,
+    children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
+      asChild: true,
+      children: trigger
+    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, {
+      children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, {
+        className: "vip-dialog-component",
+        sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles),
+        onOpenAutoFocus: onOpenAutoFocus,
+        onCloseAutoFocus: onCloseAutoFocus,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onPointerDownOutside: onPointerDownOutside,
+        onInteractOutside: onInteractOutside,
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogClose, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+          title: title,
+          hidden: !showHeading
+        }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
+          description: description,
+          hidden: !showHeading
+        }), content]
+      })]
+    })]
+  });
+};
+
+exports.NewDialog = NewDialog;
+NewDialog.propTypes = {
+  trigger: _propTypes["default"].node.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string.isRequired,
+  content: _propTypes["default"].node,
+  showHeading: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
+  // Radix DialogPrimitive.Root properties
+  // https://www.radix-ui.com/docs/primitives/components/dialog#root
+  defaultOpen: _propTypes["default"].bool,
+  allowPinchZoom: _propTypes["default"].bool,
+  // Radix DialogPrimitive.Content properties
+  // https://www.radix-ui.com/docs/primitives/components/dialog#content
+  onOpenAutoFocus: _propTypes["default"].func,
+  onCloseAutoFocus: _propTypes["default"].func,
+  onEscapeKeyDown: _propTypes["default"].func,
+  onPointerDownOutside: _propTypes["default"].func,
+  onInteractOutside: _propTypes["default"].func
+};

package/build/system/NewDialog/NewDialog.stories.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _system = require("../../system");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _NewDialog = require("./NewDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewDialog',
+  component: _NewDialog.NewDialog
+};
+exports["default"] = _default;
+var defaultProps = {
+  title: 'User settings',
+  description: 'Use this form to manage your settings'
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Regular Dialog where the title and description are built-in and the content is provided by the user."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      })
+    }))]
+  });
+};
+
+exports.Default = Default;
+
+var AutoOpen = function AutoOpen() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Auto Opens when rendered. Press escape to close it."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "hey"
+      })
+    }))]
+  });
+};
+
+exports.AutoOpen = AutoOpen;
+
+var HiddenHeadings = function HiddenHeadings() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Title and description are hidden, but still announced using a screen reader. Activate VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the dialog content."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      showHeading: false,
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "My Custom Content"
+        }), (0, _jsxRuntime.jsxs)("form", {
+          children: [(0, _jsxRuntime.jsx)(_system.Label, {
+            htmlFor: "username",
+            children: "User name"
+          }), (0, _jsxRuntime.jsx)(_system.Input, {
+            type: "text",
+            name: "username",
+            id: "username"
+          }), (0, _jsxRuntime.jsx)(_system.Button, {
+            type: "submit",
+            children: "Submit"
+          })]
+        })]
+      })
+    }))]
+  });
+};
+
+exports.HiddenHeadings = HiddenHeadings;
+
+var CustomStyling = function CustomStyling() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Custom Styling on Dialog Content"
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      style: {
+        background: function background(theme) {
+          return "" + theme.colors.primary;
+        },
+        padding: 5,
+        borderRadius: 20,
+        h2: {
+          fontSize: 4,
+          color: function color(theme) {
+            return "" + theme.colors.text;
+          }
+        },
+        h3: {
+          fontSize: 3,
+          color: function color(theme) {
+            return "" + theme.colors.heading;
+          }
+        },
+        p: {
+          color: 'white'
+        },
+        'button[type="button"]:focus': {
+          outlineColor: 'white',
+          color: 'white'
+        }
+      },
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "This is Read because it is Custom"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "This Dialog is styled using the `sx` property."
+        })]
+      })
+    }))]
+  });
+};
+
+exports.CustomStyling = CustomStyling;

package/build/system/NewDialog/index.js

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

package/build/system/Notice/Notice.js

@@ -42,10 +42,10 @@ var NoticeIcon = function NoticeIcon(_ref) {
 
   return (0, _jsxRuntime.jsx)(Icon, {
     sx: {
-      marginRight: 2,
       color: color,
       flex: '0 0 auto'
-    }
+    },
+    size: 21
   });
 };
 
@@ -106,12 +106,12 @@ var Notice = function Notice(_ref2) {
           alignItems: 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: color + ".100",
+          color: color + ".200",
           variant: variant
         })
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
-          ml: 23
+          ml: 3
         },
         children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
           variant: "h4",