@pingux/astro 1.38.1 → 1.39.0-alpha.1

package/lib/cjs/recipes/DatePicker.stories.js

@@ -134,7 +134,7 @@ var Default = function Default() {
         ref: triggerRef
       }, triggerProps), (0, _react2.jsx)(_index.Icon, {
         icon: _CalendarIcon["default"],
-        size: 20
+        size: "sm"
       }))
     },
     onChange: handleInputChange,

package/lib/cjs/recipes/EditableInput.stories.js

@@ -349,12 +349,14 @@ var EditableControl = function EditableControl(props) {
     variant: confirmBtn.variant,
     sx: sx.editableControlIconButton
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CheckIcon["default"]
+    icon: _CheckIcon["default"],
+    size: "sm"
   })), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": cancelBtn.ariaLabel,
     onPress: handleCancel,
     variant: cancelBtn.variant
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
+    icon: _CloseIcon["default"],
+    size: "sm"
   })));
 };

package/lib/cjs/recipes/LinkedListView.stories.js

@@ -255,7 +255,7 @@ var Default = function Default(_ref) {
       "aria-label": "Menu Button"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _DotsVerticalIcon["default"],
-      size: 16,
+      size: "xs",
       color: "Neutral.40",
       m: "0.61px"
     }))), (0, _react2.jsx)(_index.Menu, {

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -238,7 +238,11 @@ var ListElement = function ListElement(_ref) {
   }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _MoreVertIcon["default"],
+    color: "white",
+    size: "sm"
+  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
     key: "disable"
@@ -247,7 +251,10 @@ var ListElement = function ListElement(_ref) {
   }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, (0, _react2.jsx)(_CloseIcon["default"], null))));
+  }, (0, _react2.jsx)(_index.Icon, {
+    size: "sm",
+    icon: _CloseIcon["default"]
+  }))));
 };
 
 var Default = function Default() {
@@ -308,7 +315,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     color: "white",
-    size: 13
+    size: "xs"
   }))), (0, _react2.jsx)(_index.Text, {
     variant: "bodyWeak"
   }, description, (0, _react2.jsx)(_index.Link, {

package/lib/cjs/recipes/MaskedValue.stories.js

@@ -93,7 +93,8 @@ var Default = function Default(_ref) {
     },
     sx: sx.showHideButton
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
+    icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"],
+    size: "sm"
   }))));
 };
 

package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js

@@ -142,7 +142,7 @@ var Default = function Default() {
     defaultIcon: CustomOffSvg,
     title: "Bidirectional/ Outbound toggle",
     iconProps: {
-      size: 16
+      size: 'xs'
     },
     buttonProps: {
       variant: 'bidirectionalIconButton'
@@ -172,7 +172,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
     sx: sx.iconButton,
@@ -180,7 +180,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "delete icon"
   })))), (0, _react2.jsx)(_Box["default"], {
     sx: sx.outerContainer,
@@ -244,7 +244,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
     sx: sx.iconButton,
@@ -252,7 +252,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
     sx: sx.actionIcon,
-    size: 20,
+    size: "sm",
     title: "delete icon"
   })))));
 };

package/lib/cjs/recipes/PageHeader.stories.js

@@ -64,7 +64,7 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
     color: "white",
-    size: 13
+    size: "xs"
   }))), (0, _react2.jsx)(_index.Text, {
     variant: "bodyWeak"
   }, description)));

package/lib/cjs/recipes/PanelHeader.stories.js

@@ -76,7 +76,7 @@ var Default = function Default() {
     "aria-label": "Menu Button"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _DotsVerticalIcon["default"],
-    size: 16.8,
+    size: "xs",
     color: "Neutral.40",
     m: "0.61px"
   })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_index.Item, {
@@ -93,7 +93,7 @@ var Default = function Default() {
     mx: "10px"
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _CloseIcon["default"],
-    size: 16.8,
+    size: "xs",
     color: "Neutral.40",
     m: "0.61px"
   }))));

package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js

@@ -113,7 +113,8 @@ var Default = function Default() {
       onPress: onPress,
       "aria-label": "close icon button"
     }, (0, _react2.jsx)(_index.Icon, {
-      icon: _CloseIcon["default"]
+      icon: _CloseIcon["default"],
+      size: "sm"
     }))), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
       sx: titleSx,
       mb: "xs"

package/lib/cjs/recipes/ScrollableListView.stories.js

@@ -137,12 +137,16 @@ var Default = function Default(_ref) {
       isRow: true,
       alignSelf: "center"
     }, (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "create-icon",
-      size: 20
-    }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "create-icon",
-      size: 20
-    }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
+      "aria-label": "create-icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _CreateIcon["default"],
+      size: "sm"
+    })), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create-icon"
+    }, (0, _react2.jsx)(_index.Icon, {
+      icon: _MoreVertIcon["default"],
+      size: "sm"
+    })))));
   })));
 };
 

package/lib/cjs/recipes/TrialExperienceIndustryButtons.stories.js

@@ -680,11 +680,11 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
-    size: 22,
     variant: "modalCloseButton",
     onPress: state.close
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CloseIcon["default"]
+    icon: _CloseIcon["default"],
+    size: "sm"
   })), (0, _react2.jsx)(_index.Text, {
     sx: sx.headingTextStyle
   }, "Choose Your Industry"), (0, _react2.jsx)(_index.Text, {

package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js

@@ -302,7 +302,7 @@ var LinkRow = function LinkRow(props) {
     "aria-label": "completed step icon indicator"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
-    size: isSelected ? '20px' : '18px',
+    size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
   }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
     sx: sx.linkRowSeparator,

package/lib/cjs/styles/templates/Nav/HeaderBar.js

@@ -50,7 +50,7 @@ var CustomPopoverMenu = function CustomPopoverMenu() {
     "aria-label": "default icon button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _MenuDownIcon["default"],
-    size: 15,
+    size: "xs",
     color: "neutral.30",
     sx: isOpen ? {
       transform: 'rotate(180deg)'

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+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 base = {
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: 'text.secondary',
+  fontSize: 'md',
+  p: '15px 12px 15px 0',
+  width: '600px'
+};
+
+var error = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'critical.bright'
+});
+
+var success = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'success.bright'
+});
+
+var warning = _objectSpread(_objectSpread({}, base), {}, {
+  borderColor: 'warning.bright'
+});
+
+var _default = {
+  base: base,
+  error: error,
+  success: success,
+  warning: warning
+};
+exports["default"] = _default;

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

@@ -445,9 +445,12 @@ var chipDeleteStandard = {
 };
 
 var chipDeleteButton = _objectSpread(_objectSpread({}, chipDeleteStandard), {}, {
-  '&.is-focused, &.is-hovered': _objectSpread({
+  '&.is-focused': _objectSpread({
     bg: 'accent.40'
   }, focusWithCroppedOutline),
+  '&.is-hovered': {
+    bg: 'accent.40'
+  },
   '&.is-pressed': {
     bg: 'accent.20',
     borderColor: 'accent.20'

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

@@ -76,6 +76,8 @@ 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); }
@@ -89,6 +91,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var _default = _objectSpread(_objectSpread({
   accordion: _accordion["default"],
   boxes: _boxes["default"],
+  bulletin: _bulletin["default"],
   codeView: _codeView["default"],
   images: _images["default"],
   imageUpload: _imageUpload["default"],

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

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import CreateIcon from 'mdi-react/CreateIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import { Box, IconButton, Text, Separator, Link, TextField } from '../../index';
+import { Box, IconButton, Icon, Text, Separator, Link, TextField } from '../../index';
 import AccordionGridGroup from './AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var data = [{
@@ -120,18 +120,20 @@ var Header = function Header(props) {
   }, ___EmotionJSX(IconButton, {
     "aria-label": "create-icon",
     sx: {
-      mr: '4px',
-      height: '26px',
-      width: '26px'
+      mr: '4px'
     }
-  }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: "sm"
+  })), ___EmotionJSX(IconButton, {
     "aria-label": "vertical-lines-icon",
     sx: {
-      mr: '4px',
-      height: '26px',
-      width: '26px'
+      mr: '4px'
     }
-  }, ___EmotionJSX(MoreVertIcon, null)))));
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: "sm"
+  })))));
 };
 
 var Body = function Body(props) {

package/lib/components/Bulletin/Bulletin.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["children", "status"];
+
+var _bulletinProps;
+
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import PropTypes from 'prop-types';
+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, {
+  color: 'text.secondary',
+  variant: 'bulletin.base'
+}), _defineProperty(_bulletinProps, statuses.ERROR, {
+  color: 'critical.bright',
+  variant: 'bulletin.error'
+}), _defineProperty(_bulletinProps, statuses.SUCCESS, {
+  color: 'success.bright',
+  variant: 'bulletin.success'
+}), _defineProperty(_bulletinProps, statuses.WARNING, {
+  color: 'warning.bright',
+  variant: 'bulletin.warning'
+}), _bulletinProps);
+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
+ 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.
+ */
+
+var Bulletin = function Bulletin(_ref) {
+  var children = _ref.children,
+      status = _ref.status,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    "data-testid": BULLETIN_TEST_ID,
+    isRow: true,
+    role: "note",
+    variant: bulletinProps[status].variant
+  }, others), ___EmotionJSX(NoticeIcon, _extends({
+    color: bulletinProps[status].color,
+    status: status,
+    "aria-label": "".concat(status, "-icon")
+  }, defaultIconProps)), children);
+};
+
+Bulletin.propTypes = {
+  /** Determines the icon and color  */
+  status: PropTypes.oneOf(_Object$values(statuses))
+};
+Bulletin.defaultProps = {
+  status: statuses.DEFAULT
+};
+Bulletin.displayName = 'Bulletin';
+export default Bulletin;

package/lib/components/Bulletin/Bulletin.stories.js

@@ -0,0 +1,59 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import React from 'react';
+import { Link, Text } 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,
+  argTypes: {
+    status: {
+      control: {
+        type: 'select',
+        options: _Object$values(statuses)
+      }
+    }
+  }
+}; // 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, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.DEFAULT, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};
+export var ErrorStatus = function ErrorStatus() {
+  return ___EmotionJSX(Bulletin, {
+    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"),
+    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, {
+    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"),
+    variant: "app"
+  }, " Read More")));
+};
+export var Warning = function Warning() {
+  return ___EmotionJSX(Bulletin, {
+    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, {
+    href: "https://pingidentity.com",
+    target: "_blank",
+    "aria-label": "".concat(statuses.WARNING, "-bulletin"),
+    variant: "app"
+  }, " Read More")));
+};

package/lib/components/Bulletin/Bulletin.test.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+var _testColors;
+
+import React from 'react';
+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 { 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));
+};
+
+describe('Bulletin', function () {
+  test('renders', function () {
+    getComponent();
+    screen.getByText(TEST_TEXT);
+  });
+  test('renders the default color', function () {
+    getComponent();
+    expect(screen.getByTestId(BULLETIN_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) {
+    getComponent({
+      status: status
+    });
+    expect(screen.getByTestId(BULLETIN_TEST_ID)).toHaveStyle({
+      'border-color': expected
+    });
+  });
+  test.each([[statuses.DEFAULT, noticeIcons[statuses.DEFAULT].testid], [statuses.ERROR, noticeIcons[statuses.ERROR].testid], [statuses.SUCCESS, noticeIcons[statuses.SUCCESS].testid], [statuses.WARNING, noticeIcons[statuses.WARNING].testid]])('when given status %s it renders %s', function (status, icon) {
+    getComponent({
+      status: status
+    });
+    screen.getByTestId(icon);
+  });
+});

package/lib/components/Bulletin/index.js

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

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

@@ -207,7 +207,7 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
     }
   }, ___EmotionJSX(Icon, {
     icon: Clear,
-    size: 20
+    size: "sm"
   }))))), ___EmotionJSX(Box, {
     pl: "md",
     pt: "25px"

package/lib/components/ComboBox/ComboBoxInput.js

@@ -104,7 +104,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
 
   usePropWarning(props, 'disabled', 'isDisabled');
 
-  var button = ___EmotionJSX(Box, {
+  var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
     variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
     _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -59,6 +59,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
       inputValue = props.inputValue,
+      isReadOnly = props.isReadOnly,
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
@@ -135,7 +136,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    defaultItems: defaultItems,
+    defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
@@ -206,7 +207,16 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth: menuWidth
   });
 
-  var listbox = ___EmotionJSX(FocusScope, {
+  var listBox = !isReadOnly && ___EmotionJSX(PopoverContainer, {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
+  }, ___EmotionJSX(FocusScope, {
     restoreFocus: true
   }, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
@@ -222,7 +232,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelectedOnPressUp: shouldSelectOnPressUp
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
-  }));
+  })));
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
     isOpen: state.isOpen,
@@ -234,16 +244,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef: buttonRef,
     controlProps: controlProps,
     "aria-invalid": status === 'error' && true
-  })), ___EmotionJSX(PopoverContainer, {
-    hasNoArrow: true,
-    isDismissable: true,
-    isNonModal: true,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
-  }, listbox));
+  })), listBox);
 });
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -478,6 +478,17 @@ export var HelperText = function HelperText() {
     }, item.name);
   }));
 };
+export var ReadOnly = function ReadOnly() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    isReadOnly: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var Required = function Required() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",