import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { S as SvgClose } from './close-DZj38AEh.js';
import { S as SvgInfo } from './info-CYpG6tcI.js';
import { S as SvgWarning } from './warning-c4Wj1rI4.js';
import { S as SvgError } from './error-DR_wWdYY.js';
import { S as SvgCheckCircle } from './check_circle-CM0ukqXv.js';
import { I as Icon } from './Icon-DuIlne4x.js';
import { B as Button } from './Button-BdrrhBTI.js';
import { T as Text } from './Text-3Tbp9SGi.js';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
import { useTrackingId } from './useTrackingId.js';

import './Alert.css';const alert = "_alert_k0yve_2";
const content = "_content_k0yve_34";
const top = "_top_k0yve_42";
const title = "_title_k0yve_48";
const success = "_success_k0yve_68";
const warning = "_warning_k0yve_74";
const danger = "_danger_k0yve_80";
const styles = {
	alert: alert,
	"close-container": "_close-container_k0yve_27",
	content: content,
	top: top,
	"title-container": "_title-container_k0yve_48",
	title: title,
	"status-icon": "_status-icon_k0yve_64",
	success: success,
	warning: warning,
	danger: danger,
	"close-button": "_close-button_k0yve_88"
};

const statusIconMap = {
  info: SvgInfo,
  success: SvgCheckCircle,
  warning: SvgWarning,
  danger: SvgError
};
const Alert = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      children,
      className,
      title,
      status = "info",
      style,
      onClose,
      aiMark,
      ...rest
    } = componentProps;
    const data = {
      title,
      status
    };
    const trackingId = useTrackingId({
      name: "Alert",
      data,
      hasOverride: !!props["data-tracking-id"]
    });
    const alertCx = cx(styles["alert"], className, {
      [styles["success"]]: status === "success",
      [styles["warning"]]: status === "warning",
      [styles["danger"]]: status === "danger"
    });
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsxs(
      "div",
      {
        "data-tracking-id": trackingId,
        "data-anv": "alert",
        role: "status",
        className: alertCx,
        style: styleCombined,
        ...rest,
        ref,
        children: [
          /* @__PURE__ */ jsxs("div", { className: styles["top"], children: [
            /* @__PURE__ */ jsxs("span", { className: styles["title-container"], children: [
              /* @__PURE__ */ jsx(
                Icon,
                {
                  size: "large",
                  className: styles["status-icon"],
                  svg: statusIconMap[status ?? "info"]
                }
              ),
              /* @__PURE__ */ jsx(
                Text,
                {
                  variant: "headline",
                  el: "h6",
                  size: "small",
                  className: styles["title"],
                  aiMark: aiMark || void 0,
                  children: title
                }
              )
            ] }),
            !!onClose && /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(
              Button,
              {
                icon: SvgClose,
                size: "small",
                appearance: "ghost",
                className: styles["close-button"],
                onClick: (e) => onClose(e),
                "aria-label": `Dismiss ${status} alert`
              }
            ) })
          ] }),
          children && /* @__PURE__ */ jsx("div", { className: styles["content"], children })
        ]
      }
    );
  }
);
Alert.displayName = "Alert";

export { Alert as A };
//# sourceMappingURL=Alert-Bcjw74vx.js.map
