@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";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
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, headingLevel, onClose, severity, ...restProps }, ref) => {
    const SeverityIcon = severity ? iconSvgBySeverity[severity] : InfoFillIcon;
    return (_jsxs("section", { ...restProps, 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-4", svg: SeverityIcon }) }), _jsxs("div", { className: "ams-alert__content", children: [_jsxs(Row, { align: "between", alignVertical: "start", children: [_jsx(Heading, { level: headingLevel, size: "level-4", children: heading }), closeable && _jsx(IconButton, { label: closeButtonLabel, onClick: onClose, size: "heading-4" })] }), children] })] }));
});
Alert.displayName = 'Alert';