@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3 kB
JavaScript
import{styled as o,TextField as t,autocompleteClasses as i}from"@mui/material";import"../../BrandCore/colorRamps.js";import{base as a}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import"react/jsx-runtime";import{iconSizeMap as e}from"../../BrandCore/Icon/Icon.js";import{popperBoxShadow as s}from"../Select/StyledSelect.variant-helpers.js";import{fontSizemap as r}from"./typography.util.js";const n=(o,t)=>({maxWidth:"100%",backgroundColor:o.custom.palette.surface.raised,borderRadius:o.spacing(o.custom.radius.md),border:`1px solid ${o.custom.palette.stroke.default}`,transition:o.custom.easing.input,"& .MuiSvgIcon-root":{...t&&{width:e[t],height:e[t]}},"& .MuiAutocomplete-inputRoot":{...t&&{fontSize:r[t],gap:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs)},display:"flex",alignItems:"flex-start",paddingRight:3*a+"px",flexWrap:"wrap",height:"auto"},"& .MuiOutlinedInput-root":{display:"flex",alignItems:"center",padding:0},"& .MuiAutocomplete-endAdornment":{marginRight:o.spacing(o.custom.margin.sm)},"&.Mui-disabled":{backgroundColor:`${o.custom.palette.input.disabled}`,borderColor:`${o.custom.palette.stroke.disabled}`},"&.Mui-focused":{backgroundColor:o.custom.palette.input.default,borderColor:o.custom.palette.stroke.focus,boxShadow:o.custom.boxShadow.input.focus},"& .MuiChip-root .MuiChip-label":{height:20,lineHeight:"20px",maxWidth:140,...t&&{padding:`0 ${o.spacing(o.custom.padding.xs)}`}}}),d=(o,t)=>({"& .MuiPaper-root":{...t&&{margin:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs),marginLeft:"lg"===t?`-${o.spacing(o.custom.padding.sm)}`:`-${o.spacing(o.custom.padding.xs)}`,marginTop:`calc(${"lg"===t?o.spacing(o.custom.margin.sm):o.spacing(o.custom.margin.xs)} + ${o.spacing(o.custom.margin.xs)})`},border:`1px solid ${o.custom.palette.stroke.default}`,backgroundColor:o.custom.palette.surface.raised,boxShadow:s,borderRadius:o.spacing(o.custom.radius.sm)},[`& .${i.listbox}`]:{overflowX:"hidden",width:"100%",padding:`${o.spacing(o.custom.padding.sm)} 0`,[`& .${i.option}`]:{fontSize:r[t],...t&&{minHeight:"lg"===t?5*a+"px":4*a+"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":{background:"inherit"},"&:hover":{backgroundColor:o.custom.palette.interaction.hover}}}}),p=o(t)(({theme:o,sizing:t})=>({"& .MuiOutlinedInput-root":{padding:0,...t&&{margin:"lg"===t?o.spacing(o.custom.padding.sm):o.spacing(o.custom.padding.xs)}},"& .MuiInputBase-input":{padding:"0 14px"},"& .MuiOutlinedInput-notchedOutline":{border:"none"}}));export{p as StyledTextField,n as autocompleteStyles,d as popperStyles};