@lanaco/lnc-react-ui/dist/Alert.js

React component library

import { jsxs as n, jsx as r } from "react/jsx-runtime";
import { forwardRef as u, cloneElement as x } from "react";
import { s as y } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { useTheme as w } from "./ThemeProvider.js";
import { d as A, b as N, c as t, g as c } from "./utils-BUdHa0nB.js";
import m from "./Icon.js";
const $ = y.div`
  min-height: 3rem;
  ${(e) => A(e.theme, "Alert", e.size, "enabled")};
  line-height: 1.25rem;
  border-radius: ${(e) => N(e.theme, "regular")};
  background-color: ${(e) => t(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  color: ${(e) => t(e.theme, "Alert", e.color, "enabled", "text")};
  word-wrap: break-word;
  box-sizing: border-box;
  padding: 0.875rem 1rem;
  display: flex;
  gap: 1rem;
  & .alert-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  & .alert-icon {
    align-items: flex-start;
    & i {
      font-size: 1.25rem;
    }
  }
  & .alert-title {
    font-weight: ${(e) => c(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "fontWeightTitle"
)};
    color: ${(e) => t(e.theme, "Alert", e.color, "enabled", "title")};
  }
  & .alert-actions {
    display: ${(e) => e.actions ? "flex" : "none"};
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
  }

  & .alert-actions > * {
    font-weight: ${(e) => c(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "fontWeightAction"
)};
    color: ${(e) => t(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "action"
)};
    cursor: pointer;
  }
`, C = (e) => e == "danger" ? "times-circle" : e == "warning" ? "exclamation-triangle" : e == "success" ? "check-circle" : "exclamation-circle", k = ({ statusIcon: e, color: l }) => typeof e == "boolean" && e == !0 ? /* @__PURE__ */ r(m, { className: "alert-icon", icon: C(l) }) : typeof e == "string" && e !== "" ? /* @__PURE__ */ r(m, { className: "alert-icon", icon: e }) : x(e, {
  className: "alert-icon " + (e == null ? void 0 : e.className)
}), j = u((e, l) => {
  const {
    className: s = "",
    size: d = "small",
    color: o = "primary",
    title: f,
    actions: a,
    noIcon: g = !1,
    statusIcon: i = !0,
    children: h,
    ...b
  } = e, { theme: p } = w();
  return /* @__PURE__ */ n(
    $,
    {
      ref: l,
      ...{ theme: p, size: d, color: o },
      className: "lnc-ui-alert " + s,
      actions: a,
      ...b,
      children: [
        g == !1 && i && /* @__PURE__ */ r(k, { color: o, statusIcon: i }),
        /* @__PURE__ */ n("div", { className: "alert-content", children: [
          /* @__PURE__ */ r("div", { className: "alert-title", children: f }),
          h,
          /* @__PURE__ */ r("div", { className: "alert-actions", children: a })
        ] })
      ]
    }
  );
});
export {
  j as default
};