@mantine/core/esm/components/Alert/Alert.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 { 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 { CloseButton } from "../CloseButton/CloseButton.mjs";
import Alert_module_default from "./Alert.module.mjs";
import { useId } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Alert/Alert.tsx
const varsResolver = createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
	const colors = theme.variantColorResolver({
		color: color || theme.primaryColor,
		theme,
		variant: variant || "light",
		autoContrast
	});
	return { root: {
		"--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
		"--alert-bg": color || variant ? colors.background : void 0,
		"--alert-color": colors.color,
		"--alert-bd": color || variant ? colors.border : void 0
	} };
});
const Alert = factory((_props) => {
	const props = useProps("Alert", null, _props);
	const { classNames, className, style, styles, unstyled, vars, radius, color, title, children, id, icon, withCloseButton, onClose, closeButtonLabel, variant, autoContrast, role, attributes, ...others } = props;
	const getStyles = useStyles({
		name: "Alert",
		classes: Alert_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const rootId = useId(id);
	const titleId = title && `${rootId}-title` || void 0;
	const bodyId = `${rootId}-body`;
	return /* @__PURE__ */ jsx(Box, {
		id: rootId,
		...getStyles("root", { variant }),
		variant,
		...others,
		role: role || "alert",
		"aria-describedby": children ? bodyId : void 0,
		"aria-labelledby": title ? titleId : void 0,
		children: /* @__PURE__ */ jsxs("div", {
			...getStyles("wrapper"),
			children: [
				icon && /* @__PURE__ */ jsx("div", {
					...getStyles("icon"),
					children: icon
				}),
				/* @__PURE__ */ jsxs("div", {
					...getStyles("body"),
					children: [title && /* @__PURE__ */ jsx("div", {
						...getStyles("title"),
						"data-with-close-button": withCloseButton || void 0,
						children: /* @__PURE__ */ jsx("span", {
							id: titleId,
							...getStyles("label"),
							children: title
						})
					}), children && /* @__PURE__ */ jsx("div", {
						id: bodyId,
						...getStyles("message"),
						"data-variant": variant,
						children
					})]
				}),
				withCloseButton && /* @__PURE__ */ jsx(CloseButton, {
					...getStyles("closeButton"),
					onClick: onClose,
					variant: "transparent",
					size: 16,
					iconSize: 16,
					"aria-label": closeButtonLabel,
					unstyled
				})
			]
		})
	});
});
Alert.classes = Alert_module_default;
Alert.varsResolver = varsResolver;
Alert.displayName = "@mantine/core/Alert";
//#endregion
export { Alert };

//# sourceMappingURL=Alert.mjs.map