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

React component library

"use strict";const i=require("react/jsx-runtime"),m=require("react"),d=require("./Icon.cjs"),g=require("./Button.cjs"),_=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),f=require("./breakpoints-CcVm-gVm.cjs"),h=_.styled.div`
  display: flex;
  height: 100%;
  max-height: 19rem;
  padding: 2rem;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  background: ${e=>e!=null&&e.imageUrl?`url("${e==null?void 0:e.imageUrl}")`:"white"};
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1.25rem;
  gap: 2rem;

  & .section__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    max-width: 50rem;

    & .section__title {
      color: var(--white, #fff);
      font-weight: 600;
      font-size: 2rem;
      leading-trim: none;
      line-height: 2.5rem;
      letter-spacing: 0%;
    }

    & .section__description {
      color: var(--white, #fff);
      font-weight: 400;
      font-size: 0.875rem;
      leading-trim: none;
      line-height: 1.25rem;
      letter-spacing: 0.0156rem;
    }
  }

  & .section__items {
    display: grid;
    grid-template-columns: ${()=>"repeat(2, minmax(0, auto))"};
    row-gap: 0.75rem;
    column-gap: 3rem;

    & .section__item {
      display: flex;
      gap: 0.5rem;

      & .item__text {
        color: var(--white, #fff);
        font-weight: 400;
        font-size: 0.75rem;
        leading-trim: none;
        line-height: 1rem;
        letter-spacing: 0.025rem;
      }
    }
  }

  & .section__action {
    background: var(--white, #fff);
    color: var(--gray-950, #14161a);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;

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

    &:focus {
      outline: none;
    }
  }

  @media ${f.down("S")} {
    max-height: 100%;
    padding: 1.5rem;

    & .section__text {
      max-width: 100%;

      & .section__title {
        font-size: 1.375rem;
        line-height: 1.75rem;
      }
    }

    & .section__items {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;

      & .section__item {
        display: flex;
        gap: 0.5rem;
      }
    }
  }
`,x=m.forwardRef(({title:e,description:r,imageUrl:s,items:t,buttonText:n,buttonLink:o,onButtonAction:a=()=>{}},u)=>i.jsxs(h,{imageUrl:s,className:"lp-section lp-partner-banner-section",children:[i.jsxs("div",{className:"section__text",children:[e&&i.jsx("div",{className:"section__title",children:e}),r&&i.jsx("div",{className:"section__description",children:r})]}),t&&(t==null?void 0:t.length)>0&&i.jsx("div",{className:"section__items",children:t==null?void 0:t.map((c,l)=>i.jsxs("div",{className:"section__item",children:[i.jsx(d,{icon:" mng-lnc-checkmark--outline",sizeInUnits:"1rem",color:"success",className:"item__icon"}),i.jsx("div",{className:"item__text",children:c})]},`partner-banner-section-item__${l+1}`))}),n&&o&&i.jsx(g,{text:n,onClick:()=>a(o),borderRadius:"curved",color:"gray",className:"section__action"})]}));module.exports=x;