import { isArray } from "../utils/assertion.js";
import { cs } from "../utils/styles.js";
import "../utils/index.js";
import { useStyleConfig } from "../core/theme.js";
import { styled } from "../core/styled.js";
import { vui } from "../core/vui.js";
import box_default from "../box/box.js";
import "../box/index.js";
import icon_default from "../icon/icon.js";
import "../icon/index.js";
import "../core/index.js";
import p_default from "../p/p.js";
import "../p/index.js";
import { createElement } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/definition/definitionContent.tsx
const DefinitionItemKey = styled.dtBox``;
const DefinitionItemValue = styled.ddBox``;
const DefinitionContent = vui((props, ref) => {
	const { iconLeft, iconRight, isLabelBold, isValueBold, items, orientation } = props;
	const styles = useStyleConfig("Definition", props);
	return /* @__PURE__ */ jsx(Fragment$1, { children: isArray(items) ? items.map(({ key, value, ...props$1 }, index) => /* @__PURE__ */ jsxs(box_default, {
		className: "vui-definitionItemWrapper",
		ref,
		children: [/* @__PURE__ */ jsxs(DefinitionItemKey, {
			fontWeight: isLabelBold ? "demi" : "default",
			...styles.dt,
			children: [
				props$1.keyHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconLeft,
					...styles.icon
				}),
				key,
				props$1.keyHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconRight,
					...styles.icon
				})
			]
		}), isArray(value) ? /* @__PURE__ */ createElement(DefinitionItemValue, {
			display: "block",
			fontWeight: isValueBold ? "demi" : "default",
			...styles.dd,
			key: index
		}, orientation === "horizontal" ? value.join(", ") : value.map((value$1, index$1) => /* @__PURE__ */ jsxs(p_default, {
			display: "flex",
			children: [
				props$1.valueHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconLeft,
					...styles.icon
				}),
				value$1,
				props$1.valueHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconRight,
					...styles.icon
				})
			]
		}, index$1 + value$1))) : /* @__PURE__ */ jsxs(DefinitionItemValue, {
			fontWeight: isValueBold ? "demi" : "default",
			...styles.dd,
			children: [
				props$1.valueHasIcon && iconLeft && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconLeft,
					...styles.icon
				}),
				value,
				props$1.valueHasIcon && iconRight && /* @__PURE__ */ jsx(icon_default, {
					className: cs("vui-definitionIcon"),
					name: iconRight,
					...styles.icon
				})
			]
		})]
	}, index)) : items });
});
DefinitionContent.displayName = "DefinitionContent";

//#endregion
export { DefinitionContent };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=definitionContent.js.map