@pingux/astro 2.164.1-alpha.1 → 2.165.1-alpha.0

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

@@ -14,22 +14,22 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.Controlled = exports.AccordionWithInputs = void 0;
+exports["default"] = exports.OnyxDefault = exports.Default = exports.Controlled = exports.AccordionWithInputs = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
 var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
+var _DotsHorizontalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsHorizontalIcon"));
 var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _AccordionGridGroup = _interopRequireDefault(require("./AccordionGridGroup.mdx"));
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var data = [{
   name: 'Client Application Developer',
   key: 'Client',
@@ -61,6 +61,37 @@ var data = [{
     populations: []
   }]
 }];
+var onyxData = [{
+  name: 'Client Application Developer',
+  key: 'Client',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Boston (Environment)',
+    populations: []
+  }]
+}, {
+  name: 'Environment Admin',
+  key: 'Environment',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }]
+}, {
+  name: 'Organization Admin',
+  key: 'Organization',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Boston (Environment)',
+    populations: []
+  }]
+}];
 var _default = exports["default"] = {
   title: 'Components/AccordionGridGroup',
   component: _index.AccordionGridGroup,
@@ -183,7 +214,7 @@ var Header = function Header(props) {
       name: 'Create Icon'
     }
   })), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "vertical-lines-icon",
+    "aria-label": "horizontal-lines-icon",
     sx: {
       mr: '4px'
     }
@@ -191,7 +222,7 @@ var Header = function Header(props) {
     icon: _MoreVertIcon["default"],
     size: "sm",
     title: {
-      name: 'Vertical Lines Icon'
+      name: 'Horizontal Lines Icon'
     }
   })))));
 };
@@ -212,7 +243,8 @@ var HeaderOnyx = function HeaderOnyx(props) {
   }, (0, _react2.jsx)(_index.Text, {
     as: "h5",
     variant: "h5",
-    alignSelf: "center"
+    alignSelf: "center",
+    color: "font.base"
   }, item.name)), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignSelf: "center",
@@ -249,7 +281,8 @@ var HeaderOnyx = function HeaderOnyx(props) {
     }
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
-    size: "sm",
+    size: "md",
+    color: "font.base",
     title: {
       name: 'Create Icon'
     }
@@ -259,8 +292,9 @@ var HeaderOnyx = function HeaderOnyx(props) {
       mr: '4px'
     }
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "sm",
+    icon: _DotsHorizontalIcon["default"],
+    size: "md",
+    color: "font.base",
     title: {
       name: 'Vertical Lines Icon'
     }
@@ -321,10 +355,39 @@ var Body = function Body(props) {
     }));
   })));
 };
+var BodyOnyx = function BodyOnyx(props) {
+  var _context3;
+  var item = props.item;
+  return (0, _react2.jsx)(_index.Card, null, (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (0, _map["default"])(_context3 = item.organizations).call(_context3, function (org) {
+    var _context4;
+    return (0, _react2.jsx)(_index.Box, {
+      key: "box".concat(org.name)
+    }, (0, _react2.jsx)(_index.Text, {
+      color: "font.base",
+      sx: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      },
+      key: "text".concat(org.name)
+    }, org.name), (0, _map["default"])(_context4 = org.populations).call(_context4, function (pop) {
+      return (0, _react2.jsx)(_index.Text, {
+        color: "font.base",
+        key: pop,
+        sx: {
+          marginLeft: 'md',
+          mt: '10px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        }
+      }, pop);
+    }));
+  })));
+};
 var Default = exports.Default = function Default() {
-  var _useGetTheme = (0, _hooks.useGetTheme)(),
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
@@ -343,9 +406,7 @@ var Default = exports.Default = function Default() {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.name
-      }, isOnyx ? (0, _react2.jsx)(HeaderOnyx, {
-        item: item
-      }) : (0, _react2.jsx)(Header, {
+      }, (0, _react2.jsx)(Header, {
         item: item
       }), (0, _react2.jsx)(Body, {
         item: item
@@ -360,14 +421,41 @@ var Default = exports.Default = function Default() {
     }))
   );
 };
+var OnyxDefault = exports.OnyxDefault = function OnyxDefault() {
+  return (
+    // See story source for info about the data used
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Separator, {
+      color: "border.base",
+      sx: {
+        mb: 0
+      }
+    }), (0, _react2.jsx)(_index.AccordionGridGroup, {
+      items: onyxData,
+      defaultSelectedKeys: ['Environment']
+    }, function (item) {
+      return (0, _react2.jsx)(_reactStately.Item, {
+        key: item.key,
+        textValue: item.name
+      }, (0, _react2.jsx)(HeaderOnyx, {
+        item: item
+      }), (0, _react2.jsx)(BodyOnyx, {
+        item: item
+      }), (0, _react2.jsx)(_index.Box, {
+        role: "cell"
+      }, item.key !== 'Organization' ? (0, _react2.jsx)(_index.Separator, {
+        color: "border.base",
+        sx: {
+          m: 0
+        }
+      }) : null));
+    }))
+  );
+};
 var Controlled = exports.Controlled = function Controlled() {
   var _useState = (0, _react.useState)(['Client']),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
-  var _useGetTheme2 = (0, _hooks.useGetTheme)(),
-    themeState = _useGetTheme2.themeState;
-  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
@@ -387,9 +475,7 @@ var Controlled = exports.Controlled = function Controlled() {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.name
-      }, isOnyx ? (0, _react2.jsx)(HeaderOnyx, {
-        item: item
-      }) : (0, _react2.jsx)(Header, {
+      }, (0, _react2.jsx)(Header, {
         item: item
       }), (0, _react2.jsx)(Body, {
         item: item

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -75,7 +75,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    tabindex: "0"
+    tabIndex: "0"
   }, (0, _reactAria.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,
     "aria-expanded": isSelected,

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -752,5 +752,12 @@ declare const _default: {
             };
         };
     };
+    accordionGrid: {
+        header: {
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+        };
+    };
 };
 export default _default;

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

@@ -292,5 +292,12 @@ var _default = exports["default"] = {
         color: 'text.secondary'
       }
     }
+  },
+  accordionGrid: {
+    header: {
+      '&.is-hovered': {
+        backgroundColor: '#2C323A'
+      }
+    }
   }
 };

package/lib/cjs/styles/themes/next-gen/convertedComponentList.d.ts

@@ -8,8 +8,10 @@ export declare const componentSpecificNextGenBlacklist: {
     DataTable: string[];
     Text: string[];
     Tabs: string[];
+    AccordionGridGroup: string[];
 };
 export declare const astroBlacklistStory: {
+    AccordionGridGroup: string[];
     DataTable: string[];
     NavBar: string[];
     SearchField: string[];

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -14,9 +14,11 @@ var componentSpecificNextGenBlacklist = exports.componentSpecificNextGenBlacklis
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
   Text: ['Default'],
-  Tabs: ['Vertical Orientation']
+  Tabs: ['Vertical Orientation'],
+  AccordionGridGroup: ['Default', 'Accordion With Inputs', 'Controlled']
 };
 var astroBlacklistStory = exports.astroBlacklistStory = {
+  AccordionGridGroup: ['Onyx Default'],
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -4651,6 +4651,27 @@ declare const _default: {
                 p: string;
             };
         };
+        accordionGrid: {
+            header: {
+                px: string;
+                py: string;
+                minHeight: string;
+                border: string;
+                '&.is-hovered': {
+                    backgroundColor: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
+            body: {
+                p: string;
+                pt: number;
+            };
+            item: {};
+        };
         attachment: {
             container: {
                 backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/accordionGrid.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    header: {
+        px: string;
+        py: string;
+        minHeight: string;
+        border: string;
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
+    body: {
+        p: string;
+        pt: number;
+    };
+    item: {};
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/accordionGrid.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var header = {
+  px: 'lg',
+  py: 'md',
+  minHeight: '75px',
+  border: 'none',
+  '&.is-hovered': {
+    backgroundColor: 'gray-100'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0'
+  }
+};
+var body = {
+  p: 'lg',
+  pt: 0
+};
+var item = {};
+var _default = exports["default"] = {
+  header: header,
+  body: body,
+  item: item
+};

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -46,6 +46,27 @@ declare const _default: {
             p: string;
         };
     };
+    accordionGrid: {
+        header: {
+            px: string;
+            py: string;
+            minHeight: string;
+            border: string;
+            '&.is-hovered': {
+                backgroundColor: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
+        body: {
+            p: string;
+            pt: number;
+        };
+        item: {};
+    };
     attachment: {
         container: {
             backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -20,6 +20,7 @@ var _Attachment = _interopRequireDefault(require("../../../../components/AICompo
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
 var _accordion = _interopRequireDefault(require("./accordion"));
+var _accordionGrid = _interopRequireDefault(require("./accordionGrid"));
 var _avatar = require("./avatar");
 var _box = require("./box");
 var _button = _interopRequireWildcard(require("./button"));
@@ -425,6 +426,7 @@ var statusIcon = {
 };
 var _default = exports["default"] = {
   accordion: _accordion["default"],
+  accordionGrid: _accordionGrid["default"],
   attachment: _Attachment["default"],
   avatar: _avatar.avatar,
   breadcrumb: breadcrumb,

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -10,14 +10,14 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
+import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { useGetTheme } from '../../hooks';
-import { AccordionGridGroup, Badge, Box, Icon, IconButton, Link, Separator, Text, TextField } from '../../index';
+import { AccordionGridGroup, Badge, Box, Card, Icon, IconButton, Link, Separator, Text, TextField } from '../../index';
 import AccordionGridReadme from './AccordionGridGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var data = [{
@@ -51,6 +51,37 @@ var data = [{
     populations: []
   }]
 }];
+var onyxData = [{
+  name: 'Client Application Developer',
+  key: 'Client',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Boston (Environment)',
+    populations: []
+  }]
+}, {
+  name: 'Environment Admin',
+  key: 'Environment',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }]
+}, {
+  name: 'Organization Admin',
+  key: 'Organization',
+  organizations: [{
+    name: 'Montana (Environment)',
+    populations: ['Administrators (Population)', 'Other Population (Population)']
+  }, {
+    name: 'Boston (Environment)',
+    populations: []
+  }]
+}];
 export default {
   title: 'Components/AccordionGridGroup',
   component: AccordionGridGroup,
@@ -173,7 +204,7 @@ var Header = function Header(props) {
       name: 'Create Icon'
     }
   })), ___EmotionJSX(IconButton, {
-    "aria-label": "vertical-lines-icon",
+    "aria-label": "horizontal-lines-icon",
     sx: {
       mr: '4px'
     }
@@ -181,7 +212,7 @@ var Header = function Header(props) {
     icon: MoreVertIcon,
     size: "sm",
     title: {
-      name: 'Vertical Lines Icon'
+      name: 'Horizontal Lines Icon'
     }
   })))));
 };
@@ -202,7 +233,8 @@ var HeaderOnyx = function HeaderOnyx(props) {
   }, ___EmotionJSX(Text, {
     as: "h5",
     variant: "h5",
-    alignSelf: "center"
+    alignSelf: "center",
+    color: "font.base"
   }, item.name)), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center",
@@ -239,7 +271,8 @@ var HeaderOnyx = function HeaderOnyx(props) {
     }
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
-    size: "sm",
+    size: "md",
+    color: "font.base",
     title: {
       name: 'Create Icon'
     }
@@ -249,8 +282,9 @@ var HeaderOnyx = function HeaderOnyx(props) {
       mr: '4px'
     }
   }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm",
+    icon: DotsHorizontalIcon,
+    size: "md",
+    color: "font.base",
     title: {
       name: 'Vertical Lines Icon'
     }
@@ -311,10 +345,39 @@ var Body = function Body(props) {
     }));
   })));
 };
+var BodyOnyx = function BodyOnyx(props) {
+  var _context3;
+  var item = props.item;
+  return ___EmotionJSX(Card, null, ___EmotionJSX(Box, {
+    gap: "md"
+  }, _mapInstanceProperty(_context3 = item.organizations).call(_context3, function (org) {
+    var _context4;
+    return ___EmotionJSX(Box, {
+      key: "box".concat(org.name)
+    }, ___EmotionJSX(Text, {
+      color: "font.base",
+      sx: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden'
+      },
+      key: "text".concat(org.name)
+    }, org.name), _mapInstanceProperty(_context4 = org.populations).call(_context4, function (pop) {
+      return ___EmotionJSX(Text, {
+        color: "font.base",
+        key: pop,
+        sx: {
+          marginLeft: 'md',
+          mt: '10px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        }
+      }, pop);
+    }));
+  })));
+};
 export var Default = function Default() {
-  var _useGetTheme = useGetTheme(),
-    themeState = _useGetTheme.themeState;
-  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
@@ -333,9 +396,7 @@ export var Default = function Default() {
       return ___EmotionJSX(Item, {
         key: item.key,
         textValue: item.name
-      }, isOnyx ? ___EmotionJSX(HeaderOnyx, {
-        item: item
-      }) : ___EmotionJSX(Header, {
+      }, ___EmotionJSX(Header, {
         item: item
       }), ___EmotionJSX(Body, {
         item: item
@@ -350,14 +411,41 @@ export var Default = function Default() {
     }))
   );
 };
+export var OnyxDefault = function OnyxDefault() {
+  return (
+    // See story source for info about the data used
+    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+      color: "border.base",
+      sx: {
+        mb: 0
+      }
+    }), ___EmotionJSX(AccordionGridGroup, {
+      items: onyxData,
+      defaultSelectedKeys: ['Environment']
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.key,
+        textValue: item.name
+      }, ___EmotionJSX(HeaderOnyx, {
+        item: item
+      }), ___EmotionJSX(BodyOnyx, {
+        item: item
+      }), ___EmotionJSX(Box, {
+        role: "cell"
+      }, item.key !== 'Organization' ? ___EmotionJSX(Separator, {
+        color: "border.base",
+        sx: {
+          m: 0
+        }
+      }) : null));
+    }))
+  );
+};
 export var Controlled = function Controlled() {
   var _useState = useState(['Client']),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
-  var _useGetTheme2 = useGetTheme(),
-    themeState = _useGetTheme2.themeState;
-  var isOnyx = themeState.isOnyx;
   return (
     // See story source for info about the data used
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
@@ -377,9 +465,7 @@ export var Controlled = function Controlled() {
       return ___EmotionJSX(Item, {
         key: item.key,
         textValue: item.name
-      }, isOnyx ? ___EmotionJSX(HeaderOnyx, {
-        item: item
-      }) : ___EmotionJSX(Header, {
+      }, ___EmotionJSX(Header, {
         item: item
       }), ___EmotionJSX(Body, {
         item: item

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -63,7 +63,7 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    tabindex: "0"
+    tabIndex: "0"
   }, mergeProps(rowProps, others), {
     "aria-selected": isSelected,
     "aria-expanded": isSelected,

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -284,5 +284,12 @@ export default {
         color: 'text.secondary'
       }
     }
+  },
+  accordionGrid: {
+    header: {
+      '&.is-hovered': {
+        backgroundColor: '#2C323A'
+      }
+    }
   }
 };

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -7,9 +7,11 @@ export var componentSpecificNextGenBlacklist = {
   OverlayPanel: ['Expandable'],
   DataTable: ['Default'],
   Text: ['Default'],
-  Tabs: ['Vertical Orientation']
+  Tabs: ['Vertical Orientation'],
+  AccordionGridGroup: ['Default', 'Accordion With Inputs', 'Controlled']
 };
 export var astroBlacklistStory = {
+  AccordionGridGroup: ['Onyx Default'],
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default'],
   SearchField: ['Onyx With Filter'],