@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.87 kB
JavaScript
import{styled as o,Popper as t,autocompleteClasses as e}from"@mui/material";import{selectMenuItemSize as r,popperBoxShadow as i}from"../../Select/StyledSelect.variant-helpers.js";import{fontSizemap as a}from"../../utils/typography.util.js";import"../../../BrandCore/colorRamps.js";import{base as s,margin as n}from"../../../BrandCore/primitiveVariables.js";import"../../../BrandCore/semanticColor.js";import"../../../BrandCore/types.js";import"../../../BrandCore/typography.js";import"react/jsx-runtime";import"../../../BrandCore/Icon/Icon.js";const p=(o,t)=>({"& .MuiPaper-root":{margin:0,marginTop:o.spacing(n.xs),border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:i,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${e.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${e.option}`]:{fontSize:a[t],...t&&{minHeight:"lg"===t?5*s+"px":4*s+"px"},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),gap:o.spacing(o.custom.padding.sm),display:"flex",alignItems:"center",'&[aria-selected="true"]':{backgroundColor:o.custom.palette.interaction.press,"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.press},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}},"&.Mui-focused":{backgroundColor:o.custom.palette.interaction.hover},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}}),d=o(t)(({theme:o,sizing:t})=>({...t&&{...p(o,t)},[`& .${e.listbox} .${e.groupLabel}`]:{...t&&{minHeight:r(t),fontSize:a[t]},paddingLeft:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),paddingRight:o.spacing("xs"===t?o.custom.padding.sm:o.custom.padding.md),color:o.custom.palette.text.secondary,fontWeight:o.typography.fontWeightRegular,display:"flex",alignItems:"center"}}));export{d as StyledPopper,p as popperStyles};