import { n as AnalyticsId } from "./constants2.js";
import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
import { t as Spacer_default } from "./Spacer.js";
import classNames from "classnames";
import React from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import duolistStyles from "./components/Duolist/styles.module.scss";
const DuolistGroup = (props) => {
	const { format = "formatted", boldColumn = format === "non-formatted" ? "none" : "first", description, separator = ": ", term } = props;
	const firstBold = boldColumn === "first";
	const secondBold = boldColumn === "second";
	const nonFormatted = format === "non-formatted";
	const dtClassNames = classNames(duolistStyles["duolist__dt"], {
		[duolistStyles["duolist__dt--bold"]]: firstBold,
		[duolistStyles["duolist__dt--non-formatted"]]: nonFormatted
	});
	const ddClassNames = classNames(duolistStyles["duolist__dd"], {
		[duolistStyles["duolist__dd--bold"]]: secondBold,
		[duolistStyles["duolist__dd--non-formatted"]]: nonFormatted
	});
	const renderContent = () => {
		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
			"data-separator": nonFormatted ? separator : void 0,
			className: dtClassNames,
			"data-testid": props.testId && `${props.testId}-term`,
			children: term
		}), /* @__PURE__ */ jsx("dd", {
			className: ddClassNames,
			"data-testid": props.testId && `${props.testId}-description`,
			children: description
		})] });
	};
	return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
};
const Duolist = (props) => {
	const { boldColumn, border = "no-border", descriptionWidth, label, format = "formatted", separator, variant = "normal", children, className, testId, useCollapsedFromAndBelowBreakpoint } = props;
	const hasBorder = border === "border";
	const hasLines = variant === "line";
	const extraPaddingTop = hasBorder && (label || hasLines);
	const nonFormatted = format === "non-formatted";
	const breakpoint = useBreakpoint();
	const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];
	const duolistWrapperClasses = classNames({
		[duolistStyles["duolist-wrapper--border"]]: hasBorder,
		[duolistStyles["duolist-wrapper--extra-padding-top"]]: extraPaddingTop
	}, className);
	const duolistClasses = classNames(duolistStyles.duolist, {
		[duolistStyles["duolist--line"]]: hasLines,
		[duolistStyles["duolist--non-formatted"]]: nonFormatted,
		[duolistStyles["duolist--collapsed"]]: useCollapsedMode,
		[duolistStyles["duolist--not-collapsed"]]: !useCollapsedMode
	});
	const duolistColumnStyle = descriptionWidth ? descriptionWidth + "%" : "minmax(60%, 1fr)";
	return /* @__PURE__ */ jsxs("div", {
		className: duolistWrapperClasses,
		"data-testid": testId,
		"data-analyticsid": AnalyticsId.Duolist,
		children: [label && /* @__PURE__ */ jsxs(Fragment, { children: [label, /* @__PURE__ */ jsx(Spacer_default, {})] }), /* @__PURE__ */ jsx("dl", {
			style: !nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : void 0,
			className: duolistClasses,
			children: React.Children.map(children, (child) => {
				if (child === null || typeof child === "undefined") return;
				const duolistGroup = child;
				if (duolistGroup.type === DuolistGroup) return React.cloneElement(child, {
					...duolistGroup.props,
					boldColumn: duolistGroup.props.boldColumn ?? boldColumn,
					format: duolistGroup.props.format ?? format,
					separator: duolistGroup.props.separator ?? separator
				});
			})
		})]
	});
};
var Duolist_default$1 = Duolist;
export { Duolist as n, DuolistGroup as r, Duolist_default$1 as t };

//# sourceMappingURL=Duolist.js.map