@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

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

@@ -1,41 +1,24 @@
 "use strict";
 
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
-var _Input = require("../Input/Input.styles");
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _Input = require("../Input/Input.styles");
 var _objectSpread2;
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var sharedStyles = {
   WebkitAppearance: 'none',
   margin: 0
@@ -47,7 +30,6 @@ var noDefaultArrows = {
     MozAppearance: 'textfield'
   }
 };
-
 var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
@@ -59,7 +41,6 @@ var arrowsWrapper = _objectSpread(_objectSpread({
 }), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].WARNING, "::after"), {
   bg: 'warning.bright'
 }), _objectSpread2));
-
 var arrows = {
   position: 'absolute',
   right: '10px'

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

@@ -1,25 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
 var _react2 = require("@testing-library/react");
-
-var _testWrapper = require("../../utils/testUtils/testWrapper");
-
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
-
-var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _react3 = require("@emotion/react");
-
 var testId = 'test-NumberField';
 var testLabel = 'test-NumberField-label';
 var testValue = 5;
@@ -35,13 +25,12 @@ var defaultProps = {
   incrementAriaLabel: incrementAriaLabel,
   decrementAriaLabel: decrementAriaLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react3.jsx)(_index.NumberField, (0, _extends2["default"])({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent, {
   // ListItem represents list's child without parent
   rules: {
@@ -61,9 +50,7 @@ test('arrow up is adding step to the number value', function () {
     value: testValue,
     step: testStep
   });
-
   _userEvent["default"].click(_testWrapper.screen.getByLabelText(incrementAriaLabel));
-
   expect(mockOnChange).toHaveBeenCalledWith(testValue + testStep);
 });
 test('arrow down is subtract step to the number value', function () {
@@ -73,9 +60,7 @@ test('arrow down is subtract step to the number value', function () {
     value: testValue,
     step: testStep
   });
-
   _userEvent["default"].click(_testWrapper.screen.getByLabelText(decrementAriaLabel));
-
   expect(mockOnChange).toHaveBeenCalledWith(testValue - testStep);
 });
 test('value can be set from outside (controlled state)', function () {
@@ -91,13 +76,9 @@ test('calling onChange with integer when input value changed (controlled state)'
   getComponent({
     onChange: mockOnChange
   });
-
   var numberInput = _testWrapper.screen.getByLabelText(testLabel);
-
   _userEvent["default"].clear(numberInput);
-
   _userEvent["default"].type(numberInput, newTestValue.toString());
-
   numberInput.blur();
   expect(mockOnChange).toHaveBeenCalledWith(newTestValue);
 });
@@ -113,32 +94,22 @@ test('should show helper text if appropriate prop passed', function () {
     helperText: helperText,
     status: _statuses["default"].ERROR
   });
-
   var fieldHelperText = _testWrapper.screen.getByText(helperText);
-
   expect(fieldHelperText).toBeInTheDocument();
   expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });
 test('should be able to be focused via keyboard', function () {
   getComponent();
-
   _userEvent["default"].tab();
-
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveFocus();
 });
 test('should be able to interact with the keyboard', function () {
   getComponent();
-
   _userEvent["default"].tab();
-
   var numberInput = _testWrapper.screen.getByLabelText(testLabel);
-
   _userEvent["default"].type(numberInput, '{arrowup}');
-
   expect(numberInput).toHaveValue((testValue + 1).toString());
-
   _userEvent["default"].type(numberInput, '{arrowdown}{arrowdown}');
-
   expect(numberInput).toHaveValue((testValue - 1).toString());
 });
 test('should show hintText text if prop is passed', function () {
@@ -146,28 +117,18 @@ test('should show hintText text if prop is passed', function () {
   getComponent({
     hintText: hintText
   });
-
   var helpHintButton = _testWrapper.screen.getByTestId('help-hint__button');
-
   _react2.fireEvent.mouseMove(helpHintButton);
-
   _react2.fireEvent.mouseEnter(helpHintButton);
-
   expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
 });
 test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
   getComponent();
-
   _userEvent["default"].tab();
-
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveFocus();
-
   _userEvent["default"].tab();
-
   expect(_testWrapper.screen.getByLabelText('arrow-up')).not.toHaveFocus();
-
   _userEvent["default"].tab();
-
   expect(_testWrapper.screen.getByLabelText('arrow-down')).not.toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
@@ -179,9 +140,7 @@ test('number field input receiving name attribute', function () {
 });
 test('number field can be focused', function () {
   getComponent();
-
   _userEvent["default"].tab();
-
   expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveClass('is-focused');
 });
 test('passing helper text should display it and correct aria attributes on input', function () {
@@ -190,9 +149,7 @@ test('passing helper text should display it and correct aria attributes on input
     helperText: testHelperText,
     status: _statuses["default"].ERROR
   });
-
   var helper = _testWrapper.screen.getByText(testHelperText);
-
   expect(helper).toBeInTheDocument();
   expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
   var helperTextID = helper.getAttribute('id');

package/lib/cjs/components/NumberField/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _NumberField["default"];
   }
 });
-
 var _NumberField = _interopRequireDefault(require("./NumberField"));

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

@@ -1,49 +1,28 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _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 _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactAria = require("react-aria");
-
-var _ = require("../../");
-
+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", "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); }
-
 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; }
-
 /**
  * In Astro, side panels are used to show details and present modal interactions.
  *
@@ -51,41 +30,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
  * use Chrome or Safari to view how this component works.
  */
+
 var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$sx;
-
   var children = props.children,
-      isOpen = props.isOpen,
-      onCloseProp = props.onClose,
-      className = props.className,
-      state = props.state,
-      size = props.size,
-      triggerRef = props.triggerRef,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
+    isOpen = props.isOpen,
+    onCloseProp = props.onClose,
+    className = props.className,
+    state = props.state,
+    size = props.size,
+    triggerRef = props.triggerRef,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      onClose = _useOverlayPanelState.onClose;
-
+    onClose = _useOverlayPanelState.onClose;
   var overlayPanelRef = (0, _react.useRef)();
   /* istanbul ignore next */
-
   (0, _react.useImperativeHandle)(ref, function () {
     return overlayPanelRef.current;
   });
-
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({
-    isOpen: isOpen
-  }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
-      classNames = _useStatusClasses.classNames;
-
+      isOpen: isOpen
+    }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
+    classNames = _useStatusClasses.classNames;
   var handleClose = function handleClose(e) {
     e.stopPropagation();
-
     if (e.key === 'Escape') {
       onClose(state, triggerRef, onCloseProp);
     }
   };
-
   return (0, _react2.jsx)(_reactAria.FocusScope, {
     autoFocus: true
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -102,23 +74,18 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 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,
-
   /** 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({})

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

@@ -1,56 +1,33 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
-
 var _ArrowCollapseIcon = _interopRequireDefault(require("mdi-react/ArrowCollapseIcon"));
-
+var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("mdi-react/ArrowTopRightBottomLeftIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _CogIcon = _interopRequireDefault(require("mdi-react/CogIcon"));
-
-var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
-
 var _hooks = require("../../hooks");
-
-var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel"));
-
 var _index = require("../../index");
-
-var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
-
 var _images = require("../../utils/devUtils/constants/images");
-
+var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
 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); }
-
 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 _default = {
   title: 'Components/OverlayPanel',
-  component: _OverlayPanel["default"],
+  component: _index.OverlayPanel,
   argTypes: {
     children: {
       description: 'Overlay panel content.',
@@ -76,22 +53,20 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
 var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, _ref);
-
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = (0, _react.useRef)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
       onPress: state.open,
       "aria-expanded": state.isOpen
-    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
       isOpen: state.isOpen,
       state: state
     }, args, {
@@ -106,46 +81,35 @@ var Default = function Default(_ref) {
     }, "Children render here."))))
   );
 };
-
 exports.Default = Default;
-
 var InnerPanel = function InnerPanel(_ref2) {
-  var args = (0, _extends2["default"])({}, _ref2);
-
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState2.state,
-      onClose = _useOverlayPanelState2.onClose;
-
+    state = _useOverlayPanelState2.state,
+    onClose = _useOverlayPanelState2.onClose;
   var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
-      innerState = _useOverlayPanelState3.state,
-      onCloseInner = _useOverlayPanelState3.onClose;
-
+    innerState = _useOverlayPanelState3.state,
+    onCloseInner = _useOverlayPanelState3.onClose;
   var outerTriggerRef = (0, _react.useRef)();
   var innerTriggerRef = (0, _react.useRef)();
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      messagesOpen = _useState2[0],
-      setMessagesOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    messagesOpen = _useState2[0],
+    setMessagesOpen = _useState2[1];
   var toggleMessagesOpen = function toggleMessagesOpen() {
     setMessagesOpen(!messagesOpen);
   };
-
   var closeOuterPanel = function closeOuterPanel() {
     if (innerState.isOpen) {
       innerState.close();
     }
-
     onClose(state, outerTriggerRef);
   };
-
   var closeInnerPanel = function closeInnerPanel() {
     onCloseInner(innerState, innerTriggerRef);
   };
-
-  var inner = (0, _react2.jsx)(_react["default"].Fragment, null, innerState.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
-    variant: "overlayPanel.innerPanel" // applies higher z-index
+  var inner = innerState.isOpen && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
+    variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
   }, args, {
@@ -155,7 +119,7 @@ var InnerPanel = function InnerPanel(_ref2) {
     onPress: closeInnerPanel
   }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md"
-  }, "Children render here."))));
+  }, "Children render here.")));
   var items = [{
     id: 1,
     name: 'Form 1'
@@ -163,8 +127,9 @@ var InnerPanel = function InnerPanel(_ref2) {
     id: 2,
     name: 'Form 2'
   }];
-  var outer = // should have higher z-index applied
-  (0, _react2.jsx)(_react["default"].Fragment, null, state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
+  var outer =
+  // should have higher z-index applied
+  state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
     isOpen: state.isOpen,
     sx: {
       p: '0px'
@@ -198,8 +163,9 @@ var InnerPanel = function InnerPanel(_ref2) {
     ref: innerTriggerRef,
     onPress: innerState.open,
     "aria-expanded": innerState.isOpen
-  }, "Open Inner Panel"), inner)));
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  }, "Open Inner Panel"), inner));
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       ref: outerTriggerRef,
@@ -216,22 +182,20 @@ var InnerPanel = function InnerPanel(_ref2) {
     }, "Z Index higher than inner pannel")))
   );
 };
-
 exports.InnerPanel = InnerPanel;
-
 var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState4.state,
-      onClose = _useOverlayPanelState4.onClose;
-
+    state = _useOverlayPanelState4.state,
+    onClose = _useOverlayPanelState4.onClose;
   var triggerRef = (0, _react.useRef)();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
       onPress: state.open,
       "aria-expanded": state.isOpen
-    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, {
       isOpen: state.isOpen,
       state: state,
       triggerRef: triggerRef,
@@ -248,21 +212,16 @@ var CustomWidth = function CustomWidth() {
     }, "Children render here."))))
   );
 };
-
 exports.CustomWidth = CustomWidth;
-
 var Expandable = function Expandable() {
   var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
-      state = _useOverlayPanelState5.state,
-      onClose = _useOverlayPanelState5.onClose;
-
+    state = _useOverlayPanelState5.state,
+    onClose = _useOverlayPanelState5.onClose;
   var triggerRef = (0, _react.useRef)();
-
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isExpanded = _useState4[0],
-      setIsExpanded = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
   var sx = {
     overlayPanel: {
       padding: 0,
@@ -335,11 +294,9 @@ var Expandable = function Expandable() {
     name: 'node 2',
     key: 'node2'
   }];
-
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
-
   var header = (0, _react2.jsx)(_index.Box, {
     sx: sx.header
   }, (0, _react2.jsx)(_index.Box, {
@@ -477,13 +434,14 @@ var Expandable = function Expandable() {
     sx: sx.footer.button,
     variant: "text"
   }, "Cancel"));
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
       onPress: state.open,
       "aria-expanded": state.isOpen
-    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
+    }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_index.OverlayPanel, {
       isOpen: state.isOpen,
       state: state,
       triggerRef: triggerRef,
@@ -506,5 +464,4 @@ var Expandable = function Expandable() {
     }, schemaTabContent))), footer))
   );
 };
-
 exports.Expandable = Expandable;

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

@@ -1,11 +1,9 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
 var container = {
   position: 'fixed',