@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.45 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{InfoOutlined as s,ErrorOutline as i,Check as r}from"@mui/icons-material";import{useTheme as a,Box as l}from"@mui/material";import{iconSizeMap as n}from"../../BrandCore/Icon/Icon.js";import o from"../InputLabelBase/InputLabelBase.js";import{typographyVariantMap as m}from"../utils/typography.util.js";const d=d=>{const{icon:c=null,state:u="default",disabled:p,showicon:f=!0,paddingLeft:g}=d,x=a();return e(l,{sx:{display:"inline-flex",alignItems:"center",paddingLeft:g,color:p?x.custom.palette.text.disabled:(()=>{switch(u){case"disabled":return x.custom.palette.text.disabled;case"positive":return x.custom.palette.text.positive;case"negative":return x.custom.palette.text.negative;default:return x.custom.palette.text.secondary}})(),"& svg":{marginRight:x.spacing(x.custom.margin.xs),width:n.xs,height:n.xs,color:"inherit"}},children:[(()=>{if(!f)return null;if(c)return c;switch(u){case"disabled":default:return t(l,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:t(s,{})});case"positive":return t(l,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:t(r,{})});case"negative":return t(l,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:t(i,{})})}})(),t(o,{...d,sx:{fontSize:{xs:m.sm.body.sm,sm:m.sm.body.sm,md:m.sm.body.sm,lg:m.lg.body.sm,xl:m.lg.body.sm}}})]})};export{d as default};