import { jsx as r, jsxs as A } from "react/jsx-runtime";
import { useState as N, useCallback as v } from "react";
import { AlertWrapper as I, AlertTitle as T, AlertDescription as _ } from "./AlertPrimitives.js";
import b from "../icon/components/icon-extend/IconExtend.js";
import y from "../icon/Icon.js";
import { c as i } from "../../index-BtlgVD4m.js";
import "./types/AlertVariant.js";
const w = {
  default: "Terminal",
  destructive: "CircleAlert",
  success: "CircleCheck",
  secondary: "Terminal",
  info: "Info",
  warning: "TriangleAlert"
}, n = 16, x = ({
  title: e,
  icon: o,
  description: s,
  variant: a = "default",
  closable: c = !0,
  isShowIcon: l = !0,
  // Whether to show the icon
  ref: m,
  onClose: t,
  ...f
}) => {
  const [u, p] = N(!0), d = v(() => {
    p(!1), t == null || t();
  }, [t]);
  if (!u || !e && !s)
    return null;
  const h = o || w[a], g = e ? "col-span-2 col-start-2" : "row-start-1 col-start-2";
  return /* @__PURE__ */ r(I, { ref: m, variant: a, ...f, children: /* @__PURE__ */ A("div", { className: "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-x-[var(--spacing-4)] gap-y-[var(--spacing-1)]", children: [
    l && /* @__PURE__ */ r("div", { className: e ? "self-center" : "self-start", children: /* @__PURE__ */ r(b, { icon: h, size: n }) }),
    e && /* @__PURE__ */ r(T, { className: "self-center font-[var(--font-weight-medium)]", children: e }),
    c && /* @__PURE__ */ r(
      "button",
      {
        onClick: d,
        className: i("hover:opacity-70 hover:cursor-pointer transition-opacity", e ? "self-center" : "self-start"),
        "aria-label": "Close alert",
        type: "button",
        children: /* @__PURE__ */ r(y, { name: "X", size: n })
      }
    ),
    s && /* @__PURE__ */ r(_, { className: i("self-center font-[var(--font-weight-normal)]", g), children: s })
  ] }) });
};
x.displayName = "Alert";
export {
  x as default
};
//# sourceMappingURL=Alert.js.map
