import { jsx as a, jsxs as n } from "react/jsx-runtime";
import i from "../box/Box.js";
import s from "../text/Text.js";
const m = ({ children: e, title: l, description: c, id: p }) => {
  const r = typeof c == "string" ? /* @__PURE__ */ a(s, { type: "body", children: c }) : c;
  return /* @__PURE__ */ a("div", { className: "min-w-0 flex-[1_1_100%] max-w-[calc(100%-var(--spacing-4))] mt-[var(--spacing-4)] ml-[var(--spacing-4)]", children: /* @__PURE__ */ n("div", { className: "flex flex-wrap mt-[calc(-1*var(--spacing-4))] ml-[calc(-1*var(--spacing-4))]", children: [
    /* @__PURE__ */ a("div", { className: "flex-[1_1_240px] min-w-0 max-w-[calc(100%-var(--spacing-4))] mt-[var(--spacing-4)] ml-[var(--spacing-4)] pt-[var(--spacing-4)] pr-[var(--spacing-4)] md:pb-[var(--spacing-4)]", children: /* @__PURE__ */ n(i, { children: [
      /* @__PURE__ */ a(s, { id: p, type: "h4", children: l }),
      r && /* @__PURE__ */ a(i, { className: "text-[var(--base-secondary-foreground)]", children: r })
    ] }) }),
    /* @__PURE__ */ a("div", { className: "flex-[2_2_480px] min-w-0 max-w-[calc(100%-var(--spacing-4))] mt-[var(--spacing-4)] ml-[var(--spacing-4)]", children: e })
  ] }) });
};
m.displayName = "AnnotatedSection";
export {
  m as default
};
//# sourceMappingURL=AnnotatedSection.js.map
