@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 930 B
JavaScript
import{jsxs as t,jsx as i}from"react/jsx-runtime";import{styled as o,Box as n,Fade as e}from"@mui/material";import r from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as a}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import s from"../IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";const c=o(s)(({theme:t})=>({alignItems:"center",display:"flex",height:40,justifyContent:"center",position:"relative",width:40,...a(t)})),m=o(n)(({theme:t})=>({background:t.custom.palette.red[500],borderRadius:t.custom.radius.round,height:t.spacing(1),position:"absolute",right:t.spacing(.5),top:t.spacing(.5),width:t.spacing(1)})),p=({notification:o,onClick:a})=>t(n,{sx:{position:"relative"},children:[i(c,{icon:i(r,{name:"notification"}),variation:"raised",onClick:a}),o&&i(e,{in:!0,style:{transitionDelay:"200ms"},children:i(n,{children:i(m,{})})})]});export{p as default};