import { isReactText, isString } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import Box from "../box/box.js";
import { NotificationProvider } from "./context.js";
import { bannerNotificationElevation, closeButtonVariantMapping, notificationStatusMapping } from "./consts.js";
import NotificationButton from "./notificationButton.js";
import NotificationIcon from "./notificationIcon.js";
import NotificationText from "./notificationText.js";
import NotificationTitle from "./notificationTitle.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/notification/notification.tsx
/**
* Displays informational content, like text and icon with optional action buttons.
* Handles multiple states, like info, error or loading.
*/
const Notification = vui((props, ref) => {
	const { action, children, className, icon, onClose, size, status, statusMapping, text, title, variant: variantProp = "subtleBlue", verticalAlign, ...rest } = props;
	const statuses = {
		...notificationStatusMapping,
		...statusMapping
	};
	const { variant = variantProp } = statuses[status ?? ""] ?? {};
	const styles = useStyleConfig("Notification", {
		variant,
		...props
	});
	const iconName = isString(icon) ? icon : statuses[status ?? ""]?.iconProps?.name;
	const context = filterUndefined({
		size,
		status
	});
	const titleDisplay = action ? "block" : "inline";
	const alignSelf = verticalAlign === "center" ? "center" : "flex-start";
	return /* @__PURE__ */ jsx(NotificationProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(Box, {
			borderRadius: "md",
			borderWidth: 1,
			className: cs("vui-notification", className),
			elevation: variant.includes("banner") ? bannerNotificationElevation : void 0,
			ref,
			role: "mark",
			w: "fit-content",
			...styles.container,
			...rest,
			children: [
				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
					alignSelf,
					name: iconName
				}) : icon,
				children ?? /* @__PURE__ */ jsxs(NotificationText, {
					alignSelf,
					children: [
						isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, {
							display: titleDisplay,
							text: title
						}) : title,
						" ",
						text
					]
				}),
				action,
				onClose && /* @__PURE__ */ jsx(NotificationButton, {
					alignSelf,
					"aria-label": "close",
					icon: "uiTimes",
					onClick: onClose,
					variant: closeButtonVariantMapping?.[variant] ?? variant,
					w: "32px"
				})
			]
		})
	});
});
Notification.Button = NotificationButton;
Notification.Icon = NotificationIcon;
Notification.Text = NotificationText;
Notification.Title = NotificationTitle;
Notification.displayName = "Notification";

//#endregion
export { Notification as default };
globalThis.__vuiVersion__ = "4.0.1"
//# sourceMappingURL=notification.js.map