init commit

remotion/node_modules/@remotion/studio/dist/components/ModalContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const padding = 20;
+const getMaxModalWidth = (width) => {
+    return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
+};
+exports.getMaxModalWidth = getMaxModalWidth;
+const getMaxModalHeight = (height) => {
+    return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
+};
+exports.getMaxModalHeight = getMaxModalHeight;
+const backgroundOverlay = {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backdropFilter: `blur(1px)`,
+    position: 'fixed',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    padding,
+};
+const panel = {
+    backgroundColor: colors_1.BACKGROUND,
+    boxShadow: '0 0 4px black',
+    color: 'white',
+    margin: 'auto',
+};
+const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
+};
+exports.ModalContainer = ModalContainer;