@pingux/astro 1.14.0-alpha.91 → 1.15.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.13.0...@pingux/astro@1.14.0) (2022-05-24)
+
+
+### Bug Fixes
+
+* [UIP-5430] Popover failed accessibility test ([04ee92e](https://gitlab.corp.pingidentity.com/ux/pingux/commit/04ee92e60560a057da4fe488180146af76623540))
+
+
+### Features
+
+* [UIP-5368] IconButton a11y Improvement ([6dc0c33](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6dc0c33cedd347e74f9c5154ccda0ed832945e0f))
+* [UIP-5402] Allow copying partial text from CopyText ([d2367de](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d2367de2e78d7977363a774be9692bbce9cc33d9))
+* [UIP-5410] Attribute mapping read only field recipe ([e472b5c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e472b5c987ab0b4cb4c405df635ba4c7756b39e1))
+* [UIP-5413] Attributes and PingOne mappings recipe ([1d4d6e5](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1d4d6e5ffddaa41981690c5c4a38e8e275394d8f))
+* [UIP-5440] Trial exp industry buttons recipe ([35c212b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/35c212bf197f9fd0a15888eda52b190240992584))
+
+
+
+
+
 # [1.13.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.12.0...@pingux/astro@1.13.0) (2022-05-17)
 
 

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -80,7 +80,8 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: {
-        alignItems: 'center'
+        alignItems: 'center',
+        minHeight: 42
       },
       as: "li",
       key: "li-".concat(child.key)

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

@@ -105,6 +105,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       searchValue = _useState2[0],
       setSearchValue = _useState2[1];
 
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
   var breadcrumbsRef = (0, _react.useRef)();
 
   var overlayRef = _react["default"].useRef();
@@ -163,6 +168,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     var _selectedItemSet = (0, _slicedToArray2["default"])(selectedItemSet, 1),
         selectedItemKey = _selectedItemSet[0];
 
+    setSelectedKeys(selectedItemSet);
     onSelectionChange(selectedItemKey);
     handlePopoverClose();
   }, [handlePopoverClose, onSelectionChange]);
@@ -172,7 +178,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     items: items,
     filter: imperativeItemsFilter || filterNodesWithChildren,
     onSelectionChange: handleSelectionChange,
-    selectedKeys: [],
+    selectedKeys: selectedKeys,
     selectionMode: 'single',
     disallowEmptySelection: false
   };
@@ -243,11 +249,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     py: 10,
     px: 15
   }, emptySearchText);
+
+  var _selectedKeys = (0, _slicedToArray2["default"])(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
   var ItemsSelect = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
     variant: "environmentBreadcrumb.current",
-    "aria-label": "".concat(typeof selectedItem === 'string' ? selectedItem : 'Selected Item')
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
   })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {

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

@@ -159,7 +159,7 @@ var Default = function Default(args) {
     setSelectedEnvironment(_objectSpread({}, envObj));
   };
 
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], (0, _extends2["default"])({}, args, {
     items: defaultEnvironments,
     name: "Globochem",
     selectedItem: envNode,
@@ -175,7 +175,7 @@ var Default = function Default(args) {
       variant: "boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
-  }));
+  });
 };
 
 exports.Default = Default;
@@ -257,7 +257,7 @@ var WithSections = function WithSections() {
     variant: "boxes.environmentChip",
     bg: "neutral.40"
   }) : null);
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
     items: environments,
     name: "Globochem",
     selectedItem: envNode,
@@ -287,7 +287,7 @@ var WithSections = function WithSections() {
         bg: "neutral.40"
       }) : null));
     });
-  }));
+  });
 };
 
 exports.WithSections = WithSections;

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

@@ -42,7 +42,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 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; }
 
-jest.mock('@react-aria/live-announcer');
+jest.mock('@react-aria/live-announcer', function () {
+  return {
+    announce: jest.fn()
+  };
+});
+var mockAnnounce = _liveAnnouncer.announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -204,7 +209,7 @@ describe('announcements', function () {
       items: items
     });
     (0, _forEach["default"])(items).call(items, function (item) {
-      return expect(_liveAnnouncer.announce).toHaveBeenCalledWith(item.text, 'polite');
+      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
     });
   });
   test('should announce on adding item', function () {
@@ -219,7 +224,7 @@ describe('announcements', function () {
     _userEvent["default"].click(button);
 
     expect(messages.childElementCount).toBe(1);
-    expect(_liveAnnouncer.announce).toHaveBeenCalledWith('New message 1', 'polite');
+    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/cjs/components/Modal/Modal.js

@@ -58,7 +58,7 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "closeButton", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 
 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); }
 
@@ -71,6 +71,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,
+      hasAutoFocus = props.hasAutoFocus,
       hasCloseButton = props.hasCloseButton,
       id = props.id,
       isClosedOnBlur = props.isClosedOnBlur,
@@ -136,11 +137,12 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, others, containerProps), (0, _react2.jsx)(_focus.FocusScope, {
     contain: true,
     restoreFocus: true,
-    autoFocus: true
+    autoFocus: hasAutoFocus
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.content"
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
-    ref: modalRef
+    ref: modalRef,
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -160,6 +162,9 @@ Modal.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: _propTypes["default"].string,
 
+  /** Whether to auto focus the first focusable element in the focus scope on mount. */
+  hasAutoFocus: _propTypes["default"].bool,
+
   /** Whether the modal has a visible close button. */
   hasCloseButton: _propTypes["default"].bool,
 

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -27,7 +27,8 @@ var getComponent = function getComponent() {
 (0, _testAxe["default"])(getComponent);
 test('default modal', function () {
   getComponent();
-  expect(_testWrapper.screen.queryByRole('dialog')).toBeInTheDocument(); // Close button not rendered by default
+  expect(_testWrapper.screen.queryByRole('dialog')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('dialog')).toHaveAttribute('aria-modal', 'true'); // Close button not rendered by default
 
   expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
 });
@@ -199,4 +200,23 @@ test('should render a custom close button if hasCloseButton is true and custom b
   });
   expect(_testWrapper.screen.queryByRole('button')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByTestId('test')).toBeInTheDocument();
+});
+test('shouldn\'t auto focus the first tabbable element', function () {
+  getComponent({
+    hasCloseButton: true
+  });
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(button).not.toHaveFocus();
+});
+test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
+  getComponent({
+    hasCloseButton: true,
+    hasAutoFocus: true
+  });
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(button).toHaveFocus();
 });

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

@@ -537,11 +537,16 @@ var environmentBreadcrumb = {
     color: 'neutral.30',
     fontSize: 'md',
     fontWeight: 1,
-    '&.is-hovered, &.is-focused': {
+    padding: '4px',
+    '&.is-hovered': {
       color: 'active',
       textDecoration: 'none',
       boxShadow: 'none'
     },
+    '&.is-focused': {
+      borderRadius: '2px',
+      boxShadow: '0 0 0 1px #4462ED'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -46,7 +46,8 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, {
       isRow: true,
       sx: {
-        alignItems: 'center'
+        alignItems: 'center',
+        minHeight: 42
       },
       as: "li",
       key: "li-".concat(child.key)

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -55,6 +55,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
       searchValue = _useState2[0],
       setSearchValue = _useState2[1];
 
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedKeys = _useState4[0],
+      setSelectedKeys = _useState4[1];
+
   var breadcrumbsRef = useRef();
   var overlayRef = React.useRef();
   var triggerRef = React.useRef();
@@ -111,6 +116,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     var _selectedItemSet = _slicedToArray(selectedItemSet, 1),
         selectedItemKey = _selectedItemSet[0];
 
+    setSelectedKeys(selectedItemSet);
     onSelectionChange(selectedItemKey);
     handlePopoverClose();
   }, [handlePopoverClose, onSelectionChange]);
@@ -120,7 +126,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     items: items,
     filter: imperativeItemsFilter || filterNodesWithChildren,
     onSelectionChange: handleSelectionChange,
-    selectedKeys: [],
+    selectedKeys: selectedKeys,
     selectionMode: 'single',
     disallowEmptySelection: false
   };
@@ -192,11 +198,14 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     px: 15
   }, emptySearchText);
 
+  var _selectedKeys = _slicedToArray(selectedKeys, 1),
+      selectedValue = _selectedKeys[0];
+
   var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
     onPress: handlePopoverOpen,
     ref: triggerRef,
     variant: "environmentBreadcrumb.current",
-    "aria-label": "".concat(typeof selectedItem === 'string' ? selectedItem : 'Selected Item')
+    "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, ___EmotionJSX(Icon, {
     icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
   })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
-import { Item, Section, OverlayProvider, Chip, Box, Text } from '../../index';
+import { Item, Section, Chip, Box, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'EnvironmentBreadcrumb',
@@ -118,7 +118,7 @@ export var Default = function Default(args) {
     setSelectedEnvironment(_objectSpread({}, envObj));
   };
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
     items: defaultEnvironments,
     name: "Globochem",
     selectedItem: envNode,
@@ -134,7 +134,7 @@ export var Default = function Default(args) {
       variant: "boxes.environmentChip",
       bg: "neutral.40"
     }) : null);
-  }));
+  });
 };
 export var WithSections = function WithSections() {
   var _useState3 = useState(environmentsWithSections),
@@ -217,7 +217,7 @@ export var WithSections = function WithSections() {
     bg: "neutral.40"
   }) : null);
 
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, {
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
     items: environments,
     name: "Globochem",
     selectedItem: envNode,
@@ -247,7 +247,7 @@ export var WithSections = function WithSections() {
         bg: "neutral.40"
       }) : null));
     });
-  }));
+  });
 };
 export var OrgLevel = function OrgLevel() {
   return ___EmotionJSX(EnvironmentBreadcrumb, {

package/lib/components/Messages/Messages.test.js

@@ -12,7 +12,12 @@ import { render, screen } from '../../utils/testUtils/testWrapper';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
 import Button from '../Button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-jest.mock('@react-aria/live-announcer');
+jest.mock('@react-aria/live-announcer', function () {
+  return {
+    announce: jest.fn()
+  };
+});
+var mockAnnounce = announce;
 var testId = 'test-messages';
 var defaultProps = {
   'data-testid': testId
@@ -161,7 +166,7 @@ describe('announcements', function () {
     });
 
     _forEachInstanceProperty(items).call(items, function (item) {
-      return expect(announce).toHaveBeenCalledWith(item.text, 'polite');
+      return expect(mockAnnounce).toHaveBeenCalledWith(item.text, 'polite');
     });
   });
   test('should announce on adding item', function () {
@@ -171,7 +176,7 @@ describe('announcements', function () {
     var button = screen.getByText('Click me!');
     userEvent.click(button);
     expect(messages.childElementCount).toBe(1);
-    expect(announce).toHaveBeenCalledWith('New message 1', 'polite');
+    expect(mockAnnounce).toHaveBeenCalledWith('New message 1', 'polite');
   });
 });
 test('should render messages with messagesReducerStory', function () {

package/lib/components/Modal/Modal.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "closeButton", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 
 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; }
 
@@ -30,6 +30,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       closeButton = props.closeButton,
+      hasAutoFocus = props.hasAutoFocus,
       hasCloseButton = props.hasCloseButton,
       id = props.id,
       isClosedOnBlur = props.isClosedOnBlur,
@@ -95,11 +96,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, others, containerProps), ___EmotionJSX(FocusScope, {
     contain: true,
     restoreFocus: true,
-    autoFocus: true
+    autoFocus: hasAutoFocus
   }, ___EmotionJSX(Box, _extends({
     variant: "modal.content"
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
-    ref: modalRef
+    ref: modalRef,
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
@@ -119,6 +121,9 @@ Modal.propTypes = {
   /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
   id: PropTypes.string,
 
+  /** Whether to auto focus the first focusable element in the focus scope on mount. */
+  hasAutoFocus: PropTypes.bool,
+
   /** Whether the modal has a visible close button. */
   hasCloseButton: PropTypes.bool,
 

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -18,7 +18,8 @@ var getComponent = function getComponent() {
 axeTest(getComponent);
 test('default modal', function () {
   getComponent();
-  expect(screen.queryByRole('dialog')).toBeInTheDocument(); // Close button not rendered by default
+  expect(screen.queryByRole('dialog')).toBeInTheDocument();
+  expect(screen.queryByRole('dialog')).toHaveAttribute('aria-modal', 'true'); // Close button not rendered by default
 
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
 });
@@ -169,4 +170,19 @@ test('should render a custom close button if hasCloseButton is true and custom b
   });
   expect(screen.queryByRole('button')).not.toBeInTheDocument();
   expect(screen.queryByTestId('test')).toBeInTheDocument();
+});
+test('shouldn\'t auto focus the first tabbable element', function () {
+  getComponent({
+    hasCloseButton: true
+  });
+  var button = screen.queryByRole('button');
+  expect(button).not.toHaveFocus();
+});
+test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
+  getComponent({
+    hasCloseButton: true,
+    hasAutoFocus: true
+  });
+  var button = screen.queryByRole('button');
+  expect(button).toHaveFocus();
 });

package/lib/styles/variants/buttons.js

@@ -517,11 +517,16 @@ var environmentBreadcrumb = {
     color: 'neutral.30',
     fontSize: 'md',
     fontWeight: 1,
-    '&.is-hovered, &.is-focused': {
+    padding: '4px',
+    '&.is-hovered': {
       color: 'active',
       textDecoration: 'none',
       boxShadow: 'none'
     },
+    '&.is-focused': {
+      borderRadius: '2px',
+      boxShadow: '0 0 0 1px #4462ED'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.14.0-alpha.91",
+  "version": "1.15.0-alpha.1",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -74,7 +74,7 @@
     "@emotion/jest": "^11.5.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
-    "@react-aria/accordion": "3.0.0-alpha.1",
+    "@react-aria/accordion": "3.0.0-alpha.7",
     "@react-aria/breadcrumbs": "^3.1.4",
     "@react-aria/button": "^3.2.1",
     "@react-aria/checkbox": "^3.2.0",
@@ -90,7 +90,7 @@
     "@react-aria/listbox": "^3.3.0",
     "@react-aria/live-announcer": "^3.0.0",
     "@react-aria/menu": "^3.1.4",
-    "@react-aria/numberfield": "3.1.0",
+    "@react-aria/numberfield": "~3.1.6",
     "@react-aria/overlays": "^3.7.0",
     "@react-aria/progress": "^3.1.1",
     "@react-aria/radio": "^3.1.1",
@@ -107,7 +107,7 @@
     "@react-aria/visually-hidden": "3.2.1",
     "@react-spectrum/provider": "^3.2.1",
     "@react-spectrum/utils": "3.6.1",
-    "@react-stately/collections": "^3.2.1",
+    "@react-stately/collections": "~3.3.8",
     "@react-stately/color": "^3.0.0-beta.2",
     "@react-stately/combobox": "^3.0.0",
     "@react-stately/data": "^3.4.0",
@@ -115,7 +115,7 @@
     "@react-stately/layout": "^3.2.1",
     "@react-stately/list": "^3.2.1",
     "@react-stately/menu": "^3.2.1",
-    "@react-stately/numberfield": "3.0.2",
+    "@react-stately/numberfield": "~3.0.7",
     "@react-stately/overlays": "^3.1.1",
     "@react-stately/radio": "^3.2.0",
     "@react-stately/searchfield": "^3.1.1",
@@ -125,7 +125,7 @@
     "@react-stately/toggle": "^3.2.0",
     "@react-stately/tooltip": "^3.0.4",
     "@react-stately/tree": "^3.1.2",
-    "@react-stately/utils": "^3.2.1",
+    "@react-stately/utils": "~3.4.1",
     "@rebass/forms": "^4.0.6",
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/props": "^5.1.5",