'use client';
import { jsxs as u, jsx as r } from "react/jsx-runtime";
import { useTheme as z } from "../../../theme/context.js";
import { getColorVariant as d } from "../../../theme/styled.js";
import { css as o } from "@emotion/react";
import l from "@emotion/styled";
import k from "react";
const S = (e) => {
  const { theme: t, variant: s = "flat", color: i = "primary" } = e, n = d(t, i, 500), a = d(t, i, 50), h = d(t, i, 200);
  switch (s) {
    case "solid":
      return o`
        background-color: ${n};
        color: ${t.colors.text.inverse};
        border: 1px solid ${n};
      `;
    case "bordered":
      return o`
        background-color: ${t.colors.background.primary};
        color: ${n};
        border: 1px solid ${n};
      `;
    case "light":
      return o`
        background-color: ${a};
        color: ${d(t, i, 700)};
        border: 1px solid transparent;
      `;
    case "flat":
      return o`
        background-color: ${d(t, i, 100)};
        color: ${n};
        border: 1px solid ${h};
      `;
    default:
      return o``;
  }
}, I = (e) => {
  const { theme: t, radius: s = "md" } = e;
  switch (s) {
    case "none":
      return o`border-radius: ${t.borderRadius.none};`;
    case "sm":
      return o`border-radius: ${t.borderRadius.sm};`;
    case "md":
      return o`border-radius: ${t.borderRadius.md};`;
    case "lg":
      return o`border-radius: ${t.borderRadius.lg};`;
    case "xl":
      return o`border-radius: ${t.borderRadius.xl};`;
    default:
      return o`border-radius: ${t.borderRadius.md};`;
  }
}, R = l.div`
  display: ${(e) => e.isVisible === !1 ? "none" : "flex"};
  align-items: flex-start;
  gap: ${(e) => e.theme.spacing[3]};
  padding: ${(e) => e.theme.spacing[4]};
  position: relative;
  transition: all ${(e) => e.theme.transitions.normal};

  ${S}
  ${I}

  /* Custom CSS prop */
  ${(e) => e.css}
`, B = l.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
`, A = l.div`
  display: flex;
  flex-direction: column;
  gap: ${(e) => e.theme.spacing[1]};
  flex: 1;
  min-width: 0;
`, W = l.div`
  font-weight: ${(e) => e.theme.fontWeights.semibold};
  font-size: ${(e) => e.theme.fontSizes.base};
  line-height: ${(e) => e.theme.lineHeights.tight};
`, j = l.div`
  font-size: ${(e) => e.theme.fontSizes.sm};
  line-height: ${(e) => e.theme.lineHeights.normal};
  opacity: 0.9;
`, L = l.button`
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
  opacity: 0.7;
  transition: opacity ${(e) => e.theme.transitions.fast};
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;

  &:hover {
    opacity: 1;
  }

  &:focus {
    outline: none;
  }
`, M = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })
), V = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) })
), D = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) })
), H = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ r("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }) })
), T = () => (
  // biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
  /* @__PURE__ */ u(
    "svg",
    {
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      width: "18",
      height: "18",
      children: [
        /* @__PURE__ */ r("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
        /* @__PURE__ */ r("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
      ]
    }
  )
), E = (e) => {
  switch (e) {
    case "success":
      return /* @__PURE__ */ r(M, {});
    case "warning":
      return /* @__PURE__ */ r(D, {});
    case "danger":
      return /* @__PURE__ */ r(H, {});
    // case "primary":
    // case "secondary":
    default:
      return /* @__PURE__ */ r(V, {});
  }
}, N = k.forwardRef(
  ({
    children: e,
    variant: t = "flat",
    color: s = "primary",
    radius: i = "md",
    title: n,
    description: a,
    icon: h,
    hideIcon: m = !1,
    isClosable: p = !1,
    onClose: g,
    isVisible: f = !0,
    className: x,
    css: b,
    ...$
  }, v) => {
    const { theme: c } = z(), C = {
      ...$,
      variant: t,
      color: s,
      radius: i,
      isVisible: f,
      className: x,
      css: b
    }, y = () => {
      g?.();
    }, w = h || E(s);
    return /* @__PURE__ */ u(R, { theme: c, ref: v, ...C, children: [
      !m && /* @__PURE__ */ r(B, { children: w }),
      (n || a || e) && /* @__PURE__ */ u(A, { theme: c, children: [
        n && /* @__PURE__ */ r(W, { theme: c, children: n }),
        a && /* @__PURE__ */ r(j, { theme: c, children: a }),
        e
      ] }),
      p && /* @__PURE__ */ r(
        L,
        {
          theme: c,
          onClick: y,
          "aria-label": "Close alert",
          children: /* @__PURE__ */ r(T, {})
        }
      )
    ] });
  }
);
N.displayName = "Alert";
export {
  N as Alert
};
//# sourceMappingURL=alert.js.map
