@useloops/design-system
Version:
The official React based Loops design system
9 lines (8 loc) • 1.12 kB
JavaScript
;var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("../../WebCore/Typography/Typography.js"),i=require("../../../utils/breakpoint.hook.js");require("react");const a=r.keyframes`
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
`,s=r.styled(r.Box,{shouldForwardProp:e=>"animate"!==e})(({animate:e})=>({display:"inline-flex",flexDirection:"column",alignItems:"center",...e&&{animation:`${a} 1s ease-in-out infinite`}})),n=r.styled(r.Box)(({theme:e})=>({backgroundColor:e.custom.palette.icon.primary,padding:`${e.p.sm} ${e.p.md}`,borderRadius:e.r.md})),o=r.styled("svg")(({theme:e})=>({display:"block",fill:e.custom.palette.icon.primary,marginTop:-2}));module.exports=({message:a,animate:m})=>{const l=r.useTheme(),d=i.useBreakpoint(),p=["sm","md"].includes(d)?"sm":"md";return e.jsxs(s,{animate:m,children:[e.jsx(n,{children:e.jsx(t,{component:"p",variation:p,textColor:l.custom.palette.text.primaryInverted,children:a})}),e.jsx(o,{width:"20",height:"10",viewBox:"0 0 20 10",children:e.jsx("path",{d:"M10 10L20 0H0L10 10Z"})})]})};