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

React component library

"use strict";const t=require("react/jsx-runtime"),p=require("react"),w=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),N=require("./Icon.cjs"),i=require("./utils-BK6B_Y9X.cjs"),y=require("./Avatar.cjs"),$=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=w.styled.div`
  ${e=>i.getComponentTypographyCss(e.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;
    ${e=>e.sideButtons&&"margin: -14px"};
    flex-direction: ${e=>e.sideButtons?"column":"row"};
    ${e=>e.sideButtons&&"margin-left: auto"};
    ${e=>e.inlineActions==!1&&e.sideButtons==!1&&"padding-top: 4px"};
    gap: ${e=>e.sideButtons?"0":"1rem"};
    display: flex;

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

    & > button {
      ${e=>e.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: ${e=>i.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","text")};
  }
  & .notification-icon {
    align-items: flex-start;
    & i {
      font-size: 1.25rem;
    }
  }
  & .notification-title {
    font-weight: ${e=>i.getComponentPropValue(e.theme,"Notification",e.color,"enabled","fontWeightTitle")};
    color: ${e=>i.getColorRgbaValue(e.theme,"Notification",e.color,"enabled","title")};
  }
`,v=p.forwardRef((e,c)=>{const{title:l,icon:s,className:r,style:d={},size:m="small",avatar:f=!1,actions:a,inlineActions:o=!1,sideButtons:n=!1,iconProps:u,avatarProps:x,children:g,...b}=e,h={theme:$.useTheme(),className:r,style:d,size:m,inlineActions:o,sideButtons:n};return t.jsxs(j,{ref:c,...h,...b,children:[t.jsxs("div",{className:"notification-main",children:[f?t.jsx(y,{sizeInUnits:"2.75rem",...x}):s&&t.jsx(N,{className:"notification-icon",icon:s,...u}),t.jsxs("div",{className:"notification-content",children:[t.jsx("div",{className:"notification-title",children:l}),g,!o&&!n&&t.jsx("div",{className:"notification-actions",children:a})]})]}),(o||n)&&t.jsx("div",{className:"notification-actions",children:a})]})});module.exports=v;