@pedidopago/ui 1.3.3 → 1.3.4

package/dist/components/Modal/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Modal = Modal;
-
-var _styles = require("./styles");
+exports.Modal = void 0;
 
 var _react = require("react");
 
@@ -13,7 +11,9 @@ var _useDisableBodyScroll = require("../../shared/hooks/useDisableBodyScroll");
 
 var _useKeyPress = require("../../shared/hooks/useKeyPress");
 
-var _useWindowSize2 = require("../../shared/hooks/useWindowSize");
+var _ReactPortal = require("../ReactPortal");
+
+var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -29,9 +29,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function Modal(_ref) {
-  var _containerRef$current, _containerRef$current2;
-
+var Modal = function Modal(_ref) {
   var open = _ref.open,
       _ref$left = _ref.left,
       left = _ref$left === void 0 ? '50vw' : _ref$left,
@@ -56,9 +54,6 @@ function Modal(_ref) {
       onClose = _ref.onClose,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
-      windowHeight = _useWindowSize.height;
-
   var containerRef = (0, _react.useRef)(null);
   (0, _useKeyPress.useKeyPress)('Escape', function () {
     return onClose && onClose();
@@ -114,7 +109,8 @@ function Modal(_ref) {
     return "translate(".concat(percentageX, "%, ").concat(percentageY, "%)");
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
+    wrapperId: "portal-root",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
       style: {
         opacity: open && !hideOverlay ? 0.1 : 0,
@@ -127,7 +123,7 @@ function Modal(_ref) {
       ref: containerRef,
       open: open,
       maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
-      maxHeight: "".concat(windowHeight - (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.y) || 0), "px"),
+      maxHeight: typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight,
       left: "calc(".concat(left, " + ").concat(offsetX, ")"),
       top: "calc(".concat(top, " + ").concat(offsetY, ")"),
       anchorTranslate: getAnchorTranslate(),
@@ -140,4 +136,6 @@ function Modal(_ref) {
       }))
     })]
   });
-}
+};
+
+exports.Modal = Modal;

package/dist/components/Modal/modal.test.js

@@ -17,12 +17,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function setup(props) {
-  var componentRender = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider, {
+  var _document$getElementB, _document$getElementB2;
+
+  (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeContext.PPUIThemeProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal, _objectSpread({}, props))
   }));
   return {
-    overlay: componentRender.container.childNodes[0],
-    modal: componentRender.container.childNodes[1]
+    overlay: (_document$getElementB = document.getElementById('portal-root')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childNodes[0],
+    modal: (_document$getElementB2 = document.getElementById('portal-root')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.childNodes[1]
   };
 }
 
@@ -98,7 +100,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(0%, -50%) scale(1)'
+      transform: 'translate(0%, -50%)'
     });
   });
   it('should display modal with anchorX set to right', function () {
@@ -111,7 +113,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(-100%, -50%) scale(1)'
+      transform: 'translate(-100%, -50%)'
     });
   });
   it('should display modal with anchorX set to center', function () {
@@ -124,7 +126,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(-50%, -50%) scale(1)'
+      transform: 'translate(-50%, -50%)'
     });
   });
   it('should display modal with anchorY set to top', function () {
@@ -137,7 +139,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(-50%, 0%) scale(1)'
+      transform: 'translate(-50%, 0%)'
     });
   });
   it('should display modal with anchorY set to bottom', function () {
@@ -150,7 +152,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(-50%, -100%) scale(1)'
+      transform: 'translate(-50%, -100%)'
     });
   });
   it('should display modal with anchorY set to center', function () {
@@ -163,7 +165,7 @@ describe('Modal', function () {
       })
     });
     expect(modal.modal).toHaveStyle({
-      transform: 'translate(-50%, -50%) scale(1)'
+      transform: 'translate(-50%, -50%)'
     });
   });
   it('should display modal with maxWidth', function () {

package/dist/components/Pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBAyHlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBA2HlB"}

package/dist/components/Pagination/index.js

@@ -11,11 +11,13 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _colorToGray = require("../../utils/colorToGray");
 
+var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
+
 var _usePagination = require("./hooks/usePagination");
 
 var _styles = require("./styles");
 
-var _react2 = require("@emotion/react");
+var _theme = require("../../shared/theme");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -70,7 +72,12 @@ function Pagination(_ref) {
       nextButtonDisabled = _useState6[0],
       setNextButtonDisabled = _useState6[1];
 
-  var theme = (0, _react2.useTheme)();
+  var _useTheme = (0, _theme.useTheme)(),
+      theme = _useTheme.theme;
+
+  var _useColorMode = (0, _useColorMode2.useColorMode)(),
+      colorMode = _useColorMode.colorMode;
+
   (0, _react.useEffect)(function () {
     if (activePage !== count) {
       setNextButtonDisabled(false);
@@ -89,12 +96,18 @@ function Pagination(_ref) {
     var themeColor = theme.colors.primary.default;
 
     var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
-        neutral1 = _convertColor.neutral1;
+        neutral2 = _convertColor.neutral2,
+        neutral5 = _convertColor.neutral5;
+
+    var grayColorByTheme = {
+      dark: neutral5,
+      light: neutral2
+    }[colorMode] || neutral2;
 
-    var _neutral = _slicedToArray(neutral1, 3),
-        h = _neutral[0],
-        s = _neutral[1],
-        l = _neutral[2];
+    var _grayColorByTheme = _slicedToArray(grayColorByTheme, 3),
+        h = _grayColorByTheme[0],
+        s = _grayColorByTheme[1],
+        l = _grayColorByTheme[2];
 
     var grayColor = "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
     var saturationColor = "hsl(".concat(h, ", ", 12, "%, ", 39, "%)");
@@ -105,7 +118,7 @@ function Pagination(_ref) {
       numberOfPageColor: numberOfPageColor,
       themeColor: themeColor
     };
-  }, [color]),
+  }, [color, theme]),
       grayColor = _useMemo.grayColor,
       numberOfPageColor = _useMemo.numberOfPageColor,
       saturationColor = _useMemo.saturationColor,
@@ -179,7 +192,7 @@ function Pagination(_ref) {
       disabled: previousButtonDisabled || isDisabled,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: previousButtonIcon,
-        size: 16
+        size: 22
       })
     }), size === 'large' && LargeView(), size === 'small' && SmallView(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NextNavigationButton, {
       shape: shape,
@@ -190,7 +203,7 @@ function Pagination(_ref) {
       disabled: nextButtonDisabled || isDisabled,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: nextButtonIcon,
-        size: 16
+        size: 22
       })
     })]
   });

package/dist/components/Pagination/styles.js

@@ -77,8 +77,9 @@ var NextNavigationButton = _styled.default.button(_templateObject16 || (_templat
 exports.NextNavigationButton = NextNavigationButton;
 
 var SmallPageInfo = _styled.default.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  display: block;\n  min-width: 60px;\n  font-size: 16px;\n  line-height: 1.5;\n  color: ", ";\n  margin: 0 24px;\n"])), function (_ref7) {
-  var saturationColor = _ref7.saturationColor;
-  return saturationColor;
+  var grayColor = _ref7.grayColor,
+      theme = _ref7.theme;
+  return grayColor || theme.colors.tertiary.default;
 });
 
 exports.SmallPageInfo = SmallPageInfo;

package/dist/components/ReactPortal/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface ReactPortalProps {
+    wrapperId: string;
+    children: ReactNode | ReactNode[] | JSX.Element | JSX.Element[];
+}
+export declare function ReactPortal({ children, wrapperId }: ReactPortalProps): import("react").ReactPortal | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ReactPortal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactPortal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CACjE;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAyB,EAAE,EAAE,gBAAgB,sCAsBpF"}

package/dist/components/ReactPortal/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactPortal = ReactPortal;
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _createWrapperAndApprendToBody = require("./utils/createWrapperAndApprendToBody");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ReactPortal(_ref) {
+  var children = _ref.children,
+      _ref$wrapperId = _ref.wrapperId,
+      wrapperId = _ref$wrapperId === void 0 ? 'portal-root' : _ref$wrapperId;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      wrapperElement = _useState2[0],
+      setWrapperElement = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    var element = document.getElementById(wrapperId);
+    var systemCreated = false;
+
+    if (!element) {
+      systemCreated = true;
+      element = (0, _createWrapperAndApprendToBody.createWrapperAndAppendToBody)(wrapperId);
+    }
+
+    setWrapperElement(element);
+    return function () {
+      if (systemCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+  if (wrapperElement === null) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  }), wrapperElement);
+}

package/dist/components/ReactPortal/reactPortal.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=reactPortal.test.d.ts.map

package/dist/components/ReactPortal/reactPortal.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactPortal.test.d.ts","sourceRoot":"","sources":["../../../src/components/ReactPortal/reactPortal.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/dist/components/ReactPortal/reactPortal.test.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _ = require(".");
+
+require("@testing-library/jest-dom");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function setup() {
+  (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ReactPortal, {
+    wrapperId: "portal-test",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "Teste"
+    })
+  }));
+  return document.body.querySelector('#portal-test');
+}
+
+describe('ReactPortal test', function () {
+  it('Should render a div inside body', function () {
+    var divPortal = setup();
+    expect(divPortal).toBeInTheDocument();
+  });
+});

package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts

@@ -0,0 +1,2 @@
+export declare function createWrapperAndAppendToBody(wrapperId: string): HTMLDivElement;
+//# sourceMappingURL=createWrapperAndApprendToBody.d.ts.map

package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createWrapperAndApprendToBody.d.ts","sourceRoot":"","sources":["../../../../src/components/ReactPortal/utils/createWrapperAndApprendToBody.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,MAAM,kBAK7D"}

package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createWrapperAndAppendToBody = createWrapperAndAppendToBody;
+
+function createWrapperAndAppendToBody(wrapperId) {
+  var wrapperElement = document.createElement('div');
+  wrapperElement.setAttribute('id', wrapperId);
+  document.body.appendChild(wrapperElement);
+  return wrapperElement;
+}

package/dist/components/Select/components/OptionsSelect/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { OptionsSelectProps } from './types';
+export declare const OptionsSelect: import("react").ForwardRefExoticComponent<OptionsSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/components/OptionsSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/OptionsSelect/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,aAAa,+GAqDzB,CAAC"}

package/dist/components/Select/components/OptionsSelect/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsSelect = void 0;
+
+var _react = require("react");
+
+var _useDisableBodyScroll = require("../../../../shared/hooks/useDisableBodyScroll");
+
+var _useWindowSize2 = require("../../../../shared/hooks/useWindowSize");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var OptionsSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var open = _ref.open,
+      _ref$left = _ref.left,
+      left = _ref$left === void 0 ? '50vw' : _ref$left,
+      _ref$top = _ref.top,
+      top = _ref$top === void 0 ? '' : _ref$top,
+      _ref$offsetX = _ref.offsetX,
+      offsetX = _ref$offsetX === void 0 ? '0px' : _ref$offsetX,
+      _ref$disableScrollOnO = _ref.disableScrollOnOpen,
+      disableScrollOnOpen = _ref$disableScrollOnO === void 0 ? true : _ref$disableScrollOnO,
+      maxWidth = _ref.maxWidth,
+      children = _ref.children;
+
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+      windowHeight = _useWindowSize.height;
+
+  var optionsContainerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return optionsContainerRef.current;
+  });
+
+  var _useState = (0, _react.useState)(function () {
+    var _optionsContainerRef$, _optionsContainerRef$2;
+
+    if (windowHeight - (((_optionsContainerRef$ = optionsContainerRef.current) === null || _optionsContainerRef$ === void 0 ? void 0 : (_optionsContainerRef$2 = _optionsContainerRef$.getBoundingClientRect()) === null || _optionsContainerRef$2 === void 0 ? void 0 : _optionsContainerRef$2.y) || 0) > 360) {
+      return '360px';
+    } else {
+      var _optionsContainerRef$3, _optionsContainerRef$4;
+
+      return "".concat(windowHeight - (((_optionsContainerRef$3 = optionsContainerRef.current) === null || _optionsContainerRef$3 === void 0 ? void 0 : (_optionsContainerRef$4 = _optionsContainerRef$3.getBoundingClientRect()) === null || _optionsContainerRef$4 === void 0 ? void 0 : _optionsContainerRef$4.y) || 0), "px");
+    }
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      positionElement = _useState2[0],
+      setPositionElement = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setPositionElement(function () {
+      var _optionsContainerRef$5, _optionsContainerRef$6;
+
+      if (windowHeight - (((_optionsContainerRef$5 = optionsContainerRef.current) === null || _optionsContainerRef$5 === void 0 ? void 0 : (_optionsContainerRef$6 = _optionsContainerRef$5.getBoundingClientRect()) === null || _optionsContainerRef$6 === void 0 ? void 0 : _optionsContainerRef$6.y) || 0) > 360) {
+        return '360px';
+      } else {
+        var _optionsContainerRef$7, _optionsContainerRef$8;
+
+        return "".concat(windowHeight - (((_optionsContainerRef$7 = optionsContainerRef.current) === null || _optionsContainerRef$7 === void 0 ? void 0 : (_optionsContainerRef$8 = _optionsContainerRef$7.getBoundingClientRect()) === null || _optionsContainerRef$8 === void 0 ? void 0 : _optionsContainerRef$8.y) || 0), "px");
+      }
+    });
+  });
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsContainer, {
+    ref: optionsContainerRef,
+    open: open,
+    maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
+    maxHeight: positionElement,
+    left: "calc(".concat(left, " + ").concat(offsetX, ")"),
+    top: top,
+    children: children
+  });
+});
+exports.OptionsSelect = OptionsSelect;
+OptionsSelect.displayName = 'OptionsSelect';