@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 721 B
JavaScript
import{jsx as r,jsxs as o,Fragment as t}from"react/jsx-runtime";import{styled as e,Box as i}from"@mui/material";import p from"../Tooltip/Tooltip.js";import a from"../Typography/Typography.js";const m=e(i)(({theme:r})=>({backgroundColor:r.custom.palette.neutral[50],border:`1px solid ${r.custom.palette.stroke.light}`,borderRadius:r.r.md,padding:`${r.p.xs} ${r.p.sm}`,maxWidth:"192px"})),s=({keyString:e,valueString:i})=>r(p,{message:o(t,{children:[r("strong",{children:e}),r("br",{}),i]}),slotProps:{wrapper:{sx:{maxWidth:192,cursor:"default"}}},children:o(m,{children:[r(a,{component:"p",variation:"xxs",secondary:!0,clamp:1,children:e}),r(a,{component:"p",variation:"sm",clamp:1,children:i})]})});export{s as default};