@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.66 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),s=require("../../BrandCore/Icon/Icon.js"),t=require("../Typography/Typography.js");const a=({status:s})=>{const t=r.useTheme();switch(s){case"neutral":return null;case"success":return e.jsx(o,{backgroundColor:t.custom.palette.green[500],name:"check-circle"});case"warning":return e.jsx(o,{backgroundColor:t.custom.palette.yellow[500],name:"error"});case"danger":return e.jsx(o,{backgroundColor:t.custom.palette.red[500],name:"warning"});case"discover":return e.jsx(o,{backgroundColor:t.custom.palette.purple[500],name:"lightbulb"})}},o=({backgroundColor:t,name:a})=>{const o=r.useTheme();return e.jsx(r.Box,{sx:{display:"flex",alignItems:"flex-start",pt:.25},children:e.jsx(r.Box,{sx:{backgroundColor:t,borderRadius:o.custom.radius.round,color:o.custom.palette.white,display:"flex",p:.5},children:e.jsx(s.default,{name:a,size:20})})})};module.exports=({buttons:s,message:o,status:l="neutral",variation:n="sm"})=>{const c=r.useTheme();return e.jsx(r.Stack,{sx:{backgroundColor:c.custom.palette.surface.overlay,borderRadius:c.spacing(c.custom.radius.lg),boxShadow:c.custom.elevation.overlay,color:c.custom.palette.text.primaryInverted,display:"flex",flex:1,gap:1,p:2},children:e.jsxs(r.Box,{sx:{display:"flex",flex:1,flexDirection:"sm"===n?"row":"column",gap:2},children:[e.jsxs(r.Box,{sx:{display:"flex",flex:1,gap:1},children:["neutral"!==l&&e.jsx(a,{status:l}),e.jsx(r.Box,{sx:{display:"flex"},children:e.jsx(t,{variation:"md",component:"p",sx:{px:1,pt:.5},children:o})})]}),s&&e.jsx(r.Box,{sx:{alignItems:"center",display:"flex",gap:2,justifyContent:"flex-end"},children:s})]})})};