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

React component library

import { jsxs as t, jsx as i } from "react/jsx-runtime";
import { forwardRef as y } from "react";
import { n as r } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as o } from "./consts-C1uHV4xc.js";
import H from "./Button.js";
import { u as M } from "./useDetectMobile-BC6EGaBc.js";
const B = r.div`
  display: flex;
  border-radius: 0.75rem;
  background-color: ${(e) => e.bgcolor || "transparent"};
  overflow: hidden;
  max-height: ${(e) => e.height || "22.5rem"};
  min-height: ${(e) => e.height || "22.5rem"};
  background-color: ${(e) => e.bgcolor || "transparent"};

  & button {
    width: fit-content;
  }

  ${(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);

`}

  & img {
    object-fit: cover;
    max-width: ${(e) => e.imgW || "22.5rem"};
    min-width: ${(e) => e.imgW || "22.5rem"};
    max-height: ${(e) => e.height || "22.5rem"};
    min-height: ${(e) => e.height || "22.5rem"};
  }

  ${(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 (max-width: ${o + "px"}) {
    gap: 1.5rem;
    flex-direction: column;
    min-height: unset;
    max-height: unset;

    & button {
      width: fit-content;
    }

    & img {
      max-width: 100%;
      min-width: 100%;
      max-height: ${(e) => e.imgHMob || "12.1rem"};
      min-height: ${(e) => e.imgHMob || "12.1rem"};
    }
  }
`, C = r.div`
  padding: ${(e) => e.smallPadding === !0 ? "2rem" : "4rem 5rem"};
  display: flex;
  gap: 2rem;
  flex-direction: ${(e) => e.isHorizontalContent === !0 ? "row" : "column"};
  flex: 1;

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

  @media (max-width: ${o + "px"}) {
    padding: 0;
    flex-direction: column;
  }
`, z = r.div`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

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

  & .header-subtitle {
    color: var(--gray-950, #14161a);
    font-size: 1rem;
    font-weight: 500;
  }

  @media (max-width: ${o + "px"}) {
    flex-direction: column;
  }
`, E = y((e, l) => {
  const {
    title: h,
    subtitle: g,
    buttonText: s,
    buttonLink: c,
    onButtonAction: x = () => {
    },
    imageUrl: n,
    imagePosition: a = "right",
    hideImageForMobile: m = !1,
    sectionHeight: p = "12.65625rem",
    imageWidth: u,
    imageHeightMobile: b,
    smallPadding: f = !1,
    isHorizontalContent: w = !1,
    backgroundColor: $,
    hasBorder: v = !1
  } = e, d = M();
  return /* @__PURE__ */ t(
    B,
    {
      ref: l,
      bgcolor: $,
      height: p,
      imgW: u,
      imgHMob: b,
      hasBorder: v,
      children: [
        a !== "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: n }),
        /* @__PURE__ */ t(
          C,
          {
            isHorizontalContent: w,
            smallPadding: f,
            children: [
              /* @__PURE__ */ t(z, { children: [
                /* @__PURE__ */ i("div", { className: "header-title", children: h }),
                /* @__PURE__ */ i("div", { className: "header-subitle", children: g })
              ] }),
              /* @__PURE__ */ i(
                H,
                {
                  size: "medium",
                  color: "neutral",
                  type: "button",
                  onClick: () => x(c),
                  children: s
                }
              )
            ]
          }
        ),
        a === "right" && !(m === !0 && d === !0) && /* @__PURE__ */ i("img", { src: n })
      ]
    }
  );
});
export {
  E as default
};