@pingux/astro 1.40.0-alpha.0 → 1.40.1-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.40.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.39.2...@pingux/astro@1.40.0) (2023-01-17)
+
+
+### Bug Fixes
+
+* [UIP-5988] Badge Variant Path Updates ([053d1b5](https://gitlab.corp.pingidentity.com/ux/pingux/commit/053d1b5a3273864ad095f5585af4125c02bb632a))
+
+
+### Features
+
+* [UIP-5987] Custom scrollbar colors for NavBar ([8a144ae](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8a144aef93c4fbd1ccc5c8a06304b7cff2e5482f))
+
+
+
+
+
 ## [1.39.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.39.1...@pingux/astro@1.39.2) (2023-01-12)
 
 

package/lib/cjs/components/{Bulletin/Bulletin.js → Callout/Callout.js}

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.BULLETIN_TEST_ID = void 0;
+exports["default"] = exports.CALLOUT_TEST_ID = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
@@ -32,62 +32,62 @@ var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "status"];
 
-var _bulletinProps;
+var _calloutProps;
 
-var BULLETIN_TEST_ID = 'bulletinTestId';
-exports.BULLETIN_TEST_ID = BULLETIN_TEST_ID;
-var bulletinProps = (_bulletinProps = {}, (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].DEFAULT, {
+var CALLOUT_TEST_ID = 'CalloutTestId';
+exports.CALLOUT_TEST_ID = CALLOUT_TEST_ID;
+var calloutProps = (_calloutProps = {}, (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].DEFAULT, {
   color: 'text.secondary',
-  variant: 'bulletin.base'
-}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].ERROR, {
+  variant: 'callout.base'
+}), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].ERROR, {
   color: 'critical.bright',
-  variant: 'bulletin.error'
-}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].SUCCESS, {
+  variant: 'callout.error'
+}), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].SUCCESS, {
   color: 'success.bright',
-  variant: 'bulletin.success'
-}), (0, _defineProperty2["default"])(_bulletinProps, _statuses["default"].WARNING, {
+  variant: 'callout.success'
+}), (0, _defineProperty2["default"])(_calloutProps, _statuses["default"].WARNING, {
   color: 'warning.bright',
-  variant: 'bulletin.warning'
-}), _bulletinProps);
+  variant: 'callout.warning'
+}), _calloutProps);
 var defaultIconProps = {
   mr: 'md',
   ml: 'md',
   size: 'md'
 };
 /**
- *Bulletin is composed of the Box, Icon, and Text components. It's a persistent component
- that should be placed at the top of panels or above related content. If the Bulletins
+ *Callout is composed of the Box, Icon, and Text components. It's a persistent component
+ that should be placed at the top of panels or above related content. If the Callouts
  status is error or warning, the text should include a direct link to instructions on resolving the
  issue or error.
  *
- *Please note, Bulletin is a static component, the [Messages](./?path=/docs/messages) component is
- recommended if you need to interrupt and notify users of successful/failed actions or
- give warnings of unexpected events.
+ *Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
+ component is recommended if you need to interrupt and notify users of successful/failed actions
+ or give warnings of unexpected events.
  */
 
-var Bulletin = function Bulletin(_ref) {
+var Callout = function Callout(_ref) {
   var children = _ref.children,
       status = _ref.status,
       others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    "data-testid": BULLETIN_TEST_ID,
+    "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: bulletinProps[status].variant
+    variant: calloutProps[status].variant
   }, others), (0, _react2.jsx)(_NoticeIcon.NoticeIcon, (0, _extends2["default"])({
-    color: bulletinProps[status].color,
+    color: calloutProps[status].color,
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
 
-Bulletin.propTypes = {
+Callout.propTypes = {
   /** Determines the icon and color  */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
 };
-Bulletin.defaultProps = {
+Callout.defaultProps = {
   status: _statuses["default"].DEFAULT
 };
-Bulletin.displayName = 'Bulletin';
-var _default = Bulletin;
+Callout.displayName = 'Callout';
+var _default = Callout;
 exports["default"] = _default;

package/lib/cjs/components/{Bulletin/Bulletin.stories.js → Callout/Callout.stories.js}

@@ -18,13 +18,11 @@ var _ = require("../..");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
-var _Bulletin = _interopRequireDefault(require("./Bulletin"));
-
 var _react2 = require("@emotion/react");
 
 var _default = {
-  title: 'Bulletin',
-  component: _Bulletin["default"],
+  title: 'Components/Callout',
+  component: _.Callout,
   argTypes: {
     status: {
       control: {
@@ -38,10 +36,10 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_Bulletin["default"], args, (0, _react2.jsx)(_.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_.Link, {
+  return (0, _react2.jsx)(_.Callout, args, (0, _react2.jsx)(_.Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].DEFAULT, "-bulletin"),
+    "aria-label": "".concat(_statuses["default"].DEFAULT, "-callout"),
     variant: "app"
   }, " Read More")));
 };
@@ -49,12 +47,12 @@ var Default = function Default(args) {
 exports.Default = Default;
 
 var ErrorStatus = function ErrorStatus() {
-  return (0, _react2.jsx)(_Bulletin["default"], {
+  return (0, _react2.jsx)(_.Callout, {
     status: _statuses["default"].ERROR
   }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].ERROR, "-bulletin"),
+    "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
     variant: "app"
   }, " Read More")));
 }; // Avoiding using Error as the function name due to it being a JS built-in method
@@ -64,12 +62,12 @@ exports.ErrorStatus = ErrorStatus;
 ErrorStatus.storyName = 'Error';
 
 var Success = function Success() {
-  return (0, _react2.jsx)(_Bulletin["default"], {
+  return (0, _react2.jsx)(_.Callout, {
     status: _statuses["default"].SUCCESS
   }, (0, _react2.jsx)(_.Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].SUCCESS, "-bulletin"),
+    "aria-label": "".concat(_statuses["default"].SUCCESS, "-callout"),
     variant: "app"
   }, " Read More")));
 };
@@ -77,12 +75,12 @@ var Success = function Success() {
 exports.Success = Success;
 
 var Warning = function Warning() {
-  return (0, _react2.jsx)(_Bulletin["default"], {
+  return (0, _react2.jsx)(_.Callout, {
     status: _statuses["default"].WARNING
-  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Bulletin box will grow in height with the content", (0, _react2.jsx)(_.Link, {
+  }, (0, _react2.jsx)(_.Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", (0, _react2.jsx)(_.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(_statuses["default"].WARNING, "-bulletin"),
+    "aria-label": "".concat(_statuses["default"].WARNING, "-callout"),
     variant: "app"
   }, " Read More")));
 };

package/lib/cjs/components/{Bulletin/Bulletin.test.js → Callout/Callout.test.js}

@@ -22,7 +22,7 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 
 var _NoticeIcon = require("../Icon/NoticeIcon");
 
-var _Bulletin = _interopRequireWildcard(require("./Bulletin"));
+var _Callout = _interopRequireWildcard(require("./Callout"));
 
 var _react3 = require("@emotion/react");
 
@@ -37,10 +37,10 @@ var testColors = (_testColors = {}, (0, _defineProperty2["default"])(_testColors
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react3.jsx)(_Bulletin["default"], props, TEST_TEXT));
+  return (0, _testWrapper.render)((0, _react3.jsx)(_Callout["default"], props, TEST_TEXT));
 };
 
-describe('Bulletin', function () {
+describe('Callout', function () {
   test('renders', function () {
     getComponent();
 
@@ -48,15 +48,15 @@ describe('Bulletin', function () {
   });
   test('renders the default color', function () {
     getComponent();
-    expect(_react2.screen.getByTestId(_Bulletin.BULLETIN_TEST_ID)).toHaveStyle({
+    expect(_react2.screen.getByTestId(_Callout.CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': testColors[_statuses["default"].DEFAULT]
     });
   });
-  test.each([[_statuses["default"].DEFAULT, testColors[_statuses["default"].DEFAULT]], [_statuses["default"].ERROR, testColors[_statuses["default"].ERROR]], [_statuses["default"].SUCCESS, testColors[_statuses["default"].SUCCESS]], [_statuses["default"].WARNING, testColors[_statuses["default"].WARNING]]])('when given status %s it renders Bulletin with color %s', function (status, expected) {
+  test.each([[_statuses["default"].DEFAULT, testColors[_statuses["default"].DEFAULT]], [_statuses["default"].ERROR, testColors[_statuses["default"].ERROR]], [_statuses["default"].SUCCESS, testColors[_statuses["default"].SUCCESS]], [_statuses["default"].WARNING, testColors[_statuses["default"].WARNING]]])('when given status %s it renders Callout with color %s', function (status, expected) {
     getComponent({
       status: status
     });
-    expect(_react2.screen.getByTestId(_Bulletin.BULLETIN_TEST_ID)).toHaveStyle({
+    expect(_react2.screen.getByTestId(_Callout.CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': expected
     });
   });

package/lib/cjs/components/{Bulletin → Callout}/index.js

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _Bulletin["default"];
+    return _Callout["default"];
   }
 });
 
-var _Bulletin = _interopRequireDefault(require("./Bulletin"));
+var _Callout = _interopRequireDefault(require("./Callout"));

package/lib/cjs/components/CopyText/CopyText.js

@@ -186,7 +186,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: pressableRef
   }, (0, _utils.mergeProps)(hoverProps, pressableProps), {
     sx: {
-      width: 'min-content'
+      width: 'fit-content'
     }
   }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -145,22 +145,21 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
     var nodeArr = (0, _from["default"])(iterableNode); // with this function we are filtering child items if they have sections
     // we can't filter items because if it would be a section - we can't change childNodes
-    // eslint-disable-next-line array-callback-return,consistent-return
 
     var filteredSections = (0, _map["default"])(nodeArr).call(nodeArr, function f(nodeItem) {
+      var _context;
+
       if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'item') {
         var _nodeItem$value;
 
-        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) ? nodeItem : null;
+        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) && nodeItem;
       }
 
-      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'section') {
-        var _context;
+      var childNodes = (0, _filter["default"])(_context = (0, _from["default"])(nodeItem.childNodes)).call(_context, f); // Don't return sections without children, see UIP-5951
 
-        return _objectSpread(_objectSpread({}, nodeItem), {}, {
-          childNodes: (0, _filter["default"])(_context = (0, _from["default"])(nodeItem.childNodes)).call(_context, f)
-        });
-      }
+      return childNodes.length !== 0 && _objectSpread(_objectSpread({}, nodeItem), {}, {
+        childNodes: childNodes
+      });
     }); // we are filtering null items here since we were not able to filter them in previous function
 
     return (0, _filter["default"])(filteredSections).call(filteredSections, function (item) {

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

@@ -8,7 +8,7 @@ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/ins
 
 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 _forEachInstanceProperty2 = 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");
 
@@ -20,6 +20,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -44,7 +48,7 @@ var _react2 = require("@emotion/react");
 
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
@@ -66,6 +70,15 @@ var itemsWithSections = [{
   }, {
     name: 'Baz'
   }]
+}, {
+  name: 'Heading 2',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Zod'
+  }, {
+    name: 'Zay'
+  }]
 }];
 var defaultProps = {
   'data-testid': testEnvBreadcrumb,
@@ -106,11 +119,13 @@ var getSectionsComponent = function getSectionsComponent() {
     return (// eslint-disable-next-line testing-library/no-node-access
       (0, _react2.jsx)(_collections.Section, {
         key: section.name,
-        name: section.name,
+        title: section.name,
         items: section.options
       }, function (item) {
+        var _context;
+
         return (0, _react2.jsx)(_index.Item, {
-          key: item.name,
+          key: (0, _concat["default"])(_context = "".concat(section.name, "-")).call(_context, item.name),
           childItems: item.options
         }, item.name);
       })
@@ -199,9 +214,9 @@ test('should not call onNamePress when current env button pressed', function ()
   expect(onNamePressMock).not.toHaveBeenCalled();
 });
 test('should render items passed in props', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  return _regenerator["default"].wrap(function _callee$(_context) {
+  return _regenerator["default"].wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
           expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -214,7 +229,7 @@ test('should render items passed in props', /*#__PURE__*/(0, _asyncToGenerator2[
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
@@ -226,9 +241,23 @@ test('should render items with sections passed in props', function () {
 
   _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
 
-  expect(_testWrapper.screen.getByRole('group')).toBeInTheDocument();
+  var groups = _testWrapper.screen.getAllByRole('group');
+
+  expect(groups).toHaveLength(2);
   expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(6);
+  (0, _forEach["default"])(groups).call(groups, function (group, index) {
+    var _context3;
+
+    expect(function () {
+      return (0, _testWrapper.within)(group).getByText(itemsWithSections[index].name);
+    });
+    (0, _forEach["default"])(_context3 = itemsWithSections[index].options).call(_context3, function (opt) {
+      return expect(function () {
+        return (0, _testWrapper.within)(group).getByText(opt.name);
+      });
+    });
+  });
 });
 test('should call onSelectionChange when env clicked', function () {
   var onSelectionChangeMock = jest.fn();
@@ -313,22 +342,22 @@ test('should show empty state in search if there are no results', function () {
 test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var _getComponent, container, results;
 
-  return _regenerator["default"].wrap(function _callee2$(_context2) {
+  return _regenerator["default"].wrap(function _callee2$(_context4) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context2.next = 4;
+          _context4.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context2.sent;
+          results = _context4.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context2.stop();
+          return _context4.stop();
       }
     }
   }, _callee2);
@@ -373,4 +402,16 @@ test('should add data-id to dropdown list', function () {
   expect(_testWrapper.screen.getByRole('listbox', {
     name: 'Items List'
   })).toHaveAttribute('data-id', _EnvironmentBreadcrumb.breadCrumbDataIds.dropdownList);
+});
+test('should hide section title if no search results within it', function () {
+  getSectionsComponent(); // Open popover
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem)); // Search for option exclusive to only one section
+
+
+  _userEvent["default"].type(_testWrapper.screen.getByRole('searchbox'), 'Zod'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
+
+
+  expect(_testWrapper.screen.queryByText(itemsWithSections[0].name)).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText(itemsWithSections[1].name)).toBeInTheDocument();
 });

package/lib/cjs/index.js

@@ -33,6 +33,7 @@ var _exportNames = {
   Bracket: true,
   Breadcrumbs: true,
   Bulletin: true,
+  Callout: true,
   Button: true,
   Card: true,
   Checkbox: true,
@@ -197,7 +198,7 @@ _Object$defineProperty(exports, "Breadcrumbs", {
 _Object$defineProperty(exports, "Bulletin", {
   enumerable: true,
   get: function get() {
-    return _Bulletin["default"];
+    return _Callout["default"];
   }
 });
 
@@ -208,6 +209,13 @@ _Object$defineProperty(exports, "Button", {
   }
 });
 
+_Object$defineProperty(exports, "Callout", {
+  enumerable: true,
+  get: function get() {
+    return _Callout["default"];
+  }
+});
+
 _Object$defineProperty(exports, "Card", {
   enumerable: true,
   get: function get() {
@@ -927,17 +935,17 @@ _forEachInstanceProperty(_context10 = _Object$keys(_Breadcrumbs)).call(_context1
   });
 });
 
-var _Bulletin = _interopRequireWildcard(require("./components/Bulletin"));
+var _Callout = _interopRequireWildcard(require("./components/Callout"));
 
-_forEachInstanceProperty(_context11 = _Object$keys(_Bulletin)).call(_context11, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_Callout)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Bulletin[key]) return;
+  if (key in exports && exports[key] === _Callout[key]) return;
 
   _Object$defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Bulletin[key];
+      return _Callout[key];
     }
   });
 });

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

@@ -240,7 +240,8 @@ var textFieldInContainerSlot = {
 };
 var copy = {
   alignItems: 'center',
-  width: 'max-content',
+  wordBreak: 'break-all',
+  overflowWrap: 'break-word',
   '& .is-focused': {
     outline: '1px solid',
     outlineColor: 'active',

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

@@ -34,26 +34,32 @@ var _accordion = _interopRequireDefault(require("./accordion"));
 
 var _boxes = _interopRequireDefault(require("./boxes"));
 
+var _callout = _interopRequireDefault(require("./callout"));
+
 var _codeView = _interopRequireDefault(require("./codeView"));
 
-var _images = _interopRequireDefault(require("./images"));
+var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
+
+var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
 
 var _imageUpload = _interopRequireDefault(require("./imageUpload"));
 
+var _images = _interopRequireDefault(require("./images"));
+
 var _links = _interopRequireDefault(require("./links"));
 
 var _listBox = _interopRequireDefault(require("./listBox"));
 
 var _loader = _interopRequireDefault(require("./loader"));
 
-var _modal = _interopRequireDefault(require("./modal"));
-
 var _menu = _interopRequireDefault(require("./menu"));
 
 var _menuItem = _interopRequireDefault(require("./menuItem"));
 
 var _messages = _interopRequireDefault(require("./messages"));
 
+var _modal = _interopRequireDefault(require("./modal"));
+
 var _navBar = _interopRequireDefault(require("./navBar"));
 
 var _numberField = _interopRequireDefault(require("./numberField"));
@@ -74,12 +80,6 @@ var tabs = _interopRequireWildcard(require("./tabs"));
 
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 
-var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
-
-var _bulletin = _interopRequireDefault(require("./bulletin"));
-
-var _DataTable = _interopRequireDefault(require("./../../components/DataTable/DataTable.styles"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -88,21 +88,22 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 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 _default = _objectSpread(_objectSpread({
+var _default = _objectSpread(_objectSpread({}, tabs), {}, {
   accordion: _accordion["default"],
   boxes: _boxes["default"],
-  bulletin: _bulletin["default"],
+  callout: _callout["default"],
   codeView: _codeView["default"],
-  images: _images["default"],
+  collapsiblePanel: _collapsiblePanel["default"],
+  dataTable: _DataTable["default"],
   imageUpload: _imageUpload["default"],
-  loader: _loader["default"],
+  images: _images["default"],
   links: _links["default"],
   listBox: _listBox["default"],
+  loader: _loader["default"],
   menu: _menu["default"],
   menuItem: _menuItem["default"],
   messages: _messages["default"],
   modal: _modal["default"],
-  collapsiblePanel: _collapsiblePanel["default"],
   navBar: _navBar["default"],
   numberField: _numberField["default"],
   overlayPanel: _overlayPanel["default"],
@@ -110,10 +111,8 @@ var _default = _objectSpread(_objectSpread({
   rockerbutton: _rockerbutton["default"],
   separator: _separator["default"],
   stepper: _stepper["default"],
-  table: _table["default"]
-}, tabs), {}, {
-  tooltip: _tooltip["default"],
-  dataTable: _DataTable["default"]
+  table: _table["default"],
+  tooltip: _tooltip["default"]
 });
 
 exports["default"] = _default;

package/lib/components/{Bulletin/Bulletin.js → Callout/Callout.js}

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children", "status"];
 
-var _bulletinProps;
+var _calloutProps;
 
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
@@ -12,59 +12,59 @@ import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { NoticeIcon } from '../Icon/NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var BULLETIN_TEST_ID = 'bulletinTestId';
-var bulletinProps = (_bulletinProps = {}, _defineProperty(_bulletinProps, statuses.DEFAULT, {
+export var CALLOUT_TEST_ID = 'CalloutTestId';
+var calloutProps = (_calloutProps = {}, _defineProperty(_calloutProps, statuses.DEFAULT, {
   color: 'text.secondary',
-  variant: 'bulletin.base'
-}), _defineProperty(_bulletinProps, statuses.ERROR, {
+  variant: 'callout.base'
+}), _defineProperty(_calloutProps, statuses.ERROR, {
   color: 'critical.bright',
-  variant: 'bulletin.error'
-}), _defineProperty(_bulletinProps, statuses.SUCCESS, {
+  variant: 'callout.error'
+}), _defineProperty(_calloutProps, statuses.SUCCESS, {
   color: 'success.bright',
-  variant: 'bulletin.success'
-}), _defineProperty(_bulletinProps, statuses.WARNING, {
+  variant: 'callout.success'
+}), _defineProperty(_calloutProps, statuses.WARNING, {
   color: 'warning.bright',
-  variant: 'bulletin.warning'
-}), _bulletinProps);
+  variant: 'callout.warning'
+}), _calloutProps);
 var defaultIconProps = {
   mr: 'md',
   ml: 'md',
   size: 'md'
 };
 /**
- *Bulletin is composed of the Box, Icon, and Text components. It's a persistent component
- that should be placed at the top of panels or above related content. If the Bulletins
+ *Callout is composed of the Box, Icon, and Text components. It's a persistent component
+ that should be placed at the top of panels or above related content. If the Callouts
  status is error or warning, the text should include a direct link to instructions on resolving the
  issue or error.
  *
- *Please note, Bulletin is a static component, the [Messages](./?path=/docs/messages) component is
- recommended if you need to interrupt and notify users of successful/failed actions or
- give warnings of unexpected events.
+ *Please note, Callout is a static component, the [Messages](./?path=/docs/components-messages)
+ component is recommended if you need to interrupt and notify users of successful/failed actions
+ or give warnings of unexpected events.
  */
 
-var Bulletin = function Bulletin(_ref) {
+var Callout = function Callout(_ref) {
   var children = _ref.children,
       status = _ref.status,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(Box, _extends({
-    "data-testid": BULLETIN_TEST_ID,
+    "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
-    variant: bulletinProps[status].variant
+    variant: calloutProps[status].variant
   }, others), ___EmotionJSX(NoticeIcon, _extends({
-    color: bulletinProps[status].color,
+    color: calloutProps[status].color,
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
 };
 
-Bulletin.propTypes = {
+Callout.propTypes = {
   /** Determines the icon and color  */
   status: PropTypes.oneOf(_Object$values(statuses))
 };
-Bulletin.defaultProps = {
+Callout.defaultProps = {
   status: statuses.DEFAULT
 };
-Bulletin.displayName = 'Bulletin';
-export default Bulletin;
+Callout.displayName = 'Callout';
+export default Callout;

package/lib/components/{Bulletin/Bulletin.stories.js → Callout/Callout.stories.js}

@@ -1,12 +1,11 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
-import { Link, Text } from '../..';
+import { Link, Text, Callout } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
-import Bulletin from './Bulletin';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Bulletin',
-  component: Bulletin,
+  title: 'Components/Callout',
+  component: Callout,
   argTypes: {
     status: {
       control: {
@@ -18,42 +17,42 @@ export default {
 }; // main
 
 export var Default = function Default(args) {
-  return ___EmotionJSX(Bulletin, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
+  return ___EmotionJSX(Callout, args, ___EmotionJSX(Text, null, "You should be aware of this. It might be good or bad, I don\u2019t know. You may already be aware of it, but I want to be sure", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.DEFAULT, "-bulletin"),
+    "aria-label": "".concat(statuses.DEFAULT, "-callout"),
     variant: "app"
   }, " Read More")));
 };
 export var ErrorStatus = function ErrorStatus() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.ERROR
   }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.ERROR, "-bulletin"),
+    "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, " Read More")));
 }; // Avoiding using Error as the function name due to it being a JS built-in method
 
 ErrorStatus.storyName = 'Error';
 export var Success = function Success() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.SUCCESS
   }, ___EmotionJSX(Text, null, "It Worked! Maybe there is something else related to it working that I need to explain", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.SUCCESS, "-bulletin"),
+    "aria-label": "".concat(statuses.SUCCESS, "-callout"),
     variant: "app"
   }, " Read More")));
 };
 export var Warning = function Warning() {
-  return ___EmotionJSX(Bulletin, {
+  return ___EmotionJSX(Callout, {
     status: statuses.WARNING
-  }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Bulletin box will grow in height with the content", ___EmotionJSX(Link, {
+  }, ___EmotionJSX(Text, null, "You\u2019ve got issues. Allow me to tell you about them in some detail so that you can address them. I\u2019ll continue to type enough text to demonstrate that the Callout box will grow in height with the content", ___EmotionJSX(Link, {
     href: "https://pingidentity.com",
     target: "_blank",
-    "aria-label": "".concat(statuses.WARNING, "-bulletin"),
+    "aria-label": "".concat(statuses.WARNING, "-callout"),
     variant: "app"
   }, " Read More")));
 };

package/lib/components/{Bulletin/Bulletin.test.js → Callout/Callout.test.js}

@@ -7,32 +7,32 @@ import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
 import { noticeIcons } from '../Icon/NoticeIcon';
-import Bulletin, { BULLETIN_TEST_ID } from './Bulletin';
+import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Bulletin, props, TEST_TEXT));
+  return render(___EmotionJSX(Callout, props, TEST_TEXT));
 };
 
-describe('Bulletin', function () {
+describe('Callout', function () {
   test('renders', function () {
     getComponent();
     screen.getByText(TEST_TEXT);
   });
   test('renders the default color', function () {
     getComponent();
-    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+    expect(screen.getByTestId(CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': testColors[statuses.DEFAULT]
     });
   });
-  test.each([[statuses.DEFAULT, testColors[statuses.DEFAULT]], [statuses.ERROR, testColors[statuses.ERROR]], [statuses.SUCCESS, testColors[statuses.SUCCESS]], [statuses.WARNING, testColors[statuses.WARNING]]])('when given status %s it renders Bulletin with color %s', function (status, expected) {
+  test.each([[statuses.DEFAULT, testColors[statuses.DEFAULT]], [statuses.ERROR, testColors[statuses.ERROR]], [statuses.SUCCESS, testColors[statuses.SUCCESS]], [statuses.WARNING, testColors[statuses.WARNING]]])('when given status %s it renders Callout with color %s', function (status, expected) {
     getComponent({
       status: status
     });
-    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+    expect(screen.getByTestId(CALLOUT_TEST_ID)).toHaveStyle({
       'border-color': expected
     });
   });

package/lib/components/Callout/index.js

@@ -0,0 +1 @@
+export { default } from './Callout';

package/lib/components/CopyText/CopyText.js

@@ -154,7 +154,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: pressableRef
   }, mergeProps(hoverProps, pressableProps), {
     sx: {
-      width: 'min-content'
+      width: 'fit-content'
     }
   }), ___EmotionJSX(Box, _extends({
     ref: ref,

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -88,23 +88,23 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var filterNodesWithChildren = function filterNodesWithChildren(iterableNode) {
     var nodeArr = _Array$from(iterableNode); // with this function we are filtering child items if they have sections
     // we can't filter items because if it would be a section - we can't change childNodes
-    // eslint-disable-next-line array-callback-return,consistent-return
 
 
     var filteredSections = _mapInstanceProperty(nodeArr).call(nodeArr, function f(nodeItem) {
+      var _context;
+
       if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'item') {
         var _nodeItem$value;
 
-        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) ? nodeItem : null;
+        return contains(nodeItem === null || nodeItem === void 0 ? void 0 : (_nodeItem$value = nodeItem.value) === null || _nodeItem$value === void 0 ? void 0 : _nodeItem$value.name, searchValue) && nodeItem;
       }
 
-      if ((nodeItem === null || nodeItem === void 0 ? void 0 : nodeItem.type) === 'section') {
-        var _context;
+      var childNodes = _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f); // Don't return sections without children, see UIP-5951
 
-        return _objectSpread(_objectSpread({}, nodeItem), {}, {
-          childNodes: _filterInstanceProperty(_context = _Array$from(nodeItem.childNodes)).call(_context, f)
-        });
-      }
+
+      return childNodes.length !== 0 && _objectSpread(_objectSpread({}, nodeItem), {}, {
+        childNodes: childNodes
+      });
     }); // we are filtering null items here since we were not able to filter them in previous function
 
 

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -2,7 +2,6 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
@@ -13,13 +12,15 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 
 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
 import { axe } from 'jest-axe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { render, screen, within } from '../../utils/testUtils/testWrapper';
 import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
 import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -43,6 +44,15 @@ var itemsWithSections = [{
   }, {
     name: 'Baz'
   }]
+}, {
+  name: 'Heading 2',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Zod'
+  }, {
+    name: 'Zay'
+  }]
 }];
 var defaultProps = {
   'data-testid': testEnvBreadcrumb,
@@ -83,11 +93,13 @@ var getSectionsComponent = function getSectionsComponent() {
     return (// eslint-disable-next-line testing-library/no-node-access
       ___EmotionJSX(Section, {
         key: section.name,
-        name: section.name,
+        title: section.name,
         items: section.options
       }, function (item) {
+        var _context;
+
         return ___EmotionJSX(Item, {
-          key: item.name,
+          key: _concatInstanceProperty(_context = "".concat(section.name, "-")).call(_context, item.name),
           childItems: item.options
         }, item.name);
       })
@@ -164,9 +176,9 @@ test('should not call onNamePress when current env button pressed', function ()
   expect(onNamePressMock).not.toHaveBeenCalled();
 });
 test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime.wrap(function _callee$(_context2) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context2.prev = _context2.next) {
         case 0:
           getComponent();
           expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -177,7 +189,7 @@ test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#_
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
     }
   }, _callee);
@@ -187,9 +199,24 @@ test('should render items with sections passed in props', function () {
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
   userEvent.click(screen.getByText(testSelectedItem));
-  expect(screen.getByRole('group')).toBeInTheDocument();
+  var groups = screen.getAllByRole('group');
+  expect(groups).toHaveLength(2);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  expect(screen.queryAllByRole('option')).toHaveLength(6);
+
+  _forEachInstanceProperty(groups).call(groups, function (group, index) {
+    var _context3;
+
+    expect(function () {
+      return within(group).getByText(itemsWithSections[index].name);
+    });
+
+    _forEachInstanceProperty(_context3 = itemsWithSections[index].options).call(_context3, function (opt) {
+      return expect(function () {
+        return within(group).getByText(opt.name);
+      });
+    });
+  });
 });
 test('should call onSelectionChange when env clicked', function () {
   var onSelectionChangeMock = jest.fn();
@@ -257,22 +284,22 @@ test('should show empty state in search if there are no results', function () {
 test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var _getComponent, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+  return _regeneratorRuntime.wrap(function _callee2$(_context4) {
     while (1) {
-      switch (_context2.prev = _context2.next) {
+      switch (_context4.prev = _context4.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context2.next = 4;
+          _context4.next = 4;
           return axe(container);
 
         case 4:
-          results = _context2.sent;
+          results = _context4.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context2.stop();
+          return _context4.stop();
       }
     }
   }, _callee2);
@@ -309,4 +336,14 @@ test('should add data-id to dropdown list', function () {
   expect(screen.getByRole('listbox', {
     name: 'Items List'
   })).toHaveAttribute('data-id', breadCrumbDataIds.dropdownList);
+});
+test('should hide section title if no search results within it', function () {
+  getSectionsComponent(); // Open popover
+
+  userEvent.click(screen.getByText(testSelectedItem)); // Search for option exclusive to only one section
+
+  userEvent.type(screen.getByRole('searchbox'), 'Zod'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
+
+  expect(screen.queryByText(itemsWithSections[0].name)).not.toBeInTheDocument();
+  expect(screen.queryByText(itemsWithSections[1].name)).toBeInTheDocument();
 });

package/lib/index.js

@@ -22,8 +22,9 @@ export { default as Bracket } from './components/Bracket';
 export * from './components/Bracket';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
-export { default as Bulletin } from './components/Bulletin';
-export * from './components/Bulletin';
+export { default as Bulletin } from './components/Callout';
+export { default as Callout } from './components/Callout';
+export * from './components/Callout';
 export { default as Button } from './components/Button';
 export * from './components/Button';
 export { default as Card } from './components/Card';

package/lib/styles/variants/boxes.js

@@ -220,7 +220,8 @@ var textFieldInContainerSlot = {
 };
 var copy = {
   alignItems: 'center',
-  width: 'max-content',
+  wordBreak: 'break-all',
+  overflowWrap: 'break-word',
   '& .is-focused': {
     outline: '1px solid',
     outlineColor: 'active',

package/lib/styles/variants/variants.js

@@ -14,16 +14,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import accordion from './accordion';
 import boxes from './boxes';
+import callout from './callout';
 import codeView from './codeView';
-import images from './images';
+import collapsiblePanel from './collapsiblePanel';
+import dataTable from './../../components/DataTable/DataTable.styles';
 import imageUpload from './imageUpload';
+import images from './images';
 import links from './links';
 import listBox from './listBox';
 import loader from './loader';
-import modal from './modal';
 import menu from './menu';
 import menuItem from './menuItem';
 import messages from './messages';
+import modal from './modal';
 import navBar from './navBar';
 import numberField from './numberField';
 import overlayPanel from './overlayPanel';
@@ -34,24 +37,22 @@ import stepper from './stepper';
 import table from './table';
 import * as tabs from './tabs';
 import tooltip from './tooltip';
-import collapsiblePanel from './collapsiblePanel';
-import bulletin from './bulletin';
-import dataTable from './../../components/DataTable/DataTable.styles';
-export default _objectSpread(_objectSpread({
+export default _objectSpread(_objectSpread({}, tabs), {}, {
   accordion: accordion,
   boxes: boxes,
-  bulletin: bulletin,
+  callout: callout,
   codeView: codeView,
-  images: images,
+  collapsiblePanel: collapsiblePanel,
+  dataTable: dataTable,
   imageUpload: imageUpload,
-  loader: loader,
+  images: images,
   links: links,
   listBox: listBox,
+  loader: loader,
   menu: menu,
   menuItem: menuItem,
   messages: messages,
   modal: modal,
-  collapsiblePanel: collapsiblePanel,
   navBar: navBar,
   numberField: numberField,
   overlayPanel: overlayPanel,
@@ -59,8 +60,6 @@ export default _objectSpread(_objectSpread({
   rockerbutton: rockerbutton,
   separator: separator,
   stepper: stepper,
-  table: table
-}, tabs), {}, {
-  tooltip: tooltip,
-  dataTable: dataTable
+  table: table,
+  tooltip: tooltip
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.40.0-alpha.0",
+  "version": "1.40.1-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",

package/lib/components/Bulletin/index.js

@@ -1 +0,0 @@
-export { default } from './Bulletin';