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