@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 3.29 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Button as i,Box as r,Stack as n,useTheme as a,Grow as s,buttonBaseClasses as l,typographyClasses as c}from"@mui/material";import{mergeSx as d}from"merge-sx";import"../../BrandCore/colorRamps.js";import{base as p}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import m from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as h}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import g from"../Label/Label.js";import u from"../Tooltip/Tooltip.js";import x from"../Typography/Typography.js";const f=o(i,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",textOverflow:"ellipsis",whiteSpace:"nowrap",...h(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{minHeight:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),y=o(r)(({theme:e})=>({padding:e.spacing(.5,1)})),w=o(r)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),textAlign:"left"})),b=o(n,{shouldForwardProp:e=>"iconHeight"!==e})(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"})),v=({baseState:o,label:i,active:n,danger:h,divider:v,heading:j,selected:B,disabled:C,closeOnClick:I,hidden:k,onClick:H,startIcon:S,slotProps:T,tooltip:W,showItemNumber:O=!1,itemNumber:P,children:z})=>{const L=a(),$=3*p;return k?null:v?e(r,{sx:{height:32,display:"flex",alignItems:"center"},children:e(r,{sx:{borderBottom:`1px solid ${L.custom.palette.stroke.default}`,width:"100%"}})}):i?j?e(y,{children:e(x,{component:"p",type:"button",variation:"md",sx:{color:L.custom.palette.text.secondary},children:i})}):e(f,{active:n,disabled:C,onClick:e=>{H&&H(e),I&&o?.close()},iconHeight:$,sx:{[`&.${l.root} .${c.root}`]:{minHeight:"initial"}},children:t(w,{sx:{width:"100%",justifyContent:"space-between",gap:1},children:[t(w,{sx:{flex:"1 1 auto",gap:1,minWidth:0},children:[O&&!!P&&e(g,{body:P,sizing:"xxs",colorScheme:"neutral",sx:{minWidth:32}}),void 0!==S&&e(m,{name:S,...T?.startIcon}),W?e(u,{message:i,slotProps:{wrapper:{sx:{minWidth:0,overflow:"hidden",flex:"1 1 auto"}}},children:e(x,{monospaced:!0,component:"p",sx:d({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},h&&{color:L.custom.palette.text.negative},j&&{color:L.custom.palette.text.secondary}),type:"button",variation:"md",children:i})}):e(x,{monospaced:!0,component:"p",sx:d({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},h&&{color:L.custom.palette.text.negative},j&&{color:L.custom.palette.text.secondary}),type:"button",variation:"md",children:i})]}),t(b,{iconHeight:$,minWidth:$,children:[z?.length&&z.length>0&&e(s,{in:!0,children:e(r,{sx:{display:"flex",alignItems:"center"},children:e(m,{name:"chevron-right",size:$})})}),B&&e(s,{in:!0,children:e(r,{sx:{display:"flex",alignItems:"center"},children:e(m,{name:"check",size:$})})})]})]})}):null};export{v as default};