jclib-ui 1.0.88 → 1.0.90

package/dist/jclib-ui.es.js

@@ -8041,7 +8041,7 @@ function InputPesquisa({
     )
   ] });
 }
-const Container$3 = styled.div`
+const ContainerFixed = styled.div`
   position: fixed;
   inset: 0 0 0;
   background-color: var(--jc-overlay-bg);
@@ -8051,7 +8051,37 @@ const Container$3 = styled.div`
   display: grid;
   place-items: center;
 
-  .mod-panel {
+  & > .mod-panel {
+    background-color: var(--pn-color);
+    border: 1px solid var(--pn-color);
+    border-radius: 6px;
+
+    overflow: hidden;
+    width: 100%;
+    max-width: ${(props) => props.maxWidth ? props.maxWidth : 1200}px;
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
+    z-index: 1032;
+
+    .mod-body {
+      background-color: var(--bs-body-bg);
+      max-height: calc(100vh - 110px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 10px 15px;
+    }
+  }
+`;
+const Container$3 = styled(motion.div)`
+  position: fixed;
+  inset: 0 0 0;
+  background-color: var(--jc-overlay-bg);
+  z-index: 1031;
+  padding: 0 8px;
+
+  display: grid;
+  place-items: center;
+
+  & > .mod-panel {
     background-color: var(--pn-color);
     border: 1px solid var(--pn-color);
     border-radius: 6px;
@@ -8072,11 +8102,9 @@ const Container$3 = styled.div`
       overflow-y: auto;
       overflow-x: hidden;
       padding: 10px 15px;
-      /* padding-bottom: ${(props) => props.paddingBottom || 10}px; */
     }
   }
 `;
-const ContainerMotion = styled(motion.div)``;
 const CLASS = "modal-hide-sb";
 function ModalBox({
   maxWidth,
@@ -8125,8 +8153,8 @@ function ModalBox({
     controls.start(e);
   }
   if (fixed) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$3, { paddingBottom, maxWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mod-panel", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelHeader, { className: "mod-header", onPointerDown: startDrag, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ContainerFixed, { maxWidth, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mod-panel", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelHeader, { className: "mod-header", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ButtonClose,
@@ -8138,47 +8166,40 @@ function ModalBox({
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mod-body", style: { paddingBottom }, children })
     ] }) });
-  } else {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ContainerMotion,
-      {
-        paddingBottom,
-        isDraggable: !fixed,
-        maxWidth,
-        ref: modalRef,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          motion.div,
-          {
-            className: "mod-panel",
-            drag: true,
-            dragListener: false,
-            dragControls: controls,
-            dragConstraints: modalRef,
-            dragMomentum: false,
-            dragElastic: 0.1,
-            initial: { scale: 0 },
-            animate: { scale: 1 },
-            transition: {
-              duration: 0.2
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelHeader, { className: "mod-header", onPointerDown: startDrag, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  ButtonClose,
-                  {
-                    type: "button",
-                    onClick: () => setVisible(false)
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mod-body", style: { paddingBottom }, children })
-            ]
-          }
-        )
-      }
-    );
   }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Container$3,
+    {
+      paddingBottom,
+      isDraggable: !fixed,
+      maxWidth,
+      ref: modalRef,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        motion.div,
+        {
+          className: "mod-panel",
+          drag: true,
+          dragListener: false,
+          dragControls: controls,
+          dragConstraints: modalRef,
+          dragMomentum: false,
+          dragElastic: 0.1,
+          initial: { scale: 0 },
+          animate: { scale: 1 },
+          transition: {
+            duration: 0.2
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelHeader, { className: "mod-header", onPointerDown: startDrag, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonClose, { type: "button", onClick: () => setVisible(false) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mod-body", style: { paddingBottom }, children })
+          ]
+        }
+      )
+    }
+  );
 }
 var n, o, i = (n = function(t2, e) {
   return n = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t3, e2) {