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

React component library

"use strict";const o=require("react/jsx-runtime"),P=require("react"),t=require("./index-BPVoEhTF.cjs"),w=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),N=require("./Icon.cjs"),i=require("./utils-NZLCh-J5.cjs"),T=require("./Avatar.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),v=w.newStyled.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")};
  }
`,c=P.forwardRef((e,l)=>{const{title:d,icon:a,className:m,style:p={},size:f="small",avatar:u=!1,actions:r,inlineActions:n=!1,sideButtons:s=!1,iconProps:g,avatarProps:x,children:y,...b}=e,h={theme:j.useTheme(),className:m,style:p,size:f,inlineActions:n,sideButtons:s};return o.jsxs(v,{ref:l,...h,...b,children:[o.jsxs("div",{className:"notification-main",children:[u?o.jsx(T,{sizeInUnits:"2.75rem",...x}):a&&o.jsx(N,{className:"notification-icon",icon:a,...g}),o.jsxs("div",{className:"notification-content",children:[o.jsx("div",{className:"notification-title",children:d}),y,!n&&!s&&o.jsx("div",{className:"notification-actions",children:r})]})]}),(n||s)&&o.jsx("div",{className:"notification-actions",children:r})]})});c.propTypes={avatar:t.PropTypes.bool,title:t.PropTypes.string,icon:t.PropTypes.string,actions:t.PropTypes.element,inlineActions:t.PropTypes.bool,sideButtons:t.PropTypes.bool,className:t.PropTypes.string,style:t.PropTypes.object,iconProps:t.PropTypes.any,avatarProps:t.PropTypes.any};module.exports=c;