@pingux/astro 2.5.5-alpha.0 → 2.5.5-alpha.2

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

@@ -9,11 +9,20 @@ exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = expo
 var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _TooltipTrigger = _interopRequireDefault(require("./TooltipTrigger.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/TooltipTrigger',
-  component: _index.TooltipTrigger
+  component: _index.TooltipTrigger,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TooltipTrigger["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var Default = function Default(args) {

package/lib/components/IconBadge/IconBadge.js

@@ -16,11 +16,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
-
-/**
- * `IconBadge` children should be the `Icon` component. Documentation for
- * `Icon` component can be found [here](.?path=/docs/components-icon--default).
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconBadge = function IconBadge(props) {
   var children = props.children,

package/lib/components/IconBadge/IconBadge.stories.js

@@ -2,13 +2,18 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import GroupIcon from 'mdi-react/AccountGroupIcon';
 import ArrowIcon from 'mdi-react/ArrowTopRightThickIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconBadge } from '../../index';
+import IconBadgeReadme from './IconBadge.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconBadge',
   component: IconBadge,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconBadgeReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/IconButton/IconButton.js

@@ -20,18 +20,6 @@ import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
-
-/**
- * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
- * icons and changes the behavior pattern for Button. This ensures compatibility across browsers
- * and devices.
- *
- * In addition to the props below, `IconButton` accepts the same props available to the normal
- * `Button` component.
- *
- * `IconButton` children should be the `Icon` component. Documentation for `Icon` component can
- * be found [here](.?path=/docs/components-icon--default).
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

package/lib/components/IconButton/IconButton.stories.js

@@ -5,13 +5,18 @@ import DeleteIcon from 'mdi-react/DeleteIcon';
 import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 import PlusIcon from 'mdi-react/PlusIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
+import IconButtonReadme from './IconButton.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconButton',
   component: IconButton,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButtonReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/IconButtonToggle/IconButtonToggle.js

@@ -4,13 +4,6 @@ import PropTypes from 'prop-types';
 import { useComponentToggle } from '../../hooks';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
-
-/**
- * `IconButtonToggle` is using  `Icon` component under the hood.
- * You can change properties of the icon via `iconProps` prop.
- * Documentation for the `Icon` component can be found
- * [here](.?path=/docs/components-icon--default).
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButtonToggle = function IconButtonToggle(props) {
   var toggledIcon = props.toggledIcon,

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -3,11 +3,20 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { IconButtonToggle } from '../../index';
+import IconButtonToggleReadme from './IconButtonToggle.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconButtonToggle',
-  component: IconButtonToggle
+  component: IconButtonToggle,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButtonToggleReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(IconButtonToggle, _extends({}, args, {

package/lib/components/Image/Image.js

@@ -23,12 +23,6 @@ import { Image as ThemeUIImage } from 'theme-ui';
 import { useAriaLabelWarning, useDevelopmentWarning, useFallbackImage, usePropWarning, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
 import { neutral } from '../../styles/colors';
-
-/**
- * Basic image component.
- * Built on top of [Image from Theme-UI](https://theme-ui.com/components/image/).
- * If you are looking to add an icon please use [Icon component](/icon--default).
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Image = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Image/Image.stories.js

@@ -3,13 +3,22 @@ import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import isChromatic from 'chromatic/isChromatic';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Image } from '../../index';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { chiefIdentityChampions, pingImg } from '../../utils/devUtils/constants/images';
+import ImageReadme from './Image.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Image',
   component: Image,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ImageReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     isDisabled: {},
     variant: {

package/lib/components/Link/Link.js

@@ -7,12 +7,6 @@ import { useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Link as ThemeUILink } from 'theme-ui';
 import { usePropWarning, useStatusClasses } from '../../hooks';
-
-/**
- * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
- * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
- *
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Link/Link.stories.js

@@ -2,13 +2,22 @@ import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Link } from '../../index';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
+import LinkReadme from './Link.mdx';
 import variants from './Link.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Link',
   component: Link,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(LinkReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     href: {
       control: {

package/lib/components/ListItem/ListItem.js

@@ -18,11 +18,6 @@ import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import { onHoverPropTypes } from '../../utils/docUtils/hoverProps';
 import Box from '../Box/Box';
-
-/**
- * List Item component.
- * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
-*/
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/ListItem/ListItem.stories.js

@@ -14,14 +14,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, ListItem, Separator, Text } from '../../index';
 import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
+import ListItemReadme from './ListItem.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',
   component: ListItem,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListItemReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/ListView/ListView.js

@@ -55,15 +55,6 @@ export function useListLayout(state) {
 }
 
 /**
- * The intention of ListView is that it be used together with ListItem. An update that
- * demonstrates this is coming soon.
- *
- * ListViews are used to display a list of items. Users can select,
- * view, or edit items in this list. This virtualized component supports
- * asynchronous data in infinitely scrollable lists.
- *
- * Can be used as in recipe: https://uilibrary.ping-eng.com/astro/?path=/docs/recipes-list-with-panel--default
- *
  * NOTE: be careful with putting focusable elements inside ListView.
  * It is using a grid (useList hook) with its own event listeners under the hood.
  * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)

package/lib/components/ListView/ListView.stories.js

@@ -23,14 +23,19 @@ import isChromatic from 'chromatic/isChromatic';
 import CreateIcon from 'mdi-react/CreateIcon';
 import FormSelectIcon from 'mdi-react/FormSelectIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, IconButton, ListView, Text } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import ListViewReadme from './ListView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListView',
   component: ListView,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Loader/Loader.js

@@ -4,11 +4,6 @@ var _excluded = ["size"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Box from '../Box';
-
-/**
- * Indeterminite progress component. Used to show general loading.
- * Uses [useProgressBar](https://react-spectrum.adobe.com/react-aria/useProgressBar.html) from React Aria
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Loader = /*#__PURE__*/forwardRef(function (props, ref) {
   var size = props.size,

package/lib/components/Loader/Loader.stories.js

@@ -1,12 +1,21 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Loader } from '../../index';
 import { flatColorList } from '../../styles/colors';
+import LoaderReadme from './Loader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Loader',
   component: Loader,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(LoaderReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     color: {
       control: {

package/lib/components/ScrollBox/ScrollBox.js

@@ -17,10 +17,6 @@ import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useSta
 import PropTypes from 'prop-types';
 import useStatusClasses from '../../hooks/useStatusClasses';
 import Box from '../Box';
-
-/**
- * Scrollbox is a container that allows content to be scrolled
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
   var maxHeight = props.maxHeight,

package/lib/components/ScrollBox/ScrollBox.stories.js

@@ -1,10 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, ScrollBox } from '../../index';
+import ScrollBoxReadme from './ScrollBox.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ScrollBox',
   component: ScrollBox,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ScrollBoxReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     maxHeight: {
       control: {

package/lib/components/Separator/Separator.js

@@ -7,11 +7,6 @@ import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box/Box';
-
-/**
- * Basic separator or HR component.
- * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
-*/
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Separator/Separator.stories.js

@@ -1,11 +1,20 @@
 import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Separator } from '../../index';
+import SeparatorReadme from './Separator.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Separator',
-  component: Separator
+  component: Separator,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SeparatorReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));

package/lib/components/Stepper/Stepper.js

@@ -26,13 +26,6 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var ACTIVE = stepStatuses.ACTIVE,
   COMPLETED = stepStatuses.COMPLETED,
   INACTIVE = stepStatuses.INACTIVE;
-
-/**
- * The Stepper component acts as a wrapper for individual Step components.
- * Stepper is used to display progress through a sequence of logical and numbered steps
- *  usually within a configuration wizard.
- */
-
 var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   var activeStep = props.activeStep,
     onStepChange = props.onStepChange,

package/lib/components/Stepper/Stepper.stories.js

@@ -1,7 +1,9 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Stepper, Text } from '../../index';
+import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Stepper',
@@ -42,6 +44,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(StepperReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Table/Table.js

@@ -3,15 +3,6 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["children"];
 import React from 'react';
 import Box from '../Box';
-
-/**
- * Basic Table parent component.
- *
- * Renders an HTML `<table>`
- *
- * Accepts the `<TableBody>` component and/or the `<TableHead>` as children.
- *
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Table = function Table(props) {
   var children = props.children,

package/lib/components/Table/Table.stories.js

@@ -1,11 +1,20 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow, Text } from '../../index';
+import TableReadme from './Table.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Table',
-  component: Table
+  component: Table,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];

package/lib/components/Tabs/Tabs.js

@@ -26,11 +26,6 @@ import Box from '../Box';
 import { CollectionTab } from '../Tab';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TabsContext = /*#__PURE__*/React.createContext({});
-
-/**
- * Tabs are used to divide content, navigate to other views, and indicate work progress.
- */
-
 var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var state = _ref.state,
     props = _objectWithoutProperties(_ref, _excluded);

package/lib/components/Tabs/Tabs.stories.js

@@ -3,7 +3,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import LockIcon from 'mdi-react/LockIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Badge, Icon, Tab, Tabs, Text } from '../../index';
+import TabsReadme from './Tabs.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Tabs',
@@ -36,6 +38,9 @@ export default {
   },
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TabsReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/Text/Text.js

@@ -11,13 +11,7 @@ var ExtendedText = /*#__PURE__*/_styled(ThemeUIText, process.env.NODE_ENV === "p
 } : {
   target: "eifd86o0",
   label: "ExtendedText"
-})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuLyoqXG4gKiBUaGUgVGV4dCBjb21wb25lbnQgaXMgdXNlZCBmb3IgZGlzcGxheWluZyB0ZXh0LlxuICogVGV4dCBzdXBwb3J0cyBbVHlwb2dyYXBoeSBQcm9wcyBmcm9tIFN0eWxlZCBTeXN0ZW0gXShodHRwczovL3N0eWxlZC1zeXN0ZW0uY29tL3RhYmxlLyN0eXBvZ3JhcGh5KS5cbiAqL1xuXG5jb25zdCBUZXh0ID0gUmVhY3QuZm9yd2FyZFJlZigocHJvcHMsIHJlZikgPT4gKFxuICA8RXh0ZW5kZWRUZXh0IHZhcmlhbnQ9XCJiYXNlXCIgey4uLnByb3BzfSByZWY9e3JlZn0gLz5cbikpO1xuXG5UZXh0LnByb3BUeXBlcyA9IHtcbiAgdmFyaWFudDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG5cblxuVGV4dC5kZWZhdWx0UHJvcHMgPSB7XG4gIHZhcmlhbnQ6IHRleHRWYXJpYW50cy5CQVNFLFxufTtcblxuVGV4dC5kaXNwbGF5TmFtZSA9ICdUZXh0JztcblxuZXhwb3J0IGRlZmF1bHQgVGV4dDtcbiJdfQ== */");
-
-/**
- * The Text component is used for displaying text.
- * Text supports [Typography Props from Styled System ](https://styled-system.com/table/#typography).
- */
-
+})(layout, flexbox, typography, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RleHQvVGV4dC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRcUIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvVGV4dC9UZXh0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBmbGV4Ym94LCBsYXlvdXQsIHR5cG9ncmFwaHkgfSBmcm9tICdzdHlsZWQtc3lzdGVtJztcbmltcG9ydCB7IFRleHQgYXMgVGhlbWVVSVRleHQgfSBmcm9tICd0aGVtZS11aSc7XG5cbmltcG9ydCB7IHRleHRWYXJpYW50cyB9IGZyb20gJy4uLy4uL3V0aWxzL2RldlV0aWxzL2NvbnN0YW50cy92YXJpYW50cyc7XG5cbmNvbnN0IEV4dGVuZGVkVGV4dCA9IHN0eWxlZChUaGVtZVVJVGV4dCkobGF5b3V0LCBmbGV4Ym94LCB0eXBvZ3JhcGh5KTtcblxuY29uc3QgVGV4dCA9IFJlYWN0LmZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IChcbiAgPEV4dGVuZGVkVGV4dCB2YXJpYW50PVwiYmFzZVwiIHsuLi5wcm9wc30gcmVmPXtyZWZ9IC8+XG4pKTtcblxuVGV4dC5wcm9wVHlwZXMgPSB7XG4gIHZhcmlhbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuXG5cblRleHQuZGVmYXVsdFByb3BzID0ge1xuICB2YXJpYW50OiB0ZXh0VmFyaWFudHMuQkFTRSxcbn07XG5cblRleHQuZGlzcGxheU5hbWUgPSAnVGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IFRleHQ7XG4iXX0= */");
 var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return ___EmotionJSX(ExtendedText, _extends({
     variant: "base"

package/lib/components/Text/Text.stories.js

@@ -2,11 +2,20 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Separator, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
+import TextReadme from './Text.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Text',
   component: Text,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TextReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     variant: {
       control: {

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -10,13 +10,6 @@ import PropTypes from 'prop-types';
 import { TooltipContext } from '../../context/TooltipContext/index';
 import { usePropWarning, useStatusClasses } from '../../hooks';
 import PopoverContainer from '../PopoverContainer';
-
-/**
- * A `TooltipTrigger` is a composed component and must be comprised of two children: 1) a
- * focusable button, and 2) a `Tooltip` which renders non-interactive content. This component
- * is typically used as a design fallback for contextual information that may be hard to convey
- * otherwise. The tooltip trigger can also be disabled without disabling button press events.
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context, _useStatusClasses2;

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import Earth from 'mdi-react/EarthIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Button, Icon, IconButton, Text, Tooltip, TooltipTrigger } from '../../index';
+import TooltipTriggerReadme from './TooltipTrigger.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/TooltipTrigger',
-  component: TooltipTrigger
+  component: TooltipTrigger,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TooltipTriggerReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(TooltipTrigger, args, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Tooltip Content"));

package/package.json

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