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

React component library

"use strict";const t=require("react/jsx-runtime"),j=require("react"),n=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),o=require("./breakpoints-CcVm-gVm.cjs"),z=require("./Button.cjs"),M=require("./useDetectMobile-DYV6V1yw.cjs"),k=require("./utils-BK6B_Y9X.cjs"),q=n.styled.div`
  display: flex;
  border-radius: 0.75rem;
  background-color: ${e=>e.bgcolor||"transparent"};
  overflow: hidden;
  max-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
  min-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
  background-color: ${e=>e.bgcolor||"transparent"};
  position: relative;

  & button {
    width: fit-content;
  }

  & img {
    object-fit: cover;
    max-width: ${e=>e.imgW!=null?`${e.imgW}px`:"22.5rem"};
    min-width: ${e=>e.imgW!=null?`${e.imgW}px`:"22.5rem"};
    max-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
    min-height: ${e=>e.height!=null?`${e.height}px`:"22.5rem"};
  }

  & .header-image {
    max-width: 9.25rem;
    max-height: 9.25rem;
    position: absolute;
    left: 1rem;
    top: 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);

`}

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

    & button {
      width: fit-content;
    }

    & img {
      max-width: 100%;
      min-width: 100%;
      max-height: ${e=>e.imgHMob!=null?`${e.imgHMob}px`:"12.1rem"};
      min-height: ${e=>e.imgHMob!=null?`${e.imgHMob}px`:"12.1rem"};
    }

    & .header-image {
      max-width: 8rem;
      max-height: 8rem;
      min-width: 8rem;
      left: 0;
    }
  }
`,C=n.styled.div`
  padding: ${e=>e.smallPadding===!0?"2rem":"4rem 5rem"};
  display: flex;
  gap: 2rem;
  flex-direction: ${e=>e.isHorizontalContent===!0?"row":"column"};
  flex: 1;
  z-index: 2;

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

  & .header-button {
    width: fit-content;
    background: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: -0.09px;
    white-space: pre;

    &:hover {
      background: var(--gray-700, #424b56);
    }
  }

  @media ${o.down("S")} {
    padding: 0;
    flex-direction: column;

    ${e=>e!=null&&e.hasHeaderImage?"padding: 3.5rem 3.5rem 0 3.5rem;":""}
  }
`,N=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.0369rem;
  }

  & .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 ${o.down("S")} {
    flex-direction: column;

    & .header-title {
      font-size: 1.375rem;
      font-weight: 600;
      line-height: 1.75rem;
    }

    & .header-subtitle {
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: -0.0112rem;
    }
  }
`,W=j.forwardRef((e,g)=>{const{title:d,subtitle:c,buttonText:u,buttonLink:x,onButtonAction:b=()=>{},imageUrl:a,imagePosition:l="right",hideImageForMobile:m=!1,sectionHeight:p="12.65625rem",imageWidth:f,imageHeightMobile:$,smallPadding:w=!1,isHorizontalContent:y=!1,backgroundColor:v,hasBorder:H=!1,headerImageUrl:i}=e,s=M.useDetectMobile();return t.jsxs(q,{ref:g,bgcolor:v,height:p,imgW:f,imgHMob:$,hasBorder:H,className:"lp-section lp-bnr-section lp-banner-section-simple banner-section-simple-lnc",children:[i&&t.jsx("img",{src:i,className:"header-image",alt:"Header image"}),l!=="right"&&!(m===!0&&s===!0)&&t.jsx("img",{src:a,className:"banner-image"}),t.jsxs(C,{isHorizontalContent:y,smallPadding:w,hasHeaderImage:k.isDefined(i),children:[t.jsxs(N,{children:[t.jsx("div",{className:"header-title",children:d}),t.jsx("div",{className:"header-subitle",children:c})]}),t.jsx(z,{size:"medium",color:"neutral",type:"button",className:"header-button",onClick:r=>{var h;(h=r==null?void 0:r.target)==null||h.blur(),b(x)},children:u})]}),l==="right"&&!(m===!0&&s===!0)&&t.jsx("img",{src:a,className:"banner-image"})]})});module.exports=W;