import { cx as e } from "../../../theme/tools.js";
import { BackofficeDetailField as t } from "../backoffice_detail_field/BackofficeDetailField.js";
import { description as n, grid as r, header as i, section as a, title as o } from "./backofficeDetailSection.css.js";
import { useId as s } from "react";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region src/backoffice/molecules/backoffice_detail_section/BackofficeDetailSection.tsx
var u = ({ children: u, className: d, description: f, items: p, title: m }) => {
	let h = s(), g = null;
	f != null && f !== "" && (g = /* @__PURE__ */ c("p", {
		className: n,
		children: f
	}));
	let _ = null;
	return p != null && p.length > 0 && (_ = /* @__PURE__ */ c("div", {
		className: r,
		children: p.map((e) => /* @__PURE__ */ c(t, { ...e }, e.id))
	})), /* @__PURE__ */ l("section", {
		className: e(a, d),
		"aria-labelledby": h,
		children: [
			/* @__PURE__ */ l("header", {
				className: i,
				children: [/* @__PURE__ */ c("h3", {
					className: o,
					id: h,
					children: m
				}), g]
			}),
			_,
			u
		]
	});
};
//#endregion
export { u as BackofficeDetailSection, u as default };

//# sourceMappingURL=BackofficeDetailSection.js.map