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

React component library

import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { forwardRef as M } from "react";
import { s as o } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as a } from "./breakpoints-BubDitvo.js";
import k from "./Button.js";
import { u as C } from "./useDetectMobile-B0Jog4jQ.js";
import { m as N } from "./utils-BUdHa0nB.js";
const W = o.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 ${a("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;
    }
  }
`, B = o.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 ${a("S")} {
    padding: 0;
    flex-direction: column;

    ${(e) => e != null && e.hasHeaderImage ? "padding: 3.5rem 3.5rem 0 3.5rem;" : ""}
  }
`, S = o.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 ${a("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;
    }
  }
`, L = M((e, d) => {
  const {
    title: c,
    subtitle: u,
    buttonText: b,
    buttonLink: f,
    onButtonAction: p = () => {
    },
    imageUrl: m,
    imagePosition: l = "right",
    hideImageForMobile: h = !1,
    sectionHeight: x = "12.65625rem",
    imageWidth: $,
    imageHeightMobile: w,
    smallPadding: v = !1,
    isHorizontalContent: y = !1,
    backgroundColor: H,
    hasBorder: z = !1,
    headerImageUrl: i
  } = e, g = C();
  return /* @__PURE__ */ n(
    W,
    {
      ref: d,
      bgcolor: H,
      height: x,
      imgW: $,
      imgHMob: w,
      hasBorder: z,
      className: "lp-section lp-bnr-section lp-banner-section-simple banner-section-simple-lnc",
      children: [
        i && /* @__PURE__ */ t("img", { src: i, className: "header-image", alt: "Header image" }),
        l !== "right" && !(h === !0 && g === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" }),
        /* @__PURE__ */ n(
          B,
          {
            isHorizontalContent: y,
            smallPadding: v,
            hasHeaderImage: N(i),
            children: [
              /* @__PURE__ */ n(S, { children: [
                /* @__PURE__ */ t("div", { className: "header-title", children: c }),
                /* @__PURE__ */ t("div", { className: "header-subitle", children: u })
              ] }),
              /* @__PURE__ */ t(
                k,
                {
                  size: "medium",
                  color: "neutral",
                  type: "button",
                  className: "header-button",
                  onClick: (r) => {
                    var s;
                    (s = r == null ? void 0 : r.target) == null || s.blur(), p(f);
                  },
                  children: b
                }
              )
            ]
          }
        ),
        l === "right" && !(h === !0 && g === !0) && /* @__PURE__ */ t("img", { src: m, className: "banner-image" })
      ]
    }
  );
});
export {
  L as default
};