@mantine/core/esm/components/Notification/Notification.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getRadius } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { getThemeColor } from "../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { Loader } from "../Loader/Loader.mjs";
import { CloseButton } from "../CloseButton/CloseButton.mjs";
import Notification_module_default from "./Notification.module.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Notification/Notification.tsx
const defaultProps = { withCloseButton: true };
const varsResolver = createVarsResolver((theme, { radius, color }) => ({ root: {
	"--notification-radius": radius === void 0 ? void 0 : getRadius(radius),
	"--notification-color": color ? getThemeColor(color, theme) : void 0
} }));
const Notification = factory((_props) => {
	const props = useProps("Notification", defaultProps, _props);
	const { className, color, radius, loading, withCloseButton, withBorder, title, icon, children, onClose, closeButtonProps, classNames, style, styles, unstyled, vars, mod, loaderProps, role, attributes, ...others } = props;
	const getStyles = useStyles({
		name: "Notification",
		classes: Notification_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	return /* @__PURE__ */ jsxs(Box, {
		...getStyles("root"),
		mod: [{
			"data-with-icon": !!icon || loading,
			"data-with-border": withBorder
		}, mod],
		role: role || "alert",
		...others,
		children: [
			icon && !loading && /* @__PURE__ */ jsx("div", {
				...getStyles("icon"),
				children: icon
			}),
			loading && /* @__PURE__ */ jsx(Loader, {
				size: 28,
				color,
				...getStyles("loader"),
				...loaderProps
			}),
			/* @__PURE__ */ jsxs("div", {
				...getStyles("body"),
				children: [title && /* @__PURE__ */ jsx("div", {
					...getStyles("title"),
					children: title
				}), /* @__PURE__ */ jsx(Box, {
					...getStyles("description"),
					mod: { "data-with-title": !!title },
					children
				})]
			}),
			withCloseButton && /* @__PURE__ */ jsx(CloseButton, {
				iconSize: 16,
				color: "gray",
				...closeButtonProps,
				unstyled,
				onClick: (event) => {
					closeButtonProps?.onClick?.(event);
					onClose?.();
				},
				...getStyles("closeButton")
			})
		]
	});
});
Notification.classes = Notification_module_default;
Notification.varsResolver = varsResolver;
Notification.displayName = "@mantine/core/Notification";
//#endregion
export { Notification };

//# sourceMappingURL=Notification.mjs.map