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

React component library

"use strict";const t=require("react/jsx-runtime"),f=require("react"),r=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),i=require("./breakpoints-CcVm-gVm.cjs"),x=require("./Button.cjs"),p=r.styled.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"};

  & button {
    width: fit-content;
    background-color: var(--gray-100, #f3f4f6);
    color: var(--gray-950, #14161a);
  }

  @media ${i.down("S")} {
    gap: 1.5rem;
    flex-direction: column;
    min-height: unset;
    max-height: unset;

    & button {
      width: fit-content;
    }
  }
`,y=r.styled.div`
  padding: ${e=>e.smallPadding===!0?"2rem":"4rem 5rem"};
  display: flex;
  gap: 2rem;
  flex-direction: ${e=>e.isHorizontalContent===!0?"row":"column"};
  flex: 1;
  align-items: center;

  ${e=>e.isHorizontalContent===!0&&"justify-content: space-between;"}

  @media ${i.down("S")} {
    padding: 0;
    flex-direction: column;
  }
`,v=r.styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;

  & .header-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gray-950, #14161a);
  }

  & .header-subtitle {
    color: var(--gray-950, #14161a);
    font-size: 1rem;
    font-weight: 500;
  }
`,w=f.forwardRef((e,n)=>{const{title:o,subtitle:a,buttonText:s,onClick:l,height:c,imageWidth:d,imageHeightMob:m,smallPadding:u=!1,isHorizontalContent:g=!1,backgroundColor:h,hasBorder:b=!1}=e;return t.jsx(p,{ref:n,bgcolor:h,height:c,imgW:d,imgHMob:m,hasBorder:b,className:"lp-section lp-bnr-section lp-banner-section-basic banner-section-basic-lnc",children:t.jsxs(y,{isHorizontalContent:g,smallPadding:u,children:[t.jsxs(v,{children:[t.jsx("div",{className:"header-title",children:o}),t.jsx("div",{className:"header-subitle",children:a})]}),t.jsx(x,{size:"medium",color:"neutral",type:"button",borderRadius:"curved",onClick:l,children:s})]})})});module.exports=w;