@pingux/astro 2.9.2 → 2.13.0-alpha.10

package/lib/cjs/styles/variants/README.md

@@ -0,0 +1,98 @@
+# Variant Naming Conventions
+
+Variant names should be camel case so that dot notation can be used, e.g. `delete theme.buttons.myButton`.
+
+When it comes to mapping the variant within the theme, the foundation of a component is the main differentiator. There are two types currently:
+  1. Components which leverage a Theme UI base
+  2. Custom components or layout components, often built on the `Box` component
+
+If a component is built on top of a Theme UI component, we follow their existing [variant groups](https://theme-ui.com/components/variants), e.g. any variant for an `IconButton` should be placed within the `buttons` object in the theme because it uses the `IconButton` from Theme UI as its base.
+
+If a component is custom or used for layout purposes, it will often have `Box` as its base. For these components, we create our own variant group for it under the `variants` object in the theme, e.g. `variants.modal`. Within this object is typically where internal layout variants will go for that component, e.g. `variants.modal.container`. NOTE: You don't need to specify `variants` in the naming, it's just used here for demo purposes.
+
+
+## Example of component with Theme UI base
+
+In the example below, `MyBadge` utilizes the Astro `Badge` component which is based on the Theme UI `Badge` component. The object within `MyBadge.styles.js` would then be exported as part of the theme within the `badges` object.
+
+```js
+// `src/components/MyBadge/MyBadge.js`
+const MyBadge = () => <Badge variant="myBadge" />;
+
+// `src/components/MyBadge/MyBadge.styles.js`
+const myBadge = { backgroundColor: 'red' };
+export default { myBadge };
+
+// `src/styles/variants/index.js`
+import defaultBadges from '../../components/Badge/Badge.styles';
+import myBadge from '../../components/MyBadge/MyBadge.styles';
+export const badges = { ...defaultBadges, ...myBadge };
+
+// `src/styles/theme.js`
+import { badges } from './variants';
+const theme = { badges };
+```
+
+This results in a `theme` object as such:
+
+```json
+{
+  "badges": {
+    "myBadge": { "backgroundColor": "red" }
+  }
+}
+```
+
+## Example of custom component and internal layout components
+
+In the example below, `MyComponent` is custom and has `Box` as its foundation. It also includes layout components and a `Button`. Since the `Button` component is built on a Theme UI base, it will follow the variant naming rules for those types of components. The object within `MyComponent.styles.js` should then be exported as part of the theme within the `variants` object.
+
+```js
+// `src/components/MyComponent/MyComponent.js`
+const MyComponent = () => (
+  <Box variant="myComponent.container">
+    <Box variant="myComponent.leftSide" />
+    <Box variant="myComponent.rightSide" />
+    {/* The Button variant is exported differently in the theme */}
+    <Button variant="myComponentButton">Click me</Button>
+  </Box>
+);
+
+// `src/components/MyComponent/MyComponent.styles.js`
+export const myComponentButton = { backgroundColor: 'critical' };
+const container = { paddingTop: 'xl' };
+const leftSide = { width: '100px', backgroundColor: 'green' };
+const rightSide = { width: '20px', backgroundColor: 'orange' };
+export default { container, leftSide, rightSide };
+
+// `src/styles/variants/variants.js`
+import myComponent from '../../components/MyComponent/MyComponent.styles';
+export default { myComponent };
+
+// `src/styles/variants/index.js`
+import defaultButtons from '../../components/Button/Button.styles';
+import { myComponentButton } from '../../components/MyComponent/MyComponent.styles';
+export const buttons = { ...defaultButtons, myComponentButton };
+export { default as variants } from './variants';
+
+// `src/styles/theme.js`
+import { buttons, variants } from './variants';
+const theme = { buttons, variants };
+```
+
+This results in a `theme` object as such:
+
+```json
+{
+  "buttons": {
+    "myComponentButton": { "backgroundColor": "critical" }
+  },
+  "variants": {
+    "myComponent": {
+      "container": { "paddingTop": "xl" },
+      "leftSide": { "width": "100px", "backgroundColor": "green" },
+      "rightSide": { "width": "20px", "backgroundColor": "orange" }
+    }
+  }
+}
+```

package/lib/cjs/styles/variants/variants.js

@@ -50,6 +50,7 @@ var _Table = _interopRequireDefault(require("../../components/Table/Table.styles
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
+var _PanelHeader = _interopRequireDefault(require("../../experimental/PanelHeader/PanelHeader.styles"));
 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; }
 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; }
@@ -81,6 +82,7 @@ var _default = _objectSpread({
   navBar: _NavBar["default"],
   overlayPanel: _OverlayPanel["default"],
   popoverMenu: _PopoverMenu["default"],
+  panelHeader: _PanelHeader["default"],
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
   separator: _Separator["default"],

package/lib/cjs/types/box.d.ts

@@ -0,0 +1,10 @@
+import { StylePropertyValue } from 'theme-ui';
+import { DOMAttributes, StyleProps } from './shared';
+export interface BoxProps extends StyleProps, DOMAttributes {
+    /** The background color of the box. */
+    bg?: StylePropertyValue<string | undefined>;
+    /** When true, display as a row rather than a column. */
+    isRow?: boolean;
+    /** Whether the box is disabled. */
+    isDisabled?: boolean;
+}

package/lib/cjs/types/box.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/icon.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, StyleProps } from './shared';
+export type SVGComponentProps = {
+    title?: string;
+};
+export type IconTypeExtended = ReactNode & {
+    type: {
+        name: string;
+    };
+} | React.ElementType;
+export interface IconProps extends StyleProps, DOMAttributes, TestingAttributes {
+    /**
+   * The title associated with the icon. It is recommended that icons always have an associated
+   * title in order to allow a better user experience for those using screen readers.
+   * The **`id`** in the title object will be the id of the title and
+   * is also what will be supplied to the **`aria-labelledby`** attribute in the SVG.
+   * The **`name`** in the title object will be the content of the title.
+   * This prop can only be used when importing the icon from [@pingux/mdi-react](https://www.npmjs.com/package/@pingux/mdi-react).
+   * */
+    title?: {
+        id?: string;
+        name: string;
+    };
+    /** The icon to render. */
+    icon: IconTypeExtended;
+    /**
+     * The size of the icon container. If given a number value, it will be converted to pixels.
+     * Tshirt sizing is recommended and can be passed to the size prop as 'xs', 'sm' , 'md'
+     * rendering 15, 20, and 25 pixel svg containers.  */
+    size?: number | string;
+    /** A theme-aware prop to set the icon's color. */
+    color?: string;
+}

package/lib/cjs/types/icon.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './box';
+export * from './icon';
+export * from './loader';
+export * from './popoverContainer';
+export * from './shared';
+export * from './tableCell';
+export * from './text';

package/lib/cjs/types/index.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _context, _context2, _context3, _context4, _context5, _context6, _context7;
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _box = require("./box");
+_forEachInstanceProperty(_context = _Object$keys(_box)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _box[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _box[key];
+    }
+  });
+});
+var _icon = require("./icon");
+_forEachInstanceProperty(_context2 = _Object$keys(_icon)).call(_context2, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _icon[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _icon[key];
+    }
+  });
+});
+var _loader = require("./loader");
+_forEachInstanceProperty(_context3 = _Object$keys(_loader)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _loader[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _loader[key];
+    }
+  });
+});
+var _popoverContainer = require("./popoverContainer");
+_forEachInstanceProperty(_context4 = _Object$keys(_popoverContainer)).call(_context4, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _popoverContainer[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _popoverContainer[key];
+    }
+  });
+});
+var _shared = require("./shared");
+_forEachInstanceProperty(_context5 = _Object$keys(_shared)).call(_context5, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shared[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _shared[key];
+    }
+  });
+});
+var _tableCell = require("./tableCell");
+_forEachInstanceProperty(_context6 = _Object$keys(_tableCell)).call(_context6, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tableCell[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tableCell[key];
+    }
+  });
+});
+var _text = require("./text");
+_forEachInstanceProperty(_context7 = _Object$keys(_text)).call(_context7, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _text[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _text[key];
+    }
+  });
+});

package/lib/cjs/types/loader.d.ts

@@ -0,0 +1,14 @@
+import { StyleProps } from './shared';
+export interface LoaderProps extends StyleProps {
+    /**
+     * Color key from theme or string value.
+     * Default color inherits the font color.
+    */
+    color?: string;
+    /**
+   * Size as number or pixel / em / rem value.
+   * Sizes can either be a string such as xs, sm, md, etc or numeric size with unit such as 15px.
+   * Default size inherits the font size.
+  */
+    size?: number | string;
+}

package/lib/cjs/types/loader.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/mdx.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/types/popoverContainer.d.ts

@@ -0,0 +1,23 @@
+import { DOMAttributes, Modify, StyleProps } from './shared';
+type PopoverPlacement = 'top' | 'right' | 'bottom' | 'left';
+type StylePropsExtended = Modify<StyleProps, {
+    direction?: PopoverPlacement;
+}>;
+export interface PopoverArrowProps extends DOMAttributes, StylePropsExtended {
+    arrowCrossOffset?: string;
+}
+export interface PopoverContainerProps extends StylePropsExtended, DOMAttributes {
+    placement?: string;
+    arrowProps?: PopoverArrowProps;
+    arrowCrossOffset?: string;
+    onClose?(): unknown;
+    isNotClosedOnBlur?: boolean;
+    hasNoArrow?: boolean;
+    isKeyboardDismissDisabled?: boolean;
+    isNonModal?: boolean;
+    isDismissable?: boolean;
+}
+export interface PopoverWrapperProps extends PopoverContainerProps {
+    isOpen?: boolean;
+}
+export {};

package/lib/cjs/types/popoverContainer.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/dom.d.ts

@@ -0,0 +1,9 @@
+import React, { AriaAttributes, DOMAttributes as ReactDOMAttributes } from 'react';
+export type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem' | (string & Record<string, unknown>);
+export interface FocusableElement extends Element, HTMLOrSVGElement {
+}
+export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, ReactDOMAttributes<T> {
+    role?: AriaRole | undefined;
+    className?: string | undefined;
+}
+export type ReactRef = React.Ref<HTMLElement>;

package/lib/cjs/types/shared/dom.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dom';
+export * from './style';
+export * from './utils';

package/lib/cjs/types/shared/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _context, _context2, _context3;
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dom = require("./dom");
+_forEachInstanceProperty(_context = _Object$keys(_dom)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dom[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _dom[key];
+    }
+  });
+});
+var _style = require("./style");
+_forEachInstanceProperty(_context2 = _Object$keys(_style)).call(_context2, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _style[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+var _utils = require("./utils");
+_forEachInstanceProperty(_context3 = _Object$keys(_utils)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});

package/lib/cjs/types/shared/style.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SxProp, ThemeUICSSObject, ThemeUICSSProperties } from 'theme-ui';
+export type SxObject = {
+    [styleKey: string]: ThemeUICSSObject;
+};
+export interface StyleProps extends ThemeUICSSProperties, SxProp {
+    /** The styling variation of the element. */
+    variant?: string;
+    /** The base HTML tag name or React component type to render */
+    as?: string | React.ReactNode | React.ElementType;
+}

package/lib/cjs/types/shared/style.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/test.d.ts

@@ -0,0 +1,3 @@
+export interface TestingAttributes {
+    'data-testid'?: string;
+}

package/lib/cjs/types/shared/test.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/shared/utils.d.ts

@@ -0,0 +1 @@
+export type Modify<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;

package/lib/cjs/types/shared/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/tableCell.d.ts

@@ -0,0 +1,5 @@
+import { DOMAttributes, StyleProps } from './shared';
+export interface TableCellProps extends StyleProps, DOMAttributes {
+    /** Determines whether or not the html rendered is a th or td element. */
+    isHeading?: boolean;
+}

package/lib/cjs/types/tableCell.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/text.d.ts

@@ -0,0 +1,3 @@
+import { DOMAttributes, StyleProps } from './shared';
+export interface TextProps extends StyleProps, DOMAttributes {
+}

package/lib/cjs/types/text.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -38,7 +38,8 @@ var FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=218-1442&t=8Wwd3tIBh3GEjCJB-0'
   },
   helpHint: {
-    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1'
+    "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A4534&t=We3h7LaaFJQnxdSy-1',
+    withLink: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=28958%3A40081&mode=design&t=WmSYPx1hR8kxFiXf-1'
   },
   icon: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=24360%3A49754&t=3b86het2R9G2Zyo2-1'

package/lib/cjs/utils/devUtils/constants/variants.js

@@ -16,8 +16,7 @@ var _Text = require("../../../components/Text/Text.styles");
  * e.g. { aBox: '1', b: '2' } -> { A_BOX: 'a', B: 'b' }
  *
  * @param {Object} obj - An object with keys to convert
- */
-// eslint-disable-next-line max-len
+ */ // eslint-disable-next-line max-len
 var toConstantObject = function toConstantObject(obj) {
   var _context;
   return (0, _lodash.fromPairs)((0, _map["default"])(_context = (0, _keys["default"])(obj)).call(_context, function (i) {

package/lib/cjs/utils/testUtils/testAxe.js

@@ -1,8 +1,8 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 var _Object$create = require("@babel/runtime-corejs3/core-js-stable/object/create");
 var _Object$getPrototypeOf = require("@babel/runtime-corejs3/core-js-stable/object/get-prototype-of");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
@@ -17,7 +17,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _jestAxe = require("jest-axe");
-function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context3; _forEachInstanceProperty(_context3 = ["next", "throw", "return"]).call(_context3, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context4; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context4 = this.tryEntries).call(_context4, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context3; _forEachInstanceProperty(_context3 = ["next", "throw", "return"]).call(_context3, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context4; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context4 = this.tryEntries).call(_context4, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 var axeTest = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(getComponent) {
     var rules,

package/lib/cjs/utils/testUtils/testWrapper.js

@@ -75,4 +75,6 @@ var customRender = function customRender(ui, options) {
 };
 
 // re-export everything
+
+// override render method
 exports.render = customRender;

package/lib/components/AccordionGridGroup/AccordionGridGroup.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/AccordionGridGroup/AccordionGridGroup" />
+
+# AccordionGridGroup
+
+The AccordionGrid component combines the look and functionality of a grid with that of an accordion, and is a composite component with two children:
+- The header, which controls the expansion of the body.
+- The body, which renders the content.
+
+The purpose of this component is to allow keyboard interaction with the children passed into the body and header. Use it to pass complex or focusable components into an accordion component. 
+It should have clear, concise labels, and should not be used for small amounts of static text. Use [Box](./?path=/story/components-box--default) instead.
+
+### Required components
+
+This component requires the Header, Body and Item originating from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion) accessibility guidelines.
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | When focus is on the header panel of a collapsed section, these keys toggle the component. |
+| Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
+| Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
+| Arrow Keys | All components are accessible using arrow keys. |
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+
+- The accordion grid item header button uses the **`aria-selected`** attribute to indicate the selection state of the row.
+- The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The **`aria-multiselectable`** attribute indicates that the user can toggle numerous items from the grid. 
+- The grid uses the **`aria-label`** attribute to provide an accessible name.