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

React component library

import { jsxs as r, jsx as t } from "react/jsx-runtime";
import { forwardRef as d } from "react";
import f from "./Icon.js";
import g from "./Button.js";
import { s as _ } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as h } from "./breakpoints-BubDitvo.js";
const p = _.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 ${h("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;
      }
    }
  }
`, k = d(
  ({
    title: e,
    description: n,
    imageUrl: c,
    items: i,
    buttonText: o,
    buttonLink: a,
    onButtonAction: l = () => {
    }
  }, x) => /* @__PURE__ */ r(p, { imageUrl: c, className: "lp-section lp-partner-banner-section", children: [
    /* @__PURE__ */ r("div", { className: "section__text", children: [
      e && /* @__PURE__ */ t("div", { className: "section__title", children: e }),
      n && /* @__PURE__ */ t("div", { className: "section__description", children: n })
    ] }),
    i && (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ t("div", { className: "section__items", children: i == null ? void 0 : i.map((s, m) => /* @__PURE__ */ r(
      "div",
      {
        className: "section__item",
        children: [
          /* @__PURE__ */ t(
            f,
            {
              icon: " mng-lnc-checkmark--outline",
              sizeInUnits: "1rem",
              color: "success",
              className: "item__icon"
            }
          ),
          /* @__PURE__ */ t("div", { className: "item__text", children: s })
        ]
      },
      `partner-banner-section-item__${m + 1}`
    )) }),
    o && a && /* @__PURE__ */ t(
      g,
      {
        text: o,
        onClick: () => l(a),
        borderRadius: "curved",
        color: "gray",
        className: "section__action"
      }
    )
  ] })
);
export {
  k as default
};