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

React component library

"use strict";const t=require("react/jsx-runtime"),c=require("react"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),p=require("./ThemeProvider.cjs"),r=require("./utils-BK6B_Y9X.cjs"),a=require("./Icon.cjs"),y=x.styled.div`
  min-height: 3rem;
  ${e=>r.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
  line-height: 1.25rem;
  border-radius: ${e=>r.getBorderRadiusValueWithUnits(e.theme,"regular")};
  background-color: ${e=>r.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","background","backgroundOpacity")};
  color: ${e=>r.getColorRgbaValue(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=>r.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightTitle")};
    color: ${e=>r.getColorRgbaValue(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=>r.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightAction")};
    color: ${e=>r.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","action")};
    cursor: pointer;
  }
`,w=e=>e=="danger"?"times-circle":e=="warning"?"exclamation-triangle":e=="success"?"check-circle":"exclamation-circle",C=({statusIcon:e,color:l})=>typeof e=="boolean"&&e==!0?t.jsx(a,{className:"alert-icon",icon:w(l)}):typeof e=="string"&&e!==""?t.jsx(a,{className:"alert-icon",icon:e}):c.cloneElement(e,{className:"alert-icon "+(e==null?void 0:e.className)}),A=c.forwardRef((e,l)=>{const{className:s="",size:m="small",color:o="primary",title:d,actions:n,noIcon:g=!1,statusIcon:i=!0,children:h,...u}=e,{theme:f}=p.useTheme(),b={theme:f,size:m,color:o};return t.jsxs(y,{ref:l,...b,className:"lnc-ui-alert "+s,actions:n,...u,children:[g==!1&&i&&t.jsx(C,{color:o,statusIcon:i}),t.jsxs("div",{className:"alert-content",children:[t.jsx("div",{className:"alert-title",children:d}),h,t.jsx("div",{className:"alert-actions",children:n})]})]})});module.exports=A;