@pingux/astro 2.25.0-alpha.3 → 2.26.0-alpha.0

package/lib/cjs/components/AccordionGroup/Accordion.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.hoveredState = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 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; }
@@ -44,6 +44,12 @@ var body = {
     display: 'flex'
   }
 };
+var hoveredState = {
+  '&.is-hovered': {
+    color: 'active'
+  }
+};
+exports.hoveredState = hoveredState;
 var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -51,14 +57,11 @@ var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   padding: '0 5px',
   flexGrow: 0,
   fontWeight: 700,
-  '&.is-hovered': {
-    color: 'active'
-  },
   '&.is-pressed': {
     color: 'accent.20'
   },
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
-});
+}, hoveredState);
 var _default = {
   title: title,
   accordion: accordion,

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -30,7 +30,7 @@ var _index = require("../../index");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 /**
  * Console Warning: "Cannot update a component (`Unknown`)...`"
@@ -45,6 +45,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var defaultExpandedKeys = props.defaultExpandedKeys,
     expandedKeys = props.expandedKeys,
+    labelHeadingTag = props.labelHeadingTag,
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _reactStately.useTreeState)(props);
@@ -71,9 +72,10 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: accordionRef
   }, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_AccordionItem["default"], {
-      key: item.key,
+      "data-id": item['data-id'],
       item: item,
-      "data-id": item['data-id']
+      key: item.key,
+      labelHeadingTag: labelHeadingTag
     }, item.props.children);
   })));
 });
@@ -92,7 +94,9 @@ AccordionGroup.propTypes = {
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: _isIterable.isIterableProp,
   /** Id of the selected element */
-  id: _propTypes["default"].string
+  id: _propTypes["default"].string,
+  /** HTML header element wrapping the label */
+  labelHeadingTag: _AccordionItem["default"].propTypes.labelHeadingTag
 };
 AccordionGroup.displayName = 'AccordionGroup';
 var _default = AccordionGroup;

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

@@ -8,14 +8,16 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
+exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _AccordionItem = require("../AccordionItem/AccordionItem");
 var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.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); }
@@ -86,12 +88,18 @@ var _default = {
       control: {
         type: 'none'
       }
+    },
+    labelHeadingTag: {
+      control: 'radio',
+      options: _AccordionItem.validHeadingTags
     }
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({
+    labelHeadingTag: "h3"
+  }, args), (0, _react2.jsx)(_reactStately.Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -105,6 +113,30 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.accordionGroup["default"]
   }
 };
+var DifferentLevels = function DifferentLevels() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionLabelH3Key",
+    textValue: "accordionLabelH3Key",
+    label: "Accordion Label H3",
+    "data-id": "accordionItem"
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!"))), (0, _react2.jsx)(_index.AccordionGroup, {
+    labelHeadingTag: "h2"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionLabelH2Key",
+    textValue: "accordionLabelH2Key",
+    label: "Accordion Label H2",
+    "data-id": "accordionItem"
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!"))));
+};
+exports.DifferentLevels = DifferentLevels;
+DifferentLevels.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.accordionGroup.differentLevels
+  }
+};
 var Multiple = function Multiple() {
   return (
     /*
@@ -115,7 +147,8 @@ var Multiple = function Multiple() {
      * ];
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -146,7 +179,8 @@ var ControlledExpanded = function ControlledExpanded() {
     (0, _react2.jsx)(_index.AccordionGroup, {
       onExpandedChange: setExpandedKeys,
       expandedKeys: expandedKeys,
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -168,7 +202,8 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
       defaultExpandedKeys: ['t1'],
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -190,7 +225,8 @@ var DisabledItems = function DisabledItems() {
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
       disabledKeys: ['t1', 't3'],
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -211,7 +247,8 @@ var CustomPresentation = function CustomPresentation() {
       ];
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,

package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -9,6 +10,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _AccordionItem = require("../AccordionItem/AccordionItem");
 var _Text = _interopRequireDefault(require("../Text"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
@@ -353,4 +355,54 @@ test('accordion works if there are multiple, controlled on the same implementati
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
   _userEvent["default"].click(secondSelectedItem);
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
+});
+
+// get the last char of heading tag and convert to number, 'h1' => 1
+var getLabelHeadingLevel = function getLabelHeadingLevel(labelHeading) {
+  return Number((0, _slice["default"])(labelHeading).call(labelHeading, -1));
+};
+test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
+  var h1Tag = _AccordionItem.validHeadingTags[0];
+  getComponent({
+    labelHeadingTag: h1Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h1Tag)
+  });
+});
+test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
+  var h2Tag = _AccordionItem.validHeadingTags[1];
+  getComponent({
+    labelHeadingTag: h2Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h2Tag)
+  });
+});
+test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
+  var h3Tag = _AccordionItem.validHeadingTags[2];
+  getComponent({
+    labelHeadingTag: h3Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h3Tag)
+  });
+});
+test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
+  var h4Tag = _AccordionItem.validHeadingTags[3];
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
+});
+test('when labelHeadingTag is uppercase, the label is rendered', function () {
+  var h4Tag = _AccordionItem.validHeadingTags[3].toUpperCase();
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
 });

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -8,7 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.validHeadingTags = exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,13 +26,18 @@ var _themeUi = require("theme-ui");
 var _AccordionContext = require("../../context/AccordionContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _Accordion = require("../AccordionGroup/Accordion.styles");
 var _react2 = require("@emotion/react");
+var _context;
 var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
 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; }
+var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
+exports.validHeadingTags = validHeadingTags;
 var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
-    item = props.item;
+    item = props.item,
+    labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
     label = _item$props.label,
     children = _item$props.children,
@@ -75,6 +83,8 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     buttonClasses = _useStatusClasses2.classNames;
   var ariaLabel = props['aria-label'] || item.props.label;
+  var isValidHeadingTag = (0, _includes["default"])(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
+  var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordion",
     className: itemClasses
@@ -89,8 +99,10 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "variants.accordion.header",
     className: buttonClasses
   }, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
+    as: validLabelHeadingTag,
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: validLabelHeadingTag,
+    sx: _Accordion.hoveredState
   }, item.props.label), (0, _react2.jsx)(_index.Box, {
     as: "span",
     ml: "5px"
@@ -107,6 +119,9 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,
+  labelHeadingTag: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, validHeadingTags, (0, _map["default"])(validHeadingTags).call(validHeadingTags, function (heading) {
+    return heading.toUpperCase();
+  }))),
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -13,25 +13,25 @@ export declare const wordWrap: {
     wordBreak: string;
 };
 export declare const text: {
-    base: {
-        display: string;
-        fontSize: string;
+    inputValue: {
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        overflowWrap: string;
     };
-    bodyStrong: {
+    itemTitle: {
+        fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    bodyWeak: {
+    itemSubtitle: {
         fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
         display: string;
@@ -40,125 +40,150 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    buttonLabel: {
+    label: {
         fontSize: string;
-        fontWeight: number;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    buttonTitle: {
+    listTitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    buttonSubtitle: {
+    listSubtitle: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         fontSize: string;
         fontWeight: number;
         color: string;
-        fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    capsLabel: {
+    listViewItemSubtext: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        alignSelf: string;
+        fontSize: string;
+        mt: string;
         color: string;
-        textTransform: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    environmentBreadcrumb: {
+    listViewItemText: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
+        alignSelf: string;
         fontSize: string;
-        fontWeight: number;
         color: string;
-        textTransform: string;
-        display: string;
         fontFamily: string;
-        overflowWrap: string;
-    };
-    H1: {
         fontWeight: number;
-        lineHeight: string;
-        fontSize: string;
-        color: string;
-        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H2: {
+    placeholder: {
         fontWeight: number;
-        lineHeight: string;
+        color: string;
+        fontFamily: string;
+    };
+    panelHeaderSubtext: {
+        alignSelf: string;
         fontSize: string;
+        mt: string;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H3: {
-        fontWeight: number;
-        lineHeight: string;
+    panelHeaderText: {
+        alignSelf: string;
         fontSize: string;
         color: string;
         fontFamily: string;
+        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    H4: {
+    sectionTitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
-        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    inputValue: {
-        fontWeight: number;
+    subtitle: {
         color: string;
         fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
     };
-    itemTitle: {
+    tabLabel: {
         fontSize: string;
         fontWeight: number;
+        mb: string;
+        lineHeight: string;
         color: string;
-        fontFamily: string;
+        height: string;
+        '.is-selected &, .is-hovered &': {
+            color: string;
+        };
+        '.is-selected &': {
+            color: string;
+            mb: number;
+        };
+        '.is-disabled &': {
+            color: string;
+        };
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
+        fontFamily: string;
     };
-    itemSubtitle: {
+    tableHeader: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -169,105 +194,115 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    label: {
+    tableData: {
         fontSize: string;
+        fontWeight: number;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listTitle: {
+    textEllipsis: {
         textOverflow: string;
         overflow: string;
         whiteSpace: string;
+    };
+    title: {
         fontSize: string;
         fontWeight: number;
         color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listSubtitle: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        fontSize: string;
+    H1: {
+        lineHeight: string;
         fontWeight: number;
+        fontSize: string;
         color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listViewItemSubtext: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        alignSelf: string;
+    H2: {
+        lineHeight: string;
+        fontWeight: number;
         fontSize: string;
-        mt: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    listViewItemText: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-        alignSelf: string;
+    H3: {
+        lineHeight: string;
+        fontWeight: number;
         fontSize: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    placeholder: {
+    H4: {
+        lineHeight: string;
+        fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
     };
-    panelHeaderSubtext: {
-        alignSelf: string;
+    h1: {
+        fontWeight: number;
         fontSize: string;
-        mt: string;
         color: string;
         fontFamily: string;
-        fontWeight: number;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    panelHeaderText: {
-        alignSelf: string;
+    h2: {
+        fontWeight: number;
         fontSize: string;
         color: string;
         fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    h3: {
         fontWeight: number;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    sectionTitle: {
+    h4: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -278,7 +313,14 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    subtitle: {
+    base: {
+        display: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
+    bodyStrong: {
         color: string;
         fontFamily: string;
         fontWeight: number;
@@ -288,31 +330,17 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    tabLabel: {
+    bodyWeak: {
         fontSize: string;
-        fontWeight: number;
-        mb: string;
-        lineHeight: string;
         color: string;
-        height: string;
-        '.is-selected &, .is-hovered &': {
-            color: string;
-        };
-        '.is-selected &': {
-            color: string;
-            mb: number;
-        };
-        '.is-disabled &': {
-            color: string;
-        };
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
-        fontFamily: string;
     };
-    tableHeader: {
+    buttonLabel: {
         fontSize: string;
         fontWeight: number;
         color: string;
@@ -323,31 +351,47 @@ export declare const text: {
         wordWrap: string;
         wordBreak: string;
     };
-    tableData: {
+    buttonTitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        lineHeight: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
-    textEllipsis: {
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
-    };
-    title: {
+    buttonSubtitle: {
         fontSize: string;
         fontWeight: number;
         color: string;
         fontFamily: string;
+        lineHeight: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    capsLabel: {
+        color: string;
+        textTransform: string;
+        fontFamily: string;
         display: string;
         overflowWrap: string;
         maxWidth: string;
         wordWrap: string;
         wordBreak: string;
     };
+    environmentBreadcrumb: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        textTransform: string;
+        display: string;
+        fontFamily: string;
+        overflowWrap: string;
+    };
 };

package/lib/cjs/components/Text/Text.styles.js

@@ -98,7 +98,38 @@ var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   fontSize: 'sm',
   mt: '1px'
 });
-var text = {
+var hTags = {
+  h1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3
+  }),
+  h2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3
+  }),
+  h3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3
+  }),
+  h4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  })
+};
+var HTags = {
+  H1: _objectSpread(_objectSpread({}, hTags.h1), {}, {
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, hTags.h2), {}, {
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, hTags.h3), {}, {
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    lineHeight: '16px'
+  })
+};
+var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -131,26 +162,8 @@ var text = {
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
-  environmentBreadcrumb: environmentBreadcrumb,
-  H1: _objectSpread(_objectSpread({}, title), {}, {
-    fontWeight: 3,
-    lineHeight: '28px'
-  }),
-  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '21px'
-  }),
-  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '18px'
-  }),
-  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    fontWeight: 3,
-    color: 'text.primary',
-    fontFamily: 'standard',
-    lineHeight: '16px'
-  }),
+  environmentBreadcrumb: environmentBreadcrumb
+}, hTags), HTags), {}, {
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
@@ -205,5 +218,5 @@ var text = {
   }),
   textEllipsis: textEllipsis,
   title: title
-};
+});
 exports.text = text;

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

@@ -7,7 +7,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports.FIGMA_LINKS = void 0;
 var FIGMA_LINKS = {
   accordionGroup: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',

package/lib/components/AccordionGroup/Accordion.styles.js

@@ -37,6 +37,11 @@ var body = {
     display: 'flex'
   }
 };
+export var hoveredState = {
+  '&.is-hovered': {
+    color: 'active'
+  }
+};
 var header = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -44,14 +49,11 @@ var header = _objectSpread(_objectSpread({}, base), {}, {
   padding: '0 5px',
   flexGrow: 0,
   fontWeight: 700,
-  '&.is-hovered': {
-    color: 'active'
-  },
   '&.is-pressed': {
     color: 'accent.20'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
-});
+}, hoveredState);
 export default {
   title: title,
   accordion: accordion,

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -35,6 +35,7 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
   var defaultExpandedKeys = props.defaultExpandedKeys,
     expandedKeys = props.expandedKeys,
+    labelHeadingTag = props.labelHeadingTag,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
   var state = useTreeState(props);
@@ -61,9 +62,10 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: accordionRef
   }, mergeProps(theseProps, others)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(AccordionItem, {
-      key: item.key,
+      "data-id": item['data-id'],
       item: item,
-      "data-id": item['data-id']
+      key: item.key,
+      labelHeadingTag: labelHeadingTag
     }, item.props.children);
   })));
 });
@@ -82,7 +84,9 @@ AccordionGroup.propTypes = {
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: isIterableProp,
   /** Id of the selected element */
-  id: PropTypes.string
+  id: PropTypes.string,
+  /** HTML header element wrapping the label */
+  labelHeadingTag: AccordionItem.propTypes.labelHeadingTag
 };
 AccordionGroup.displayName = 'AccordionGroup';
 export default AccordionGroup;

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -1,10 +1,12 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { AccordionGroup, Button, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
+import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
@@ -73,11 +75,17 @@ export default {
       control: {
         type: 'none'
       }
+    },
+    labelHeadingTag: {
+      control: 'radio',
+      options: validHeadingTags
     }
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
+  return ___EmotionJSX(AccordionGroup, _extends({
+    labelHeadingTag: "h3"
+  }, args), ___EmotionJSX(Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -90,6 +98,29 @@ Default.parameters = {
     url: FIGMA_LINKS.accordionGroup["default"]
   }
 };
+export var DifferentLevels = function DifferentLevels() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, ___EmotionJSX(Item, {
+    key: "accordionLabelH3Key",
+    textValue: "accordionLabelH3Key",
+    label: "Accordion Label H3",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!"))), ___EmotionJSX(AccordionGroup, {
+    labelHeadingTag: "h2"
+  }, ___EmotionJSX(Item, {
+    key: "accordionLabelH2Key",
+    textValue: "accordionLabelH2Key",
+    label: "Accordion Label H2",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+DifferentLevels.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.accordionGroup.differentLevels
+  }
+};
 export var Multiple = function Multiple() {
   return (
     /*
@@ -100,7 +131,8 @@ export var Multiple = function Multiple() {
      * ];
      */
     ___EmotionJSX(AccordionGroup, {
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -130,7 +162,8 @@ export var ControlledExpanded = function ControlledExpanded() {
     ___EmotionJSX(AccordionGroup, {
       onExpandedChange: setExpandedKeys,
       expandedKeys: expandedKeys,
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -151,7 +184,8 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
      */
     ___EmotionJSX(AccordionGroup, {
       defaultExpandedKeys: ['t1'],
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -172,7 +206,8 @@ export var DisabledItems = function DisabledItems() {
      */
     ___EmotionJSX(AccordionGroup, {
       disabledKeys: ['t1', 't3'],
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -192,7 +227,8 @@ export var CustomPresentation = function CustomPresentation() {
       ];
      */
     ___EmotionJSX(AccordionGroup, {
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -1,11 +1,13 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { Box, Button, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import Text from '../Text';
 import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -350,4 +352,54 @@ test('accordion works if there are multiple, controlled on the same implementati
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
   userEvent.click(secondSelectedItem);
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
+});
+
+// get the last char of heading tag and convert to number, 'h1' => 1
+var getLabelHeadingLevel = function getLabelHeadingLevel(labelHeading) {
+  return Number(_sliceInstanceProperty(labelHeading).call(labelHeading, -1));
+};
+test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
+  var h1Tag = validHeadingTags[0];
+  getComponent({
+    labelHeadingTag: h1Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h1Tag)
+  });
+});
+test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
+  var h2Tag = validHeadingTags[1];
+  getComponent({
+    labelHeadingTag: h2Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h2Tag)
+  });
+});
+test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
+  var h3Tag = validHeadingTags[2];
+  getComponent({
+    labelHeadingTag: h3Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h3Tag)
+  });
+});
+test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
+  var h4Tag = validHeadingTags[3];
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
+});
+test('when labelHeadingTag is uppercase, the label is rendered', function () {
+  var h4Tag = validHeadingTags[3].toUpperCase();
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _context;
 var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
@@ -13,10 +17,13 @@ import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
+import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-    item = props.item;
+    item = props.item,
+    labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
     label = _item$props.label,
     children = _item$props.children,
@@ -62,6 +69,8 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     buttonClasses = _useStatusClasses2.classNames;
   var ariaLabel = props['aria-label'] || item.props.label;
+  var isValidHeadingTag = _includesInstanceProperty(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
+  var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
@@ -76,8 +85,10 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "variants.accordion.header",
     className: buttonClasses
   }, mergeProps(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), ___EmotionJSX(Text, {
+    as: validLabelHeadingTag,
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: validLabelHeadingTag,
+    sx: hoveredState
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: "5px"
@@ -94,6 +105,9 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,
+  labelHeadingTag: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, validHeadingTags, _mapInstanceProperty(validHeadingTags).call(validHeadingTags, function (heading) {
+    return heading.toUpperCase();
+  }))),
   item: PropTypes.shape({
     key: PropTypes.string,
     rendered: PropTypes.node,

package/lib/components/Text/Text.styles.js

@@ -89,7 +89,38 @@ var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   fontSize: 'sm',
   mt: '1px'
 });
-export var text = {
+var hTags = {
+  h1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3
+  }),
+  h2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3
+  }),
+  h3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3
+  }),
+  h4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  })
+};
+var HTags = {
+  H1: _objectSpread(_objectSpread({}, hTags.h1), {}, {
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, hTags.h2), {}, {
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, hTags.h3), {}, {
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    lineHeight: '16px'
+  })
+};
+export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -122,26 +153,8 @@ export var text = {
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
-  environmentBreadcrumb: environmentBreadcrumb,
-  H1: _objectSpread(_objectSpread({}, title), {}, {
-    fontWeight: 3,
-    lineHeight: '28px'
-  }),
-  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '21px'
-  }),
-  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '18px'
-  }),
-  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    fontWeight: 3,
-    color: 'text.primary',
-    fontFamily: 'standard',
-    lineHeight: '16px'
-  }),
+  environmentBreadcrumb: environmentBreadcrumb
+}, hTags), HTags), {}, {
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
@@ -196,4 +209,4 @@ export var text = {
   }),
   textEllipsis: textEllipsis,
   title: title
-};
+});

package/lib/utils/designUtils/figmaLinks.js

@@ -1,6 +1,7 @@
 export var FIGMA_LINKS = {
   accordionGroup: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.25.0-alpha.3",
+  "version": "2.26.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",