import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { S as SvgClose } from './close-DZj38AEh.js';
import { B as Button } from './Button-BNzCI47m.js';
import { T as Text } from './Text-mDcQHC2U.js';
import { c as cx } from './index-De1g9FRV.js';
import { S as StatusIcon } from './StatusIcon-BwULopyH.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
import { useTrackingId } from './useTrackingId.js';

import './Alert.css';const alert = "_alert_dia2j_1";
const top = "_top_dia2j_26";
const title = "_title_dia2j_40";
const content = "_content_dia2j_66";
const success = "_success_dia2j_74";
const warning = "_warning_dia2j_80";
const danger = "_danger_dia2j_86";
const styles = {
	alert: alert,
	top: top,
	"status-icon": "_status-icon_dia2j_33",
	"title-container": "_title-container_dia2j_40",
	title: title,
	"close-container": "_close-container_dia2j_58",
	content: content,
	success: success,
	warning: warning,
	danger: danger
};

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(
                StatusIcon,
                {
                  className: styles["status-icon"],
                  size: "small",
                  variant: status === "danger" ? "error" : status
                }
              ),
              /* @__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-CPe0yh6A.js.map
