@pingux/astro 1.1.0-alpha.4 → 1.1.0-alpha.8

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0-alpha.8](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.7...@pingux/astro@1.1.0-alpha.8) (2022-01-24)
+
+
+### Bug Fixes
+
+* [UIP-4995] TextArea Safari resize issue ([33c8af3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/33c8af35fbe82820427b87bdd9ab0744039a6c18))
+
+
+
+
+
+# [1.1.0-alpha.7](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.6...@pingux/astro@1.1.0-alpha.7) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5109] AccordionGroup OverlayPanel Compatibility Fix ([6a78b76](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6a78b76a3c3ab7b9ac78a7dcd6ca74a6449d63c2))
+
+
+
+
+
+# [1.1.0-alpha.6](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.5...@pingux/astro@1.1.0-alpha.6) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5070] Icons for warning and error messages are reversed ([36f0d6e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/36f0d6e1b65662b3c64aa1599012a2967b59e56d))
+
+
+
+
+
+# [1.1.0-alpha.5](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.4...@pingux/astro@1.1.0-alpha.5) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5030] Components shouldn't have a default aria-label ([8927951](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8927951339ef49faa03f5654d9e8f357b136430a))
+
+
+
+
+
 # [1.1.0-alpha.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.3...@pingux/astro@1.1.0-alpha.4) (2022-01-21)
 
 

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

@@ -39,6 +39,22 @@ var getComponent = function getComponent() {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
+};
+
 (0, _testAxe["default"])(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -230,4 +246,12 @@ test('default expanded keys expands an accordion item', function () {
 
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var row = _testWrapper.screen.getAllByRole('row');
+
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

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

@@ -77,7 +77,7 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

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

@@ -106,7 +106,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true
   }, children, (0, _react2.jsx)(_Box["default"], {

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

@@ -20,6 +20,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _AccordionGroup = _interopRequireDefault(require("../AccordionGroup"));
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var testId = 'test-accordion';
@@ -30,6 +32,28 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
@@ -41,7 +65,7 @@ var getComponent = function getComponent() {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
-  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -264,4 +288,12 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -100,12 +100,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  (0, _hooks.useAriaLabelWarning)('AccordionItem', ariaLabel);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',
@@ -122,9 +121,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
-  }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,

package/lib/cjs/components/Button/Button.js

@@ -103,9 +103,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel);
   return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

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

@@ -93,7 +93,8 @@ exports.TextIconButton = TextIconButton;
 var TextButton = function TextButton() {
   return (0, _react2.jsx)(_["default"], {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, (0, _react2.jsx)(_Text["default"], {
     variant: "label",
     color: "active"

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

@@ -18,7 +18,8 @@ var _react2 = require("@emotion/react");
 
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/cjs/components/ColorField/ColorField.js

@@ -149,6 +149,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, label && (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/cjs/components/IconButton/IconButton.js

@@ -115,7 +115,7 @@ var IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

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

@@ -29,7 +29,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -162,10 +163,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(_testWrapper.screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js

@@ -113,7 +113,8 @@ var ImagePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, (0, _utils.mergeProps)(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/cjs/components/ListBox/ListBox.js

@@ -55,8 +55,6 @@ var _ListBoxContext = require("./ListBoxContext");
 
 var _index = require("./index.js");
 
-var _hooks = require("../../hooks");
-
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
@@ -120,12 +118,11 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
-  var ariaLabel = props['aria-label'];
-  (0, _hooks.useAriaLabelWarning)('ListBox', ariaLabel);
+      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -149,7 +146,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails

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

@@ -44,11 +44,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };

package/lib/cjs/components/Messages/Message.js

@@ -53,8 +53,8 @@ var _react2 = require("@emotion/react");
 var icons = {
   "default": _AlertCircleOutlineIcon["default"],
   success: _CheckCircleIcon["default"],
-  error: _AlertCircleOutlineIcon["default"],
-  warning: _AlertCircleIcon["default"]
+  error: _AlertCircleIcon["default"],
+  warning: _AlertCircleOutlineIcon["default"]
 };
 exports.icons = icons;
 

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -352,7 +352,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     hasAutoFocus: hasAutoFocus,
     hasVirtualFocus: true,
     hasNoEmptySelection: true,
-    state: state
+    state: state,
+    "aria-label": "List of options"
   })), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }));

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

@@ -22,8 +22,6 @@ var _collections = require("@react-stately/collections");
 
 var _hooks = require("../../hooks");
 
-var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
 
 var _index = require("../../index");
@@ -66,15 +64,18 @@ var Default = function Default(_ref) {
   var state = (0, _hooks.useOverlayPanelState)();
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen
-    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
-    }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_collections.Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, (0, _react2.jsx)(_index.Text, null, "Render me!"))))))
   );
 };
 
@@ -106,7 +107,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
-  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+  }, args), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
     onPress: innerState.close
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
@@ -121,7 +122,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     sx: {
       p: '12px'
     }
-  }, (0, _react2.jsx)(_Button["default"], {
+  }, (0, _react2.jsx)(_index.Button, {
     onPress: closeOuterPanel
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
@@ -164,14 +165,14 @@ var InnerPanel = function InnerPanel(_ref2) {
     mr: "auto"
   }, "Form 5")), (0, _react2.jsx)(_index.Separator, {
     margin: "0"
-  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  })), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: toggleMessagesOpen
-  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+  }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
     onPress: innerState.open
   }, "Open Inner Panel"), inner)));
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
@@ -192,14 +193,14 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     //
     // For a custom width, provide the width via the 'sx' prop
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_Button["default"], {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       onPress: state.open
     }, "Open Panel"), (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       sx: {
         width: '720px'
       }
-    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Button["default"], {
+    }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: state.close
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"

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

@@ -17,6 +17,13 @@ var _react2 = require("@emotion/react");
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_PopoverContainer["default"], props, (0, _react2.jsx)(_index.Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -39,4 +46,12 @@ test('should render a popover with no arrow', function () {
   var arrow = _testWrapper.screen.queryByTestId('popover-arrow');
 
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(_testWrapper.screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/cjs/components/TextArea/TextArea.js

@@ -29,7 +29,11 @@ var _react2 = require("@emotion/react");
  */
 var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_themeUi.Textarea, (0, _extends2["default"])({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

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

@@ -27,11 +27,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

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

@@ -4,7 +4,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { Link, Box } from '../../index';
+import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
@@ -26,6 +26,22 @@ var getComponent = function getComponent() {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Header Button"), ___EmotionJSX(Link, null, "Second Header Button")), ___EmotionJSX(Box, null, ___EmotionJSX(Link, null, "Body Button"), ___EmotionJSX(Link, null, "Second Body Button"))))));
+};
+
 axeTest(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -166,4 +182,10 @@ test('default expanded keys expands an accordion item', function () {
   var row = screen.getAllByRole('row');
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var row = screen.getAllByRole('row');
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -52,7 +52,7 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
   }, mergedProps, {
     isSelected: isSelected,
     className: classNames,
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), children);
 });
 AccordionGridItemBody.propTypes = {

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -76,7 +76,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: isSelected,
     className: classNames
   }, others, {
-    "aria-label": ariaLabel || 'Grid Cell'
+    "aria-label": ariaLabel
   }), ___EmotionJSX(Box, {
     isRow: true
   }, children, ___EmotionJSX(Box, {

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -7,6 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
+import { OverlayPanel } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -16,6 +17,28 @@ var defaultProps = {
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first"
@@ -27,7 +50,7 @@ var getComponent = function getComponent() {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third"
-  }, ___EmotionJSX(Text, null, "Render me!"))));
+  }, ___EmotionJSX(Text, null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -197,4 +220,10 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+  var buttons = screen.getAllByRole('button');
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -11,7 +11,7 @@ import { useAccordionItem } from '@react-aria/accordion';
 import { useButton } from '@react-aria/button';
 import { useFocusRing } from '@react-aria/focus';
 import { Text, Icon, Box } from '../../index';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import { useStatusClasses } from '../../hooks';
 import { AccordionContext } from '../../context/AccordionContext';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -72,12 +72,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       buttonClasses = _useStatusClasses2.classNames;
 
   var ariaLabel = props['aria-label'] || item.props.label;
-  useAriaLabelWarning('AccordionItem', ariaLabel);
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
   }, others, containerProps), ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Accordion',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
       display: 'flex',
@@ -94,9 +93,11 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     ml: "5px"
   }, ___EmotionJSX(Icon, {
     icon: isOpen ? MenuUp : MenuDown
-  }))), ___EmotionJSX(Box, _extends({
+  }))), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,

package/lib/components/Button/Button.js

@@ -21,7 +21,7 @@ import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
-import { useAriaLabelWarning, useStatusClasses, usePropWarning } from '../../hooks';
+import { useStatusClasses, usePropWarning } from '../../hooks';
 import Loader from '../Loader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -70,9 +70,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       classNames = _useStatusClasses.classNames;
 
   var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('Button', ariaLabel);
   return ___EmotionJSX(ThemeUIButton, _extends({
-    "aria-label": ariaLabel || 'Button',
+    "aria-label": ariaLabel,
     ref: buttonRef,
     className: classNames,
     role: "button",

package/lib/components/Button/Button.stories.js

@@ -62,7 +62,8 @@ export var TextIconButton = function TextIconButton() {
 export var TextButton = function TextButton() {
   return ___EmotionJSX(Button, {
     mb: "sm",
-    variant: "text"
+    variant: "text",
+    "aria-label": "Add option"
   }, ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

package/lib/components/Button/Button.test.js

@@ -7,7 +7,8 @@ import Button from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-button';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'aria-label': 'Test button'
 };
 
 var getComponent = function getComponent() {

package/lib/components/ColorField/ColorField.js

@@ -108,6 +108,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Button, _extends({
+    "aria-label": "Select color",
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,

package/lib/components/IconButton/IconButton.js

@@ -83,7 +83,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: 0,
     ref: buttonRef,
     className: classNames,
-    "aria-label": ariaLabel || 'Icon Button',
+    "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg

package/lib/components/IconButton/IconButton.test.js

@@ -17,7 +17,8 @@ var Icon = function Icon(props) {
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
-  icon: Icon
+  icon: Icon,
+  'aria-label': 'Create'
 };
 
 var getComponent = function getComponent() {
@@ -115,10 +116,8 @@ test('tooltip is not shown on hover or focus when prop is not passed', function
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });
 test('the button should be getting aria label attribute', function () {
-  var testLabel = 'test label';
-  getComponent({
-    'aria-label': testLabel
-  });
+  var testLabel = defaultProps['aria-label'];
+  getComponent();
   expect(screen.getByLabelText(testLabel)).toBeInTheDocument();
 });
 test('show button isDisabled status', function () {

package/lib/components/ImageUploadField/ImagePreviewButton.js

@@ -92,7 +92,8 @@ var ImagePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: buttonRef,
     variant: "imageUpload",
     sx: widthHeightSx,
-    "data-testid": "image-preview-button"
+    "data-testid": "image-preview-button",
+    "aria-label": "Image preview"
   }, mergeProps(focusProps, others)), previewImage && isImageType ? imagePreview : noImagePreview, isLoading && loadingPreview, (isHovered || isFocusVisible) && !isLoading && hoveredPreview));
 });
 ImagePreviewButton.propTypes = {

package/lib/components/ListBox/ListBox.js

@@ -24,7 +24,6 @@ import { useCollator } from '@react-aria/i18n';
 import { ListLayout } from '@react-stately/layout';
 import { ListBoxContext } from './ListBoxContext';
 import { Option } from './index.js';
-import { useAriaLabelWarning } from '../../hooks';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Loader from '../Loader';
 import ListBoxSection from './ListBoxSection';
@@ -77,13 +76,12 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
       selectedKeys = props.selectedKeys,
       selectionMode = props.selectionMode,
       state = props.state,
+      ariaLabel = props['aria-label'],
       ariaLabelledby = props['aria-labelledby'],
       ariaDescribedby = props['aria-describedby'],
       ariaDetails = props['aria-details'],
-      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-labelledby", "aria-describedby", "aria-details"]);
+      others = _objectWithoutProperties(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
 
-  var ariaLabel = props['aria-label'];
-  useAriaLabelWarning('ListBox', ariaLabel);
   var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
 
   var listBoxOptions = {
@@ -107,7 +105,7 @@ var ListBox = /*#__PURE__*/forwardRef(function (props, ref) {
     shouldFocusWrap: hasFocusWrap,
     shouldSelectOnPressUp: isSelectedOnPressUp,
     shouldUseVirtualFocus: hasVirtualFocus,
-    'aria-label': ariaLabel || 'ListBox',
+    'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-describedby': ariaDescribedby,
     'aria-details': ariaDetails

package/lib/components/ListBox/ListBox.test.js

@@ -29,11 +29,13 @@ var itemsWithSections = [{
 }];
 var defaultProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: items
 };
 var defaultWithSectionsProps = {
   'data-testid': testId,
+  'aria-label': 'listbox',
   'aria-labelledby': 'label',
   items: itemsWithSections
 };

package/lib/components/Messages/Message.js

@@ -20,8 +20,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var icons = {
   "default": AlertCircleOutlineIcon,
   success: CheckCircleIcon,
-  error: AlertCircleOutlineIcon,
-  warning: AlertCircleIcon
+  error: AlertCircleIcon,
+  warning: AlertCircleOutlineIcon
 };
 
 var CloseButton = function CloseButton(_ref) {

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -311,7 +311,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     hasAutoFocus: hasAutoFocus,
     hasVirtualFocus: true,
     hasNoEmptySelection: true,
-    state: state
+    state: state,
+    "aria-label": "List of options"
   })), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import { useOverlayPanelState } from '../../hooks';
-import Button from '../Button/Button';
 import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages } from '../../index';
+import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, AccordionGroup } from '../../index';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -47,9 +46,12 @@ export var Default = function Default(_ref) {
       isOpen: state.isOpen
     }, args), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
       onPress: state.close
-    }, "Close Panel"), ___EmotionJSX(Text, {
-      pt: "md"
-    }, "Children render here."))))
+    }, "Close Panel"), ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
+      key: "accordionKey",
+      textValue: "accordionKey",
+      label: "Accordion Label",
+      "data-id": "accordionItem"
+    }, ___EmotionJSX(Text, null, "Render me!"))))))
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {

package/lib/components/PopoverContainer/PopoverContainer.test.js

@@ -1,13 +1,20 @@
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { Box } from '../../index';
+import { Box, OverlayPanel } from '../../index';
 import PopoverContainer from './PopoverContainer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(React.Fragment, null, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayPanel, {
+    isOpen: true
+  }, ___EmotionJSX(PopoverContainer, props, ___EmotionJSX(Box, null, "I am in a popover"))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -26,4 +33,12 @@ test('should render a popover with no arrow', function () {
   });
   var arrow = screen.queryByTestId('popover-arrow');
   expect(arrow).not.toBeInTheDocument();
+});
+test('popover will not open if wrapped in an overlayPanel', function () {
+  getComponentInOverlayPanel({
+    popoverProps: {
+      'data-test-id': 'popover-test'
+    }
+  });
+  expect(screen.queryByTestId('popover-test')).not.toBeInTheDocument();
 });

package/lib/components/TextArea/TextArea.js

@@ -12,7 +12,11 @@ import { Textarea as ThemeUITextArea } from 'theme-ui';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUITextArea, _extends({
-    ref: ref
+    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ,
+    sx: {
+      position: 'relative'
+    }
   }, props));
 });
 TextArea.displayName = 'TextArea';

package/lib/styles/variants/accordion.js

@@ -18,11 +18,11 @@ var accordion = {
   alignItems: 'flex-start'
 };
 var accordionBody = {
-  display: 'none !important',
+  display: 'none',
   pt: 'md',
   width: '100%',
   '.is-open &': {
-    display: 'flex !important'
+    display: 'flex'
   }
 };
 var accordionGridHeader = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.1.0-alpha.4",
+  "version": "1.1.0-alpha.8",
   "description": "PingUX themeable React component library",
   "author": "uxdev@pingidentity.com",
   "license": "Apache-2.0",