@lanaco/lnc-react-ui/dist/BannerSectionWithListImage.cjs

React component library

"use strict";const i=require("react/jsx-runtime"),a=require("react"),n=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),s=require("./breakpoints-CcVm-gVm.cjs"),y=require("./Button.cjs"),j=n.styled.div`
  display: flex;
  border-radius: 0.75rem;
  background-color: ${e=>(e==null?void 0:e.bgColor)||"transparent"};
  overflow: hidden;

  & 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 ${s.down("S")} {
    /* Keep the card (border / radius / shadow) on mobile so the text and
       image read as one unified visual, with the image flush at the bottom
       of the card (see design). */
    flex-direction: column;

    & img {
      max-width: 100%;
      min-width: 100%;
      max-height: ${e=>e.imgHMob||"12.1rem"};
      min-height: ${e=>e.imgHMob||"12.1rem"};
    }
  }
`,v=n.styled.div`
  padding: 2rem;
  display: flex;
  gap: 1.25rem;
  justify-content: space-between;
  flex: 1;
  flex-direction: column;

  @media ${s.down("S")} {
    padding: 1rem 1rem 1.25rem 1rem;
  }
`,$=n.styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  & .header-title {
    color: var(--gray-950, #14161a);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem;
    letter-spacing: -0.5904px;
  }

  & .header-subtitle {
    color: var(--gray-950, #14161a);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: -0.0112rem;
  }

  @media ${s.down("S")} {
    flex-direction: column;
  }
`,H=n.styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;

  & .list-item {
    color: var(--gray-950, #14161a);
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.0056rem;

    & .mng {
      font-size: 1.25rem;
      color: var(--info-600, #6d28d9);
    }
  }
`,k=a.forwardRef((e,l)=>{const{title:m,subtitle:d,buttonText:c,list:o,imageUrl:g,imageHeight:h,imageWidth:x,imageHeightMobile:p,hasBorder:u=!0,backgroundColor:b="transparent",onButtonAction:f=()=>{},buttonLink:w}=e;return i.jsxs(j,{ref:l,imgH:h,imgW:x,imgHMob:p,hasBorder:u,bgColor:b,className:"lp-section lp-bnr-section lp-banner-section-with-list-image banner-sec-listimg",children:[i.jsxs(v,{className:"banner-sec-listimg-wrapper",children:[i.jsxs($,{children:[i.jsx("div",{className:"header-title",children:m}),i.jsx("div",{className:"header-subitle",children:d})]}),i.jsx(H,{lassName:"banner-sec-listimg-list",children:o==null?void 0:o.map((t,r)=>i.jsx(a.Fragment,{children:i.jsxs("div",{className:"list-item",children:[i.jsx("i",{className:"mng mng-lnc-checkmark--filled"}),i.jsx("span",{children:t})]})},r))}),i.jsx(y,{size:"medium",color:"neutral",type:"button",btnType:"outline",onClick:t=>{var r;(r=t==null?void 0:t.target)==null||r.blur(),f(w)},children:c})]}),i.jsx("img",{src:g})]})});module.exports=k;