;
{
  try {
    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "d20c8234-5dd9-4b0c-a53f-66b069375bb0", e._sentryDebugIdIdentifier = "sentry-dbid-d20c8234-5dd9-4b0c-a53f-66b069375bb0");
  } catch (e) {
  }
}
;
import { jsxs, jsx } from "preact/jsx-runtime";
import cx from "classnames";
import { isValidElement } from "preact";
import { useState } from "preact/hooks";
import { A as Accordion } from "./Accordion-DKS8kkDP.js";
import { u as useTranslation, z as Typography, V as Button, r as Icon } from "./StoreProvider-CqQrndhS.js";
const alert = "adyen-kyc-alert";
const alertWithoutIcon = "adyen-kyc-alert-without-icon";
const alertExplanation = "adyen-kyc-alert-explanation";
const alertActions = "adyen-kyc-alert-actions";
const alertBasic = "adyen-kyc-alert-basic";
const alertInfo = "adyen-kyc-alert-info";
const alertError = "adyen-kyc-alert-error";
const alertWarning = "adyen-kyc-alert-warning";
const alertSuccess = "adyen-kyc-alert-success";
const alertHeader = "adyen-kyc-alert-header";
const alertHeaderWithoutChildren = "adyen-kyc-alert-header-without-children";
const alertIcon = "adyen-kyc-alert-icon";
const alertIconInfo = "adyen-kyc-alert-icon-info";
const alertIconError = "adyen-kyc-alert-icon-error";
const alertIconWarning = "adyen-kyc-alert-icon-warning";
const alertIconSuccess = "adyen-kyc-alert-icon-success";
const alertTitle = "adyen-kyc-alert-title";
const styles = {
  alert,
  alertWithoutIcon,
  alertExplanation,
  alertActions,
  alertBasic,
  alertInfo,
  alertError,
  alertWarning,
  alertSuccess,
  alertHeader,
  alertHeaderWithoutChildren,
  alertIcon,
  alertIconInfo,
  alertIconError,
  alertIconWarning,
  alertIconSuccess,
  alertTitle
};
const variantMap = {
  basic: styles.alertBasic,
  info: styles.alertInfo,
  error: styles.alertError,
  warning: styles.alertWarning,
  success: styles.alertSuccess
};
const iconVariantMap = {
  basic: "",
  // does not exist
  info: styles.alertIconInfo,
  error: styles.alertIconError,
  warning: styles.alertIconWarning,
  success: styles.alertIconSuccess
};
const Alert = ({
  title,
  variant = "basic",
  type = "default",
  className,
  actions,
  children,
  icon,
  testId,
  onClose,
  onToggle
}) => {
  const { t } = useTranslation("ui");
  const [isClosed, setIsClosed] = useState(false);
  if (isClosed) return null;
  const closeAlert = () => {
    if (onClose) onClose();
    setIsClosed(true);
  };
  const renderIcon = () => {
    if (icon === false) return void 0;
    if (isValidElement(icon)) {
      return icon;
    }
    return /* @__PURE__ */ jsx("span", { className: cx(styles.alertIcon, iconVariantMap[variant]), children: /* @__PURE__ */ jsx(AlertIcon, { variant }) });
  };
  const renderedIcon = renderIcon();
  if (type === "collapsible") {
    return /* @__PURE__ */ jsxs(Accordion, { variant, onToggle: onToggle || void 0, narrow: true, className, children: [
      /* @__PURE__ */ jsx("template", { slot: "title", children: title }),
      /* @__PURE__ */ jsx("template", { slot: "icon", children: renderedIcon }),
      /* @__PURE__ */ jsxs("template", { slot: "content", children: [
        children,
        !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
      ] })
    ] });
  }
  if (type === "callToAction") {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cx(styles.alert, className, variantMap[variant], {
          [styles.alertWithoutIcon]: !renderedIcon
        }),
        role: "alert",
        "data-testid": testId,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(styles.alertHeader, {
                [styles.alertHeaderWithoutChildren]: !children
              }),
              children: [
                renderedIcon,
                title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: styles.alertTitle, children: title }),
                !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
              ]
            }
          ),
          !!children && /* @__PURE__ */ jsx("div", { className: styles.alertExplanation, children })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx(styles.alert, className, variantMap[variant], {
        [styles.alertWithoutIcon]: !renderedIcon
      }),
      role: "alert",
      "data-testid": testId,
      children: [
        /* @__PURE__ */ jsxs("div", { className: styles.alertHeader, children: [
          renderedIcon,
          title && /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "body-strongest", className: styles.alertTitle, children: title }),
          type === "dismissible" && /* @__PURE__ */ jsx(Button, { variant: "tertiary", icon: "cross", onClick: closeAlert, children: t(($) => $["close"]) })
        ] }),
        !!children && /* @__PURE__ */ jsx("div", { className: styles.alertExplanation, children }),
        !!actions && /* @__PURE__ */ jsx("div", { className: styles.alertActions, children: actions })
      ]
    }
  );
};
const AlertIcon = ({ variant }) => {
  switch (variant) {
    case "success":
      return /* @__PURE__ */ jsx(Icon, { name: "checkmark" });
    case "error":
      return /* @__PURE__ */ jsx(Icon, { name: "error" });
    case "warning":
      return /* @__PURE__ */ jsx(Icon, { name: "warning" });
    case "info":
    case "basic":
    default:
      return /* @__PURE__ */ jsx(Icon, { name: "info-circle-filled" });
  }
};
export {
  AlertIcon as A,
  Alert as a
};
