@lanaco/lnc-react-ui 4.0.183 → 4.0.184

package/dist/Modal.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),y=require("react"),o=require("./index-BpbMKBf_.cjs"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),_=require("./Icon.cjs"),w=require("./utils-RnrgDDZP.cjs"),V=require("./index-41nUb2kP.cjs"),L=require("./motion-B_VPZaJq.cjs"),G=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),N=require("./index-DZoWlChs.cjs"),x="5rem",h="3.8rem",i="1.5rem",W=(e,n,a)=>n&&a?e=="FULL"?`calc(100dvh - ${h} - ${x})`:`calc(100dvh - ${h} - ${x} - ${i})`:n?e=="FULL"?`calc(100dvh - ${h})`:`calc(100dvh - ${h} - ${i})`:a?e=="FULL"?`calc(100dvh - ${x})`:`calc(100dvh - ${x} - ${i})`:e=="FULL"?"100dvh":`calc(100dvh - ${i})`,X=e=>e=="FULL"?"100vw":`calc(100vw - ${i})`,J=(e,n,a)=>e=="FULL"?"0":`${n?"0":"16px"} 0 ${a?"0":"16px"} 0`,K=C.styled(L.motion.div)`
+"use strict";const r=require("react/jsx-runtime"),y=require("react"),o=require("./index-BpbMKBf_.cjs"),C=require("./emotion-styled.browser.esm-BtEseadx.cjs"),V=require("./Icon.cjs"),w=require("./utils-RnrgDDZP.cjs"),G=require("./index-41nUb2kP.cjs"),L=require("./motion-B_VPZaJq.cjs"),W=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),N=require("./index-DZoWlChs.cjs"),f="5rem",h="3.8rem",l="1.5rem",X=(e,n,a)=>n&&a?e=="FULL"?`calc(100dvh - ${h} - ${f})`:`calc(100dvh - ${h} - ${f} - ${l})`:n?e=="FULL"?`calc(100dvh - ${h})`:`calc(100dvh - ${h} - ${l})`:a?e=="FULL"?`calc(100dvh - ${f})`:`calc(100dvh - ${f} - ${l})`:e=="FULL"?"100dvh":`calc(100dvh - ${l})`,J=e=>e=="FULL"?"100vw":`calc(100vw - ${l})`,K=(e,n,a)=>e=="FULL"?"0":`${n?"0":"16px"} 0 ${a?"0":"16px"} 0`,Q=C.styled(L.motion.div)`
   position: ${e=>e.scrollOverlay==!0?"absolute":"fixed"};
   top: 0;
   left: 0;
@@ -7,16 +7,17 @@
   background: ${e=>e.scrollOverlay===!0?"transparent":e.overlayColor};
   z-index: ${e=>e.zIndex};
   display: flex;
-`,Q=C.styled(L.motion.div)`
+`,Y=C.styled(L.motion.div)`
   position: relative;
   width: 50%;
   background-color: white;
   ${e=>e.scrollOverlay==!1?"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);":"height: fit-content; margin-right: auto; margin-left: auto;"}
   background-color: ${e=>w.getColorRgbaValue(e.theme,"Modal","default","enabled","bg")};
   z-index: ${e=>e.zIndex};
-  width: ${e=>ee[e.size.toUpperCase()]};
-  max-width: ${e=>X(e.size.toUpperCase())};
-  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+  width: ${e=>oe[e.size.toUpperCase()]};
+  max-width: ${e=>J(e.size.toUpperCase())};
+  box-shadow:
+    0px 20px 25px -5px rgba(0, 0, 0, 0.1),
     0px 10px 10px -5px rgba(0, 0, 0, 0.04);
   border-radius: ${e=>e.size.toUpperCase()!="FULL"?"16px":"0"};
   display: flex;
@@ -26,7 +27,7 @@
   & .lnc-modal-header {
     max-height: ${h};
     overflow: hidden;
-    padding: ${i} ${i} 0 ${i};
+    padding: ${l} ${l} 0 ${l};
   }
   & .lnc-modal-header > h1,
   h2,
@@ -34,7 +35,7 @@
     margin: 0;
   }
   & .lnc-modal-footer {
-    max-height: ${x};
+    max-height: ${f};
     overflow: hidden;
     padding-top: 1rem;
   }
@@ -45,12 +46,12 @@
     flex-direction: column;
     justify-content: space-between;
     scrollbar-width: thin;
-    ${e=>e.scrollOverlay==!1&&`max-height: ${W(e.size.toUpperCase(),e.header,e.footer)};`}
+    ${e=>e.scrollOverlay==!1&&`max-height: ${X(e.size.toUpperCase(),e.header,e.footer)};`}
     overflow: auto;
-    margin: ${e=>J(e.size,e.header,e.footer)};
-    padding: 0 ${i} 0 ${i};
+    margin: ${e=>K(e.size,e.header,e.footer)};
+    padding: 0 ${l} 0 ${l};
   }
-`,Y=C.styled.div`
+`,Z=C.styled.div`
   position: absolute;
   cursor: pointer;
   top: 1.375rem;
@@ -72,7 +73,7 @@
   &:focus {
     background-color: ${e=>w.getColorRgbaValue(e.theme,"Modal","primary","focus","cancelBtnBg","cancelBtnBgOpacity")};
   }
-`,Z=C.styled(L.motion.div)`
+`,ee=C.styled(L.motion.div)`
   display: ${e=>e.scrollOverlay===!0?"block":"none"};
   position: fixed;
   top: 0;
@@ -81,4 +82,4 @@
   width: 100%;
   background-color: ${e=>e.overlayColor};
   z-index: 3;
-`,A=y.forwardRef((e,n)=>{const{portalElement:a=document.body,isOpen:c=!1,header:p,footer:l,scrollOverlay:s=!1,overlay:d=!0,overlayColor:u="rgba(0, 0, 0, 0.3)",showCloseButton:m=!0,onOpen:f=()=>{},onClose:g=()=>{},zIndex:O=1e3,size:$="fluid",clickOutsideToClose:b=!0,className:T="",style:D={},overlayProps:P,overlayAnimation:F={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},modalAnimation:U={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},onFinishOpen:H=()=>{},children:z,rest:M}=e,R=y.useRef(),[v,k]=y.useState(c);let B={theme:G.useTheme(),size:$,zIndex:O,className:T,style:D};const q=t=>{t==null||t.preventDefault(),t==null||t.stopPropagation(),t.target===t.currentTarget&&b&&j(t)};y.useImperativeHandle(n,()=>({open(){S()},close(){j()},isOpen(){return v}}));const S=t=>{k(!0),f(t)},j=t=>{k(!1),g(t)};return y.useEffect(()=>{v===!0&&H()},[v]),r.jsx(r.Fragment,{children:v&&r.jsx(r.Fragment,{children:a?r.jsx(r.Fragment,{children:V.reactDomExports.createPortal(r.jsx(E,{ref:R,overlay:d,scrollOverlay:s,onClickOutsideModal:q,overlayColor:u,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:m,close:j,header:p,footer:l,isOpen:c,...M,children:z}),a)}):r.jsx(E,{ref:R,overlay:d,scrollOverlay:s,onClickOutsideModal:q,overlayColor:u,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:m,close:j,header:p,footer:l,isOpen:c,...M,children:z})})})}),E=y.forwardRef(({overlay:e,scrollOverlay:n,onClickOutsideModal:a,overlayColor:c,overlayProps:p,overlayAnimation:l,modalAnimation:s,themeProps:d,showCloseButton:u,header:m,footer:f,close:g,isOpen:O,children:$,...b},T)=>r.jsx(N.AnimatePresence,{children:e?r.jsxs(r.Fragment,{children:[r.jsx(Z,{scrollOverlay:n,onClick:a,overlayColor:c,...p,...l}),r.jsx(K,{...d,onClick:a,scrollOverlay:n,overlayColor:c,isOpen:O,...p,...l,children:r.jsx(I,{ref:T,themeProps:d,scrollOverlay:n,modalAnimation:s,showCloseButton:u,close:g,header:m,footer:f,...b,children:$})})]}):r.jsx(I,{ref:T,themeProps:d,modalAnimation:s,showCloseButton:u,close:g,header:m,footer:f,...b,children:$})})),I=y.forwardRef(({themeProps:e,scrollOverlay:n,modalAnimation:a,showCloseButton:c,close:p,header:l,footer:s,children:d,...u},m)=>r.jsx(N.AnimatePresence,{children:r.jsxs(Q,{ref:m,...e,...a,header:l,footer:s,scrollOverlay:n,...u,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[c&&r.jsx(Y,{...e,className:"modal-lnc-times",onClick:p,children:r.jsx(_,{icon:"times"})}),l&&r.jsx("div",{className:"lnc-modal-header",children:l}),r.jsx("div",{className:"lnc-modal-content",children:d}),s&&r.jsx("div",{className:"lnc-modal-footer",children:s})]})}));A.propTypes={portalElement:o.PropTypes.any,isOpen:o.PropTypes.bool,header:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),footer:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),showCloseButton:o.PropTypes.bool,overlay:o.PropTypes.bool,scrollOverlay:o.PropTypes.bool,onOpen:o.PropTypes.func,onClose:o.PropTypes.func,zIndex:o.PropTypes.number,clickOutsideToClose:o.PropTypes.bool,overlayColor:o.PropTypes.string,overlayAnimation:o.PropTypes.object,modalAnimation:o.PropTypes.object,className:o.PropTypes.string,style:o.PropTypes.object,size:o.PropTypes.oneOf(["fluid","xs","s","m","l","xl","full"]),overlayProps:o.PropTypes.any};const ee={FLUID:"max-content",XS:"320px",S:"412px",M:"672px",L:"1112px",XL:"1376px",FULL:"100vw"};module.exports=A;
+`,D=y.forwardRef((e,n)=>{const{preventDefault:a=!1,portalElement:p=document.body,isOpen:c=!1,header:i,footer:s,scrollOverlay:d=!1,overlay:u=!0,overlayColor:m="rgba(0, 0, 0, 0.3)",showCloseButton:x=!0,onOpen:g=()=>{},onClose:O=()=>{},zIndex:$=1e3,size:b="fluid",clickOutsideToClose:T=!0,className:A="",style:H={},overlayProps:P,overlayAnimation:F={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},modalAnimation:U={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},onFinishOpen:S=()=>{},children:z,rest:M}=e,R=y.useRef(),[v,k]=y.useState(c);let B={theme:W.useTheme(),size:b,zIndex:$,className:A,style:H};const q=t=>{a&&(t==null||t.preventDefault(),t==null||t.stopPropagation()),t.target===t.currentTarget&&T&&j(t)};y.useImperativeHandle(n,()=>({open(){_()},close(){j()},isOpen(){return v}}));const _=t=>{k(!0),g(t)},j=t=>{k(!1),O(t)};return y.useEffect(()=>{v===!0&&S()},[v]),r.jsx(r.Fragment,{children:v&&r.jsx(r.Fragment,{children:p?r.jsx(r.Fragment,{children:G.reactDomExports.createPortal(r.jsx(E,{ref:R,overlay:u,scrollOverlay:d,onClickOutsideModal:q,overlayColor:m,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:x,close:j,header:i,footer:s,isOpen:c,...M,children:z}),p)}):r.jsx(E,{ref:R,overlay:u,scrollOverlay:d,onClickOutsideModal:q,overlayColor:m,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:x,close:j,header:i,footer:s,isOpen:c,...M,children:z})})})}),E=y.forwardRef(({overlay:e,scrollOverlay:n,onClickOutsideModal:a,overlayColor:p,overlayProps:c,overlayAnimation:i,modalAnimation:s,themeProps:d,showCloseButton:u,header:m,footer:x,close:g,isOpen:O,children:$,...b},T)=>r.jsx(N.AnimatePresence,{children:e?r.jsxs(r.Fragment,{children:[r.jsx(ee,{scrollOverlay:n,onClick:a,overlayColor:p,...c,...i}),r.jsx(Q,{...d,onClick:a,scrollOverlay:n,overlayColor:p,isOpen:O,...c,...i,children:r.jsx(I,{ref:T,themeProps:d,scrollOverlay:n,modalAnimation:s,showCloseButton:u,close:g,header:m,footer:x,...b,children:$})})]}):r.jsx(I,{ref:T,themeProps:d,modalAnimation:s,showCloseButton:u,close:g,header:m,footer:x,...b,children:$})})),I=y.forwardRef(({themeProps:e,scrollOverlay:n,modalAnimation:a,showCloseButton:p,close:c,header:i,footer:s,children:d,...u},m)=>r.jsx(N.AnimatePresence,{children:r.jsxs(Y,{ref:m,...e,...a,header:i,footer:s,scrollOverlay:n,...u,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[p&&r.jsx(Z,{...e,className:"modal-lnc-times",onClick:c,children:r.jsx(V,{icon:"times"})}),i&&r.jsx("div",{className:"lnc-modal-header",children:i}),r.jsx("div",{className:"lnc-modal-content",children:d}),s&&r.jsx("div",{className:"lnc-modal-footer",children:s})]})}));D.propTypes={portalElement:o.PropTypes.any,isOpen:o.PropTypes.bool,header:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),footer:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),showCloseButton:o.PropTypes.bool,overlay:o.PropTypes.bool,scrollOverlay:o.PropTypes.bool,onOpen:o.PropTypes.func,onClose:o.PropTypes.func,zIndex:o.PropTypes.number,clickOutsideToClose:o.PropTypes.bool,overlayColor:o.PropTypes.string,overlayAnimation:o.PropTypes.object,modalAnimation:o.PropTypes.object,className:o.PropTypes.string,style:o.PropTypes.object,size:o.PropTypes.oneOf(["fluid","xs","s","m","l","xl","full"]),overlayProps:o.PropTypes.any};const oe={FLUID:"max-content",XS:"320px",S:"412px",M:"672px",L:"1112px",XL:"1376px",FULL:"100vw"};module.exports=D;

package/dist/Modal.js

@@ -1,14 +1,14 @@
 import { jsx as t, Fragment as L, jsxs as R } from "react/jsx-runtime";
-import { forwardRef as z, useRef as X, useState as V, useImperativeHandle as q, useEffect as J } from "react";
+import { forwardRef as z, useRef as V, useState as q, useImperativeHandle as J, useEffect as K } from "react";
 import { P as o } from "./index-CblbdqjE.js";
 import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import K from "./Icon.js";
+import P from "./Icon.js";
 import { b as w } from "./utils-Dc5zIpaz.js";
-import { r as P } from "./index-B1vKwsDE.js";
+import { r as Q } from "./index-B1vKwsDE.js";
 import { m as M } from "./motion-Ckekul_K.js";
-import { u as Q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
 import { A as S } from "./index-D-c5IxDk.js";
-const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FULL" ? `calc(100dvh - ${h} - ${f})` : `calc(100dvh - ${h} - ${f} - ${l})` : n ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${l})` : a ? e == "FULL" ? `calc(100dvh - ${f})` : `calc(100dvh - ${f} - ${l})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${l})`, Z = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${l})`, ee = (e, n, a) => e == "FULL" ? "0" : `${n ? "0" : "16px"} 0 ${a ? "0" : "16px"} 0`, oe = C(M.div)`
+const h = "5rem", g = "3.8rem", l = "1.5rem", Z = (e, n, a) => n && a ? e == "FULL" ? `calc(100dvh - ${g} - ${h})` : `calc(100dvh - ${g} - ${h} - ${l})` : n ? e == "FULL" ? `calc(100dvh - ${g})` : `calc(100dvh - ${g} - ${l})` : a ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${l})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${l})`, ee = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${l})`, oe = (e, n, a) => e == "FULL" ? "0" : `${n ? "0" : "16px"} 0 ${a ? "0" : "16px"} 0`, te = C(M.div)`
   position: ${(e) => e.scrollOverlay == !0 ? "absolute" : "fixed"};
   top: 0;
   left: 0;
@@ -17,16 +17,17 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
   background: ${(e) => e.scrollOverlay === !0 ? "transparent" : e.overlayColor};
   z-index: ${(e) => e.zIndex};
   display: flex;
-`, te = C(M.div)`
+`, re = C(M.div)`
   position: relative;
   width: 50%;
   background-color: white;
   ${(e) => e.scrollOverlay == !1 ? "position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" : "height: fit-content; margin-right: auto; margin-left: auto;"}
   background-color: ${(e) => w(e.theme, "Modal", "default", "enabled", "bg")};
   z-index: ${(e) => e.zIndex};
-  width: ${(e) => le[e.size.toUpperCase()]};
-  max-width: ${(e) => Z(e.size.toUpperCase())};
-  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
+  width: ${(e) => ie[e.size.toUpperCase()]};
+  max-width: ${(e) => ee(e.size.toUpperCase())};
+  box-shadow:
+    0px 20px 25px -5px rgba(0, 0, 0, 0.1),
     0px 10px 10px -5px rgba(0, 0, 0, 0.04);
   border-radius: ${(e) => e.size.toUpperCase() != "FULL" ? "16px" : "0"};
   display: flex;
@@ -34,7 +35,7 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
   gap: 0.5rem;
 
   & .lnc-modal-header {
-    max-height: ${h};
+    max-height: ${g};
     overflow: hidden;
     padding: ${l} ${l} 0 ${l};
   }
@@ -44,7 +45,7 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
     margin: 0;
   }
   & .lnc-modal-footer {
-    max-height: ${f};
+    max-height: ${h};
     overflow: hidden;
     padding-top: 1rem;
   }
@@ -55,16 +56,16 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
     flex-direction: column;
     justify-content: space-between;
     scrollbar-width: thin;
-    ${(e) => e.scrollOverlay == !1 && `max-height: ${Y(
+    ${(e) => e.scrollOverlay == !1 && `max-height: ${Z(
   e.size.toUpperCase(),
   e.header,
   e.footer
 )};`}
     overflow: auto;
-    margin: ${(e) => ee(e.size, e.header, e.footer)};
+    margin: ${(e) => oe(e.size, e.header, e.footer)};
     padding: 0 ${l} 0 ${l};
   }
-`, re = C.div`
+`, ne = C.div`
   position: absolute;
   cursor: pointer;
   top: 1.375rem;
@@ -106,7 +107,7 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
   "cancelBtnBgOpacity"
 )};
   }
-`, ne = C(M.div)`
+`, ae = C(M.div)`
   display: ${(e) => e.scrollOverlay === !0 ? "block" : "none"};
   position: fixed;
   top: 0;
@@ -115,25 +116,26 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
   width: 100%;
   background-color: ${(e) => e.overlayColor};
   z-index: 3;
-`, ae = z((e, n) => {
+`, le = z((e, n) => {
   const {
-    portalElement: a = document.body,
+    preventDefault: a = !1,
+    portalElement: m = document.body,
     isOpen: s = !1,
-    header: m,
-    footer: i,
-    scrollOverlay: c = !1,
-    overlay: d = !0,
-    overlayColor: p = "rgba(0, 0, 0, 0.3)",
+    header: i,
+    footer: c,
+    scrollOverlay: d = !1,
+    overlay: p = !0,
+    overlayColor: f = "rgba(0, 0, 0, 0.3)",
     showCloseButton: u = !0,
-    onOpen: g = () => {
+    onOpen: x = () => {
     },
-    onClose: x = () => {
+    onClose: U = () => {
     },
-    zIndex: U = 1e3,
-    size: y = "fluid",
-    clickOutsideToClose: $ = !0,
-    className: b = "",
-    style: G = {},
+    zIndex: y = 1e3,
+    size: $ = "fluid",
+    clickOutsideToClose: b = !0,
+    className: G = "",
+    style: _ = {},
     overlayProps: F,
     overlayAnimation: k = {
       animate: { opacity: 1 },
@@ -151,18 +153,18 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
       },
       transition: { type: "spring", duration: 0.6 }
     },
-    onFinishOpen: _ = () => {
+    onFinishOpen: W = () => {
     },
     children: T,
     rest: I
-  } = e, E = X(), [v, N] = V(s);
-  let j = { theme: Q(), size: y, zIndex: U, className: b, style: G };
-  const A = (r) => {
-    r == null || r.preventDefault(), r == null || r.stopPropagation(), r.target === r.currentTarget && $ && O(r);
+  } = e, E = V(), [v, N] = q(s);
+  let D = { theme: Y(), size: $, zIndex: y, className: G, style: _ };
+  const j = (r) => {
+    a && (r == null || r.preventDefault(), r == null || r.stopPropagation()), r.target === r.currentTarget && b && O(r);
   };
-  q(n, () => ({
+  J(n, () => ({
     open() {
-      W();
+      X();
     },
     close() {
       O();
@@ -171,94 +173,94 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
       return v;
     }
   }));
-  const W = (r) => {
-    N(!0), g(r);
+  const X = (r) => {
+    N(!0), x(r);
   }, O = (r) => {
-    N(!1), x(r);
+    N(!1), U(r);
   };
-  return J(() => {
-    v === !0 && _();
-  }, [v]), /* @__PURE__ */ t(L, { children: v && /* @__PURE__ */ t(L, { children: a ? /* @__PURE__ */ t(L, { children: P.createPortal(
+  return K(() => {
+    v === !0 && W();
+  }, [v]), /* @__PURE__ */ t(L, { children: v && /* @__PURE__ */ t(L, { children: m ? /* @__PURE__ */ t(L, { children: Q.createPortal(
     /* @__PURE__ */ t(
-      D,
+      A,
       {
         ref: E,
-        overlay: d,
-        scrollOverlay: c,
-        onClickOutsideModal: A,
-        overlayColor: p,
+        overlay: p,
+        scrollOverlay: d,
+        onClickOutsideModal: j,
+        overlayColor: f,
         overlayProps: F,
         overlayAnimation: k,
         modalAnimation: B,
-        themeProps: j,
+        themeProps: D,
         showCloseButton: u,
         close: O,
-        header: m,
-        footer: i,
+        header: i,
+        footer: c,
         isOpen: s,
         ...I,
         children: T
       }
     ),
-    a
+    m
   ) }) : /* @__PURE__ */ t(
-    D,
+    A,
     {
       ref: E,
-      overlay: d,
-      scrollOverlay: c,
-      onClickOutsideModal: A,
-      overlayColor: p,
+      overlay: p,
+      scrollOverlay: d,
+      onClickOutsideModal: j,
+      overlayColor: f,
       overlayProps: F,
       overlayAnimation: k,
       modalAnimation: B,
-      themeProps: j,
+      themeProps: D,
       showCloseButton: u,
       close: O,
-      header: m,
-      footer: i,
+      header: i,
+      footer: c,
       isOpen: s,
       ...I,
       children: T
     }
   ) }) });
-}), D = z(
+}), A = z(
   ({
     overlay: e,
     scrollOverlay: n,
     onClickOutsideModal: a,
-    overlayColor: s,
-    overlayProps: m,
+    overlayColor: m,
+    overlayProps: s,
     overlayAnimation: i,
     modalAnimation: c,
     themeProps: d,
     showCloseButton: p,
-    header: u,
-    footer: g,
+    header: f,
+    footer: u,
     close: x,
     isOpen: U,
     children: y,
     ...$
   }, b) => /* @__PURE__ */ t(S, { children: e ? /* @__PURE__ */ R(L, { children: [
     /* @__PURE__ */ t(
-      ne,
+      ae,
       {
         scrollOverlay: n,
         onClick: a,
-        overlayColor: s,
-        ...m,
+        overlayColor: m,
+        ...s,
         ...i
       }
     ),
     /* @__PURE__ */ t(
-      oe,
+      te,
       {
         ...d,
         onClick: a,
         scrollOverlay: n,
-        overlayColor: s,
+        overlayColor: m,
         isOpen: U,
-        ...m,
+        ...s,
         ...i,
         children: /* @__PURE__ */ t(
           H,
@@ -269,8 +271,8 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
             modalAnimation: c,
             showCloseButton: p,
             close: x,
-            header: u,
-            footer: g,
+            header: f,
+            footer: u,
             ...$,
             children: y
           }
@@ -285,8 +287,8 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
       modalAnimation: c,
       showCloseButton: p,
       close: x,
-      header: u,
-      footer: g,
+      header: f,
+      footer: u,
       ...$,
       children: y
     }
@@ -296,16 +298,16 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
     themeProps: e,
     scrollOverlay: n,
     modalAnimation: a,
-    showCloseButton: s,
-    close: m,
+    showCloseButton: m,
+    close: s,
     header: i,
     footer: c,
     children: d,
     ...p
-  }, u) => /* @__PURE__ */ t(S, { children: /* @__PURE__ */ R(
-    te,
+  }, f) => /* @__PURE__ */ t(S, { children: /* @__PURE__ */ R(
+    re,
     {
-      ref: u,
+      ref: f,
       ...e,
       ...a,
       header: i,
@@ -314,13 +316,13 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
       ...p,
       className: `modal-lnc-container ${e == null ? void 0 : e.className}`,
       children: [
-        s && /* @__PURE__ */ t(
-          re,
+        m && /* @__PURE__ */ t(
+          ne,
           {
             ...e,
             className: "modal-lnc-times",
-            onClick: m,
-            children: /* @__PURE__ */ t(K, { icon: "times" })
+            onClick: s,
+            children: /* @__PURE__ */ t(P, { icon: "times" })
           }
         ),
         i && /* @__PURE__ */ t("div", { className: "lnc-modal-header", children: i }),
@@ -330,7 +332,7 @@ const f = "5rem", h = "3.8rem", l = "1.5rem", Y = (e, n, a) => n && a ? e == "FU
     }
   ) })
 );
-ae.propTypes = {
+le.propTypes = {
   /**
    * If the value is given modal will use createPortal to be rendered in portalElement
    */
@@ -362,7 +364,7 @@ ae.propTypes = {
   size: o.oneOf(["fluid", "xs", "s", "m", "l", "xl", "full"]),
   overlayProps: o.any
 };
-const le = {
+const ie = {
   FLUID: "max-content",
   XS: "320px",
   S: "412px",
@@ -372,5 +374,5 @@ const le = {
   FULL: "100vw"
 };
 export {
-  ae as default
+  le as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.183",
+  "version": "4.0.184",
   "description": "React component library",
   "type": "module",
   "keywords": [