@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 899 B
JavaScript
import{jsx as r}from"react/jsx-runtime";import{useTheme as o,Tooltip as e,Box as t}from"@mui/material";import{mergeSx as s}from"merge-sx";import{useMemo as a}from"react";const i=({variation:i="primary",message:p,sx:l,slotProps:m,children:n,...c})=>{const u=o(),{wrapper:d,...x}=m??{},f=a(()=>{const r=x.popper;return{...x,arrow:{...x.arrow??{},sx:s({...c.followCursor&&{width:"15px",height:"13px",padding:"2px"}},x.arrow?.sx)},popper:{...r,sx:s({"& .MuiTooltip-tooltip":{backgroundColor:u.custom.palette.surface.overlay,borderRadius:u.spacing(u.custom.radius.md),filter:`drop-shadow(${u.custom.elevation.raised})`}},r?.sx)}}},[m,u,c.followCursor]),w=a(()=>s({cursor:"pointer",display:"flex",alignItems:"center",color:u.custom.palette.text.primary},d?.sx),[m,u]);return r(e,{enterDelay:650,enterNextDelay:650,arrow:!0,title:p,slotProps:f,...c,children:r(t,{sx:w,children:n})})};export{i as default};