@pingux/astro 2.5.6-alpha.0 → 2.5.6-alpha.1

package/lib/cjs/components/Menu/Menu.js

@@ -38,13 +38,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Menu component intended to be used as a wrapper for MenuItem.
- * This component is typically used alongside others such as PopoverMenu.
- *
- * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html).
- */
-
 var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var isDisabled = props.isDisabled,

package/lib/cjs/components/Menu/Menu.stories.js

@@ -18,8 +18,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _hoverProps = require("../../utils/docUtils/hoverProps");
+var _Menu = _interopRequireDefault(require("./Menu.mdx"));
 var _react2 = require("@emotion/react");
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -31,6 +33,9 @@ var _default = {
       argTypesRegex: '^on.*'
     },
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Menu["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/Messages/Messages.js

@@ -32,11 +32,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- *Messages are intended to display non-critical alerts that
- attract the users’ attention, but do not interfere or temporarily block their work.
- */
-
 var Messages = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var items = props.items,

package/lib/cjs/components/Messages/Messages.stories.js

@@ -26,9 +26,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _index2 = require("./index");
+var _Messages = _interopRequireDefault(require("./Messages.mdx"));
 var _react2 = require("@emotion/react");
 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; }
@@ -51,6 +53,9 @@ var _default = {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Messages["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/Modal/Modal.js

@@ -35,12 +35,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
-  * Modals are overlays that interrupt a user’s workflow to convey an important message.
-  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
-  * such as Button.
-*/
-
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     closeButton = props.closeButton,

package/lib/cjs/components/Modal/Modal.stories.js

@@ -8,13 +8,22 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
+var _Modal = _interopRequireDefault(require("./Modal.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Modal',
   component: _index.Modal,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Modal["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     title: {
       control: {

package/lib/cjs/components/NavBar/NavBar.js

@@ -26,16 +26,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["defaultSelectedKey", "selectedKey", "setSelectedKey", "hasRestoreFocus", "defaultExpandedKeys", "children", "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); }
 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; }
-/**
- * Composed component that spreads children.
- *
- * This component is built to have the NavBarSection component passed into it.
- *
- * NavBarSection is an iterative component that using
- * an array of objects that is passed into it.
- *
- */
-
 var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,
     selectedKeyProp = props.selectedKey,

package/lib/cjs/components/NavBar/NavBar.stories.js

@@ -22,7 +22,9 @@ var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIc
 var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
 var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
 var _ViewGridPlusOutlineIcon = _interopRequireDefault(require("mdi-react/ViewGridPlusOutlineIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _NavBar = _interopRequireDefault(require("./NavBar.mdx"));
 var _react2 = require("@emotion/react");
 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; }
@@ -33,7 +35,14 @@ var _default = {
     NavBarItemLink: _index.NavBarItemLink,
     NavBarItemButton: _index.NavBarItemButton
   },
-  title: 'Components/NavBar'
+  title: 'Components/NavBar',
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var Credentials = function Credentials(props) {

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -23,14 +23,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
 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; }
-/**
- * In Astro, side panels are used to show details and present modal interactions.
- *
- * Note: The way the OverlayPanel displays in the Firefox browser differs from other browsers.
- * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
- * use Chrome or Safari to view how this component works.
- */
-
 var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$sx;
   var children = props.children,

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -20,10 +20,12 @@ var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/Arr
 var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _CogIcon = _interopRequireDefault(require("mdi-react/CogIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _images = require("../../utils/devUtils/constants/images");
 var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
+var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel.mdx"));
 var _react2 = require("@emotion/react");
 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; }
@@ -48,6 +50,9 @@ var _default = {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_OverlayPanel["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -31,12 +31,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * The PopoverMenu serves as a wrapper around a Menu and its associated trigger, linking the Menu's
- * open state with the trigger's press state and providing necessary overlay context.
- *
- * Primarily utilizes [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
- */
 var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var menuPopoverRef = (0, _react.useRef)();

package/lib/cjs/components/PopoverMenu/PopoverMenu.stories.js

@@ -12,7 +12,9 @@ exports.isPressed = exports["default"] = exports.Placement = exports.NotFlippabl
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _PopoverMenu = _interopRequireDefault(require("./PopoverMenu.mdx"));
 var _react2 = require("@emotion/react");
 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; }
@@ -21,6 +23,9 @@ var _default = {
   component: _index.PopoverMenu,
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverMenu["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -36,11 +36,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * List of requirements for a password, with indicators that can change to show when
- * requirements are satisfied.
- */
-
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);

package/lib/cjs/components/RequirementsList/RequirementsList.stories.js

@@ -7,28 +7,37 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Password = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _RequirementsList = _interopRequireDefault(require("./RequirementsList.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/RequirementsList',
   component: _index.RequirementsList,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RequirementsList["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
   argTypes: {
     requirements: {
       control: {
         type: 'object'
       },
       defaultValue: [{
-        'name': 'requirement 1',
-        'status': 'default'
+        name: 'requirement 1',
+        status: 'default'
       }, {
-        'name': 'requirement 2',
-        'status': 'warning'
+        name: 'requirement 2',
+        status: 'warning'
       }, {
-        'name': 'requirement 3',
-        'status': 'error'
+        name: 'requirement 3',
+        status: 'error'
       }, {
-        'name': 'requirement 4',
-        'status': 'success'
+        name: 'requirement 4',
+        status: 'success'
       }],
       description: 'Requirements and their status.'
     }

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js

@@ -34,11 +34,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RockerContext = /*#__PURE__*/_react["default"].createContext({});
-
-/**
- * This component handles a single selection state for a group of rocker buttons.
- * It is intended to be used with < RockerButton > as children.
-*/
 exports.RockerContext = RockerContext;
 var RockerButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;

package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -13,7 +13,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _RockerButtonGroup = _interopRequireDefault(require("./RockerButtonGroup.mdx"));
 var _react2 = require("@emotion/react");
 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; }
@@ -22,6 +24,9 @@ var _default = {
   component: _index.RockerButtonGroup,
   parameters: {
     docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RockerButtonGroup["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Menu/Menu.js

@@ -26,13 +26,6 @@ import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
 import Box from '../Box';
 import MenuItem from '../MenuItem';
-
-/**
- * Menu component intended to be used as a wrapper for MenuItem.
- * This component is typically used alongside others such as PopoverMenu.
- *
- * Utilizes [React Aria](https://react-spectrum.adobe.com/react-aria/useMenu.html).
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

package/lib/components/Menu/Menu.stories.js

@@ -13,8 +13,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import { Item } from 'react-stately';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Menu, Text } from '../../index';
 import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+import MenuReadme from './Menu.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Menu',
@@ -24,6 +26,9 @@ export default {
       argTypesRegex: '^on.*'
     },
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(MenuReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Messages/Messages.js

@@ -20,11 +20,6 @@ import PropTypes from 'prop-types';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Message from './Message';
-
-/**
- *Messages are intended to display non-critical alerts that
- attract the users’ attention, but do not interfere or temporarily block their work.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

package/lib/components/Messages/Messages.stories.js

@@ -18,9 +18,11 @@ import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values"
 import React, { useEffect, useReducer, useState } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from 'mdi-react/AccountIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Messages } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
+import MessagesReadme from './Messages.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Messages',
@@ -39,6 +41,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(MessagesReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Modal/Modal.js

@@ -23,12 +23,6 @@ import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Text from '../Text';
-
-/**
-  * Modals are overlays that interrupt a user’s workflow to convey an important message.
-  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
-  * such as Button.
-*/
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Modal/Modal.stories.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
+import ModalReadme from './Modal.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal',
   component: Modal,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ModalReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     title: {
       control: {

package/lib/components/NavBar/NavBar.js

@@ -12,16 +12,6 @@ import useNavBarStyling from '../../hooks/useNavBarStyling/useNavBarStyling';
 import useProgressiveState from '../../hooks/useProgressiveState';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
-
-/**
- * Composed component that spreads children.
- *
- * This component is built to have the NavBarSection component passed into it.
- *
- * NavBarSection is an iterative component that using
- * an array of objects that is passed into it.
- *
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var NavBar = function NavBar(props) {
   var defaultSelectedKey = props.defaultSelectedKey,

package/lib/components/NavBar/NavBar.stories.js

@@ -11,7 +11,9 @@ import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
 import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
 import ViewDashboard from 'mdi-react/ViewDashboardIcon';
 import ViewGridPlusOutline from 'mdi-react/ViewGridPlusOutlineIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
+import NavBarReadme from './NavBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   component: NavBar,
@@ -20,7 +22,14 @@ export default {
     NavBarItemLink: NavBarItemLink,
     NavBarItemButton: NavBarItemButton
   },
-  title: 'Components/NavBar'
+  title: 'Components/NavBar',
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(NavBarReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 var Credentials = function Credentials(props) {
   return ___EmotionJSX("svg", _extends({

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -9,14 +9,6 @@ import PropTypes from 'prop-types';
 import { Box } from '../..';
 import { useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
-
-/**
- * In Astro, side panels are used to show details and present modal interactions.
- *
- * Note: The way the OverlayPanel displays in the Firefox browser differs from other browsers.
- * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
- * use Chrome or Safari to view how this component works.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -9,10 +9,12 @@ import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
 import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import OverlayPanelReadme from './OverlayPanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/OverlayPanel',
@@ -35,6 +37,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayPanelReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -19,13 +19,6 @@ import { PressResponder } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { MenuContext } from '../../context/MenuContext';
 import PopoverContainer from '../PopoverContainer';
-
-/**
- * The PopoverMenu serves as a wrapper around a Menu and its associated trigger, linking the Menu's
- * open state with the trigger's press state and providing necessary overlay context.
- *
- * Primarily utilizes [useMenuTrigger](https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html) from React Aria and [useMenuTriggerState](https://react-spectrum.adobe.com/react-stately/useMenuTriggerState.html) from React Stately.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

package/lib/components/PopoverMenu/PopoverMenu.stories.js

@@ -1,13 +1,18 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Button, Item, Menu, OverlayProvider, PopoverMenu, Text } from '../../index';
+import PopoverMenuReadme from './PopoverMenu.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/PopoverMenu',
   component: PopoverMenu,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverMenuReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/RequirementsList/RequirementsList.js

@@ -24,11 +24,6 @@ import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import Box from '../Box';
 import Icon from '../Icon';
 import Text from '../Text';
-
-/**
- * List of requirements for a password, with indicators that can change to show when
- * requirements are satisfied.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -1,26 +1,35 @@
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RequirementsList } from '../../index';
+import RequirementsListReadme from './RequirementsList.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RequirementsList',
   component: RequirementsList,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RequirementsListReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     requirements: {
       control: {
         type: 'object'
       },
       defaultValue: [{
-        'name': 'requirement 1',
-        'status': 'default'
+        name: 'requirement 1',
+        status: 'default'
       }, {
-        'name': 'requirement 2',
-        'status': 'warning'
+        name: 'requirement 2',
+        status: 'warning'
       }, {
-        'name': 'requirement 3',
-        'status': 'error'
+        name: 'requirement 3',
+        status: 'error'
       }, {
-        'name': 'requirement 4',
-        'status': 'success'
+        name: 'requirement 4',
+        status: 'success'
       }],
       description: 'Requirements and their status.'
     }

package/lib/components/RockerButtonGroup/RockerButtonGroup.js

@@ -23,12 +23,6 @@ import Box from '../Box';
 import { CollectionRockerButton } from '../RockerButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var RockerContext = /*#__PURE__*/React.createContext({});
-
-/**
- * This component handles a single selection state for a group of rocker buttons.
- * It is intended to be used with < RockerButton > as children.
-*/
-
 var RockerButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var children = props.children,

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -2,13 +2,18 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { RockerButton, RockerButtonGroup } from '../../index';
+import RockerButtonGroupReadme from './RockerButtonGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/RockerButtonGroup',
   component: RockerButtonGroup,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RockerButtonGroupReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.5.6-alpha.0",
+  "version": "2.5.6-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",