@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.5 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/icons-material"),s=require("@mui/material"),a=require("../../BrandCore/Icon/Icon.js"),i=require("../InputLabelBase/InputLabelBase.js"),r=require("../utils/typography.util.js");module.exports=l=>{const{icon:n=null,state:o="default",disabled:u,showicon:c=!0}=l,x=s.useTheme();return e.jsxs(s.Box,{sx:{display:"inline-flex",alignItems:"center",color:u?x.custom.palette.text.disabled:(()=>{switch(o){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:a.iconSizeMap.xs,height:a.iconSizeMap.xs,color:"inherit"}},children:[(()=>{if(!c)return null;if(n)return n;switch(o){case"disabled":default:return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.Info,{})});case"positive":return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.Check,{})});case"negative":return e.jsx(s.Box,{sx:{height:20,display:"flex",alignItems:"center",alignSelf:"flex-start"},children:e.jsx(t.ErrorOutline,{})})}})(),e.jsx(i,{...l,sx:{fontSize:{xs:r.typographyVariantMap.sm.body.sm,sm:r.typographyVariantMap.sm.body.sm,md:r.typographyVariantMap.sm.body.sm,lg:r.typographyVariantMap.lg.body.sm,xl:r.typographyVariantMap.lg.body.sm}}})]})};