@lanaco/lnc-react-ui 4.0.25 → 4.0.26

package/dist/index6.js

@@ -1,104 +1,144 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { forwardRef as h, Fragment as x } from "react";
-import { n as o } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as a } from "./consts-DNVz1x1I.js";
-import g from "./Button.js";
-import { l as t } from "./utils-DtEdJZWa.js";
-const u = o.div`
-  padding-bottom: 1.38rem;
-  text-align: center;
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { n as r } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as o } from "./consts-DNVz1x1I.js";
+import v from "./Button.js";
+import { u as y } from "./useDetectMobile-BookNOsk.js";
+const M = r.div`
   display: flex;
-  justify-content: center;
-  flex-direction: column;
-  gap: 2rem;
-  align-items: center;
+  border-radius: 0.75rem;
+  background-color: ${(e) => e.bgcolor || "transparent"};
+  overflow: hidden;
+  max-height: ${(e) => e.height || "22.5rem"};
+  min-height: ${(e) => e.height || "22.5rem"};
+  background-color: ${(e) => e.bgcolor || "transparent"};
 
   & button {
     width: fit-content;
   }
 
-  @media (max-width: ${a + "px"}) {
-    padding-bottom: 0;
+  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+`}
+
+  & img {
+    object-fit: cover;
+    max-width: ${(e) => e.imgW || "22.5rem"};
+    min-width: ${(e) => e.imgW || "22.5rem"};
+    max-height: ${(e) => e.height || "22.5rem"};
+    min-height: ${(e) => e.height || "22.5rem"};
+  }
+
+  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+
+`}
+
+  @media (max-width: ${o + "px"}) {
+    gap: 1.5rem;
+    flex-direction: column;
+    min-height: unset;
+    max-height: unset;
+
+    & button {
+      width: fit-content;
+    }
+
+    & img {
+      max-width: 100%;
+      min-width: 100%;
+      max-height: ${(e) => e.imgHMob || "12.1rem"};
+      min-height: ${(e) => e.imgHMob || "12.1rem"};
+    }
   }
-`, y = o.div`
-  text-align: center;
+`, C = r.div`
+  padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
+  display: flex;
+  gap: 2rem;
+  flex-direction: ${(e) => e.isHorizontalContent === !0 ? "row" : "column"};
+  flex: 1;
+
+  ${(e) => e.isHorizontalContent === !0 && "justify-content: space-between;"}
+
+  @media (max-width: ${o + "px"}) {
+    padding: 0;
+    flex-direction: column;
+  }
+`, H = r.div`
   display: flex;
-  justify-content: center;
   flex-direction: column;
   gap: 0.25rem;
 
   & .header-title {
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     font-weight: 600;
   }
 
   & .header-subtitle {
-    color: var(--gray-600, #676e79);
+    color: var(--gray-950, #14161a);
     font-size: 1rem;
     font-weight: 500;
   }
 
-  @media (max-width: ${a + "px"}) {
+  @media (max-width: ${o + "px"}) {
+    flex-direction: column;
   }
-`, b = o.div`
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  align-items: center;
-
-  & .list-item {
-    display: flex;
-    align-items: center;
-
-    & .mng {
-      font-size: 1.25rem;
-      color: var(--success-600);
-    }
-  }
-
-  @media (max-width: ${a + "px"}) {
-    & .list-item {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-      gap: 0;
-    }
-  }
-`, N = h((m, w) => {
+`, I = $((e, B) => {
   const {
-    title: i,
-    subtitle: n,
-    buttonText: s,
-    list: r,
-    fallback: d = () => {
-    },
-    onBannerClick: c
-  } = m;
-  return /* @__PURE__ */ l(u, { children: [
-    (t(i) || t(n)) && /* @__PURE__ */ l(y, { children: [
-      t(i) && /* @__PURE__ */ e("div", { className: "header-title", children: i }),
-      t(n) && /* @__PURE__ */ e("div", { className: "header-subitle", children: n })
-    ] }),
-    /* @__PURE__ */ e(b, { children: r == null ? void 0 : r.map((f, p) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
-      /* @__PURE__ */ e("i", { className: "mng mng-lnc-checkmark--filled" }),
-      /* @__PURE__ */ e("span", { children: f })
-    ] }) }, p)) }),
-    /* @__PURE__ */ e(
-      g,
-      {
-        size: "medium",
-        color: "neutral",
-        type: "button",
-        onClick: () => t(c) ? c() : d(),
-        children: s
-      }
-    )
-  ] });
+    title: l,
+    subtitle: h,
+    buttonText: g,
+    image: a,
+    imagePosition: n = "right",
+    noImageForMobile: m = !1,
+    height: s,
+    imageWidth: c,
+    imageHeightMob: x,
+    smallPadding: p = !1,
+    isHorizontalContent: u = !1,
+    backgroundColor: b,
+    hasBorder: f = !1,
+    onBannerClick: w
+  } = e, d = y();
+  return /* @__PURE__ */ t(
+    M,
+    {
+      bgcolor: b,
+      height: s,
+      imgW: c,
+      imgHMob: x,
+      hasBorder: f,
+      children: [
+        n !== "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: a }),
+        /* @__PURE__ */ t(
+          C,
+          {
+            isHorizontalContent: u,
+            smallPadding: p,
+            children: [
+              /* @__PURE__ */ t(H, { children: [
+                /* @__PURE__ */ i("div", { className: "header-title", children: l }),
+                /* @__PURE__ */ i("div", { className: "header-subitle", children: h })
+              ] }),
+              /* @__PURE__ */ i(
+                v,
+                {
+                  size: "medium",
+                  color: "neutral",
+                  type: "button",
+                  onClick: w,
+                  children: g
+                }
+              )
+            ]
+          }
+        ),
+        n === "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: a })
+      ]
+    }
+  );
 });
 export {
-  N as default
+  I as default
 };

package/dist/index7.cjs

@@ -1,48 +1,23 @@
-"use strict";const i=require("react/jsx-runtime"),o=require("react"),t=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./consts-dNz9tpt4.cjs"),b=require("./Button.cjs"),w=t.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-dNz9tpt4.cjs"),u=require("./Button.cjs"),t=require("./utils-CE6bljYe.cjs"),h=s.newStyled.div`
+  padding-bottom: 1.38rem;
+  text-align: center;
   display: flex;
-  border-radius: 0.75rem;
-  background-color: ${e=>e.bgcolor||"transparent"};
-  overflow: hidden;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 
   & button {
     width: fit-content;
   }
 
-  & img {
-    object-fit: cover;
-    max-width: ${e=>e.imgW||"33.39346rem"};
-    min-width: ${e=>e.imgW||"33.39346rem"};
-    max-height: ${e=>e.imgH||"22.5rem"};
-    min-height: ${e=>e.imgH||"22.5rem"};
-  }
-
-  ${e=>e.hasBorder===!0&&`border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-
-`}
-
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
-    flex-direction: column;
-    & img {
-      max-width: 100%;
-      min-width: 100%;
-      max-height: ${e=>e.imgHMob||"12.1rem"};
-      min-height: ${e=>e.imgHMob||"12.1rem"};
-    }
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    padding-bottom: 0;
   }
-`,y=t.newStyled.div`
-  padding: 2rem;
-  display: flex;
-  gap: 1.25rem;
-  justify-content: space-between;
-  flex: 1;
-  flex-direction: column;
-
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
-    padding: 1.25rem;
-  }
-`,j=t.newStyled.div`
+`,g=s.newStyled.div`
+  text-align: center;
   display: flex;
+  justify-content: center;
   flex-direction: column;
   gap: 0.25rem;
 
@@ -57,15 +32,17 @@
     font-weight: 500;
   }
 
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
-    flex-direction: column;
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
   }
-`,v=t.newStyled.div`
+`,p=s.newStyled.div`
+  text-align: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
+  align-items: center;
 
   & .list-item {
     display: flex;
@@ -73,10 +50,16 @@
 
     & .mng {
       font-size: 1.25rem;
-      color: var(--info-600);
+      color: var(--success-600);
     }
   }
 
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    & .list-item {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      gap: 0;
+    }
   }
-`,$=o.forwardRef((e,S)=>{const{title:a,subtitle:m,buttonText:s,list:n,image:d,imageHeight:l,imageWidth:c,imageHeightMob:x,hasBorder:g=!0,backgroundColor:h="transparent",onBannerClick:p}=e;return i.jsxs(w,{imgH:l,imgW:c,imgHMob:x,hasBorder:g,bgColor:h,children:[i.jsxs(y,{children:[i.jsxs(j,{children:[i.jsx("div",{className:"header-title",children:a}),i.jsx("div",{className:"header-subitle",children:m})]}),i.jsx(v,{children:n==null?void 0:n.map((u,f)=>i.jsx(o.Fragment,{children:i.jsxs("div",{className:"list-item",children:[i.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),i.jsx("span",{children:u})]})},f))}),i.jsx(b,{size:"medium",color:"gray",type:"button",btnType:"outline",onClick:p,children:s})]}),i.jsx("img",{src:d})]})});module.exports=$;
+`,j=o.forwardRef((a,y)=>{const{title:i,subtitle:n,buttonText:d,list:r,fallback:m=()=>{},onBannerClick:l}=a;return e.jsxs(h,{children:[(t.isDefined(i)||t.isDefined(n))&&e.jsxs(g,{children:[t.isDefined(i)&&e.jsx("div",{className:"header-title",children:i}),t.isDefined(n)&&e.jsx("div",{className:"header-subitle",children:n})]}),e.jsx(p,{children:r==null?void 0:r.map((x,f)=>e.jsx(o.Fragment,{children:e.jsxs("div",{className:"list-item",children:[e.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),e.jsx("span",{children:x})]})},f))}),e.jsx(u,{size:"medium",color:"neutral",type:"button",onClick:()=>t.isDefined(l)?l():m(),children:d})]})});module.exports=j;

package/dist/index7.js

@@ -1,53 +1,29 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { forwardRef as u, Fragment as w } from "react";
-import { n as t } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as n } from "./consts-DNVz1x1I.js";
-import v from "./Button.js";
-const y = t.div`
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as h, Fragment as x } from "react";
+import { n as o } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as a } from "./consts-DNVz1x1I.js";
+import g from "./Button.js";
+import { l as t } from "./utils-DtEdJZWa.js";
+const u = o.div`
+  padding-bottom: 1.38rem;
+  text-align: center;
   display: flex;
-  border-radius: 0.75rem;
-  background-color: ${(e) => e.bgcolor || "transparent"};
-  overflow: hidden;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 
   & button {
     width: fit-content;
   }
 
-  & img {
-    object-fit: cover;
-    max-width: ${(e) => e.imgW || "33.39346rem"};
-    min-width: ${(e) => e.imgW || "33.39346rem"};
-    max-height: ${(e) => e.imgH || "22.5rem"};
-    min-height: ${(e) => e.imgH || "22.5rem"};
-  }
-
-  ${(e) => e.hasBorder === !0 && `border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-
-`}
-
-  @media (max-width: ${n + "px"}) {
-    flex-direction: column;
-    & img {
-      max-width: 100%;
-      min-width: 100%;
-      max-height: ${(e) => e.imgHMob || "12.1rem"};
-      min-height: ${(e) => e.imgHMob || "12.1rem"};
-    }
-  }
-`, $ = t.div`
-  padding: 2rem;
-  display: flex;
-  gap: 1.25rem;
-  justify-content: space-between;
-  flex: 1;
-  flex-direction: column;
-
-  @media (max-width: ${n + "px"}) {
-    padding: 1.25rem;
+  @media (max-width: ${a + "px"}) {
+    padding-bottom: 0;
   }
-`, H = t.div`
+`, y = o.div`
+  text-align: center;
   display: flex;
+  justify-content: center;
   flex-direction: column;
   gap: 0.25rem;
 
@@ -62,15 +38,17 @@ const y = t.div`
     font-weight: 500;
   }
 
-  @media (max-width: ${n + "px"}) {
-    flex-direction: column;
+  @media (max-width: ${a + "px"}) {
   }
-`, W = t.div`
+`, b = o.div`
+  text-align: center;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: 0.75rem;
   font-size: 0.875rem;
   font-weight: 500;
+  align-items: center;
 
   & .list-item {
     display: flex;
@@ -78,60 +56,48 @@ const y = t.div`
 
     & .mng {
       font-size: 1.25rem;
-      color: var(--info-600);
+      color: var(--success-600);
     }
   }
 
-  @media (max-width: ${n + "px"}) {
+  @media (max-width: ${a + "px"}) {
+    & .list-item {
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      gap: 0;
+    }
   }
-`, N = u((e, k) => {
+`, N = h((m, w) => {
   const {
-    title: o,
-    subtitle: a,
-    buttonText: d,
-    list: m,
-    image: l,
-    imageHeight: c,
-    imageWidth: s,
-    imageHeightMob: g,
-    hasBorder: h = !0,
-    backgroundColor: p = "transparent",
-    onBannerClick: x
-  } = e;
-  return /* @__PURE__ */ r(
-    y,
-    {
-      imgH: c,
-      imgW: s,
-      imgHMob: g,
-      hasBorder: h,
-      bgColor: p,
-      children: [
-        /* @__PURE__ */ r($, { children: [
-          /* @__PURE__ */ r(H, { children: [
-            /* @__PURE__ */ i("div", { className: "header-title", children: o }),
-            /* @__PURE__ */ i("div", { className: "header-subitle", children: a })
-          ] }),
-          /* @__PURE__ */ i(W, { children: m == null ? void 0 : m.map((f, b) => /* @__PURE__ */ i(w, { children: /* @__PURE__ */ r("div", { className: "list-item", children: [
-            /* @__PURE__ */ i("i", { className: "mng mng-lnc-checkmark--filled" }),
-            /* @__PURE__ */ i("span", { children: f })
-          ] }) }, b)) }),
-          /* @__PURE__ */ i(
-            v,
-            {
-              size: "medium",
-              color: "gray",
-              type: "button",
-              btnType: "outline",
-              onClick: x,
-              children: d
-            }
-          )
-        ] }),
-        /* @__PURE__ */ i("img", { src: l })
-      ]
-    }
-  );
+    title: i,
+    subtitle: n,
+    buttonText: s,
+    list: r,
+    fallback: d = () => {
+    },
+    onBannerClick: c
+  } = m;
+  return /* @__PURE__ */ l(u, { children: [
+    (t(i) || t(n)) && /* @__PURE__ */ l(y, { children: [
+      t(i) && /* @__PURE__ */ e("div", { className: "header-title", children: i }),
+      t(n) && /* @__PURE__ */ e("div", { className: "header-subitle", children: n })
+    ] }),
+    /* @__PURE__ */ e(b, { children: r == null ? void 0 : r.map((f, p) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ l("div", { className: "list-item", children: [
+      /* @__PURE__ */ e("i", { className: "mng mng-lnc-checkmark--filled" }),
+      /* @__PURE__ */ e("span", { children: f })
+    ] }) }, p)) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        size: "medium",
+        color: "neutral",
+        type: "button",
+        onClick: () => t(c) ? c() : d(),
+        children: s
+      }
+    )
+  ] });
 });
 export {
   N as default