@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,81 +1,44 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _filterInstanceProperty2 = 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = exports.CollapsiblePanelWithBadge = void 0;
-
 var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _AccountGroupIcon = _interopRequireDefault(require("mdi-react/AccountGroupIcon"));
-
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
-
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
-
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
-
-var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
-
-var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
-
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
-
 var _index = require("../../index");
-
-var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-
+var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
 var _CollapsiblePanel2 = _interopRequireDefault(require("./CollapsiblePanel.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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Components/CollapsiblePanel',
   component: _CollapsiblePanel["default"],
@@ -177,35 +140,29 @@ var data = [{
   subtitle: '',
   chipValue: '29'
 }];
-
 var Default = function Default(args) {
   return (0, _react2.jsx)(_CollapsiblePanel["default"], args);
 };
-
 exports.Default = Default;
-
 var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
   var _useState = (0, _react.useState)(data),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = (0, _react.useRef)();
   var selectedItems = (0, _react.useMemo)(function () {
     var _context;
-
     return (0, _sort["default"])(_context = (0, _filter["default"])(items).call(items, function (item) {
       return item.isDefaultSelected || item.isSelected;
-    }) // sort elements to display "default selected" at first place
+    })
+    // sort elements to display "default selected" at first place
     ).call(_context, function (a, b) {
       return Number(!!b.isDefaultSelected) - Number(!!a.isDefaultSelected);
     });
   }, [items]);
-
   var changeSelection = function changeSelection(key) {
     setItems(function (prevItems) {
       return (0, _map["default"])(prevItems).call(prevItems, function (el) {
@@ -214,12 +171,10 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
             isSelected: !el.isSelected
           });
         }
-
         return el;
       });
     });
   };
-
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
     ref: triggerRef,
     onPress: state.open
@@ -259,7 +214,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     "data-id": "home"
   }, "Ed Nepomuceno"), (0, _react2.jsx)(_index.Item, {
     key: "editGroups",
-    variant: "neutralText",
+    variant: "variants.collapsiblePanel.neutralText",
     "data-id": "editGroups"
   }, "Edit Groups"))), (0, _react2.jsx)(_index.Box, {
     isRow: true
@@ -328,7 +283,7 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
       variant: "listTitle",
       mb: "xs",
       mr: "xs"
-    }, item.name), (0, _react2.jsx)(_index.Chip, {
+    }, item.name), (0, _react2.jsx)(_index.Badge, {
       label: item.chipValue,
       bg: "accent.99",
       textColor: "text.secondary",
@@ -394,5 +349,4 @@ var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
     }));
   })))));
 };
-
 exports.CollapsiblePanelWithBadge = CollapsiblePanelWithBadge;

package/lib/cjs/{styles/variants/collapsiblePanel.js → components/CollapsiblePanel/CollapsiblePanel.styles.js}

@@ -1,38 +1,25 @@
 "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;
-
+exports.toggle = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _buttons = require("../variants/buttons");
-
+var _Buttons = require("../Button/Buttons.styles");
+var _IconButton = require("../IconButton/IconButton.styles");
+var _Text = require("../Text/Text.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 collapsiblePanelContainer = {
+var container = {
   pr: 'sm',
   minHeight: '80vh',
   '>div': {
@@ -45,14 +32,14 @@ var collapsiblePanelContainer = {
     width: '300px'
   }
 };
-var collapsiblePanelContent = {
+var content = {
   bg: 'accent.99',
   fontSize: 'sm',
   height: '100%',
   width: '300px',
   '&.is-focused': _objectSpread({
     borderColor: 'accent.80'
-  }, _buttons.focusWithCroppedOutline),
+  }, _Buttons.focusWithCroppedOutline),
   '& div': {
     alignItems: 'center',
     display: 'flex',
@@ -62,7 +49,7 @@ var collapsiblePanelContent = {
     justifyContent: 'space-between'
   }
 };
-var collapsiblePanelContainerTitle = {
+var containerTitle = {
   alignContent: 'center',
   fontWeight: '500',
   minHeight: '40px',
@@ -76,7 +63,7 @@ var collapsiblePanelContainerTitle = {
     width: '300px'
   }
 };
-var collapsiblePanelBadge = {
+var badge = {
   borderRadius: '5px',
   display: 'flex',
   height: '17px',
@@ -99,15 +86,64 @@ var collapsiblePanelBadge = {
     width: '0'
   }
 };
-var collapsiblePanellItem = {
+var item = {
   minHeight: '45px',
   margin: 'auto'
 };
+var toggle = _objectSpread(_objectSpread({}, _IconButton.square), {}, {
+  bg: 'accent.99',
+  height: '40px',
+  minWidth: 'max-content',
+  pl: 'xs',
+  ml: '10px',
+  path: {
+    fill: 'active'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.99'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
+  '&.is-pressed': {
+    backgroundColor: 'accent.99'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+});
+exports.toggle = toggle;
+var neutralText = _objectSpread(_objectSpread({}, _Buttons.link), {}, {
+  color: 'neutral.10'
+});
+var itemText = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  color: 'neutral.30',
+  fontSize: 'sm',
+  fontWeight: 500,
+  overflow: 'hidden',
+  marginRight: 'xs',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var title = _objectSpread(_objectSpread({}, _Text.wordWrap), {}, {
+  fontSize: 'sm',
+  fontWeight: 500,
+  color: 'text.secondary',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  mr: 'xs'
+});
 var _default = {
-  collapsiblePanelContainer: collapsiblePanelContainer,
-  collapsiblePanelContent: collapsiblePanelContent,
-  collapsiblePanelContainerTitle: collapsiblePanelContainerTitle,
-  collapsiblePanelBadge: collapsiblePanelBadge,
-  collapsiblePanellItem: collapsiblePanellItem
+  container: container,
+  content: content,
+  containerTitle: containerTitle,
+  badge: badge,
+  item: item,
+  toggle: toggle,
+  neutralText: neutralText,
+  itemText: itemText,
+  title: title
 };
 exports["default"] = _default;

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

@@ -1,19 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _testWrapper = require("../../utils/testUtils/testWrapper");
-
 var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
-
 var _react2 = require("@emotion/react");
-
 var testId = 'collapsible-panel-item';
 var onSelectionChange = jest.fn();
 var defaultProps = {
@@ -26,12 +19,10 @@ var defaultProps = {
   selectedFilterCount: 8,
   onSelectionChange: onSelectionChange
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanel["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
-
 beforeAll(function () {
   jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
     return 1000;
@@ -53,8 +44,9 @@ afterEach(function () {
 });
 afterAll(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent, {
   rules: {
     'aria-required-children': {
@@ -67,17 +59,13 @@ afterAll(function () {
 });
 test('default CollapsiblePanel', function () {
   getComponent();
-
   var collapsiblePanel = _testWrapper.screen.getByTestId(testId);
-
   expect(collapsiblePanel).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-
   var collapsiblePanel = _testWrapper.screen.getByTestId(testId);
-
   expect(collapsiblePanel).toHaveClass('testing-class');
 });

package/lib/cjs/components/CollapsiblePanel/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 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
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _CollapsiblePanel["default"];
   }
 });
-
 var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.js

@@ -1,36 +1,26 @@
 "use strict";
 
 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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Chip = _interopRequireDefault(require("../Chip"));
-
+var _Badge = _interopRequireDefault(require("../Badge"));
 var _react2 = require("@emotion/react");
-
 var _excluded = ["selectedFilterCount"];
-
 /**
  * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
+
 var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Badge["default"], (0, _extends2["default"])({
     as: "span",
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
@@ -39,7 +29,6 @@ var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
     isUppercase: true
   }, others));
 };
-
 CollapsiblePanelBadge.propTypes = {
   selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   margin: _propTypes["default"].string

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelBadge.test.js

@@ -1,48 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _testWrapper = require("../../utils/testUtils/testWrapper");
-
 var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
-
 var _react2 = require("@emotion/react");
-
 var testId = 'test-collapsiblePanelBadge';
 var defaultProps = {
   'data-testid': testId,
   selectedFilterCount: 9
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanelBadge["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
 test('default CollapsiblePanelBadge', function () {
   getComponent();
-
   var collapsiblePanelBadge = _testWrapper.screen.getByTestId(testId);
-
   expect(collapsiblePanelBadge).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-
   var collapsiblePanelBadge = _testWrapper.screen.getByTestId(testId);
-
   expect(collapsiblePanelBadge).toHaveClass('testing-class');
 });

package/lib/cjs/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -1,78 +1,54 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
-
+var _reactStately = require("react-stately");
 var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon"));
-
-var _overlays = require("@react-stately/overlays");
-
-var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
-
-var _index = require("../../index");
-
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
-
+var _index = require("../../index");
+var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
 var _react2 = require("@emotion/react");
-
 var _excluded = ["selectedFilterCount", "className", "children", "closeAriaLabel", "isDefaultOpen", "isOpen", "onOpenChange", "openAriaLabel"];
-
 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; }
-
 /**
  * The CollapsiblePanelContainer serves as a wrapper around a list and its associated trigger,
  * linking the list's open state with the trigger's press state and providing necessary context.
  */
+
 var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
-      className = props.className,
-      children = props.children,
-      closeAriaLabel = props.closeAriaLabel,
-      isDefaultOpen = props.isDefaultOpen,
-      isOpen = props.isOpen,
-      onOpenChange = props.onOpenChange,
-      openAriaLabel = props.openAriaLabel,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
+    className = props.className,
+    children = props.children,
+    closeAriaLabel = props.closeAriaLabel,
+    isDefaultOpen = props.isDefaultOpen,
+    isOpen = props.isOpen,
+    onOpenChange = props.onOpenChange,
+    openAriaLabel = props.openAriaLabel,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var triggerRef = _react["default"].useRef();
-
-  var state = (0, _overlays.useOverlayTriggerState)({
+  var state = (0, _reactStately.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
   });
   var close = state.close;
-
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-    isOpen: state.isOpen
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isOpen: state.isOpen
+    }),
+    classNames = _useStatusClasses.classNames;
   var handleButtonPress = function handleButtonPress() {
     if (state.isOpen) {
       close(state, triggerRef, close);
@@ -80,18 +56,16 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       state.open();
     }
   };
-
   var handleClose = function handleClose(e) {
     if (e.key === 'Escape') {
       close(state, triggerRef, close);
     }
   };
-
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "collapsiblePanel.collapsiblePanelContainer",
+    variant: "collapsiblePanel.container",
     isRow: true
   }, others), (0, _react2.jsx)(_index.IconButton, {
     isRow: true,
@@ -99,7 +73,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "collapsiblePanelToggle",
+    variant: "toggle",
     pr: "sm"
   }, (0, _react2.jsx)(_index.Icon, {
     color: "active",
@@ -115,16 +89,12 @@ var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pr
 CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-
   /** Defines a string value that labels the trigger icon when menu is open. */
   closeAriaLabel: _propTypes["default"].string,
-
   /** Sets the default open state of the overlay. */
   isDefaultOpen: _propTypes["default"].bool,
-
   /** Whether the overlay is currently open. */
   isOpen: _propTypes["default"].bool,
-
   /**
    * Method that is called when the open state of the menu changes.
    * Returns the new open state and the action that caused the opening of the menu.
@@ -132,7 +102,6 @@ CollapsiblePanelContainer.propTypes = {
    * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
    */
   onOpenChange: _propTypes["default"].func,
-
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: _propTypes["default"].string
 };