@lanaco/lnc-react-ui 4.0.12 → 4.0.13

package/dist/Modal.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),y=require("react"),o=require("./index-BIlhCoy2.cjs"),j=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),_=require("./Icon.cjs"),w=require("./utils-DTAPpJXU.cjs"),D=require("./index-Ct1N7fF4.cjs"),L=require("./motion-Oud-wpUz.cjs"),V=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),E=require("./index-BP5r5zGN.cjs"),x="5rem",h="3.8rem",l="1.5rem",G=(e,r,n)=>r&&n?e=="FULL"?`calc(100dvh - ${h} - ${x})`:`calc(100dvh - ${h} - ${x} - ${l})`:r?e=="FULL"?`calc(100dvh - ${h})`:`calc(100dvh - ${h} - ${l})`:n?e=="FULL"?`calc(100dvh - ${x})`:`calc(100dvh - ${x} - ${l})`:e=="FULL"?"100dvh":`calc(100dvh - ${l})`,W=e=>e=="FULL"?"100vw":`calc(100vw - ${l})`,X=(e,r,n)=>e=="FULL"?"0":`${r?"0":"16px"} 0 ${n?"0":"16px"} 0`,J=j.newStyled(L.motion.div)`
+"use strict";const t=require("react/jsx-runtime"),y=require("react"),o=require("./index-BIlhCoy2.cjs"),C=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),D=require("./Icon.cjs"),j=require("./utils-DTAPpJXU.cjs"),V=require("./index-Ct1N7fF4.cjs"),L=require("./motion-Oud-wpUz.cjs"),G=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),I=require("./index-BP5r5zGN.cjs"),x="5rem",h="3.8rem",i="1.5rem",W=(e,r,n)=>r&&n?e=="FULL"?`calc(100dvh - ${h} - ${x})`:`calc(100dvh - ${h} - ${x} - ${i})`:r?e=="FULL"?`calc(100dvh - ${h})`:`calc(100dvh - ${h} - ${i})`:n?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,r,n)=>e=="FULL"?"0":`${r?"0":"16px"} 0 ${n?"0":"16px"} 0`,K=C.newStyled(L.motion.div)`
   position: ${e=>e.scrollOverlay==!0?"absolute":"fixed"};
   top: 0;
   left: 0;
@@ -7,15 +7,15 @@
   background: ${e=>e.scrollOverlay===!0?"transparent":e.overlayColor};
   z-index: ${e=>e.zIndex};
   display: flex;
-`,K=j.newStyled(L.motion.div)`
+`,Q=C.newStyled(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")};
+  background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","default","enabled","bg")};
   z-index: ${e=>e.zIndex};
-  width: ${e=>Z[e.size.toUpperCase()]};
-  max-width: ${e=>W(e.size.toUpperCase())};
+  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),
     0px 10px 10px -5px rgba(0, 0, 0, 0.04);
   border-radius: ${e=>e.size.toUpperCase()!="FULL"?"16px":"0"};
@@ -26,7 +26,7 @@
   & .lnc-modal-header {
     max-height: ${h};
     overflow: hidden;
-    padding: ${l} ${l} 0 ${l};
+    padding: ${i} ${i} 0 ${i};
   }
   & .lnc-modal-header > h1,
   h2,
@@ -45,17 +45,17 @@
     flex-direction: column;
     justify-content: space-between;
     scrollbar-width: thin;
-    ${e=>e.scrollOverlay==!1&&`max-height: ${G(e.size.toUpperCase(),e.header,e.footer)};`}
+    ${e=>e.scrollOverlay==!1&&`max-height: ${W(e.size.toUpperCase(),e.header,e.footer)};`}
     overflow: auto;
-    margin: ${e=>X(e.size,e.header,e.footer)};
-    padding: 0 ${l} 0 ${l};
+    margin: ${e=>J(e.size,e.header,e.footer)};
+    padding: 0 ${i} 0 ${i};
   }
-`,Q=j.newStyled.div`
+`,Y=C.newStyled.div`
   position: absolute;
   cursor: pointer;
   top: 1.375rem;
   right: 1.375rem;
-  color: ${e=>w.getColorRgbaValue(e.theme,"Modal","primary","enabled","cancelButton")};
+  color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","enabled","cancelButton")};
   height: 1.5rem;
   width: 1.5rem;
   display: flex;
@@ -67,12 +67,12 @@
   }
 
   &:hover {
-    background-color: ${e=>w.getColorRgbaValue(e.theme,"Modal","primary","hover","cancelBtnBg","cancelBtnBgOpacity")};
+    background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","hover","cancelBtnBg","cancelBtnBgOpacity")};
   }
   &:focus {
-    background-color: ${e=>w.getColorRgbaValue(e.theme,"Modal","primary","focus","cancelBtnBg","cancelBtnBgOpacity")};
+    background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","focus","cancelBtnBg","cancelBtnBgOpacity")};
   }
-`,Y=j.newStyled(L.motion.div)`
+`,Z=C.newStyled(L.motion.div)`
   display: ${e=>e.scrollOverlay===!0?"block":"none"};
   position: fixed;
   top: 0;
@@ -81,4 +81,4 @@
   width: 100%;
   background-color: ${e=>e.overlayColor};
   z-index: 3;
-`,N=y.forwardRef((e,r)=>{const{portalElement:n=document.body,isOpen:s=!1,header:d,footer:a,scrollOverlay:i=!1,overlay:c=!0,overlayColor:p="rgba(0, 0, 0, 0.3)",showCloseButton:u=!0,onOpen:f=()=>{},onClose:g=()=>{},zIndex:C=1e3,size:$="fluid",clickOutsideToClose:v=!0,className:b="",style:A={},overlayProps:O,overlayAnimation:P={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},modalAnimation:F={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},children:U,rest:z}=e,M=y.useRef(),[R,k]=y.useState(s);let B={theme:V.useTheme(),size:$,zIndex:C,className:b,style:A};const S=m=>{m.target===m.currentTarget&&v&&T(m)};y.useImperativeHandle(r,()=>({open(){H()},close(){T()},isOpen(){return R}}));const H=m=>{k(!0),f(m)},T=m=>{k(!1),g(m)};return t.jsx(t.Fragment,{children:R&&t.jsx(t.Fragment,{children:n?t.jsx(t.Fragment,{children:D.reactDomExports.createPortal(t.jsx(q,{ref:M,overlay:c,scrollOverlay:i,onClickOutsideModal:S,overlayColor:p,overlayProps:O,overlayAnimation:P,modalAnimation:F,themeProps:B,showCloseButton:u,close:T,header:d,footer:a,isOpen:s,...z,children:U}),n)}):t.jsx(q,{ref:M,overlay:c,scrollOverlay:i,onClickOutsideModal:S,overlayColor:p,overlayProps:O,overlayAnimation:P,modalAnimation:F,themeProps:B,showCloseButton:u,close:T,header:d,footer:a,isOpen:s,...z,children:U})})})}),q=y.forwardRef(({overlay:e,scrollOverlay:r,onClickOutsideModal:n,overlayColor:s,overlayProps:d,overlayAnimation:a,modalAnimation:i,themeProps:c,showCloseButton:p,header:u,footer:f,close:g,isOpen:C,children:$,...v},b)=>t.jsx(E.AnimatePresence,{children:e?t.jsxs(t.Fragment,{children:[t.jsx(Y,{scrollOverlay:r,onClick:n,overlayColor:s,...d,...a}),t.jsx(J,{...c,onClick:n,scrollOverlay:r,overlayColor:s,isOpen:C,...d,...a,children:t.jsx(I,{ref:b,themeProps:c,scrollOverlay:r,modalAnimation:i,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})]}):t.jsx(I,{ref:b,themeProps:c,modalAnimation:i,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})),I=y.forwardRef(({themeProps:e,scrollOverlay:r,modalAnimation:n,showCloseButton:s,close:d,header:a,footer:i,children:c,...p},u)=>t.jsx(E.AnimatePresence,{children:t.jsxs(K,{ref:u,...e,...n,header:a,footer:i,scrollOverlay:r,...p,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[s&&t.jsx(Q,{...e,className:"modal-lnc-times",onClick:d,children:t.jsx(_,{icon:"times"})}),a&&t.jsx("div",{className:"lnc-modal-header",children:a}),t.jsx("div",{className:"lnc-modal-content",children:c}),i&&t.jsx("div",{className:"lnc-modal-footer",children:i})]})}));N.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 Z={FLUID:"max-content",XS:"320px",S:"412px",M:"672px",L:"1112px",XL:"1376px",FULL:"100vw"};module.exports=N;
+`,N=y.forwardRef((e,r)=>{const{portalElement:n=document.body,isOpen:s=!1,header:d,footer:l,scrollOverlay:a=!1,overlay:c=!0,overlayColor:p="rgba(0, 0, 0, 0.3)",showCloseButton:u=!0,onOpen:f=()=>{},onClose:g=()=>{},zIndex:O=1e3,size:$="fluid",clickOutsideToClose:v=!0,className:b="",style:A={},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(),[T,k]=y.useState(s);let B={theme:G.useTheme(),size:$,zIndex:O,className:b,style:A};const S=m=>{m.target===m.currentTarget&&v&&w(m)};y.useImperativeHandle(r,()=>({open(){_()},close(){w()},isOpen(){return T}}));const _=m=>{k(!0),f(m)},w=m=>{k(!1),g(m)};return y.useEffect(()=>{T===!0&&H()},[T]),t.jsx(t.Fragment,{children:T&&t.jsx(t.Fragment,{children:n?t.jsx(t.Fragment,{children:V.reactDomExports.createPortal(t.jsx(q,{ref:R,overlay:c,scrollOverlay:a,onClickOutsideModal:S,overlayColor:p,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:u,close:w,header:d,footer:l,isOpen:s,...M,children:z}),n)}):t.jsx(q,{ref:R,overlay:c,scrollOverlay:a,onClickOutsideModal:S,overlayColor:p,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:u,close:w,header:d,footer:l,isOpen:s,...M,children:z})})})}),q=y.forwardRef(({overlay:e,scrollOverlay:r,onClickOutsideModal:n,overlayColor:s,overlayProps:d,overlayAnimation:l,modalAnimation:a,themeProps:c,showCloseButton:p,header:u,footer:f,close:g,isOpen:O,children:$,...v},b)=>t.jsx(I.AnimatePresence,{children:e?t.jsxs(t.Fragment,{children:[t.jsx(Z,{scrollOverlay:r,onClick:n,overlayColor:s,...d,...l}),t.jsx(K,{...c,onClick:n,scrollOverlay:r,overlayColor:s,isOpen:O,...d,...l,children:t.jsx(E,{ref:b,themeProps:c,scrollOverlay:r,modalAnimation:a,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})]}):t.jsx(E,{ref:b,themeProps:c,modalAnimation:a,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})),E=y.forwardRef(({themeProps:e,scrollOverlay:r,modalAnimation:n,showCloseButton:s,close:d,header:l,footer:a,children:c,...p},u)=>t.jsx(I.AnimatePresence,{children:t.jsxs(Q,{ref:u,...e,...n,header:l,footer:a,scrollOverlay:r,...p,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[s&&t.jsx(Y,{...e,className:"modal-lnc-times",onClick:d,children:t.jsx(D,{icon:"times"})}),l&&t.jsx("div",{className:"lnc-modal-header",children:l}),t.jsx("div",{className:"lnc-modal-content",children:c}),a&&t.jsx("div",{className:"lnc-modal-footer",children:a})]})}));N.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=N;

package/dist/Modal.js

@@ -1,14 +1,14 @@
 import { jsx as t, Fragment as L, jsxs as D } from "react/jsx-runtime";
-import { forwardRef as U, useRef as W, useState as X, useImperativeHandle as V } from "react";
+import { forwardRef as z, useRef as X, useState as V, useImperativeHandle as q, useEffect as J } from "react";
 import { P as o } from "./index-BYnWp42a.js";
-import { n as w } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import q from "./Icon.js";
-import { a as O } from "./utils-C52T57HO.js";
-import { r as J } from "./index--Kmch3aI.js";
-import { m as z } from "./motion-ecIGZGwI.js";
-import { u as K } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+import { n as C } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import K from "./Icon.js";
+import { a as w } from "./utils-C52T57HO.js";
+import { r as Q } from "./index--Kmch3aI.js";
+import { m as M } from "./motion-ecIGZGwI.js";
+import { u as Y } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 import { A as R } from "./index-BUChtubz.js";
-const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FULL" ? `calc(100dvh - ${h} - ${f})` : `calc(100dvh - ${h} - ${f} - ${a})` : r ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${a})` : n ? e == "FULL" ? `calc(100dvh - ${f})` : `calc(100dvh - ${f} - ${a})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${a})`, Y = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${a})`, Z = (e, r, n) => e == "FULL" ? "0" : `${r ? "0" : "16px"} 0 ${n ? "0" : "16px"} 0`, P = w(z.div)`
+const f = "5rem", h = "3.8rem", a = "1.5rem", Z = (e, n, r) => n && r ? e == "FULL" ? `calc(100dvh - ${h} - ${f})` : `calc(100dvh - ${h} - ${f} - ${a})` : n ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${a})` : r ? e == "FULL" ? `calc(100dvh - ${f})` : `calc(100dvh - ${f} - ${a})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${a})`, P = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${a})`, ee = (e, n, r) => e == "FULL" ? "0" : `${n ? "0" : "16px"} 0 ${r ? "0" : "16px"} 0`, oe = C(M.div)`
   position: ${(e) => e.scrollOverlay == !0 ? "absolute" : "fixed"};
   top: 0;
   left: 0;
@@ -17,15 +17,15 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
   background: ${(e) => e.scrollOverlay === !0 ? "transparent" : e.overlayColor};
   z-index: ${(e) => e.zIndex};
   display: flex;
-`, ee = w(z.div)`
+`, te = 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) => O(e.theme, "Modal", "default", "enabled", "bg")};
+  background-color: ${(e) => w(e.theme, "Modal", "default", "enabled", "bg")};
   z-index: ${(e) => e.zIndex};
-  width: ${(e) => ne[e.size.toUpperCase()]};
-  max-width: ${(e) => Y(e.size.toUpperCase())};
+  width: ${(e) => le[e.size.toUpperCase()]};
+  max-width: ${(e) => P(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"};
@@ -55,21 +55,21 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
     flex-direction: column;
     justify-content: space-between;
     scrollbar-width: thin;
-    ${(e) => e.scrollOverlay == !1 && `max-height: ${Q(
+    ${(e) => e.scrollOverlay == !1 && `max-height: ${Z(
   e.size.toUpperCase(),
   e.header,
   e.footer
 )};`}
     overflow: auto;
-    margin: ${(e) => Z(e.size, e.header, e.footer)};
+    margin: ${(e) => ee(e.size, e.header, e.footer)};
     padding: 0 ${a} 0 ${a};
   }
-`, oe = w.div`
+`, ne = C.div`
   position: absolute;
   cursor: pointer;
   top: 1.375rem;
   right: 1.375rem;
-  color: ${(e) => O(
+  color: ${(e) => w(
   e.theme,
   "Modal",
   "primary",
@@ -87,7 +87,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
   }
 
   &:hover {
-    background-color: ${(e) => O(
+    background-color: ${(e) => w(
   e.theme,
   "Modal",
   "primary",
@@ -97,7 +97,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
 )};
   }
   &:focus {
-    background-color: ${(e) => O(
+    background-color: ${(e) => w(
   e.theme,
   "Modal",
   "primary",
@@ -106,7 +106,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
   "cancelBtnBgOpacity"
 )};
   }
-`, te = w(z.div)`
+`, re = C(M.div)`
   display: ${(e) => e.scrollOverlay === !0 ? "block" : "none"};
   position: fixed;
   top: 0;
@@ -115,9 +115,9 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
   width: 100%;
   background-color: ${(e) => e.overlayColor};
   z-index: 3;
-`, re = U((e, r) => {
+`, ae = z((e, n) => {
   const {
-    portalElement: n = document.body,
+    portalElement: r = document.body,
     isOpen: c = !1,
     header: d,
     footer: l,
@@ -129,12 +129,12 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
     },
     onClose: x = () => {
     },
-    zIndex: C = 1e3,
+    zIndex: U = 1e3,
     size: y = "fluid",
     clickOutsideToClose: $ = !0,
     className: v = "",
     style: G = {},
-    overlayProps: M,
+    overlayProps: F,
     overlayAnimation: k = {
       animate: { opacity: 1 },
       exit: { opacity: 0 },
@@ -143,7 +143,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
       },
       transition: { type: "spring", duration: 0.6 }
     },
-    modalAnimation: F = {
+    modalAnimation: B = {
       animate: { opacity: 1 },
       exit: { opacity: 0 },
       initial: {
@@ -151,78 +151,82 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
       },
       transition: { type: "spring", duration: 0.6 }
     },
-    children: B,
-    rest: T
-  } = e, I = W(), [N, E] = X(c);
-  let j = { theme: K(), size: y, zIndex: C, className: v, style: G };
+    onFinishOpen: _ = () => {
+    },
+    children: T,
+    rest: I
+  } = e, E = X(), [b, N] = V(c);
+  let j = { theme: Y(), size: y, zIndex: U, className: v, style: G };
   const A = (u) => {
-    u.target === u.currentTarget && $ && b(u);
+    u.target === u.currentTarget && $ && O(u);
   };
-  V(r, () => ({
+  q(n, () => ({
     open() {
-      _();
+      W();
     },
     close() {
-      b();
+      O();
     },
     isOpen() {
-      return N;
+      return b;
     }
   }));
-  const _ = (u) => {
-    E(!0), g(u);
-  }, b = (u) => {
-    E(!1), x(u);
+  const W = (u) => {
+    N(!0), g(u);
+  }, O = (u) => {
+    N(!1), x(u);
   };
-  return /* @__PURE__ */ t(L, { children: N && /* @__PURE__ */ t(L, { children: n ? /* @__PURE__ */ t(L, { children: J.createPortal(
+  return J(() => {
+    b === !0 && _();
+  }, [b]), /* @__PURE__ */ t(L, { children: b && /* @__PURE__ */ t(L, { children: r ? /* @__PURE__ */ t(L, { children: Q.createPortal(
     /* @__PURE__ */ t(
       H,
       {
-        ref: I,
+        ref: E,
         overlay: s,
         scrollOverlay: i,
         onClickOutsideModal: A,
         overlayColor: m,
-        overlayProps: M,
+        overlayProps: F,
         overlayAnimation: k,
-        modalAnimation: F,
+        modalAnimation: B,
         themeProps: j,
         showCloseButton: p,
-        close: b,
+        close: O,
         header: d,
         footer: l,
         isOpen: c,
-        ...T,
-        children: B
+        ...I,
+        children: T
       }
     ),
-    n
+    r
   ) }) : /* @__PURE__ */ t(
     H,
     {
-      ref: I,
+      ref: E,
       overlay: s,
       scrollOverlay: i,
       onClickOutsideModal: A,
       overlayColor: m,
-      overlayProps: M,
+      overlayProps: F,
       overlayAnimation: k,
-      modalAnimation: F,
+      modalAnimation: B,
       themeProps: j,
       showCloseButton: p,
-      close: b,
+      close: O,
       header: d,
       footer: l,
       isOpen: c,
-      ...T,
-      children: B
+      ...I,
+      children: T
     }
   ) }) });
-}), H = U(
+}), H = z(
   ({
     overlay: e,
-    scrollOverlay: r,
-    onClickOutsideModal: n,
+    scrollOverlay: n,
+    onClickOutsideModal: r,
     overlayColor: c,
     overlayProps: d,
     overlayAnimation: l,
@@ -232,28 +236,28 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
     header: p,
     footer: g,
     close: x,
-    isOpen: C,
+    isOpen: U,
     children: y,
     ...$
   }, v) => /* @__PURE__ */ t(R, { children: e ? /* @__PURE__ */ D(L, { children: [
     /* @__PURE__ */ t(
-      te,
+      re,
       {
-        scrollOverlay: r,
-        onClick: n,
+        scrollOverlay: n,
+        onClick: r,
         overlayColor: c,
         ...d,
         ...l
       }
     ),
     /* @__PURE__ */ t(
-      P,
+      oe,
       {
         ...s,
-        onClick: n,
-        scrollOverlay: r,
+        onClick: r,
+        scrollOverlay: n,
         overlayColor: c,
-        isOpen: C,
+        isOpen: U,
         ...d,
         ...l,
         children: /* @__PURE__ */ t(
@@ -261,7 +265,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
           {
             ref: v,
             themeProps: s,
-            scrollOverlay: r,
+            scrollOverlay: n,
             modalAnimation: i,
             showCloseButton: m,
             close: x,
@@ -287,11 +291,11 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
       children: y
     }
   ) })
-), S = U(
+), S = z(
   ({
     themeProps: e,
-    scrollOverlay: r,
-    modalAnimation: n,
+    scrollOverlay: n,
+    modalAnimation: r,
     showCloseButton: c,
     close: d,
     header: l,
@@ -299,24 +303,24 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
     children: s,
     ...m
   }, p) => /* @__PURE__ */ t(R, { children: /* @__PURE__ */ D(
-    ee,
+    te,
     {
       ref: p,
       ...e,
-      ...n,
+      ...r,
       header: l,
       footer: i,
-      scrollOverlay: r,
+      scrollOverlay: n,
       ...m,
       className: `modal-lnc-container ${e == null ? void 0 : e.className}`,
       children: [
         c && /* @__PURE__ */ t(
-          oe,
+          ne,
           {
             ...e,
             className: "modal-lnc-times",
             onClick: d,
-            children: /* @__PURE__ */ t(q, { icon: "times" })
+            children: /* @__PURE__ */ t(K, { icon: "times" })
           }
         ),
         l && /* @__PURE__ */ t("div", { className: "lnc-modal-header", children: l }),
@@ -326,7 +330,7 @@ const f = "5rem", h = "3.8rem", a = "1.5rem", Q = (e, r, n) => r && n ? e == "FU
     }
   ) })
 );
-re.propTypes = {
+ae.propTypes = {
   /**
    * If the value is given modal will use createPortal to be rendered in portalElement
    */
@@ -358,7 +362,7 @@ re.propTypes = {
   size: o.oneOf(["fluid", "xs", "s", "m", "l", "xl", "full"]),
   overlayProps: o.any
 };
-const ne = {
+const le = {
   FLUID: "max-content",
   XS: "320px",
   S: "412px",
@@ -368,5 +372,5 @@ const ne = {
   FULL: "100vw"
 };
 export {
-  re as default
+  ae as default
 };

package/package.json

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