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

React component library

import { jsxs as a, jsx as o } from "react/jsx-runtime";
import { forwardRef as N } from "react";
import { P as i } from "./index-S5Cd7WrG.js";
import { n as w } from "./emotion-styled.browser.esm-CjCaF13H.js";
import v from "./Icon.js";
import { c as $, b as s, g as B } from "./utils-DtRLzzTZ.js";
import P from "./Avatar.js";
import { u as z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const T = w.div`
  ${(t) => $(t.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;
    ${(t) => t.sideButtons && "margin: -14px"};
    flex-direction: ${(t) => t.sideButtons ? "column" : "row"};
    ${(t) => t.sideButtons && "margin-left: auto"};
    ${(t) => t.inlineActions == !1 && t.sideButtons == !1 && "padding-top: 4px"};
    gap: ${(t) => t.sideButtons ? "0" : "1rem"};
    display: flex;

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

    & > button {
      ${(t) => t.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: ${(t) => s(
  t.theme,
  "Notification",
  t.color,
  "enabled",
  "text"
)};
  }
  & .notification-icon {
    align-items: flex-start;
    & i {
      font-size: 1.25rem;
    }
  }
  & .notification-title {
    font-weight: ${(t) => B(
  t.theme,
  "Notification",
  t.color,
  "enabled",
  "fontWeightTitle"
)};
    color: ${(t) => s(
  t.theme,
  "Notification",
  t.color,
  "enabled",
  "title"
)};
  }
`, j = N((t, c) => {
  const {
    title: m,
    icon: l,
    className: f,
    style: d = {},
    size: p = "small",
    avatar: g = !1,
    actions: r,
    inlineActions: e = !1,
    sideButtons: n = !1,
    iconProps: b,
    avatarProps: h,
    children: u,
    ...x
  } = t, y = {
    theme: z(),
    className: f,
    style: d,
    size: p,
    inlineActions: e,
    sideButtons: n
  };
  return /* @__PURE__ */ a(T, { ref: c, ...y, ...x, children: [
    /* @__PURE__ */ a("div", { className: "notification-main", children: [
      g ? /* @__PURE__ */ o(P, { sizeInUnits: "2.75rem", ...h }) : l && /* @__PURE__ */ o(v, { className: "notification-icon", icon: l, ...b }),
      /* @__PURE__ */ a("div", { className: "notification-content", children: [
        /* @__PURE__ */ o("div", { className: "notification-title", children: m }),
        u,
        !e && !n && /* @__PURE__ */ o("div", { className: "notification-actions", children: r })
      ] })
    ] }),
    (e || n) && /* @__PURE__ */ o("div", { className: "notification-actions", children: r })
  ] });
});
j.propTypes = {
  avatar: i.bool,
  title: i.string,
  /**
   * If `avatar={true}` icon won't be displayed
   */
  icon: i.string,
  actions: i.element,
  inlineActions: i.bool,
  sideButtons: i.bool,
  //-----------------------
  className: i.string,
  style: i.object,
  iconProps: i.any,
  avatarProps: i.any
};
export {
  j as default
};