@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 957 B
JavaScript
import{jsx as t}from"react/jsx-runtime";import{useTheme as o,Typography as e}from"@mui/material";import{mergeSx as r}from"merge-sx";import{forwardRef as a}from"react";import{tone3 as i}from"../../BrandCore/gradients.js";import{FontWeight as n}from"../../BrandCore/types.js";const l=t=>"bold"===t?n.BOLD:n.DEFAULT,m=a(({component:a,weight:n="default",variation:m,clamp:p=0,type:s="default",disabled:c,monospaced:d,secondary:u,textColor:f,ai:b,...x},g)=>{const k=o();return t(e,{ref:g,variant:m,fontWeight:l(n),component:a,...x,sx:r(x.sx,!!p&&{display:"-webkit-box",overflow:"hidden",WebkitBoxOrient:"vertical",WebkitLineClamp:p},"button"===s&&{lineHeight:1.2},d&&{fontVariantNumeric:"tabular-nums"},u&&{color:k.custom.palette.text.secondary},c&&{color:k.custom.palette.text.disabled},Boolean(f)&&{color:f},b&&{background:i(k),backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",width:"fit-content"})})});export{m as default};