import { cx as e } from "../../../theme/tools.js";
import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
import { Button as n } from "../../atoms/button/Button.js";
import { ModalCloseSvg as r } from "../../../icons/ModalCloseSvg.js";
import { actions as i, closeButton as a, header as o, kindRecipe as s, message as c, progressBar as l, progressTrack as u, title as d, toast as f, viewport as p } from "./toast.css.js";
import { INFO_TOAST_DURATION_MS as m } from "./constants.js";
import { useMemo as h } from "react";
import { jsx as g, jsxs as _ } from "react/jsx-runtime";
//#region src/atomic/molecules/toast/ToastViewport.tsx
var v = ({ toasts: v, onDismiss: y, dismissLabel: b, className: x }) => {
	let { t: S } = t(), C = b ?? S("toast.dismissAriaLabel"), w = h(() => v.map((t) => {
		let p = t.kind ?? "info", h = t.actions ?? [], v = null;
		t.message != null && (v = /* @__PURE__ */ g("div", {
			className: c,
			children: t.message
		}));
		let b = null;
		h.length > 0 && (b = /* @__PURE__ */ g("div", {
			className: i,
			children: h.map((e) => /* @__PURE__ */ g(n, {
				type: "button",
				size: "small",
				variant: "secondary",
				onClick: e.onClick,
				children: e.label
			}, e.id))
		}));
		let x = null;
		return p === "info" && (x = /* @__PURE__ */ g("div", {
			className: u,
			"aria-hidden": "true",
			children: /* @__PURE__ */ g("div", {
				className: l,
				style: { animationDuration: `${m}ms` }
			})
		})), /* @__PURE__ */ _("div", {
			className: e(f, s({ kind: p })),
			children: [
				/* @__PURE__ */ _("div", {
					className: o,
					children: [/* @__PURE__ */ g("div", {
						className: d,
						children: t.title
					}), /* @__PURE__ */ g("button", {
						type: "button",
						className: a,
						"aria-label": C,
						onClick: () => {
							y(t.id);
						},
						children: /* @__PURE__ */ g(r, {
							width: 18,
							height: 18,
							"aria-hidden": "true"
						})
					})]
				}),
				v,
				b,
				x
			]
		}, t.id);
	}), [
		y,
		C,
		v
	]);
	return v.length === 0 ? null : /* @__PURE__ */ g("div", {
		className: e(p, x),
		children: w
	});
};
//#endregion
export { v as ToastViewport };

//# sourceMappingURL=ToastViewport.js.map