@automattic/vip-design-system 0.14.1 → 0.16.0

package/.prettierignore

@@ -0,0 +1 @@
+src/system/theme/generated

package/README.md

@@ -41,6 +41,32 @@ For components that include storybooks, we can run `npm run storybook` to view t
 
 Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
 
+### Updating the Theme with VIP Design System Tokens
+
+You need to update the tokens once the VIP Design System updates the core files.
+
+#### How the theming works
+
+We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
+
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The theme is called: `productive-color-wpvip`.
+
+Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme.json`. This operation generates a small json file with the colors we need already filled in.
+
+Once the theme is updated, the file `src/system/theme/index.js` reads the colors and apply to all components.
+
+Use the section below to run the script and update the theme.
+
+_Important:_ If you change the `generated/valet-theme.json`, make it sure to open a new pull request with these changes and release a new version if needed.
+
+#### Update theme script
+
+Run this command to update the VIP Valet Theme with the latest `tokens/valet-core.json`.
+
+```bash
+npm run theme-update
+```
+
 ### Publish NPM Package Instructions
 
 Once all the changes needed are merged to trunk, and you are ready to release a new version, follow these steps:

package/build/system/Button/Button.js

@@ -9,17 +9,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _themeUi = require("theme-ui");
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _themeUi = require("theme-ui");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx"];
 
-var Button = function Button(_ref) {
+var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -43,10 +45,13 @@ var Button = function Button(_ref) {
       }
     }, sx),
     className: (0, _classnames["default"])('vip-button-component', props.className)
-  }, props));
-};
+  }, props, {
+    ref: forwardRef
+  }));
+});
 
 exports.Button = Button;
+Button.displayName = 'Button';
 Button.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/NewDialog/DialogClose.js

@@ -3,35 +3,50 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.DialogClose = void 0;
+exports.DialogCloseDefault = exports.DialogClose = 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 _io = require("react-icons/io5");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["children"];
+
 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) {
+var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
+  var children = _ref.children,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Close, (0, _extends2["default"])({
     asChild: true
-  }, props, {
+  }, rest, {
+    ref: forwardedRef,
+    children: children
+  }));
+});
+
+exports.DialogClose = DialogClose;
+DialogClose.propTypes = {
+  children: _propTypes["default"].node
+};
+DialogClose.displayName = 'DialogClose';
+
+var DialogCloseDefault = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return (0, _jsxRuntime.jsx)(DialogClose, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Close",
@@ -72,5 +87,5 @@ var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, for
   }));
 });
 
-exports.DialogClose = DialogClose;
-DialogClose.displayName = 'DialogClose';
+exports.DialogCloseDefault = DialogCloseDefault;
+DialogCloseDefault.displayName = 'DialogCloseDefault';

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

@@ -44,7 +44,7 @@ describe('<DialogClose />', function () {
         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))
+              children: (0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, (0, _extends2["default"])({}, defaultProps))
             })), container = _render.container;
             expect(_react.screen.getByLabelText('Close')).toBeInTheDocument(); // Check for accessibility issues
 

package/build/system/NewDialog/DialogContent.js

@@ -15,7 +15,7 @@ var contentStyles = {
   width: '90vw',
   maxWidth: '640px',
   maxHeight: '85vh',
-  padding: 25,
+  padding: 32,
   '&:focus': {
     outline: 'none'
   },

package/build/system/NewDialog/DialogDescription.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -42,6 +42,9 @@ var DialogDescription = /*#__PURE__*/_react["default"].forwardRef(function (_ref
 
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Description, (0, _extends2["default"])({}, rest, {
     ref: forwardedRef,
+    sx: {
+      margin: 0
+    },
     children: text
   }));
 });

package/build/system/NewDialog/DialogTitle.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -39,6 +39,9 @@ var DialogTitle = function DialogTitle(_ref) {
   }
 
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+    sx: {
+      margin: 0
+    },
     children: titleNode
   });
 };

package/build/system/NewDialog/NewDialog.js

@@ -52,22 +52,21 @@ var NewDialog = function NewDialog(_ref) {
       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;
+      _ref$onOpenChange = _ref.onOpenChange,
+      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
+      _ref$open = _ref.open,
+      open = _ref$open === void 0 ? undefined : _ref$open,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? undefined : _ref$id;
 
   if (disabled) {
     return;
   }
 
   return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    id: id,
+    open: open,
+    onOpenChange: onOpenChange,
     defaultOpen: defaultOpen,
     allowPinchZoom: allowPinchZoom,
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
@@ -77,12 +76,7 @@ var NewDialog = function NewDialog(_ref) {
       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, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -108,13 +102,9 @@ NewDialog.propTypes = {
   style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
   // Radix DialogPrimitive.Root properties
   // https://www.radix-ui.com/docs/primitives/components/dialog#root
+  id: _propTypes["default"].string,
+  open: _propTypes["default"].bool,
   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
+  onOpenChange: _propTypes["default"].func
 };

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

@@ -3,27 +3,37 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomClose = exports.AutoOpen = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("react");
+
 var _system = require("../../system");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
-var _NewDialog = require("./NewDialog");
+var NewDialog = _interopRequireWildcard(require("."));
 
 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 _default = {
   title: 'NewDialog',
-  component: _NewDialog.NewDialog
+  component: NewDialog.Root
 };
 exports["default"] = _default;
 var defaultProps = {
@@ -39,7 +49,7 @@ var Default = function Default() {
         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, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       })
@@ -57,8 +67,15 @@ var AutoOpen = function AutoOpen() {
         mb: 3
       },
       children: "Auto Opens when rendered. Press escape to close it."
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "Test"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+        })]
+      }),
       trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
         children: "hey"
       })
@@ -76,7 +93,7 @@ var HiddenHeadings = function HiddenHeadings() {
         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, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
       }),
@@ -117,7 +134,7 @@ var CustomStyling = function CustomStyling() {
         mb: 3
       },
       children: "Custom Styling on Dialog Content"
-    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"
@@ -160,4 +177,65 @@ var CustomStyling = function CustomStyling() {
   });
 };
 
-exports.CustomStyling = CustomStyling;
+exports.CustomStyling = CustomStyling;
+
+var CustomClose = function CustomClose() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "This example shows how you can create a custom Close trigger to your dialog"
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
+          children: (0, _jsxRuntime.jsx)(_system.Button, {
+            children: "Close here instead"
+          })
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomClose = CustomClose;
+
+var CustomStateManagement = function CustomStateManagement() {
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: ["This example shows how you can create a custom state management. To achieve accessibility, you need to control the ", (0, _jsxRuntime.jsx)("strong", {
+        children: "open"
+      }), " state, but also keep consistency using the", ' ', (0, _jsxRuntime.jsx)("strong", {
+        children: "onOpenChange"
+      }), " attribute."]
+    }), (0, _jsxRuntime.jsx)(NewDialog.Root, (0, _extends2["default"])({}, defaultProps, {
+      open: open,
+      onOpenChange: setOpen,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      content: (0, _jsxRuntime.jsx)("div", {
+        children: (0, _jsxRuntime.jsx)(_system.Button, {
+          onClick: function onClick() {
+            return setOpen(false);
+          },
+          children: "Close here instead"
+        })
+      })
+    }))]
+  });
+};
+
+exports.CustomStateManagement = CustomStateManagement;

package/build/system/NewDialog/index.js

@@ -1,7 +1,20 @@
 "use strict";
 
 exports.__esModule = true;
+exports["default"] = exports.Root = exports.Close = void 0;
+
+var _DialogClose = require("./DialogClose");
 
 var _NewDialog = require("./NewDialog");
 
-exports.NewDialog = _NewDialog.NewDialog;
+exports.NewDialog = _NewDialog.NewDialog;
+
+/**
+ * Internal dependencies
+ */
+var Root = _NewDialog.NewDialog;
+exports.Root = Root;
+var Close = _DialogClose.DialogClose;
+exports.Close = Close;
+var _default = _NewDialog.NewDialog;
+exports["default"] = _default;

package/build/system/Notification/Notification.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 

package/build/system/ScreenReaderText/ScreenReader.test.js

@@ -8,7 +8,7 @@ var _react = require("@testing-library/react");
 
 require("@testing-library/jest-dom");
 
-var _ScreenReaderText = _interopRequireDefault(require("./ScreenReaderText"));
+var _ = _interopRequireDefault(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -24,7 +24,7 @@ describe('<ScreenReaderText />', function () {
     var props = {};
     var text = 'Hello there';
 
-    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_ScreenReaderText["default"], (0, _extends2["default"])({}, props, {
+    var _render = (0, _react.render)((0, _jsxRuntime.jsx)(_["default"], (0, _extends2["default"])({}, props, {
       children: text
     }))),
         container = _render.container; // we're using the querySelector to ensure the class is rendered since it affects the A11Y

package/build/system/ScreenReaderText/ScreenReaderText.js

@@ -3,10 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = ScreenReaderText;
+exports.ScreenReaderText = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -20,7 +22,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-function ScreenReaderText(props) {
+var ScreenReaderText = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
   return (0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
     className: "screen-reader-text",
     sx: {
@@ -36,14 +38,17 @@ function ScreenReaderText(props) {
       wordWrap: 'normal !important'
     }
   }, props, {
+    ref: forwardRef,
     children: props.children
   }));
-}
+});
+
+exports.ScreenReaderText = ScreenReaderText;
+ScreenReaderText.displayName = 'ScreenReaderText';
 /**
  * propTypes
  */
 
-
 ScreenReaderText.propTypes = {
   children: _propTypes["default"].node.isRequired
 };

package/build/system/ScreenReaderText/index.js

@@ -1,7 +1,14 @@
 "use strict";
 
 exports.__esModule = true;
+exports["default"] = void 0;
 
 var _ScreenReaderText = require("./ScreenReaderText");
 
-exports.ScreenReaderText = _ScreenReaderText.ScreenReaderText;
+exports.ScreenReaderText = _ScreenReaderText.ScreenReaderText;
+
+/**
+ * Internal dependencies
+ */
+var _default = _ScreenReaderText.ScreenReaderText;
+exports["default"] = _default;

package/build/system/index.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.NewDialog = void 0;
 
 var _Avatar = require("./Avatar");
 
@@ -42,9 +43,9 @@ exports.DialogMenuItem = _Dialog.DialogMenuItem;
 exports.DialogTrigger = _Dialog.DialogTrigger;
 exports.DialogContent = _Dialog.DialogContent;
 
-var _NewDialog = require("./NewDialog");
+var NewDialog = _interopRequireWildcard(require("./NewDialog"));
 
-exports.NewDialog = _NewDialog.NewDialog;
+exports.NewDialog = NewDialog;
 
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
@@ -140,4 +141,8 @@ var _Wizard = require("./Wizard");
 
 exports.Wizard = _Wizard.Wizard;
 exports.WizardStep = _Wizard.WizardStep;
-exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
+exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
+
+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; }