@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.18 kB
JavaScript
import"react/jsx-runtime";import"@mui/material";import{iconSizeMap as t}from"../../BrandCore/Icon/Icon.js";import{padding as o}from"../../BrandCore/primitiveVariables.js";import{fontSizemap as i}from"../utils/typography.util.js";const e="0px 4px 8px 0px #06040D14, 0px 16px 24px 0px #06040D14, 0px 0px 4px 2px #06040D0A, 0px 0px 0px 1px #FFFFFF29",n=t=>{switch(t){case"xs":return 24;case"md":return 32;default:return 40}},s=t=>{switch(t){case"xs":return 24;case"md":return 32;default:return 40}},r=t=>{switch(t){case"xs":case"md":return 16;default:return 24}},a=(t,o)=>({"& .MuiTypography-root":{overflow:"hidden",textOverflow:"ellipsis",fontSize:i[o],paddingLeft:t.spacing("xs"===o?t.custom.padding.xs:t.custom.padding.sm),paddingRight:t.spacing("xs"===o?t.custom.padding.xs:t.custom.padding.sm)}}),c=(t,e)=>({fontSize:i[e],borderRadius:t.spacing(t.custom.radius.md),position:"relative",padding:t.spacing(t.custom.padding.sm),"& .MuiSelect-outlined":{padding:0},"& .MuiSelect-select.MuiInputBase-input":{paddingRight:t.spacing(o.md)},"&:before":{transition:t.custom.easing.input,content:'""',position:"absolute",background:t.custom.palette.interaction.none,borderRadius:t.spacing(t.custom.radius.md),inset:0,zIndex:0},"&:hover:before":{backgroundColor:t.custom.palette.interaction.hover},"&.Mui-focused:before":{backgroundColor:t.custom.palette.interaction.press},"&.Mui-disabled:before":{backgroundColor:t.custom.palette.interaction.none},"& .MuiSelect-select":{position:"relative"}}),p=(o,i)=>{switch(i){case"lg":return{height:n(i),"& .MuiSvgIcon-root":{color:o.custom.palette.icon.primary,transition:o.custom.easing.input,width:t.lg,height:t.lg,top:`calc(50% - ${t.lg/2}px)`}};case"md":return{height:n(i),"& .MuiSvgIcon-root":{color:o.custom.palette.icon.primary,transition:o.custom.easing.input,width:t.md,height:t.md,top:`calc(50% - ${t.md/2}px)`}};case"xs":return{height:n(i),"& .MuiSvgIcon-root":{color:o.custom.palette.icon.primary,transition:o.custom.easing.input,width:t.xs,height:t.xs,top:`calc(50% - ${t.xs/2}px)`}};default:return{height:n("lg"),"& .MuiSvgIcon-root":{color:o.custom.palette.icon.primary,transition:o.custom.easing.input,width:t.lg,height:t.lg,top:`calc(50% - ${t.lg/2}px)`}}}},u=(t,o)=>({position:"relative",fontSize:i[o],backgroundColor:t.custom.palette.interaction.none,color:t.custom.palette.text.primary,minHeight:s(o),justifyContent:"space-between",paddingLeft:t.spacing("xs"===o?t.custom.padding.sm:t.custom.padding.md),paddingRight:t.spacing("xs"===o?t.custom.padding.sm:t.custom.padding.md),gap:t.spacing(t.custom.padding.sm),whiteSpace:"wrap","&:before":{transition:t.custom.easing.input,content:'""',position:"absolute",inset:0,zIndex:1},"& .MuiSvgIcon-root":{width:r(o),height:r(o)}}),d=t=>({width:0,"&.MuiModal-root.MuiPopover-root":{"&.MuiMenu-root":{borderRadius:t.spacing(t.custom.radius.sm),"& .MuiPaper-root":{border:`1px solid ${t.custom.palette.stroke.default}`,backgroundColor:t.custom.palette.surface.raised,boxShadow:e}}}});export{p as getInputSize,a as getTypographyStyle,d as menuStyles,e as popperBoxShadow,c as selectBaseStyles,n as selectInputHeight,u as selectItemBaseStyles,s as selectMenuItemSize,r as selectTickSize};