import { jsxs as c, jsx as r } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { b as x } from "./use-section-style.D7ZN4IXn.js";
import { T as s } from "./TextContent.DIF92zqL.js";
import { _ as n } from "./twind.D7be0E5m.js";
import { u as d } from "./use-color-preset.B03-6uH7.js";
function u(t) {
  return !t || t.trim().length === 0 || t.trim() === "<p></p>";
}
const v = f(({ brick: t, editable: o, selected: a }, p) => {
  const e = t.props, i = x(t), l = Object.values(i), m = d(t);
  return /* @__PURE__ */ c(
    "div",
    {
      className: n("flex-grow flex flex-col gap-[1.5rem] min-h-fit", ...l, m.main),
      ref: p,
      children: [
        /* @__PURE__ */ r(
          s,
          {
            as: "h1",
            propPath: "content",
            brickId: t.id,
            content: e.content,
            textSizeMode: "hero",
            editable: o,
            noTextType: !0
          }
        ),
        /* @__PURE__ */ r(
          s,
          {
            as: "p",
            propPath: "tagline",
            className: n(
              "tagline text-2xl font-bold text-balance",
              u(e.tagline) && !a ? "opacity-0 hover:opacity-80" : "opacity-80"
            ),
            brickId: t.id,
            content: e.tagline,
            editable: o
          }
        )
      ]
    }
  );
});
export {
  v as default
};
//# sourceMappingURL=hero.7ioeAVKD.js.map
