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

React component library

import { jsxs as n, jsx as t } from "react/jsx-runtime";
import { forwardRef as N } from "react";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import $ from "./Icon.js";
import { d as y, c as a, g as v } from "./utils-BUdHa0nB.js";
import B from "./Avatar.js";
import { u as z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const C = w.div`
  ${(i) => y(i.theme, "Notification", "small", "enabled")};

  word-wrap: break-word;
  box-sizing: border-box;
  display: flex;
  gap: 1rem;
  justify-content: space-between;

  & .notification-actions {
    align-items: center;
    ${(i) => i.sideButtons && "margin: -14px"};
    flex-direction: ${(i) => i.sideButtons ? "column" : "row"};
    ${(i) => i.sideButtons && "margin-left: auto"};
    ${(i) => i.inlineActions == !1 && i.sideButtons == !1 && "padding-top: 4px"};
    gap: ${(i) => i.sideButtons ? "0" : "1rem"};
    display: flex;

    color: ${(i) => a(
  i.theme,
  "Notification",
  i.color,
  "enabled",
  "action"
)};

    & > button {
      ${(i) => i.sideButtons && "flex: 1; width: 100%;"}
    }
  }
  & .notification-main {
    word-wrap: break-word;
    box-sizing: border-box;
    display: flex;
    gap: 1rem;
  }
  & .notification-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: ${(i) => a(
  i.theme,
  "Notification",
  i.color,
  "enabled",
  "text"
)};
  }
  & .notification-icon {
    align-items: flex-start;
    & i {
      font-size: 1.25rem;
    }
  }
  & .notification-title {
    font-weight: ${(i) => v(
  i.theme,
  "Notification",
  i.color,
  "enabled",
  "fontWeightTitle"
)};
    color: ${(i) => a(
  i.theme,
  "Notification",
  i.color,
  "enabled",
  "title"
)};
  }
`, V = N((i, c) => {
  const {
    title: r,
    icon: s,
    className: m,
    style: d = {},
    size: f = "small",
    avatar: g = !1,
    actions: l,
    inlineActions: e = !1,
    sideButtons: o = !1,
    iconProps: p,
    avatarProps: h,
    children: u,
    ...x
  } = i, b = {
    theme: z(),
    className: m,
    style: d,
    size: f,
    inlineActions: e,
    sideButtons: o
  };
  return /* @__PURE__ */ n(C, { ref: c, ...b, ...x, children: [
    /* @__PURE__ */ n("div", { className: "notification-main", children: [
      g ? /* @__PURE__ */ t(B, { sizeInUnits: "2.75rem", ...h }) : s && /* @__PURE__ */ t($, { className: "notification-icon", icon: s, ...p }),
      /* @__PURE__ */ n("div", { className: "notification-content", children: [
        /* @__PURE__ */ t("div", { className: "notification-title", children: r }),
        u,
        !e && !o && /* @__PURE__ */ t("div", { className: "notification-actions", children: l })
      ] })
    ] }),
    (e || o) && /* @__PURE__ */ t("div", { className: "notification-actions", children: l })
  ] });
});
export {
  V as default
};