/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/DescriptionList/DescriptionList.tsx
var styles = {
	descriptionList: "divide-y divide-border-1",
	item: "px-2 py-2 grid grid-cols-2 md:grid-cols-4",
	term: "text-sm font-medium leading-6 break-words md:col-span-1",
	definition: "mt-1 text-sm leading-6 break-words md:col-span-3"
};
var Root = ({ children }) => /* @__PURE__ */ jsx("dl", {
	className: styles.descriptionList,
	children
});
var Item = ({ children }) => /* @__PURE__ */ jsx("div", {
	className: styles.item,
	children
});
var Term = ({ children }) => /* @__PURE__ */ jsx("dt", {
	className: styles.term,
	children
});
var Definition = ({ children, testId }) => /* @__PURE__ */ jsx("dd", {
	className: styles.definition,
	"data-testid": testId,
	children
});
/**
* Shortcut combining Item, Term, and Definition. Use this when you have
* a simple term/value pair. For complex layouts, compose Item/Term/Definition
* directly.
*
* @example
* <DescriptionList>
*   <DescriptionList.Description term="Name">Ada Lovelace</DescriptionList.Description>
*   <DescriptionList.Description term="Email">ada@example.com</DescriptionList.Description>
* </DescriptionList>
*/
var Description = ({ term, children, testId }) => /* @__PURE__ */ jsxs("div", {
	className: styles.item,
	children: [/* @__PURE__ */ jsx("dt", {
		className: styles.term,
		children: term
	}), /* @__PURE__ */ jsx("dd", {
		className: styles.definition,
		"data-testid": testId,
		children
	})]
});
var DescriptionList = Object.assign(Root, {
	Item,
	Term,
	Definition,
	Description
});
//#endregion
export { DescriptionList };

//# sourceMappingURL=DescriptionList.js.map