@cypress-design/react-modal 0.0.3 → 0.2.0

package/dist/index.umd.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-require('clsx');
+var clsx = require('clsx');
 var iconsRegistry = require('@cypress-design/icon-registry');
 
 function _interopNamespaceDefault(e) {
@@ -30939,7 +30939,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -30963,7 +30963,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var compileReactIconProperties = function (_a) {
     var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
@@ -31046,18 +31051,20 @@ function freeBodyScroll() {
     window.scrollTo({ top: scrollY });
 }
 
-const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur';
-const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] flex h-full w-screen items-center justify-center overflow-hidden';
-const ClassModal = 'pointer-events-auto relative flex max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw]';
-const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px]';
+const ClassBackDrop = 'fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm';
+const ClassModalContainer = 'pointer-events-none fixed left-0 top-0 z-[1000020] h-full w-screen overflow-hidden flex items-center justify-center';
+const ClassModal = 'pointer-events-auto relative flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white';
+const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
+const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
+const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] px-16px sm:px-[24px]';
 const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
 const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
 const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
 const ClassCloseButton = 'group rounded-full border-transparent p-[4px] outline-none';
-const ClassContent = 'overflow-y-auto p-[16px]';
+const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
 
 var Modal = function (_a) {
-    var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children;
+    var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
     React__namespace.useEffect(function () {
         if (show) {
             disableBodyScroll();
@@ -31073,7 +31080,9 @@ var Modal = function (_a) {
         reactDomExports.createPortal(React__namespace.createElement("div", null,
             React__namespace.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
             React__namespace.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
-                React__namespace.createElement("div", { className: ClassModal },
+                React__namespace.createElement("div", { className: clsx(ClassModal, fullscreen
+                        ? ClassModalFullscreenDimensions
+                        : ClassModalStandardDimensions) },
                     React__namespace.createElement("div", { className: ClassTitleBox },
                         React__namespace.createElement("div", { className: ClassTitle }, title),
                         helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
@@ -31089,4 +31098,4 @@ var Modal = function (_a) {
 module.exports = Modal;
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="ml-[4px] grow fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.92] backdrop-blur pointer-events-none z-[1000020] flex h-full items-center justify-center overflow-hidden pointer-events-auto relative max-h-[80vh] min-w-[200px] flex-col rounded-lg border-4 border-gray-700 bg-white sm:min-w-[390px] sm:max-w-[70vw] shrink-0 justify-between rounded-t-md border-b border-gray-100 p-[16px] px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */
+/* <wind-keep class="ml-[4px] grow children:transition-all fixed left-0 top-0 z-[1000010] h-screen w-screen bg-gray-900/[.80] backdrop-blur-sm pointer-events-none z-[1000020] h-full overflow-hidden flex items-center justify-center pointer-events-auto relative flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0 h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)] justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px] text-[18px] font-medium leading-[28px] text-gray-900 mx-[8px] h-[1px] w-[32px] bg-gray-100 text-[16px] font-normal leading-[24px] text-indigo-500 rounded-full border-transparent p-[4px] outline-none overflow-y-auto cy-modal-overflow-hidden cy-modal-overflow-scroll-x cy-modal-overflow-scroll-y"> */