@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/recipes/CountryPicker.stories.js

@@ -11,12 +11,10 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Country Picker'
 };
-
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
   return reg.test(str);
 };
-
 var sx = {
   wrapperBox: {
     width: '100%',
@@ -31,78 +29,64 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    width: '110px'
+    maxWidth: '110px'
   },
   inputWrapper: {
     width: '100%',
-    marginLeft: '110px'
+    ml: '110px'
   }
 };
 export var Default = function Default() {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      searchValue = _useState4[0],
-      setSearchValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      phoneCodeValue = _useState6[0],
-      setPhoneCodeValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    phoneCodeValue = _useState6[0],
+    setPhoneCodeValue = _useState6[1];
   var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selectedKey = _useState8[0],
-      setSelectedKey = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedKey = _useState8[0],
+    setSelectedKey = _useState8[1];
   var _useState9 = useState(''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      phoneNumber = _useState10[0],
-      setPhoneNumber = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    phoneNumber = _useState10[0],
+    setPhoneNumber = _useState10[1];
   var getInputValue = function getInputValue() {
     if (isOpen) return searchValue;
     return phoneCodeValue || searchValue;
   };
-
   var inputHandler = function inputHandler(value) {
     setSearchValue(value);
-
     if (!value) {
       setSelectedKey(null);
       setPhoneCodeValue('');
     }
   };
-
   var selectionHandler = function selectionHandler(key) {
     setSelectedKey(key);
-
     if (key) {
       setPhoneCodeValue("+".concat(countriesObj[key].phone.split(',')[0]));
     } else {
       setSearchValue('');
       setPhoneCodeValue('');
     }
-
     setIsOpen(false);
   };
-
   var keyHandler = function keyHandler(e) {
     if (e.keyCode !== 13) setIsOpen(true);
   };
-
   var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
     var value = e.target.value;
-
     if (value === '' || validatePhoneNumber(value)) {
       setPhoneNumber(value);
     }
   };
-
   return ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.wrapperBox
@@ -111,7 +95,7 @@ export var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    wrapperProps: {
+    containerProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
@@ -126,7 +110,6 @@ export var Default = function Default() {
     menuTrigger: "focus"
   }, function (item) {
     var _context, _context2;
-
     return ___EmotionJSX(Item, {
       key: item[0]
     }, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));

package/lib/recipes/DatePicker.stories.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
 import CalendarIcon from 'mdi-react/CalendarIcon';
 import moment from 'moment';
-import { Box, Icon, IconButton, TextField, useOverlayPosition, useOverlayTrigger, useOverlayTriggerState } from '../index';
+import { text } from '../components/Text/Text.styles';
+import { Box, Icon, IconButton, PopoverContainer, TextField, useOverlayPosition, useOverlayTrigger, useOverlayTriggerState } from '../index';
 import statuses from '../utils/devUtils/constants/statuses';
-import PopoverContainer from '../components/PopoverContainer';
+import 'react-calendar/dist/Calendar.css';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Date Picker',
@@ -26,46 +26,83 @@ var sx = {
     top: 8,
     width: 28,
     height: 28
+  },
+  container: {
+    maxWidth: 300,
+    '.react-calendar': {
+      width: 280,
+      '& .react-calendar__month-view__days__day': {
+        width: 40,
+        height: 40,
+        color: 'neutral.10',
+        fontSize: 'sm',
+        fontWeight: 1
+      },
+      '& .react-calendar__navigation__label__labelText': text.itemTitle,
+      '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+        color: 'neutral.40'
+      },
+      '& .react-calendar__month-view__weekdays': {
+        borderBottom: '1px solid',
+        borderColor: 'neutral.80'
+      },
+      '& .react-calendar__month-view__weekdays__weekday abbr': {
+        textDecoration: 'none',
+        textTransform: 'capitalize'
+      },
+      '& .react-calendar__month-view__days__day--weekend': {
+        color: 'decorative.4'
+      },
+      '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+        backgroundColor: 'active',
+        color: 'white'
+      },
+      '& .react-calendar__year-view__months__month': {
+        padding: '19px 0'
+      },
+      '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+        '&:hover': {
+          backgroundColor: 'rgba(70, 96, 162, .1);',
+          color: 'neutral.10'
+        }
+      },
+      '& .react-calendar__navigation': {
+        marginBottom: 0
+      }
+    }
   }
 };
 export var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
-
   var _useState = useState(moment('2021-01-01', 'YYYY-MM-DD')),
-      _useState2 = _slicedToArray(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
   var _useState3 = useState(date.format(dateFormat)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
   var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      error = _useState6[0],
-      setError = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   var triggerRef = React.useRef();
   var overlayRef = React.useRef();
   var popoverState = useOverlayTriggerState({});
-
   var _useOverlayTrigger = useOverlayTrigger({
-    type: 'dialog'
-  }, popoverState, triggerRef),
-      triggerProps = _useOverlayTrigger.triggerProps,
-      overlayProps = _useOverlayTrigger.overlayProps;
-
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    offset: 15,
-    isOpen: popoverState.isOpen,
-    onClose: popoverState.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps;
-
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      offset: 15,
+      isOpen: popoverState.isOpen,
+      onClose: popoverState.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps;
   var handleCalendarIconPress = useCallback(function () {
     return popoverState.open();
   }, []);
@@ -76,7 +113,6 @@ export var Default = function Default() {
   var handleOnBlur = useCallback(function (_ref2) {
     var value = _ref2.target.value;
     var dateFromInput = moment(value);
-
     if (dateFromInput.isValid()) {
       setDate(dateFromInput);
       setInputValue(dateFromInput.format(dateFormat));
@@ -91,10 +127,7 @@ export var Default = function Default() {
     setError(false);
   }, []);
   return ___EmotionJSX(Box, {
-    sx: {
-      maxWidth: 300
-    },
-    variant: "boxes.dataPicker"
+    sx: sx.container
   }, ___EmotionJSX(TextField, {
     slots: {
       inContainer: ___EmotionJSX(IconButton, _extends({
@@ -120,7 +153,7 @@ export var Default = function Default() {
     hasNoArrow: true,
     isDismissable: true
   }), ___EmotionJSX(Box, {
-    variant: "boxes.datePicker"
+    sx: sx.container
   }, ___EmotionJSX(Calendar, {
     onChange: handleCalendarChange,
     value: date.toDate()

package/lib/recipes/EditableInput.stories.js

@@ -8,15 +8,12 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 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, { createContext, useContext, useRef, useState, useEffect } from 'react';
-import CloseIcon from 'mdi-react/CloseIcon';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import CheckIcon from 'mdi-react/CheckIcon';
-import { TextAreaField, IconButton, Icon, Box } from '../index';
+import CloseIcon from 'mdi-react/CloseIcon';
+import { Box, Icon, IconButton, TextAreaField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Editable Input'
@@ -88,6 +85,7 @@ export var Default = function Default() {
     controlProps: controlProps
   }));
 };
+
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
@@ -95,18 +93,16 @@ export var Default = function Default() {
 
 var Editable = function Editable(props) {
   var value = props.value,
-      isEditing = props.isEditing;
+    isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
     prevValue: '',
     value: value || ''
   };
-
   var _useState = useState(editableContextValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      editableContext = _useState2[0],
-      setEditableContext = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    editableContext = _useState2[0],
+    setEditableContext = _useState2[1];
   return ___EmotionJSX(Box, {
     sx: {
       position: 'relative'
@@ -115,23 +111,21 @@ var Editable = function Editable(props) {
     value: [editableContext, setEditableContext]
   }, props.children));
 };
+
 /**
  * Editable preview
  * Read-only view of the component
  */
 
-
 var EditablePreview = function EditablePreview() {
   var _useContext = useContext(EditableAreaContext),
-      _useContext2 = _slicedToArray(_useContext, 2),
-      editableContext = _useContext2[0],
-      setEditableContext = _useContext2[1];
-
+    _useContext2 = _slicedToArray(_useContext, 2),
+    editableContext = _useContext2[0],
+    setEditableContext = _useContext2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasFocus = _useState4[0],
-      setFocus = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFocus = _useState4[0],
+    setFocus = _useState4[1];
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -144,13 +138,11 @@ var EditablePreview = function EditablePreview() {
       setFocus(false);
     }
   }, [hasFocus, editableContext.isEditing]);
-
   var handleClick = function handleClick() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       isEditing: true
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -158,7 +150,6 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-
   return ___EmotionJSX(Box, {
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
@@ -177,32 +168,28 @@ var EditablePreview = function EditablePreview() {
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
+
 /**
  * Editable input
  * Swappable with TextField and TextAreaField component
  * Input view of the component
  */
 
-
 var EditableInput = function EditableInput(props) {
   var ariaLabel = props.inputProps.ariaLabel;
   var editableInput = useRef(null);
-
   var _useContext3 = useContext(EditableAreaContext),
-      _useContext4 = _slicedToArray(_useContext3, 2),
-      editableContext = _useContext4[0],
-      setEditableContext = _useContext4[1];
-
+    _useContext4 = _slicedToArray(_useContext3, 2),
+    editableContext = _useContext4[0],
+    setEditableContext = _useContext4[1];
   var _useState5 = useState(editableContext.value || ''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevValue = _useState6[0],
-      setPrevValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevValue = _useState6[0],
+    setPrevValue = _useState6[1];
   var _useState7 = useState(editableContext.value || ''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      editingValue = _useState8[0],
-      setEditingValue = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    editingValue = _useState8[0],
+    setEditingValue = _useState8[1];
   useEffect(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -211,14 +198,12 @@ var EditableInput = function EditableInput(props) {
       editableInput.current.focus();
     }
   }, [editableContext.isEditing]);
-
   var handleChange = function handleChange(e) {
     setEditingValue(e.target.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       value: e.target.value
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Escape') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -230,7 +215,6 @@ var EditableInput = function EditableInput(props) {
       if (e.shiftKey) {
         return;
       }
-
       setPrevValue(editableContext.value);
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
         prevValue: editableContext.value,
@@ -239,7 +223,6 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
-
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
@@ -258,28 +241,25 @@ var EditableInput = function EditableInput(props) {
     isUnresizable: true
   }));
 };
+
 /**
  * Editable controls
  * Use css to position buttons
  * Extend with more button controls as needed
  */
 
-
 var EditableControl = function EditableControl(props) {
   var confirmBtn = props.controlProps.confirmBtn,
-      cancelBtn = props.controlProps.cancelBtn,
-      onPress = props.onPress;
-
+    cancelBtn = props.controlProps.cancelBtn,
+    onPress = props.onPress;
   var _useContext5 = useContext(EditableAreaContext),
-      _useContext6 = _slicedToArray(_useContext5, 2),
-      editableContext = _useContext6[0],
-      setEditableContext = _useContext6[1];
-
+    _useContext6 = _slicedToArray(_useContext5, 2),
+    editableContext = _useContext6[0],
+    setEditableContext = _useContext6[1];
   var _useState9 = useState(editableContext.value || ''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      prevValue = _useState10[0],
-      setPrevValue = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    prevValue = _useState10[0],
+    setPrevValue = _useState10[1];
   var handleCancel = function handleCancel() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       prevValue: prevValue,
@@ -287,7 +267,6 @@ var EditableControl = function EditableControl(props) {
       isEditing: false
     }));
   };
-
   var handleSubmit = function handleSubmit() {
     setPrevValue(editableContext.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -295,12 +274,10 @@ var EditableControl = function EditableControl(props) {
       value: editableContext.value,
       isEditing: false
     }));
-
     if (onPress) {
       onPress();
     }
   };
-
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -8,24 +8,21 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
+import { useOverlayPosition } from 'react-aria';
+import { useLayoutEffect } from '@react-aria/utils';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { useOverlayPosition } from '@react-aria/overlays';
-import { useLayoutEffect } from '@react-aria/utils';
-import { Button, Box, Icon, IconButton } from '../index';
 import PopoverContainer from '../components/PopoverContainer';
+import { Box, Button, Icon, IconButton } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Flippable Caret Menu Button'
@@ -68,59 +65,47 @@ var sx = {
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedButtons = _useState4[0],
-      setSelectedButton = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedButtons = _useState4[0],
+    setSelectedButton = _useState4[1];
   var onChange = function onChange() {
     setIsOpen(!isOpen);
   };
-
   var toggleButton = function toggleButton(key) {
     var _context;
-
     var newState = selectedButtons;
-
     if (_includesInstanceProperty(selectedButtons).call(selectedButtons, key)) {
       var index = _indexOfInstanceProperty(newState).call(newState, key);
-
       _spliceInstanceProperty(newState).call(newState, index, 1);
     } else {
       newState.push(key);
     }
-
     setSelectedButton(_concatInstanceProperty(_context = []).call(_context, newState));
   };
-
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: 'bottom left',
-    isOpen: true
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: 'bottom left',
+      isOpen: true
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   useLayoutEffect(function () {
     requestAnimationFrame(function () {
       updatePosition();
     });
   }, [updatePosition]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: '500px',
     minWidth: '500px',
     height: '200px'
   });
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
     variant: "inline",