@lanaco/lnc-react-ui 4.0.25 → 4.0.26

package/dist/index5.cjs

@@ -1,81 +1,48 @@
-"use strict";const t=require("react/jsx-runtime"),w=require("react"),i=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./consts-dNz9tpt4.cjs"),$=require("./Button.cjs"),y=require("./useDetectMobile-rBe0FiP2.cjs"),j=i.newStyled.div`
-  display: flex;
-  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;
+"use strict";const t=require("react/jsx-runtime"),p=require("react"),j=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),w=require("./consts-dNz9tpt4.cjs"),f=require("./useDetectMobile-rBe0FiP2.cjs"),m=require("./index-C2M7QHPq.cjs"),k=j.newStyled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+
+  & .text-item {
+    max-height: ${e=>e.height};
+    min-height: ${e=>e.height};
+    max-width: 27rem;
+    margin: auto;
   }
 
-  ${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"};
+    width: 100%;
+    max-height: ${e=>e.height};
+    min-height: ${e=>e.height};
   }
 
-  ${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-1 {
+    border-radius: 0.75rem 0.75rem 0.75rem 0;
+  }
 
-`}
+  & .img-2 {
+    border-radius: 0.75rem 0rem 0.75rem 0.75rem;
+  }
 
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${w.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
-    flex-direction: column;
-    min-height: unset;
-    max-height: unset;
 
-    & button {
-      width: fit-content;
+    & .img-item {
+      width: 100%;
+      min-height: 11.25rem;
+      max-height: 11.25rem;
     }
 
-    & img {
-      max-width: 100%;
-      min-width: 100%;
-      max-height: ${e=>e.imgHMob||"12.1rem"};
-      min-height: ${e=>e.imgHMob||"12.1rem"};
+    & .img1,
+    .img2 {
+      border-radius: 0.75rem;
     }
-  }
-`,M=i.newStyled.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: ${r.MOBILE_SIZE_PX+"px"}) {
-    padding: 0;
-    flex-direction: column;
-  }
-`,v=i.newStyled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  & .header-title {
-    font-size: 1.75rem;
-    font-weight: 600;
-  }
-
-  & .header-subtitle {
-    color: var(--gray-950, #14161a);
-    font-size: 1rem;
-    font-weight: 500;
-  }
-
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
-    flex-direction: column;
+    & .text-item {
+      min-height: unset;
+      max-height: unset;
+    }
   }
-`,B=w.forwardRef((e,S)=>{const{title:d,subtitle:l,buttonText:m,image:o,imagePosition:n="right",noImageForMobile:a=!1,height:h,imageWidth:c,imageHeightMob:g,smallPadding:x=!1,isHorizontalContent:u=!1,backgroundColor:p,hasBorder:b=!1,onBannerClick:f}=e,s=y.useDetectMobile();return t.jsxs(j,{bgcolor:p,height:h,imgW:c,imgHMob:g,hasBorder:b,children:[n!=="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o}),t.jsxs(M,{isHorizontalContent:u,smallPadding:x,children:[t.jsxs(v,{children:[t.jsx("div",{className:"header-title",children:d}),t.jsx("div",{className:"header-subitle",children:l})]}),t.jsx($,{size:"medium",color:"neutral",type:"button",onClick:f,children:m})]}),n==="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o})]})});module.exports=B;
+`,q=p.forwardRef((e,T)=>{const{image1:s,image2:i,title1:n,title2:o,text1:g,text2:a,subtitle1:c,subtitle2:u,buttonText1:h,buttonText2:x,buttonLink1:l,buttonLink2:d,rowHeight:b="12.65625rem"}=e,r=f.useDetectMobile();return t.jsxs(k,{height:b,children:[t.jsx(m.TextBlockV1,{className:"text-item",title:n,subtitle:c,description:g,buttonText:h,buttonLink:l}),t.jsx("img",{className:"img-item img-1",src:s}),r!==!0&&t.jsx("img",{className:"img-item img-2",src:i}),t.jsx(m.TextBlockV1,{className:"text-item",title:o,subtitle:u,description:a,buttonText:x,buttonLink:d}),r===!0&&t.jsx("img",{className:"img-item img-2",src:i})]})});module.exports=q;

package/dist/index5.js

@@ -1,144 +1,100 @@
-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;
-  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"};
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { n as w } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as T } from "./consts-DNVz1x1I.js";
+import { u as k } from "./useDetectMobile-BookNOsk.js";
+import { T as r } from "./index-DcYg32le.js";
+const L = w.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
 
-  & button {
-    width: fit-content;
+  & .text-item {
+    max-height: ${(t) => t.height};
+    min-height: ${(t) => t.height};
+    max-width: 27rem;
+    margin: auto;
   }
 
-  ${(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"};
+    width: 100%;
+    max-height: ${(t) => t.height};
+    min-height: ${(t) => t.height};
   }
 
-  ${(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-1 {
+    border-radius: 0.75rem 0.75rem 0.75rem 0;
+  }
 
-`}
+  & .img-2 {
+    border-radius: 0.75rem 0rem 0.75rem 0.75rem;
+  }
 
-  @media (max-width: ${o + "px"}) {
+  @media (max-width: ${T + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
     gap: 1.5rem;
-    flex-direction: column;
-    min-height: unset;
-    max-height: unset;
 
-    & button {
-      width: fit-content;
+    & .img-item {
+      width: 100%;
+      min-height: 11.25rem;
+      max-height: 11.25rem;
     }
 
-    & img {
-      max-width: 100%;
-      min-width: 100%;
-      max-height: ${(e) => e.imgHMob || "12.1rem"};
-      min-height: ${(e) => e.imgHMob || "12.1rem"};
+    & .img1,
+    .img2 {
+      border-radius: 0.75rem;
     }
-  }
-`, 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;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  & .header-title {
-    font-size: 1.75rem;
-    font-weight: 600;
-  }
 
-  & .header-subtitle {
-    color: var(--gray-950, #14161a);
-    font-size: 1rem;
-    font-weight: 500;
-  }
-
-  @media (max-width: ${o + "px"}) {
-    flex-direction: column;
+    & .text-item {
+      min-height: unset;
+      max-height: unset;
+    }
   }
-`, I = $((e, B) => {
+`, y = f((t, N) => {
   const {
-    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 })
-      ]
-    }
-  );
+    image1: o,
+    image2: i,
+    title1: s,
+    title2: a,
+    text1: g,
+    text2: n,
+    subtitle1: h,
+    subtitle2: u,
+    buttonText1: d,
+    buttonText2: l,
+    buttonLink1: c,
+    buttonLink2: x,
+    rowHeight: p = "12.65625rem"
+  } = t, m = k();
+  return /* @__PURE__ */ b(L, { height: p, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        className: "text-item",
+        title: s,
+        subtitle: h,
+        description: g,
+        buttonText: d,
+        buttonLink: c
+      }
+    ),
+    /* @__PURE__ */ e("img", { className: "img-item img-1", src: o }),
+    m !== !0 && /* @__PURE__ */ e("img", { className: "img-item img-2", src: i }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        className: "text-item",
+        title: a,
+        subtitle: u,
+        description: n,
+        buttonText: l,
+        buttonLink: x
+      }
+    ),
+    m === !0 && /* @__PURE__ */ e("img", { className: "img-item img-2", src: i })
+  ] });
 });
 export {
-  I as default
+  y as default
 };

package/dist/index6.cjs

@@ -1,65 +1,81 @@
-"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;
+"use strict";const t=require("react/jsx-runtime"),w=require("react"),i=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./consts-dNz9tpt4.cjs"),$=require("./Button.cjs"),y=require("./useDetectMobile-rBe0FiP2.cjs"),j=i.newStyled.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: ${c.MOBILE_SIZE_PX+"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: ${r.MOBILE_SIZE_PX+"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"};
+    }
+  }
+`,M=i.newStyled.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: ${r.MOBILE_SIZE_PX+"px"}) {
+    padding: 0;
+    flex-direction: column;
   }
-`,g=s.newStyled.div`
-  text-align: center;
+`,v=i.newStyled.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: ${c.MOBILE_SIZE_PX+"px"}) {
-  }
-`,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;
-    align-items: center;
-
-    & .mng {
-      font-size: 1.25rem;
-      color: var(--success-600);
-    }
-  }
-
-  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
-    & .list-item {
-      flex-direction: column;
-      text-align: center;
-      justify-content: center;
-      gap: 0;
-    }
+  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+    flex-direction: column;
   }
-`,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;
+`,B=w.forwardRef((e,S)=>{const{title:d,subtitle:l,buttonText:m,image:o,imagePosition:n="right",noImageForMobile:a=!1,height:h,imageWidth:c,imageHeightMob:g,smallPadding:x=!1,isHorizontalContent:u=!1,backgroundColor:p,hasBorder:b=!1,onBannerClick:f}=e,s=y.useDetectMobile();return t.jsxs(j,{bgcolor:p,height:h,imgW:c,imgHMob:g,hasBorder:b,children:[n!=="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o}),t.jsxs(M,{isHorizontalContent:u,smallPadding:x,children:[t.jsxs(v,{children:[t.jsx("div",{className:"header-title",children:d}),t.jsx("div",{className:"header-subitle",children:l})]}),t.jsx($,{size:"medium",color:"neutral",type:"button",onClick:f,children:m})]}),n==="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o})]})});module.exports=B;