@automattic/vip-design-system 0.12.0 → 0.14.1

package/.storybook/decorators/withBoundingBox.jsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import { makeDecorator } from '@storybook/addons';
-import { Box } from "../../src/system";
+import { Box, Heading } from '../../src/system';
 
 export default makeDecorator( {
 	name: 'withBoundingBox',
 	parameterName: 'colorMode2',
 	wrapper: ( storyFn, context ) => {
 		return (
-			<Box sx={{ p: 4, height: "100vh" }}>
-				{storyFn()}
+			<Box sx={ { p: 3, height: '100vh' } }>
+				<Box sx={ { backgroundColor: 'backgroundMuted', p: 3, borderRadius: 2 } }>
+					<Heading variant="h1" sx={ { mb: 1 } }>
+						{ context.title }
+					</Heading>
+					<Heading variant="h2">{ context.name }</Heading>
+				</Box>
+
+				<Box sx={ { py: 3 } }>{ storyFn() }</Box>
 			</Box>
 		);
-	}
+	},
 } );

package/.storybook/decorators/withColorMode.jsx

@@ -4,7 +4,7 @@ import { useColorMode } from 'theme-ui';
 
 // These need to be updated to import VIP design tokens;
 const lightBackground = '#ffffff';
-const darkBackground = '#333333';
+const darkBackground = '#1C1C1B';
 
 export const backgrounds = {
 	default: 'Light',
@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [colorMode, setColorMode] = useColorMode();
+	const [ colorMode, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {
@@ -29,7 +29,7 @@ function ThemeChanger( { background } ) {
 	}, [ newColorMode ] );
 
 	return null;
-};
+}
 
 export default makeDecorator( {
 	name: 'withColorMode',
@@ -37,9 +37,9 @@ export default makeDecorator( {
 	wrapper: ( storyFn, context ) => {
 		return (
 			<>
-				<ThemeChanger background={context.globals?.backgrounds?.value} />
-				{storyFn()}
+				<ThemeChanger background={ context.globals?.backgrounds?.value } />
+				{ storyFn() }
 			</>
 		);
-	}
+	},
 } );

package/.storybook/decorators/withThemeProvider.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { makeDecorator } from '@storybook/addons';
 import { ThemeProvider } from 'theme-ui';
-import { Box, theme } from "../../src/system";
+import { Box, theme } from '../../src/system';
 
 export default makeDecorator( {
 	name: 'withThemeProvider',
 	parameterName: 'themeUi',
 	wrapper: ( storyFn, context ) => {
 		return (
-			<ThemeProvider theme={theme}>
-				<Box sx={{ p: 4, height: "100vh" }}>
-					{storyFn( context )}
-				</Box>
+			<ThemeProvider theme={ theme }>
+				<Box sx={ { height: '100vh' } }>{ storyFn( context ) }</Box>
 			</ThemeProvider>
 		);
-	}
+	},
 } );

package/build/system/Button/Button.js

@@ -30,8 +30,14 @@ var Button = function Button(_ref) {
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
       '&:disabled': {
-        opacity: 0.5,
+        opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }

package/build/system/Form/Toggle.js

@@ -17,7 +17,7 @@ var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["name", "onChange", "className"];
+var _excluded = ["name", "onChange", "className", "variant"];
 
 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); }
 
@@ -31,19 +31,36 @@ var Toggle = function Toggle(_ref) {
       onChange = _ref.onChange,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(Switch.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-toggle-component', className),
     sx: {
       all: 'unset',
-      width: 42,
-      height: 24,
-      backgroundColor: 'muted',
-      borderRadius: '15px',
+      cursor: 'pointer',
       position: 'relative',
+      width: 40,
+      height: 20,
+      borderRadius: '32px',
+      backgroundColor: 'muted',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 2px top 2px',
+      backgroundImage: "url(\n\t\t\t\t'data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z\" fill=\"white\"/></svg>')",
       WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
+      '&[disabled]': {
+        opacity: 0.7
+      },
       '&[data-state="checked"]': {
-        backgroundColor: 'success'
+        backgroundColor: variant,
+        backgroundPosition: 'left 2px top 2px',
+        backgroundImage: "url(\n\t\t\t\t\t'data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z\" fill=\"white\"/></svg>')"
       }
     },
     name: name,
@@ -52,16 +69,16 @@ var Toggle = function Toggle(_ref) {
     children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
       sx: {
         display: 'block',
-        width: 18,
-        height: 18,
+        width: 16,
+        height: 16,
         backgroundColor: 'white',
         borderRadius: '50%',
         boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
         transition: 'transform 100ms',
-        transform: 'translateX(3px)',
+        transform: 'translateX(2px)',
         willChange: 'transform',
         '&[data-state="checked"]': {
-          transform: 'translateX(21px)'
+          transform: 'translateX(22px)'
         }
       }
     })
@@ -72,5 +89,6 @@ exports.Toggle = Toggle;
 Toggle.propTypes = {
   name: _propTypes["default"].string,
   className: _propTypes["default"].any,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  variant: _propTypes["default"].string
 };

package/build/system/Form/Toggle.stories.js

@@ -1,12 +1,14 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Primary = exports.ExternalLabel = void 0;
+exports["default"] = exports.Primary = exports.ExternalLabel = exports.CustomStyle = void 0;
 
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -30,12 +32,21 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _jsxRuntime.jsx)("form", {
-    children: (0, _jsxRuntime.jsx)(_.Toggle, {
-      defaultChecked: true,
+  return (0, _jsxRuntime.jsxs)("form", {
+    children: [(0, _jsxRuntime.jsx)(_.Toggle, {
       checked: args.checked,
+      defaultChecked: true,
+      color: args.color,
       "aria-label": "Feature flag"
-    })
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      checked: args.checked,
+      defaultChecked: false,
+      "aria-label": "Feature flag 2"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      "aria-label": "Feature Disabled",
+      disabled: true,
+      defaultChecked: false
+    })]
   });
 };
 
@@ -53,6 +64,35 @@ var WithLabel = function WithLabel(args) {
   });
 };
 
+var CustomStyling = function CustomStyling(args) {
+  return (0, _jsxRuntime.jsxs)("form", {
+    children: [(0, _jsxRuntime.jsx)(_.Label, {
+      htmlFor: "custom-label-input",
+      children: "Custom Styling"
+    }), (0, _jsxRuntime.jsxs)("div", {
+      children: [(0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Feature flag",
+        variant: "success"
+      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input-error",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Error flag",
+        variant: "error"
+      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
+        id: "custom-label-input-warning",
+        defaultChecked: true,
+        checked: args.checked,
+        "aria-label": "Warning flag",
+        variant: "warning"
+      })]
+    })]
+  });
+};
+
 var Primary = Default.bind({
   checked: true
 });
@@ -60,4 +100,8 @@ exports.Primary = Primary;
 var ExternalLabel = WithLabel.bind({
   checked: true
 });
-exports.ExternalLabel = ExternalLabel;
+exports.ExternalLabel = ExternalLabel;
+var CustomStyle = CustomStyling.bind({
+  checked: true
+});
+exports.CustomStyle = CustomStyle;

package/build/system/Link/Link.js

@@ -33,6 +33,12 @@ var Link = function Link(_ref) {
       },
       '&:hover, &:focus': {
         color: 'heading'
+      },
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
       }
     }, sx)
   }));

package/build/system/NewDialog/DialogClose.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogClose = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _io = require("react-icons/io5");
+
+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 DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Close, (0, _extends2["default"])({
+    asChild: true
+  }, props, {
+    ref: forwardedRef,
+    children: (0, _jsxRuntime.jsx)("button", {
+      "aria-label": "Close",
+      sx: {
+        all: 'unset',
+        fontFamily: 'inherit',
+        borderRadius: '100%',
+        height: 25,
+        width: 25,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: function color(theme) {
+          var _theme$colors;
+
+          return "" + (theme == null ? void 0 : (_theme$colors = theme.colors) == null ? void 0 : _theme$colors.text);
+        },
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        '&:hover': {
+          backgroundColor: 'border',
+          outlineStyle: 'solid',
+          outlineColor: 'primary',
+          outlineWidth: '2px'
+        },
+        '&:focus': function focus(theme) {
+          return theme.outline;
+        },
+        '&:focus-visible': function focusVisible(theme) {
+          return theme.outline;
+        }
+      },
+      children: (0, _jsxRuntime.jsx)(_io.IoClose, {
+        "aria-hidden": "true"
+      })
+    })
+  }));
+});
+
+exports.DialogClose = DialogClose;
+DialogClose.displayName = 'DialogClose';

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

@@ -0,0 +1,67 @@
+"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 _DialogClose = require("./DialogClose");
+
+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 DialogClose'
+};
+describe('<DialogClose />', function () {
+  it('renders the DialogClose 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)(_DialogClose.DialogClose, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(_react.screen.getByLabelText('Close')).toBeInTheDocument(); // 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);
+  })));
+});

package/build/system/NewDialog/DialogContent.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.contentStyles = void 0;
+
+/** @jsxImportSource theme-ui */
+var contentStyles = {
+  background: 'white',
+  borderRadius: 10,
+  boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  position: 'fixed',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '90vw',
+  maxWidth: '640px',
+  maxHeight: '85vh',
+  padding: 25,
+  '&:focus': {
+    outline: 'none'
+  },
+  '> h1, > h2': {
+    marginTop: '0 !important'
+  }
+};
+exports.contentStyles = contentStyles;

package/build/system/NewDialog/DialogDescription.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogDescription = 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 DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["description", "hidden"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Internal dependencies
+ */
+var DialogDescription = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var description = _ref.description,
+      hidden = _ref.hidden,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var text = description;
+
+  if (hidden) {
+    text = (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: text
+    });
+  }
+
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Description, (0, _extends2["default"])({}, rest, {
+    ref: forwardedRef,
+    children: text
+  }));
+});
+
+exports.DialogDescription = DialogDescription;
+DialogDescription.displayName = 'DialogDescription';
+DialogDescription.propTypes = {
+  description: _propTypes["default"].string,
+  hidden: _propTypes["default"].bool
+};

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';