@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,55 +1,32 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.WithHelperText = exports.Units = exports.StepValues = exports.MinimumAndMaximumValues = exports.DisabledAndReadOnly = exports.Default = exports.Decimals = exports.CurrencyValues = exports.ControlledState = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _NumberField = _interopRequireDefault(require("./NumberField"));
-
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
 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; }
-
 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 _default = {
   title: 'Form/NumberField',
   component: _NumberField["default"],
@@ -60,7 +37,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -133,16 +110,13 @@ var _default = {
         type: 'none'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
 };
 exports["default"] = _default;
-
 var Default = function Default(args) {
   return (0, _react2.jsx)(_NumberField["default"], args);
 };
-
 exports.Default = Default;
-
 var Decimals = function Decimals() {
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Adjust exposure",
@@ -154,24 +128,19 @@ var Decimals = function Decimals() {
     }
   });
 };
-
 exports.Decimals = Decimals;
-
 var ControlledState = function ControlledState() {
   var _useState = (0, _react.useState)(12),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Controlled State",
     value: value,
     onChange: setValue
   });
 };
-
 exports.ControlledState = ControlledState;
-
 var CurrencyValues = function CurrencyValues() {
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Transaction amount",
@@ -184,9 +153,7 @@ var CurrencyValues = function CurrencyValues() {
     }
   });
 };
-
 exports.CurrencyValues = CurrencyValues;
-
 var DisabledAndReadOnly = function DisabledAndReadOnly() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NumberField["default"], {
     label: "Disabled",
@@ -203,18 +170,14 @@ var DisabledAndReadOnly = function DisabledAndReadOnly() {
     }
   }));
 };
-
 exports.DisabledAndReadOnly = DisabledAndReadOnly;
-
 var MinimumAndMaximumValues = function MinimumAndMaximumValues() {
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Enter your age",
     minValue: 0
   });
 };
-
 exports.MinimumAndMaximumValues = MinimumAndMaximumValues;
-
 var StepValues = function StepValues() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NumberField["default"], {
     label: "Step",
@@ -243,9 +206,7 @@ var StepValues = function StepValues() {
     }
   }));
 };
-
 exports.StepValues = StepValues;
-
 var WithHelperText = function WithHelperText() {
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Helper Text",
@@ -253,9 +214,7 @@ var WithHelperText = function WithHelperText() {
     helperText: "Useful Text"
   });
 };
-
 exports.WithHelperText = WithHelperText;
-
 var Units = function Units() {
   return (0, _react2.jsx)(_NumberField["default"], {
     label: "Package width",
@@ -267,5 +226,4 @@ var Units = function Units() {
     }
   });
 };
-
 exports.Units = Units;

package/lib/cjs/{styles/variants/numberField.js → components/NumberField/NumberField.styles.js}

@@ -1,37 +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("../forms/input");
-
+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
@@ -43,13 +30,17 @@ var noDefaultArrows = {
     MozAppearance: 'textfield'
   }
 };
-
-var arrowsWrapper = _objectSpread({
+var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
-}, _input.input.container);
-
+}, _Input.input.fieldControlWrapper), {}, (_objectSpread2 = {}, (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].ERROR, "::after"), {
+  bg: 'critical.bright'
+}), (0, _defineProperty2["default"])(_objectSpread2, "&.is-".concat(_statuses["default"].SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), (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 _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _focus = require("@react-aria/focus");
-
-var _ = require("../../");
-
+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,74 +30,62 @@ 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)(_focus.FocusScope, {
+  return (0, _react2.jsx)(_reactAria.FocusScope, {
     autoFocus: true
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    variant: "overlayPanel.overlayPanel",
+    variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), (0, _react2.jsx)(_.Box, {
-    variant: "overlayPanel.overlayPanelBody",
+    variant: "overlayPanel.body",
     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,
-
   /** 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({})