@amsterdam/design-system-react/dist/Alert/Alert.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ErrorFillIcon, InfoFillIcon, SuccessFillIcon, WarningFillIcon } from '@amsterdam/design-system-react-icons';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { Heading } from '../Heading';
import { Icon } from '../Icon';
import { IconButton } from '../IconButton';
import { Row } from '../Row';
const iconSvgBySeverity = {
    error: ErrorFillIcon,
    success: SuccessFillIcon,
    warning: WarningFillIcon,
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
 */
export const Alert = forwardRef(({ children, className, closeable, closeButtonLabel = 'Sluiten', heading, headingId = 'ams-alert-heading', headingLevel, onClose, severity, ...restProps }, ref) => {
    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoFillIcon;
    return (_jsxs("section", { ...restProps, "aria-labelledby": headingId || undefined, className: clsx('ams-alert', severity && `ams-alert--${severity}`, className), ref: ref, children: [_jsx("div", { className: "ams-alert__severity-indicator", children: _jsx(Icon, { color: "inverse", size: "heading-3", svg: SeverityIcon }) }), _jsxs("div", { className: "ams-alert__content", children: [_jsxs(Row, { align: "between", alignVertical: "start", children: [_jsx(Heading, { id: headingId || undefined, level: headingLevel, size: "level-3", children: heading }), closeable && _jsx(IconButton, { label: closeButtonLabel, onClick: onClose, size: "heading-3" })] }), children] })] }));
});
Alert.displayName = 'Alert';