@pingux/astro 2.47.0 → 2.48.0-alpha.1

package/lib/cjs/components/HelpHint/HelpHint.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HelpHintProps } from '../../types';
+declare const HelpHint: React.ForwardRefExoticComponent<HelpHintProps & React.RefAttributes<HTMLButtonElement>>;
+export default HelpHint;

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -19,12 +19,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _safariAgent = require("../../styles/safariAgent");
 var _react2 = require("@emotion/react");
-var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps", "tooltipProps"];
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "popoverProps", "tooltipProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var HelpIcon = function HelpIcon() {
@@ -54,7 +53,6 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     isDarkMode = props.isDarkMode,
     isNotFlippable = props.isNotFlippable,
-    offset = props.offset,
     popoverProps = props.popoverProps,
     tooltipProps = props.tooltipProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -68,8 +66,8 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }),
     focusWithinProps = _useFocusWithin.focusWithinProps;
-  var overlayRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var triggerRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
@@ -89,11 +87,6 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     triggerProps = _useOverlayTrigger.triggerProps,
     overlayProps = _useOverlayTrigger.overlayProps;
 
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return triggerRef.current;
-  });
-
   // Set a timeout to close the overlay upon hover / focus loss,
   // but keep it open if the trigger or overlay are hovered again before it closes.
   (0, _react.useEffect)(function () {
@@ -130,14 +123,14 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isDarkMode: isDarkMode
     }),
     classNames = _useStatusClasses.classNames;
-  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(containerChildren) {
-    if (containerChildren) {
+  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(element) {
+    if (element) {
       var _context2;
-      return (0, _map["default"])(_context2 = _react["default"].Children).call(_context2, containerChildren, function (child) {
+      return (0, _map["default"])(_context2 = _react["default"].Children).call(_context2, element, function (child) {
         if (! /*#__PURE__*/_react["default"].isValidElement(child)) return child;
         return /*#__PURE__*/_react["default"].cloneElement(child, {
           children: addIsSafariCompatiblePropToLinkChildren(child.props.children),
-          isSafariCompatible: child.type.displayName === 'Link'
+          isSafariCompatible: typeof child.type === 'string' && child.type === 'Link'
         });
       });
     }
@@ -163,10 +156,10 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasNoArrow: hasNoArrow,
     isDismissable: isFocusWithinOverlay ? !isOpen : true,
     isNonModal: true,
-    isOpen: isOpen,
     onClose: close,
     placement: placement,
-    ref: overlayRef
+    ref: overlayRef,
+    isOpen: isOpen
   }, (0, _reactAria.mergeProps)(overlayProps, positionProps, popoverProps || tooltipProps, overlayHoverProps, focusWithinProps)), (0, _react2.jsx)(_reactAria.FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
@@ -175,39 +168,6 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     role: "status"
   }, _safariAgent.isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
-HelpHint.propTypes = {
-  /** Props object that is spread directly into the popover element. */
-  popoverProps: _propTypes["default"].shape({}),
-  /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
-  tooltipProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into the IconButton element. */
-  iconButtonProps: _propTypes["default"].shape({}),
-  /** Defaults to true, displays dark popover with white text */
-  isDarkMode: _propTypes["default"].bool,
-  /** Where the popover menu opens relative to its trigger. */
-  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-  /**
-     * Whether the popover is prevented from flipping directions when insufficient space is
-     * available for the given `direction` placement.
-     */
-  isNotFlippable: _propTypes["default"].bool,
-  /** Alignment of the popover menu relative to the trigger. */
-  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
-  /**
-   * Allows to add an arrow to popover container
-   */
-  hasNoArrow: _propTypes["default"].bool,
-  /** Popover offset relative to its trigger. */
-  offset: _propTypes["default"].number,
-  /** Arrow offset relative to the left of the popover.
-   * Must be passed as a px or percentage. */
-  arrowCrossOffset: _propTypes["default"].string,
-  /** The additional offset applied along the cross axis
-   * between the element and its anchor element. */
-  crossOffset: _propTypes["default"].number,
-  /** Amount of time before the popover closes */
-  closeDelay: _propTypes["default"].number
-};
 HelpHint.defaultProps = {
   align: 'middle',
   direction: 'top',

package/lib/cjs/components/HelpHint/HelpHint.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { HelpHintProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<HelpHintProps>;
+export declare const WithPopoverAndIconButtonProps: StoryFn;
+export declare const ContentWithLink: StoryFn;
+export declare const WithDelay: StoryFn;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _HelpHint = _interopRequireDefault(require("./HelpHint.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
@@ -55,7 +55,7 @@ var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
     p: 50
   }, (0, _react2.jsx)(_index.HelpHint, {
     popoverProps: {
-      'data-id': 'popover-container'
+      'data-testid': 'popover-container'
     },
     iconButtonProps: {
       'aria-label': 'Help hint'

package/lib/cjs/components/HelpHint/HelpHint.styles.d.ts

@@ -0,0 +1,82 @@
+export declare const hintButton: {
+    bg: string;
+    borderColor: string;
+    mt: string;
+    mb: string;
+    ml: string;
+    maxWidth: string;
+    maxHeight: string;
+    borderRadius: string;
+    svg: {
+        height: string;
+        mb: number;
+    };
+    path: {
+        fill: string;
+    };
+    '&.is-hovered': {
+        bg: string;
+        borderColor: string;
+        path: {
+            fill: string;
+        };
+        color: string;
+        boxShadow: string;
+    };
+    '&.is-focused': {
+        outline: string;
+        outlineColor: string;
+        outlineOffset: string;
+    };
+    '&.is-pressed': {
+        bg: string;
+        borderColor: string;
+        color: string;
+        path: {
+            fill: string;
+        };
+    };
+};
+declare const _default: {
+    hintButton: {
+        bg: string;
+        borderColor: string;
+        mt: string;
+        mb: string;
+        ml: string;
+        maxWidth: string;
+        maxHeight: string;
+        borderRadius: string;
+        svg: {
+            height: string;
+            mb: number;
+        };
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            color: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            borderColor: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
+    popoverContainer: any;
+};
+export default _default;

package/lib/cjs/components/HelpHint/HelpHint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/HelpHint/index.d.ts

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

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -171,7 +171,57 @@ declare const _default: {
     datePicker: {
         containedIcon: any;
     };
-    hintButton: any;
+    hintButton: {
+        bg: string;
+        borderColor: string;
+        mt: string;
+        mb: string;
+        ml: string;
+        maxWidth: string;
+        maxHeight: string;
+        borderRadius: string;
+        svg: {
+            height: string;
+            mb: number;
+        };
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            color: string;
+            boxShadow: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-pressed': {
+            bg: string;
+            borderColor: string;
+            color: string;
+            path: {
+                fill: string;
+            };
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        cursor: string;
+        p: string;
+        width: string;
+        height: string;
+        outline: string;
+    };
     inverted: {
         bg: string;
         borderColor: string;

package/lib/cjs/components/ScrollBox/ScrollBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ScrollBoxProps } from '../../types';
+declare const ScrollBox: React.ForwardRefExoticComponent<ScrollBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default ScrollBox;

package/lib/cjs/components/ScrollBox/ScrollBox.js

@@ -20,8 +20,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useStatusClasses2 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 var _excluded = ["maxHeight", "children", "sx", "hasShadows", "onScroll"];
@@ -48,31 +47,30 @@ var ScrollBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     isBottomShadowShowing = _useState6[0],
     setIsBottomShadowShowing = _useState6[1];
-  var outerRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return outerRef.current;
-  });
+  var outerRef = (0, _hooks.useLocalOrForwardRef)(ref);
 
   /* istanbul ignore next */
   (0, _react.useLayoutEffect)(function () {
-    if (outerRef.current && outerRef.current.firstChild) {
-      if (outerRef.current.firstChild.offsetHeight !== 0) {
-        setIsBottomShadowShowing(outerRef.current.firstChild.scrollHeight - outerRef.current.firstChild.offsetHeight !== outerRef.current.firstChild.scrollTop);
-        setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
+    var _outerRef$current;
+    var firstChildNode = (_outerRef$current = outerRef.current) === null || _outerRef$current === void 0 ? void 0 : _outerRef$current.firstChild;
+    if (outerRef.current && firstChildNode) {
+      if (firstChildNode.offsetHeight !== 0) {
+        firstChildNode.setAttribute('tabindex', '0');
+        setIsBottomShadowShowing(firstChildNode.scrollHeight - firstChildNode.offsetHeight !== firstChildNode.scrollTop);
+        setIsTopShadowShowing(firstChildNode.scrollTop !== 0);
       }
     }
   }, [scrollTopPosition]);
 
   /* istanbul ignore next */
   var onScroll = function onScroll() {
-    var _outerRef$current;
-    if ((_outerRef$current = outerRef.current) !== null && _outerRef$current !== void 0 && _outerRef$current.firstChild) {
-      var _outerRef$current2;
-      setScrollTopPosition((_outerRef$current2 = outerRef.current) === null || _outerRef$current2 === void 0 || (_outerRef$current2 = _outerRef$current2.firstChild) === null || _outerRef$current2 === void 0 ? void 0 : _outerRef$current2.scrollTop);
+    var _outerRef$current2;
+    var firstChildNode = (_outerRef$current2 = outerRef.current) === null || _outerRef$current2 === void 0 ? void 0 : _outerRef$current2.firstChild;
+    if (firstChildNode) {
+      setScrollTopPosition(firstChildNode.scrollTop);
     }
   };
-  var _useStatusClasses = (0, _useStatusClasses2["default"])('', {
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
       hasShadows: hasShadows,
       isTopShadowShowing: isTopShadowShowing,
       isBottomShadowShowing: isBottomShadowShowing
@@ -100,13 +98,5 @@ ScrollBox.defaultProps = {
   maxHeight: '100%',
   hasShadows: false
 };
-ScrollBox.propTypes = {
-  /** Height at which the content within ScrollBox will overflow */
-  maxHeight: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object, _propTypes["default"].number]),
-  /** Callback that fires when scrolling is done inside the ScrollBox */
-  onScroll: _propTypes["default"].func,
-  /** If true the box will render top and bottom shadows with scroll */
-  hasShadows: _propTypes["default"].bool
-};
 var _default = ScrollBox;
 exports["default"] = _default;

package/lib/cjs/components/ScrollBox/ScrollBox.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ScrollBoxProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ScrollBoxProps>;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ScrollBox = _interopRequireDefault(require("./ScrollBox.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

package/lib/cjs/components/ScrollBox/ScrollBox.styles.d.ts

@@ -0,0 +1,41 @@
+declare const _default: {
+    container: {
+        '&::-webkit-scrollbar': {
+            display: string;
+            width: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            width: string;
+            display: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            borderRadius: string;
+            display: string;
+        };
+        position: string;
+        '& > *': {
+            overflow: string;
+        };
+    };
+    topShadowBox: {
+        '&.has-shadows.is-top-shadow-showing': {
+            position: string;
+            zIndex: string;
+            boxShadow: string;
+            height: string;
+            marginBottom: string;
+            backgroundColor: string;
+        };
+    };
+    bottomShadowBox: {
+        '&.has-shadows.is-bottom-shadow-showing': {
+            position: string;
+            zIndex: string;
+            boxShadow: string;
+            height: string;
+            marginTop: string;
+            backgroundColor: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/ScrollBox/ScrollBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/ScrollBox/index.d.ts

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

package/lib/cjs/types/helpHint.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { DOMAttributes } from './shared/dom';
+import { TestingAttributes } from './shared/test';
+import { IconButtonProps } from './iconButton';
+import { PopoverContainerProps } from './popoverContainer';
+import { Axis } from './shared';
+import { TooltipProps } from './tooltipTrigger';
+interface TooltipWrapperProps extends TooltipProps {
+    isOpen?: boolean;
+}
+export interface HelpHintProps extends DOMAttributes, TestingAttributes {
+    /** Props object that is spread directly into the popover element. */
+    popoverProps?: PopoverContainerProps;
+    /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
+    tooltipProps?: TooltipWrapperProps;
+    /** Props object that is spread directly into the IconButton element. */
+    iconButtonProps?: IconButtonProps;
+    /** Defaults to true, displays dark popover with white text */
+    isDarkMode?: boolean;
+    /** Where the popover menu opens relative to its trigger. */
+    direction?: Axis;
+    /**
+      * Whether the popover is prevented from flipping directions when insufficient space is
+      * available for the given `direction` placement.
+    */
+    isNotFlippable?: boolean;
+    /** Alignment of the popover menu relative to the trigger. */
+    align?: 'start' | 'end' | 'middle';
+    /**
+      * Allows to add an arrow to popover container
+    */
+    hasNoArrow?: boolean;
+    /** Popover offset relative to its trigger. */
+    offset?: number;
+    /** Arrow offset relative to the left of the popover.
+    * Must be passed as a px or percentage. */
+    arrowCrossOffset?: string;
+    /** The additional offset applied along the cross axis
+    * between the element and its anchor element. */
+    crossOffset?: number;
+    /** Amount of time before the popover closes */
+    closeDelay?: number;
+    /** Children node */
+    children?: ReactNode;
+    /** Safari compatible flag */
+    isSafariCompatible?: boolean;
+}
+export {};

package/lib/cjs/types/helpHint.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -5,6 +5,7 @@ export * from './button';
 export * from './buttonBar';
 export * from './card';
 export * from './fieldHelperText';
+export * from './helpHint';
 export * from './icon';
 export * from './iconBadge';
 export * from './iconButton';
@@ -17,6 +18,7 @@ export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';
 export * from './rockerButtonGroup';
+export * from './scrollBox';
 export * from './separator';
 export * from './shared';
 export * from './table';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -84,8 +84,19 @@ _forEachInstanceProperty(_context7 = _Object$keys(_fieldHelperText)).call(_conte
     }
   });
 });
+var _helpHint = require("./helpHint");
+_forEachInstanceProperty(_context8 = _Object$keys(_helpHint)).call(_context8, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpHint[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _helpHint[key];
+    }
+  });
+});
 var _icon = require("./icon");
-_forEachInstanceProperty(_context8 = _Object$keys(_icon)).call(_context8, function (key) {
+_forEachInstanceProperty(_context9 = _Object$keys(_icon)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -96,7 +107,7 @@ _forEachInstanceProperty(_context8 = _Object$keys(_icon)).call(_context8, functi
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context9 = _Object$keys(_iconBadge)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_iconBadge)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_iconBadge)).call(_context9, f
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context10 = _Object$keys(_iconButton)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_iconButton)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_iconButton)).call(_context10
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context11 = _Object$keys(_input)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_input)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -129,7 +140,7 @@ _forEachInstanceProperty(_context11 = _Object$keys(_input)).call(_context11, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context12 = _Object$keys(_item)).call(_context12, function (key) {
+_forEachInstanceProperty(_context13 = _Object$keys(_item)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -140,7 +151,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_item)).call(_context12, func
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context13 = _Object$keys(_link)).call(_context13, function (key) {
+_forEachInstanceProperty(_context14 = _Object$keys(_link)).call(_context14, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -151,7 +162,7 @@ _forEachInstanceProperty(_context13 = _Object$keys(_link)).call(_context13, func
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context14 = _Object$keys(_listItem)).call(_context14, function (key) {
+_forEachInstanceProperty(_context15 = _Object$keys(_listItem)).call(_context15, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -162,7 +173,7 @@ _forEachInstanceProperty(_context14 = _Object$keys(_listItem)).call(_context14,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context15 = _Object$keys(_loader)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_loader)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_loader)).call(_context15, fu
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context16 = _Object$keys(_overlayPanel)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_overlayPanel)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context17 = _Object$keys(_popoverContainer)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_popoverContainer)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context18 = _Object$keys(_popoverMenu)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_popoverMenu)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_popoverMenu)).call(_context1
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context19 = _Object$keys(_rockerButtonGroup)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_rockerButtonGroup)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -216,8 +227,19 @@ _forEachInstanceProperty(_context19 = _Object$keys(_rockerButtonGroup)).call(_co
     }
   });
 });
+var _scrollBox = require("./scrollBox");
+_forEachInstanceProperty(_context21 = _Object$keys(_scrollBox)).call(_context21, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _scrollBox[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _scrollBox[key];
+    }
+  });
+});
 var _separator = require("./separator");
-_forEachInstanceProperty(_context20 = _Object$keys(_separator)).call(_context20, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_separator)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +250,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_separator)).call(_context20,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context21 = _Object$keys(_shared)).call(_context21, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_shared)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +261,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_shared)).call(_context21, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context22 = _Object$keys(_table)).call(_context22, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_table)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +272,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_table)).call(_context22, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context23 = _Object$keys(_text)).call(_context23, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_text)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +283,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_text)).call(_context23, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context24 = _Object$keys(_tooltipTrigger)).call(_context24, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_tooltipTrigger)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/popoverContainer.d.ts

@@ -1,3 +1,4 @@
+import { TestingAttributes } from './shared/test';
 import { DOMAttributes, Modify, StyleProps } from './shared';
 type PopoverPlacement = 'top' | 'right' | 'bottom' | 'left';
 type StylePropsExtended = Modify<StyleProps, {
@@ -6,7 +7,7 @@ type StylePropsExtended = Modify<StyleProps, {
 export interface PopoverArrowProps extends DOMAttributes, StylePropsExtended {
     arrowCrossOffset?: string;
 }
-export interface PopoverContainerProps extends StylePropsExtended, DOMAttributes {
+export interface PopoverContainerProps extends StylePropsExtended, DOMAttributes, TestingAttributes {
     placement?: string;
     arrowProps?: PopoverArrowProps;
     arrowCrossOffset?: string;

package/lib/cjs/types/scrollBox.d.ts

@@ -0,0 +1,9 @@
+import { UIEventHandler } from 'react';
+import { FocusableElement } from './shared/dom';
+import { BoxProps } from './box';
+export interface ScrollBoxProps extends BoxProps {
+    /** Callback that fires when scrolling is done inside the ScrollBox */
+    onScroll?: UIEventHandler<FocusableElement>;
+    /** If true the box will render top and bottom shadows with scroll */
+    hasShadows?: boolean;
+}

package/lib/cjs/types/scrollBox.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/HelpHint/HelpHint.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps", "tooltipProps"];
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "popoverProps", "tooltipProps"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { FocusScope, mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, PopoverContainer } from '../..';
-import { useStatusClasses } from '../../hooks';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { isSafari } from '../../styles/safariAgent';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HelpIcon = function HelpIcon() {
@@ -41,7 +40,6 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     iconButtonProps = props.iconButtonProps,
     isDarkMode = props.isDarkMode,
     isNotFlippable = props.isNotFlippable,
-    offset = props.offset,
     popoverProps = props.popoverProps,
     tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
@@ -55,8 +53,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }),
     focusWithinProps = _useFocusWithin.focusWithinProps;
-  var overlayRef = useRef();
-  var triggerRef = useRef(null);
+  var overlayRef = useRef(null);
+  var triggerRef = useLocalOrForwardRef(ref);
   var _useFocusRing = useFocusRing(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
@@ -76,11 +74,6 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerProps = _useOverlayTrigger.triggerProps,
     overlayProps = _useOverlayTrigger.overlayProps;
 
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return triggerRef.current;
-  });
-
   // Set a timeout to close the overlay upon hover / focus loss,
   // but keep it open if the trigger or overlay are hovered again before it closes.
   useEffect(function () {
@@ -117,14 +110,14 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       isDarkMode: isDarkMode
     }),
     classNames = _useStatusClasses.classNames;
-  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(containerChildren) {
-    if (containerChildren) {
+  var addIsSafariCompatiblePropToLinkChildren = function addIsSafariCompatiblePropToLinkChildren(element) {
+    if (element) {
       var _context2;
-      return _mapInstanceProperty(_context2 = React.Children).call(_context2, containerChildren, function (child) {
+      return _mapInstanceProperty(_context2 = React.Children).call(_context2, element, function (child) {
         if (! /*#__PURE__*/React.isValidElement(child)) return child;
         return /*#__PURE__*/React.cloneElement(child, {
           children: addIsSafariCompatiblePropToLinkChildren(child.props.children),
-          isSafariCompatible: child.type.displayName === 'Link'
+          isSafariCompatible: typeof child.type === 'string' && child.type === 'Link'
         });
       });
     }
@@ -150,10 +143,10 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     hasNoArrow: hasNoArrow,
     isDismissable: isFocusWithinOverlay ? !isOpen : true,
     isNonModal: true,
-    isOpen: isOpen,
     onClose: close,
     placement: placement,
-    ref: overlayRef
+    ref: overlayRef,
+    isOpen: isOpen
   }, mergeProps(overlayProps, positionProps, popoverProps || tooltipProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
@@ -162,39 +155,6 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     role: "status"
   }, isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
-HelpHint.propTypes = {
-  /** Props object that is spread directly into the popover element. */
-  popoverProps: PropTypes.shape({}),
-  /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
-  tooltipProps: PropTypes.shape({}),
-  /** Props object that is spread directly into the IconButton element. */
-  iconButtonProps: PropTypes.shape({}),
-  /** Defaults to true, displays dark popover with white text */
-  isDarkMode: PropTypes.bool,
-  /** Where the popover menu opens relative to its trigger. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /**
-     * Whether the popover is prevented from flipping directions when insufficient space is
-     * available for the given `direction` placement.
-     */
-  isNotFlippable: PropTypes.bool,
-  /** Alignment of the popover menu relative to the trigger. */
-  align: PropTypes.oneOf(['start', 'end', 'middle']),
-  /**
-   * Allows to add an arrow to popover container
-   */
-  hasNoArrow: PropTypes.bool,
-  /** Popover offset relative to its trigger. */
-  offset: PropTypes.number,
-  /** Arrow offset relative to the left of the popover.
-   * Must be passed as a px or percentage. */
-  arrowCrossOffset: PropTypes.string,
-  /** The additional offset applied along the cross axis
-   * between the element and its anchor element. */
-  crossOffset: PropTypes.number,
-  /** Amount of time before the popover closes */
-  closeDelay: PropTypes.number
-};
 HelpHint.defaultProps = {
   align: 'middle',
   direction: 'top',

package/lib/components/HelpHint/HelpHint.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, HelpHint, Link, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import HelpHintReadme from './HelpHint.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -45,7 +45,7 @@ export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProp
     p: 50
   }, ___EmotionJSX(HelpHint, {
     popoverProps: {
-      'data-id': 'popover-container'
+      'data-testid': 'popover-container'
     },
     iconButtonProps: {
       'aria-label': 'Help hint'

package/lib/components/ScrollBox/ScrollBox.js

@@ -13,9 +13,8 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["maxHeight", "children", "sx", "hasShadows", "onScroll"];
 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) { _defineProperty(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; }
-import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import useStatusClasses from '../../hooks/useStatusClasses';
+import React, { forwardRef, useLayoutEffect, useState } from 'react';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -37,28 +36,27 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isBottomShadowShowing = _useState6[0],
     setIsBottomShadowShowing = _useState6[1];
-  var outerRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return outerRef.current;
-  });
+  var outerRef = useLocalOrForwardRef(ref);
 
   /* istanbul ignore next */
   useLayoutEffect(function () {
-    if (outerRef.current && outerRef.current.firstChild) {
-      if (outerRef.current.firstChild.offsetHeight !== 0) {
-        setIsBottomShadowShowing(outerRef.current.firstChild.scrollHeight - outerRef.current.firstChild.offsetHeight !== outerRef.current.firstChild.scrollTop);
-        setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
+    var _outerRef$current;
+    var firstChildNode = (_outerRef$current = outerRef.current) === null || _outerRef$current === void 0 ? void 0 : _outerRef$current.firstChild;
+    if (outerRef.current && firstChildNode) {
+      if (firstChildNode.offsetHeight !== 0) {
+        firstChildNode.setAttribute('tabindex', '0');
+        setIsBottomShadowShowing(firstChildNode.scrollHeight - firstChildNode.offsetHeight !== firstChildNode.scrollTop);
+        setIsTopShadowShowing(firstChildNode.scrollTop !== 0);
       }
     }
   }, [scrollTopPosition]);
 
   /* istanbul ignore next */
   var onScroll = function onScroll() {
-    var _outerRef$current;
-    if ((_outerRef$current = outerRef.current) !== null && _outerRef$current !== void 0 && _outerRef$current.firstChild) {
-      var _outerRef$current2;
-      setScrollTopPosition((_outerRef$current2 = outerRef.current) === null || _outerRef$current2 === void 0 || (_outerRef$current2 = _outerRef$current2.firstChild) === null || _outerRef$current2 === void 0 ? void 0 : _outerRef$current2.scrollTop);
+    var _outerRef$current2;
+    var firstChildNode = (_outerRef$current2 = outerRef.current) === null || _outerRef$current2 === void 0 ? void 0 : _outerRef$current2.firstChild;
+    if (firstChildNode) {
+      setScrollTopPosition(firstChildNode.scrollTop);
     }
   };
   var _useStatusClasses = useStatusClasses('', {
@@ -89,12 +87,4 @@ ScrollBox.defaultProps = {
   maxHeight: '100%',
   hasShadows: false
 };
-ScrollBox.propTypes = {
-  /** Height at which the content within ScrollBox will overflow */
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number]),
-  /** Callback that fires when scrolling is done inside the ScrollBox */
-  onScroll: PropTypes.func,
-  /** If true the box will render top and bottom shadows with scroll */
-  hasShadows: PropTypes.bool
-};
 export default ScrollBox;

package/lib/components/ScrollBox/ScrollBox.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, ScrollBox } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import ScrollBoxReadme from './ScrollBox.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/types/helpHint.js

@@ -0,0 +1 @@
+export {};

package/lib/types/index.js

@@ -5,6 +5,7 @@ export * from './button';
 export * from './buttonBar';
 export * from './card';
 export * from './fieldHelperText';
+export * from './helpHint';
 export * from './icon';
 export * from './iconBadge';
 export * from './iconButton';
@@ -17,6 +18,7 @@ export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './popoverMenu';
 export * from './rockerButtonGroup';
+export * from './scrollBox';
 export * from './separator';
 export * from './shared';
 export * from './table';

package/lib/types/scrollBox.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.47.0",
+  "version": "2.48.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -78,6 +78,7 @@
     "@react-stately/grid": "~3.3.1",
     "@react-stately/layout": "^3.13.4",
     "@react-stately/list": "~3.4.1",
+    "@react-stately/overlays": "^3.6.4",
     "@react-stately/table": "^3.9.0",
     "@react-stately/tabs": "^3.6.3",
     "@react-stately/tree": "^3.7.4",