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

React component library

"use strict";const e=require("react/jsx-runtime"),g=require("react"),h=require("./Button.cjs"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),a=require("./utils-BK6B_Y9X.cjs"),_=require("./breakpoints-CcVm-gVm.cjs"),u=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),p=x.styled.div`
  display: flex;
  align-items: center;

  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008);

  background: ${t=>t==null?void 0:t.backgroundColor};

  /* drop-shadow */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);

  & .section__left {
    width: 100%;

    & .section__image {
      height: 100%;

      & img {
        height: 100%;
        max-height: 11.25rem;
        border-top-left-radius: 0.75rem;
        border-bottom-left-radius: 0.75rem;
      }
    }
  }

  & .section__right {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2rem;
    padding: 2rem;

    & .section__text {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & .section__title {
        ${a.truncateTextInRows(3)}
        color: #000;
        font-weight: 600;
        font-size: 1.75rem;
        leading-trim: none;
        line-height: 2.25rem;
        letter-spacing: 0%;
        max-height: 7rem;
      }

      & .section__description {
        ${a.truncateTextInRows(2)}
        color: var(--gray-600, #676e79);
        font-weight: 500;
        font-size: 0.875rem;
        leading-trim: none;
        line-height: 1.25rem;
        letter-spacing: 0;
        max-height: 2.5rem;
      }
    }

    & .section__action {
      font-weight: 500;
      font-size: 0.875rem;
      leading-trim: none;
      line-height: 1.25rem;
      letter-spacing: -0.0056rem;
      white-space: nowrap;

      background: var(--gray-950, #14161a);
      color: var(--white, #fff);

      &:hover {
        background: var(--gray-700, #4e555f);
      }

      &:focus {
        outline: none;
      }
    }
  }

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

    & .section__left {
      & .section__image {
        & img {
          width: 100%;
          height: 100%;
          max-height: 100%;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }

    & .section__right {
      flex-direction: column;
    }
  }
`,f=g.forwardRef(({title:t,description:r,imageUrl:n,backgroundColor:c="white",buttonText:o,buttonLink:s,onButtonAction:l=()=>{}},d)=>{const m=u.useTheme();return e.jsxs(p,{className:"lp-section lp-bnr-section lp-banner-next-section banner-next-section-lnc",ref:d,theme:m,backgroundColor:c,children:[e.jsx("div",{className:"section__left",children:n&&e.jsx("div",{className:"section__image",children:e.jsx("img",{src:n,alt:"Banner next image",loading:"lazy"})})}),e.jsxs("div",{className:"section__right",children:[e.jsxs("div",{className:"section__text",children:[t&&e.jsx("div",{className:"section__title",children:t}),r&&e.jsx("div",{className:"section__description",children:r})]}),o&&s&&e.jsx(h,{text:o,borderRadius:"curved",className:"section__action",size:"medium",onClick:i=>{i==null||i.stopPropagation(),l(s)}})]})]})});module.exports=f;