@pingux/astro 1.42.0 → 2.0.0-alpha.1

package/CHANGELOG.md

@@ -3,41 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.42.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.41.0...@pingux/astro@1.42.0) (2023-02-13)
-
-
-### Features
-
-* [UIP-5969] Add component overview page Card-Icon ([45c0eae](https://gitlab.corp.pingidentity.com/ux/pingux/commit/45c0eae70f9baa67defa3c0d10d5f8e8198df9a7))
-
-
-
-
-
-# [1.41.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.40.1...@pingux/astro@1.41.0) (2023-02-10)
-
-
-### Bug Fixes
-
-* [UIP-5927] Astro Add Separator to ListBoxSection ([f18c1d2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f18c1d252744180f7875e95e360fe352ffef20b7))
-* [UIP-5978] Astro Backet Adjust Spacing ([4625efb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/4625efb982acf90ecabf0452d0809fb44c482875))
-* [UIP-5982] Card component updates ([34d9206](https://gitlab.corp.pingidentity.com/ux/pingux/commit/34d920646cb4261bc75dabbd2ad2d80ba9ee2bfa))
-* [UIP-5994] CheckboxField focuses on ListView item when click ([670e3aa](https://gitlab.corp.pingidentity.com/ux/pingux/commit/670e3aa79828e39d169fb12c682e62416dfca1ed))
-* [UIP-5999] Update skeleton load image src ([3a9fda7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3a9fda795c1e39798692f33b682aa838dd8b5bb3))
-* [UIP-6001] Updated Message Toggle in Overlay Recipe ([add7ba7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/add7ba700731c22777c4bc25cd6086beeb481c8e))
-
-
-### Features
-
-* [UIP-5968] Add component overview page AccordionGrid-button ([ddf0281](https://gitlab.corp.pingidentity.com/ux/pingux/commit/ddf0281738dbfde8905f8684b35e2e2f96cc3771))
-* [UIP-5980] Breadcrumb story and component updates ([8b35776](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8b35776f9701b8a8f3425bdb6142afe7eef82cfb))
-* [UIP-6028] Adding Patterns to Storybook ([77457d7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/77457d71aff1cd8b6ad6699543ca0c7ff8cc458e))
-* [UIP-6030] Interactive Card ([9d41446](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9d41446c5356866c05e9dd333c631937f8333de9))
-
-
-
-
-
 ## [1.40.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.40.0...@pingux/astro@1.40.1) (2023-01-26)
 
 

package/lib/cjs/components/AccordionGridGroup/AccordionGrid.styles.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var header = {
+  cursor: 'pointer',
+  lineHeight: '30px',
+  pl: 'sm',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'center',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  bg: 'white',
+  color: 'neutral.10',
+  flexGrow: 1,
+  fontWeight: 700,
+  border: '1px solid transparent',
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    zIndex: '10'
+  }),
+  minHeight: '64px',
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    '& div > div > div > span': {
+      color: 'accent.20'
+    }
+  }
+};
+var body = {
+  display: 'none !important',
+  pl: 'sm',
+  width: '100%',
+  '&.is-selected': {
+    display: 'flex !important'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+var item = {
+  ':focus': {
+    outline: 'none'
+  }
+};
+var _default = {
+  header: header,
+  body: body,
+  item: item
+};
+exports["default"] = _default;

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

@@ -38,18 +38,18 @@ var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactAria = require("react-aria");
+
 var _grid = require("@react-stately/grid");
 
 var _grid2 = require("@react-aria/grid");
 
-var _utils = require("@react-aria/utils");
+var _i18n = require("@react-aria/i18n");
 
 var _list = require("@react-stately/list");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _i18n = require("@react-aria/i18n");
-
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 
 var _AccordionGridItem = _interopRequireDefault(require("../AccordionGridItem"));
@@ -173,7 +173,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps, containerProps), {
+  }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(gridProps, containerProps), {
     ref: accordionGridRef,
     role: "treegrid"
   }), (0, _map["default"])(_context2 = (0, _from["default"])(state.collection)).call(_context2, function (item) {

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

@@ -22,7 +22,7 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
@@ -255,7 +255,7 @@ var Default = function Default() {
       items: data,
       defaultSelectedKeys: ['Environment']
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.name
       }, (0, _react2.jsx)(Header, {
@@ -295,7 +295,7 @@ var Controlled = function Controlled() {
       selectedKeys: selectedKeys,
       onSelectionChange: setSelectedKeys
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.name
       }, (0, _react2.jsx)(Header, {
@@ -310,30 +310,7 @@ var Controlled = function Controlled() {
       }) : null);
     }))
   );
-}; // const items = [
-//   { id: 1, name: "Aardvark", key: "Aardvark" },
-//   { id: 2, name: "Kangaroo", key: "Kangaroo" },
-//   { id: 3, name: "Snake", key: "Snake" },
-//   { id: 4, name: "Frog", key: "Frog" },
-//   { id: 5, name: "Seal", key: "Seal" },
-//   { id: 6, name: "Orangutan", key: "Orangutan" },
-//   { id: 7, name: "Shark", key: "Shark" }
-// ];
-// const data = [
-//   {
-//     name: "Client Application Developer",
-//     key: "Client"
-//   },
-//   {
-//     name: "Environment Admin",
-//     key: "Environment"
-//   },
-//   {
-//     name: "Organization Admin",
-//     key: "Organization"
-//   }
-// ];
-
+};
 
 exports.Controlled = Controlled;
 
@@ -343,7 +320,7 @@ var AccordionWithInputs = function AccordionWithInputs() {
     defaultSelectedKeys: ['Organization'],
     navigationMode: "native"
   }, function (item) {
-    return (0, _react2.jsx)(_collections.Item, {
+    return (0, _react2.jsx)(_reactStately.Item, {
       key: item.key
     }, (0, _react2.jsx)(_index.Text, {
       sx: {

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
@@ -31,13 +31,13 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
     key: "third",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
@@ -47,13 +47,13 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
     isOpen: true
-  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate"
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_reactStately.Item, {
     key: "third",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
@@ -63,7 +63,7 @@ var getComponentWithTextFields = function getComponentWithTextFields() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props, {
     navigationMode: "native"
-  }), (0, _react2.jsx)(_collections.Item, {
+  }), (0, _react2.jsx)(_reactStately.Item, {
     key: "first",
     textValue: "Duplicate"
   }, (0, _react2.jsx)(_index.Text, null, "Header"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.TextField, {

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

@@ -30,9 +30,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _grid = require("@react-aria/grid");
+var _reactAria = require("react-aria");
 
-var _utils = require("@react-aria/utils");
+var _grid = require("@react-aria/grid");
 
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 
@@ -109,11 +109,11 @@ var AccordionGridItem = function AccordionGridItem(props) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
     tabindex: "0"
-  }, (0, _utils.mergeProps)(rowProps, others), {
+  }, (0, _reactAria.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,
     "aria-expanded": isSelected,
     className: classNames,
-    variant: "accordion.accordionGridItem",
+    variant: "accordionGrid.item",
     ref: rowRef
   }), (0, _react2.jsx)(_AccordionGridItemHeader["default"], (0, _extends2["default"])({
     item: item,

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

@@ -24,10 +24,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@react-aria/utils");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactAria = require("react-aria");
+
 var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
@@ -81,7 +81,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var _useHover = (0, _interactions.useHover)({}),
       hoverProps = _useHover.hoverProps;
 
-  var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps);
+  var mergedProps = (0, _reactAria.mergeProps)(gridCellProps, hoverProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isSelected: isSelected
@@ -99,7 +99,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
 
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "div",
-    variant: "accordion.accordionGridBody",
+    variant: "accordionGrid.body",
     role: "gridcell",
     ref: ref
   }, mergedProps, {

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

@@ -24,12 +24,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@react-aria/utils");
-
-var _focus = require("@react-aria/focus");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactAria = require("react-aria");
+
 var _grid = require("@react-aria/grid");
 
 var _interactions = require("@react-aria/interactions");
@@ -93,16 +91,16 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       pressProps = _usePress.pressProps,
       isPressed = _usePress.isPressed;
 
-  var _useFocusRing = (0, _focus.useFocusRing)({
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
     within: true
   }),
       focusWithinProps = _useFocusRing.focusProps;
 
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var mergedProps = (0, _utils.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = (0, _reactAria.mergeProps)(pressProps, gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
 
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isPressed: isPressed,
@@ -132,7 +130,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     as: "div",
     ref: cellRef
   }, mergedProps, {
-    variant: "accordion.accordionGridHeader",
+    variant: "accordionGrid.header",
     isFocused: isFocusVisible,
     isSelected: isSelected,
     className: classNames

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var title = {
+  display: 'inline-block !important',
+  overflowWrap: 'break-word',
+  maxWidth: '100%',
+  wordWrap: 'break-word',
+  wordBreak: 'break-word',
+  fontSize: 'lg',
+  fontWeight: 700,
+  color: 'text.primary',
+  '&.is-pressed': {
+    color: 'white'
+  }
+};
+var accordion = {
+  display: 'flex',
+  mt: '5px',
+  mb: '20px',
+  alignItems: 'flex-start'
+};
+var body = {
+  display: 'none',
+  pt: 'md',
+  width: '100%',
+  '.is-open &': {
+    display: 'flex'
+  }
+};
+
+var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
+  display: 'inline-flex',
+  bg: 'transparent',
+  color: 'neutral.10',
+  paddingLeft: '5px',
+  paddingRight: '5px',
+  flexGrow: 0,
+  fontWeight: 700,
+  '&.is-hovered': {
+    color: 'active'
+  },
+  '&.is-pressed': {
+    color: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
+});
+
+var _default = {
+  title: title,
+  accordion: accordion,
+  body: body,
+  header: header
+};
+exports["default"] = _default;

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

@@ -42,12 +42,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _accordion = require("@react-aria/accordion");
 
-var _tree = require("@react-stately/tree");
-
 var _utils = require("@react-aria/utils");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _reactStately = require("react-stately");
+
 var _index = require("../../index");
 
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
@@ -81,7 +81,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       expandedKeys = props.expandedKeys,
       onExpandedChange = props.onExpandedChange,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var state = (0, _tree.useTreeState)(props);
+  var state = (0, _reactStately.useTreeState)(props);
   var accordionRef = (0, _react.useRef)();
   /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
 

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

@@ -20,7 +20,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _collections = require("@react-stately/collections");
+var _reactStately = require("react-stately");
 
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 
@@ -107,7 +107,7 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_["default"], args, (0, _react2.jsx)(_collections.Item, {
+  return (0, _react2.jsx)(_["default"], args, (0, _react2.jsx)(_reactStately.Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -129,7 +129,7 @@ var Multiple = function Multiple() {
     (0, _react2.jsx)(_["default"], {
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -163,7 +163,7 @@ var ControlledExpanded = function ControlledExpanded() {
       expandedKeys: expandedKeys,
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -187,7 +187,7 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
       defaultExpandedKeys: ['t1'],
       items: itemArray
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -211,7 +211,7 @@ var DisabledItems = function DisabledItems() {
       disabledKeys: ['t1', 't3'],
       items: itemArrayDisabled
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label
@@ -234,7 +234,7 @@ var CustomPresentation = function CustomPresentation() {
     (0, _react2.jsx)(_["default"], {
       items: itemArrayDisabled
     }, function (item) {
-      return (0, _react2.jsx)(_collections.Item, {
+      return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
         textValue: item.label,
         label: item.label,