import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { b7 as manifest } from "./use-editor.CurXdZnZ.js";
import "@sinclair/typebox";
import "lodash-es";
import { b as useBrickStyle } from "./use-section-style.D8_SY6rK.js";
import { T as TextContent } from "./TextContent.V3HF5Ue-.js";
import { a as tx } from "./twind.B1qQmF_s.js";
import { B as BrickRoot } from "./BrickRoot.C4Jpjw20.js";
import { u as useBrickProps } from "./use-brick-props.BKk39X7D.js";
function isTextContentEmpty(content) {
  return !content || content.trim().length === 0 || content.trim() === "<p></p>";
}
function Hero(_props) {
  const { brick, editable, selected } = _props;
  const props = useBrickProps(_props);
  const styles = useBrickStyle(brick);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    BrickRoot,
    {
      brick,
      editable,
      manifest,
      className: tx("flex-col gap-[1.5rem] flex-grow", Object.values(styles)),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          TextContent,
          {
            as: "h1",
            propPath: "content",
            brickId: brick.id,
            content: props.content,
            rawContent: brick.props.content,
            className: tx("prose xl:prose-xl"),
            textSizeMode: "hero",
            editable,
            noTextType: true
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          TextContent,
          {
            as: "p",
            propPath: "tagline",
            className: tx(
              "tagline text-2xl font-bold text-balance",
              // When editing, hide tagline if empty but show it on hover
              editable && isTextContentEmpty(props.tagline) && !selected ? "opacity-0 hover:opacity-80" : "opacity-80"
            ),
            brickId: brick.id,
            content: props.tagline,
            rawContent: brick.props.tagline,
            editable
          }
        )
      ]
    }
  );
}
export {
  Hero as default
};
//# sourceMappingURL=hero.CXAS4uGw.js.map
