@pingux/astro 1.40.0 → 1.40.1-alpha.1

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;