import { defineComponent as w, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as S, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as f, unref as t, createElementVNode as m, renderSlot as y, createCommentVNode as o } from "vue";
import { capitalize as p } from "es-toolkit";
import { uniqueId as B } from "es-toolkit/compat";
import { S as M, a as N } from "./statusLevels-D8EgtE_L.js";
import V from "./directives/sticky.js";
import b from "./Icon.js";
import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const z = { class: "m-0" }, A = /* @__PURE__ */ w({
  name: "ll-alert",
  __name: "Alert",
  props: {
    centered: { type: Boolean, default: !1 },
    permanent: { type: Boolean, default: !1 },
    radius: { default: "standard" },
    severity: { default: "info" },
    sticky: { default: null },
    variant: { default: "outlined" }
  },
  setup(g) {
    const e = g, _ = B("close-icon"), h = $(), a = C(), c = I(!0), u = s(() => M[p(e.severity)]), k = s(() => N[p(e.severity)]), x = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "text-white" : `text-${k.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "text-white" : "text-ice-900");
    return (d, v) => c.value ? S((i(), l("div", {
      key: 0,
      class: r(["stash-alert relative flex items-center border border-solid p-3 leading-6", [
        `stash-alert--${e.severity}`,
        `stash-alert--${e.variant}`,
        n.value,
        {
          "my-6": e.variant === "outlined",
          // Todo - this makes ZERO sense. We should remove this altogether and let the consumer handle the margin.
          rounded: e.radius === "standard",
          "border-red-500": e.severity === "error",
          "border-orange-500": e.severity === "warning",
          "border-blue-500": e.severity === "info",
          "border-green-500": e.severity === "success",
          "bg-red-500": e.severity === "error" && e.variant === "filled",
          "bg-orange-500": e.severity === "warning" && e.variant === "filled",
          "bg-blue-500": e.severity === "info" && e.variant === "filled",
          "bg-green-500": e.severity === "success" && e.variant === "filled",
          "bg-red-100": e.severity === "error" && e.variant === "outlined",
          "bg-orange-100": e.severity === "warning" && e.variant === "outlined",
          "bg-blue-100": e.severity === "info" && e.variant === "outlined",
          "bg-green-100": e.severity === "success" && e.variant === "outlined"
        }
      ]]),
      "data-test": "stash-alert"
    }, [
      f(b, {
        class: r(["stash-alert__icon", [t(a).iconInfo, x.value, `stash-alert__icon--${u.value}`]]),
        name: u.value,
        title: `${e.severity} icon`,
        "data-test": "stash-alert|status-icon"
      }, null, 8, ["class", "name", "title"]),
      m("div", {
        class: r(["flex flex-1 flex-wrap px-2", {
          "justify-center": e.centered,
          "justify-between": !e.centered
        }])
      }, [
        m("p", z, [
          y(d.$slots, "default")
        ]),
        t(h).link ? (i(), l("div", {
          key: 0,
          class: r(["stash-alert__link cursor-pointer underline hover:no-underline", [t(a).link, n.value, { "ml-2": e.centered }]]),
          "data-test": "stash-alert|link"
        }, [
          y(d.$slots, "link")
        ], 2)) : o("", !0)
      ], 2),
      e.permanent ? o("", !0) : (i(), l("button", {
        key: 0,
        class: r(["stash-alert__close", [t(a).button, n.value]]),
        type: "button",
        "data-test": "stash-alert|close",
        onClick: v[0] || (v[0] = (q) => c.value = !1)
      }, [
        f(b, {
          id: t(_),
          name: "close",
          title: "Dismiss alert"
        }, null, 8, ["id"])
      ], 2))
    ], 2)), [
      [t(V), e.sticky]
    ]) : o("", !0);
  }
}), D = {}, E = {
  $style: D
}, O = /* @__PURE__ */ j(A, [["__cssModules", E]]);
export {
  O as default
};
//# sourceMappingURL=Alert.js.map
