@pingux/astro 2.45.0-alpha.1 → 2.45.0-alpha.3

package/lib/cjs/components/DataTable/DataTable.styles.js

@@ -100,7 +100,7 @@ var tableHeadCell = _objectSpread(_objectSpread({}, _Text.text.tableHeader), {},
     outline: '1px',
     outlineStyle: 'solid',
     outlineColor: '#D033FF !important',
-    outlineOffset: '-1px'
+    outlineOffset: '-2px'
   },
   '&.is-column-sortable': {
     cursor: 'pointer',

package/lib/cjs/components/DataTable/DataTableMenu.js

@@ -20,7 +20,12 @@ var DataTableMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     variant: "dataTable.tableMenu"
   }, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "row menu"
+    "aria-label": "row menu",
+    sx: {
+      '&.is-focused': {
+        outlineOffset: '-1px'
+      }
+    }
   }, (0, _react2.jsx)(_index.Icon, {
     size: 25,
     icon: _DotsVerticalIcon["default"],

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

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

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

@@ -9,16 +9,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
-var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
 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); }
@@ -36,11 +33,7 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     onClose = _useOverlayPanelState.onClose;
-  var overlayPanelRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return overlayPanelRef.current;
-  });
+  var overlayPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
 
   // this is code to avoid regressions -- implementations that do not use the
   // useMountTransition hook will not break, because this className gives the
@@ -72,27 +65,6 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames
   }, children)));
 });
-OverlayPanel.propTypes = {
-  /** Sets the open state of the menu. */
-  isOpen: _propTypes["default"].bool,
-  /** Sets the size of the overlay panel. */
-  size: _propTypes["default"].oneOf((0, _values["default"])(_panelSizes.panelSizes)),
-  /** JSX styling that is passed into the component. */
-  sx: _propTypes["default"].shape({
-    width: _propTypes["default"].string
-  }),
-  /** State object that is passed in from the useOverlayPanelState hook */
-  state: _propTypes["default"].shape({
-    close: _propTypes["default"].func
-  }),
-  /** Callback function that runs when the esc key is used to close the OverlayPanel. */
-  onClose: _propTypes["default"].func,
-  /** Boolean that determines whether or not the css transition is occuring. */
-  isTransitioning: _propTypes["default"].bool,
-  /** Ref that is connected to the button that triggers the overlay state.
-   Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
-  triggerRef: _propTypes["default"].shape({})
-};
 OverlayPanel.defaultProps = {
   size: 'medium'
 };

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

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { OverlayPanelProps } 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<OverlayPanelProps>;
+export declare const CustomWidth: StoryFn;
+export declare const Expandable: StoryFn;
+export declare const InnerPanel: StoryFn<OverlayPanelProps>;

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

@@ -25,6 +25,7 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _images = require("../../utils/devUtils/constants/images");
 var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel.mdx"));
 var _react2 = require("@emotion/react");
 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); }
@@ -67,7 +68,7 @@ var Default = function Default(_ref) {
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
@@ -96,7 +97,7 @@ var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState2.state,
     onClose = _useOverlayPanelState2.onClose;
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -127,7 +128,7 @@ var Expandable = function Expandable() {
   var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
     state = _useOverlayPanelState3.state,
     onClose = _useOverlayPanelState3.onClose;
-  var triggerRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isExpanded = _useState2[0],
@@ -384,8 +385,8 @@ var InnerPanel = function InnerPanel(_ref3) {
   var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
     innerState = _useOverlayPanelState5.state,
     onCloseInner = _useOverlayPanelState5.onClose;
-  var outerTriggerRef = (0, _react.useRef)();
-  var innerTriggerRef = (0, _react.useRef)();
+  var outerTriggerRef = (0, _react.useRef)(null);
+  var innerTriggerRef = (0, _react.useRef)(null);
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     messagesOpen = _useState6[0],
@@ -473,7 +474,7 @@ var InnerPanel = function InnerPanel(_ref3) {
       onClose: toggleMessagesOpen
     }, (0, _react2.jsx)(_reactStately.Item, {
       key: "message2",
-      status: "success"
+      status: _statuses["default"].SUCCESS
     }, "Z Index higher than inner pannel")))
   );
 };

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

@@ -0,0 +1,64 @@
+declare const _default: {
+    container: {
+        position: string;
+        overflowY: string;
+        zIndex: number;
+        top: number;
+        bottom: number;
+        right: string;
+        background: string;
+        alignItems: string;
+        justifyContent: string;
+        borderLeft: string;
+        borderLeftColor: string;
+        boxShadow: string;
+        display: string;
+        p: string;
+        transition: string;
+        maxWidth: string;
+        '&.is-small': {
+            width: string;
+        };
+        '&.is-medium': {
+            width: string;
+        };
+        '&.is-large': {
+            width: string;
+        };
+        '&.is-full': {
+            width: string;
+        };
+        '&.is-open.is-transitioning': {
+            right: number;
+        };
+        '&.is-open-no-transition': {
+            right: number;
+        };
+    };
+    body: {
+        display: string;
+        height: string;
+        width: string;
+        '&.is-open': {
+            display: string;
+        };
+    };
+    innerPanel: {
+        position: string;
+        zIndex: number;
+        bottom: number;
+        right: number;
+        background: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        boxShadow: string;
+        minWidth: string;
+        maxWidth: string;
+        width: string;
+        height: string;
+        p: string;
+        backgroundColor: string;
+    };
+};
+export default _default;

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

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

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

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

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.d.ts

@@ -9,7 +9,7 @@ interface UseOverlayPanelStateProps {
 export interface UseOverlayPanelReturnState extends OverlayTriggerState {
     isTransitioning?: boolean;
 }
-interface UseOverlayPanelStateReturnOnClose {
+export interface UseOverlayPanelStateReturnOnClose {
     (stateProp?: OverlayTriggerState, triggerRef?: React.RefObject<HTMLButtonElement>, onCloseProp?: VoidFunction): void;
 }
 interface UseOverlayPanelStateReturnValues {

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

@@ -1,7 +1,7 @@
 import { IconButtonProps as ThemeUIIconButtonProps, ThemeUICSSObject } from 'theme-ui';
 import { TestingAttributes } from './shared/test';
 import { IconTypeExtended } from './icon';
-import { HoverProps, PressProps } from './shared';
+import { HoverProps, IconSize, PressProps } from './shared';
 export interface IconButtonProps extends ThemeUIIconButtonProps, TestingAttributes, PressProps, HoverProps {
     /** The styling variation of the element. */
     variant?: string | undefined;
@@ -18,4 +18,5 @@ export interface IconButtonProps extends ThemeUIIconButtonProps, TestingAttribut
     isDisabled?: boolean;
     /** Inline styling prop */
     sx?: ThemeUICSSObject;
+    size?: IconSize;
 }

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

@@ -12,6 +12,7 @@ export * from './item';
 export * from './link';
 export * from './listItem';
 export * from './loader';
+export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './separator';
 export * from './shared';

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;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21;
 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");
@@ -161,8 +161,19 @@ _forEachInstanceProperty(_context14 = _Object$keys(_loader)).call(_context14, fu
     }
   });
 });
+var _overlayPanel = require("./overlayPanel");
+_forEachInstanceProperty(_context15 = _Object$keys(_overlayPanel)).call(_context15, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _overlayPanel[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _overlayPanel[key];
+    }
+  });
+});
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context15 = _Object$keys(_popoverContainer)).call(_context15, function (key) {
+_forEachInstanceProperty(_context16 = _Object$keys(_popoverContainer)).call(_context16, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -173,7 +184,7 @@ _forEachInstanceProperty(_context15 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context16 = _Object$keys(_separator)).call(_context16, function (key) {
+_forEachInstanceProperty(_context17 = _Object$keys(_separator)).call(_context17, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -184,7 +195,7 @@ _forEachInstanceProperty(_context16 = _Object$keys(_separator)).call(_context16,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context17 = _Object$keys(_shared)).call(_context17, function (key) {
+_forEachInstanceProperty(_context18 = _Object$keys(_shared)).call(_context18, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -195,7 +206,7 @@ _forEachInstanceProperty(_context17 = _Object$keys(_shared)).call(_context17, fu
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context18 = _Object$keys(_table)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_table)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_table)).call(_context18, fun
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context19 = _Object$keys(_text)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_text)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_text)).call(_context19, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context20 = _Object$keys(_tooltipTrigger)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_tooltipTrigger)).call(_context21, 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/overlayPanel.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { OverlayTriggerState } from 'react-stately';
+import { ThemeUICSSObject } from 'theme-ui';
+import { UseOverlayPanelStateReturnOnClose } from '../hooks/useOverlayPanelState/useOverlayPanelState';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { PanelSize } from './shared';
+export interface OverlayPanelProps extends BoxProps, TestingAttributes {
+    /** Sets the open state of the menu. */
+    isOpen?: boolean;
+    /** Sets the size of the overlay panel. */
+    size?: PanelSize;
+    /** Callback function that runs when the esc key is used to close the OverlayPanel. */
+    onClose?: UseOverlayPanelStateReturnOnClose;
+    /** Boolean that determines whether or not the css transition is occuring. */
+    isTransitioning?: boolean;
+    /** Ref that is connected to the button that triggers the overlay state.
+     Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+    /** Inline styling prop for item */
+    sx?: ThemeUICSSObject;
+    state?: OverlayTriggerState;
+}

package/lib/cjs/types/overlayPanel.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/shared/style.d.ts

@@ -15,6 +15,7 @@ export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom star
 export type Axis = 'top' | 'bottom' | 'left' | 'right';
 export type SizeAxis = 'width' | 'height';
 export type PlacementAxis = Axis | 'center';
+export type PanelSize = 'small' | 'medium' | 'large' | 'full' | 'custom';
 type IconTShirtSize = 'xs' | 'sm' | 'md';
 type pixelSize = 'em' | 'px' | 'rem';
 export type IconSize = IconTShirtSize | number | `${number}${pixelSize}`;

package/lib/components/DataTable/DataTable.styles.js

@@ -93,7 +93,7 @@ var tableHeadCell = _objectSpread(_objectSpread({}, text.tableHeader), {}, {
     outline: '1px',
     outlineStyle: 'solid',
     outlineColor: '#D033FF !important',
-    outlineOffset: '-1px'
+    outlineOffset: '-2px'
   },
   '&.is-column-sortable': {
     cursor: 'pointer',

package/lib/components/DataTable/DataTableMenu.js

@@ -7,7 +7,12 @@ var DataTableMenu = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     variant: "dataTable.tableMenu"
   }, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(IconButton, {
-    "aria-label": "row menu"
+    "aria-label": "row menu",
+    sx: {
+      '&.is-focused': {
+        outlineOffset: '-1px'
+      }
+    }
   }, ___EmotionJSX(Icon, {
     size: 25,
     icon: DotsVerticalIcon,

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -2,13 +2,10 @@ 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 = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { FocusScope } from 'react-aria';
-import PropTypes from 'prop-types';
 import { Box } from '../..';
-import { useOverlayPanelState, useStatusClasses } from '../../hooks';
-import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { useLocalOrForwardRef, useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;
@@ -23,11 +20,7 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     others = _objectWithoutProperties(props, _excluded);
   var _useOverlayPanelState = useOverlayPanelState(),
     onClose = _useOverlayPanelState.onClose;
-  var overlayPanelRef = useRef();
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return overlayPanelRef.current;
-  });
+  var overlayPanelRef = useLocalOrForwardRef(ref);
 
   // this is code to avoid regressions -- implementations that do not use the
   // useMountTransition hook will not break, because this className gives the
@@ -59,27 +52,6 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }, children)));
 });
-OverlayPanel.propTypes = {
-  /** Sets the open state of the menu. */
-  isOpen: PropTypes.bool,
-  /** Sets the size of the overlay panel. */
-  size: PropTypes.oneOf(_Object$values(panelSizes)),
-  /** JSX styling that is passed into the component. */
-  sx: PropTypes.shape({
-    width: PropTypes.string
-  }),
-  /** State object that is passed in from the useOverlayPanelState hook */
-  state: PropTypes.shape({
-    close: PropTypes.func
-  }),
-  /** Callback function that runs when the esc key is used to close the OverlayPanel. */
-  onClose: PropTypes.func,
-  /** Boolean that determines whether or not the css transition is occuring. */
-  isTransitioning: PropTypes.bool,
-  /** Ref that is connected to the button that triggers the overlay state.
-   Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
-  triggerRef: PropTypes.shape({})
-};
 OverlayPanel.defaultProps = {
   size: 'medium'
 };

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

@@ -14,6 +14,7 @@ import { useOverlayPanelState } from '../../hooks';
 import { Avatar, Box, Breadcrumbs, Button, ButtonBar, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import statuses from '../../utils/devUtils/constants/statuses';
 import OverlayPanelReadme from './OverlayPanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -53,7 +54,7 @@ export var Default = function Default(_ref) {
   var _useOverlayPanelState = useOverlayPanelState(),
     state = _useOverlayPanelState.state,
     onClose = _useOverlayPanelState.onClose;
-  var triggerRef = useRef();
+  var triggerRef = useRef(null);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
@@ -81,7 +82,7 @@ export var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState2 = useOverlayPanelState(),
     state = _useOverlayPanelState2.state,
     onClose = _useOverlayPanelState2.onClose;
-  var triggerRef = useRef();
+  var triggerRef = useRef(null);
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
@@ -111,7 +112,7 @@ export var Expandable = function Expandable() {
   var _useOverlayPanelState3 = useOverlayPanelState(),
     state = _useOverlayPanelState3.state,
     onClose = _useOverlayPanelState3.onClose;
-  var triggerRef = useRef();
+  var triggerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isExpanded = _useState2[0],
@@ -367,8 +368,8 @@ export var InnerPanel = function InnerPanel(_ref3) {
   var _useOverlayPanelState5 = useOverlayPanelState(),
     innerState = _useOverlayPanelState5.state,
     onCloseInner = _useOverlayPanelState5.onClose;
-  var outerTriggerRef = useRef();
-  var innerTriggerRef = useRef();
+  var outerTriggerRef = useRef(null);
+  var innerTriggerRef = useRef(null);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     messagesOpen = _useState6[0],
@@ -456,7 +457,7 @@ export var InnerPanel = function InnerPanel(_ref3) {
       onClose: toggleMessagesOpen
     }, ___EmotionJSX(Item, {
       key: "message2",
-      status: "success"
+      status: statuses.SUCCESS
     }, "Z Index higher than inner pannel")))
   );
 };

package/lib/types/index.js

@@ -12,6 +12,7 @@ export * from './item';
 export * from './link';
 export * from './listItem';
 export * from './loader';
+export * from './overlayPanel';
 export * from './popoverContainer';
 export * from './separator';
 export * from './shared';

package/lib/types/overlayPanel.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.45.0-alpha.1",
+  "version": "2.45.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",