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-Bnt8XUI7.js';
import { T as Text } from './Text-J5YtSSXY.js';
import { c as cx } from './index-De1g9FRV.js';
import { S as StatusIcon } from './StatusIcon-BwULopyH.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { useTrackingId } from './useTrackingId.js';

import './Alert.css';const alert = "_alert_17r5n_1";
const top = "_top_17r5n_27";
const title = "_title_17r5n_41";
const content = "_content_17r5n_67";
const success = "_success_17r5n_75";
const warning = "_warning_17r5n_81";
const danger = "_danger_17r5n_87";
const styles = {
	alert: alert,
	top: top,
	"status-icon": "_status-icon_17r5n_34",
	"title-container": "_title-container_17r5n_41",
	title: title,
	"close-container": "_close-container_17r5n_59",
	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-DmbqtMg_.js.map
