@parrot-co/parrot-ui 0.0.68 → 0.0.70

package/dist/module.js

@@ -4951,23 +4951,46 @@ function $cdf79c1aee6c465f$export$e6a97ba2cae5bb94({ items: items , render: rend
 
 
 
-const $9da3b07c262d31a5$var$ModalOverlay = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+const $9da3b07c262d31a5$var$ModalUnderlay = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "$blackA8"
+    background: "$blackA8",
+    width: "100vw",
+    height: "100vh"
+});
+const $9da3b07c262d31a5$var$ModalContainer = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+    display: "grid",
+    width: "100vw",
+    height: "100vh",
+    p: 12
 });
 const $9da3b07c262d31a5$var$ModalContent = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
     background: "white",
-    borderRadius: 12
+    borderRadius: 12,
+    display: "grid",
+    gridTemplateRows: "1fr, 60px",
+    flexDirection: "column",
+    defaultVariants: {
+        variant: "modal"
+    },
+    variants: {
+        variant: {
+            modal: {
+                alignSelf: "center",
+                justifySelf: "center"
+            },
+            drawer: {
+                justifySelf: "end"
+            }
+        }
+    }
 });
 const $9da3b07c262d31a5$var$ModalFooter = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
-    p: 16
+    p: 16,
+    alignSelf: "flex-end"
 });
 const $9da3b07c262d31a5$var$ModalHead = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
     p: 16,
@@ -4976,14 +4999,17 @@ const $9da3b07c262d31a5$var$ModalHead = (0, $9ade691eb9e41cfb$export$3817b7a54a0
 const $9da3b07c262d31a5$var$ModalBody = (0, $9ade691eb9e41cfb$export$3817b7a54a07cec7)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
     p: 16
 });
-function $9da3b07c262d31a5$export$c6fdb837b070b4ff({ state: state , children: children , ...props }) {
+function $9da3b07c262d31a5$export$c6fdb837b070b4ff({ state: state , children: children , css: css , ...props }) {
     const modalRef = $kF5Av$useRef(null);
     const { modalProps: modalProps , underlayProps: underlayProps  } = (0, $kF5Av$useModalOverlay)(props, state, modalRef);
     if (!state.isOpen) return null;
     return /*#__PURE__*/ (0, $kF5Av$jsx)((0, $kF5Av$Overlay), {
-        children: /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$var$ModalOverlay, {
+        children: /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$var$ModalUnderlay, {
+            className: "underlay",
+            css: css,
             ...underlayProps,
-            children: /*#__PURE__*/ (0, $kF5Av$jsx)((0, $d22d8a7881f7b33f$export$2e2bcd8739ae039), {
+            children: /*#__PURE__*/ (0, $kF5Av$jsx)($9da3b07c262d31a5$var$ModalContainer, {
+                className: "modal-container",
                 ...modalProps,
                 ref: modalRef,
                 children: children
@@ -4991,44 +5017,50 @@ function $9da3b07c262d31a5$export$c6fdb837b070b4ff({ state: state , children: ch
         })
     });
 }
-function $9da3b07c262d31a5$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps  }) {
+function $9da3b07c262d31a5$var$Dialog({ width: width = 400 , title: title , onCancel: onCancel , onConfirm: onConfirm , confirmLabel: confirmLabel = "Confirm" , cancelLabel: cancelLabel = "Cancel" , description: description , children: children , state: state , confirmButtonProps: confirmButtonProps , cancelButtonProps: cancelButtonProps , variant: variant  }) {
     const dialogRef = $kF5Av$useRef(null);
     const { dialogProps: dialogProps , titleProps: titleProps  } = (0, $kF5Av$useDialog)({
         role: "alertdialog"
     }, dialogRef);
     return /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalContent, {
+        variant: variant,
         css: {
             width: width
         },
         ref: dialogRef,
         ...dialogProps,
         children: [
-            /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalHead, {
+            /*#__PURE__*/ (0, $kF5Av$jsxs)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
                 stack: true,
-                gap: 2,
-                className: "modal-head",
                 children: [
-                    title && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
-                        weight: "medium",
-                        size: "lg",
-                        color: "black",
-                        ...titleProps,
-                        as: "div",
-                        children: title
+                    /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalHead, {
+                        stack: true,
+                        gap: 2,
+                        className: "modal-head",
+                        children: [
+                            title && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
+                                weight: "medium",
+                                size: "lg",
+                                color: "black",
+                                ...titleProps,
+                                as: "div",
+                                children: title
+                            }),
+                            description && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
+                                lineHeight: "base",
+                                size: "sm",
+                                color: "light",
+                                as: "div",
+                                children: description
+                            })
+                        ]
                     }),
-                    description && /*#__PURE__*/ (0, $kF5Av$jsx)((0, $4fdef5d0844b7575$export$2e2bcd8739ae039), {
-                        lineHeight: "base",
-                        size: "sm",
-                        color: "light",
-                        as: "div",
-                        children: description
+                    /*#__PURE__*/ (0, $kF5Av$jsx)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
+                        className: "modal-body",
+                        children: children
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, $kF5Av$jsx)((0, $391d62e0590dec97$export$2e2bcd8739ae039), {
-                className: "modal-body",
-                children: children
-            }),
             (onConfirm || onCancel) && /*#__PURE__*/ (0, $kF5Av$jsxs)($9da3b07c262d31a5$var$ModalFooter, {
                 gap: 2,
                 justify: "end",