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

React component library

import { jsxs as c, jsx as t } from "react/jsx-runtime";
import { forwardRef as y, cloneElement as x } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import { n as w } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { useTheme as N } from "./ThemeProvider.js";
import { c as A, a as $, b as o, g as m } from "./utils-DtRLzzTZ.js";
import s from "./Icon.js";
const T = w.div`
  min-height: 3rem;
  ${(e) => A(e.theme, "Alert", e.size, "enabled")};
  line-height: 1.25rem;
  border-radius: ${(e) => $(e.theme, "regular")};
  background-color: ${(e) => o(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  color: ${(e) => o(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) => m(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "fontWeightTitle"
)};
    color: ${(e) => o(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) => m(
  e.theme,
  "Alert",
  e.color,
  "enabled",
  "fontWeightAction"
)};
    color: ${(e) => o(
  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: n }) => typeof e == "boolean" && e == !0 ? /* @__PURE__ */ t(s, { className: "alert-icon", icon: C(n) }) : typeof e == "string" && e !== "" ? /* @__PURE__ */ t(s, { className: "alert-icon", icon: e }) : x(e, {
  className: "alert-icon " + (e == null ? void 0 : e.className)
}), z = y((e, n) => {
  const {
    className: d = "",
    size: g = "small",
    color: l = "primary",
    title: f,
    actions: a,
    noIcon: h = !1,
    statusIcon: i = !0,
    children: p,
    ...b
  } = e, { theme: u } = N();
  return /* @__PURE__ */ c(
    T,
    {
      ref: n,
      ...{ theme: u, size: g, color: l },
      className: "lnc-ui-alert " + d,
      actions: a,
      ...b,
      children: [
        h == !1 && i && /* @__PURE__ */ t(k, { color: l, statusIcon: i }),
        /* @__PURE__ */ c("div", { className: "alert-content", children: [
          /* @__PURE__ */ t("div", { className: "alert-title", children: f }),
          p,
          /* @__PURE__ */ t("div", { className: "alert-actions", children: a })
        ] })
      ]
    }
  );
});
z.propTypes = {
  title: r.oneOfType([r.string, r.element]),
  actions: r.element,
  /**
   * Can be boolean (true - display default icon, false - don't display icon at all), string (display custom icon), element (display custom element as icon)
   */
  statusIcon: r.oneOfType([
    r.string,
    r.element,
    r.bool
  ]),
  /**
   * Disable display of status icon
   */
  noIcon: r.bool,
  className: r.string,
  size: r.oneOf(["small", "medium", "large"]),
  /**
   * When `status` is not defined color of alert can be defined with `color` prop
   */
  color: r.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  z as default
};