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

React component library

"use strict";const t=require("react/jsx-runtime"),y=require("react"),i=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),r=require("./consts-CtNoHdBj.cjs"),j=require("./Button.cjs"),M=require("./useDetectMobile-D6d5LpdL.cjs"),v=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;
  }

  ${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"};
    }
  }
`,B=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;
  }
`,H=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;
  }
`,S=y.forwardRef((e,d)=>{const{title:l,subtitle:m,buttonText:h,buttonLink:c,onButtonAction:g=()=>{},imageUrl:o,imagePosition:n="right",hideImageForMobile:a=!1,sectionHeight:x="12.65625rem",imageWidth:u,imageHeightMobile:p,smallPadding:b=!1,isHorizontalContent:f=!1,backgroundColor:w,hasBorder:$=!1}=e,s=M.useDetectMobile();return t.jsxs(v,{ref:d,bgcolor:w,height:x,imgW:u,imgHMob:p,hasBorder:$,children:[n!=="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o}),t.jsxs(B,{isHorizontalContent:f,smallPadding:b,children:[t.jsxs(H,{children:[t.jsx("div",{className:"header-title",children:l}),t.jsx("div",{className:"header-subitle",children:m})]}),t.jsx(j,{size:"medium",color:"neutral",type:"button",onClick:()=>g(c),children:h})]}),n==="right"&&!(a===!0&&s===!0)&&t.jsx("img",{src:o})]})});module.exports=S;