Function renderChip

packages/ui/src/ui-component/picker/MonthDaysPicker.jsx:51–92

(valueToken, label)

    }

    const renderChip = (valueToken, label) => {
        const isSelected = selected.includes(valueToken)
        const isLastDay = valueToken === LAST_DAY_TOKEN
        const chip = (
            <Chip
                key={valueToken}
                label={label}
                size='small'
                disabled={disabled}
                onClick={() => toggle(valueToken)}
                sx={{
                    cursor: disabled ? 'default' : 'pointer',
                    minWidth: 32,
                    gridColumn: isLastDay ? 'span 2' : 'span 1',
                    fontWeight: isSelected ? 600 : 400,
                    borderWidth: '1.5px',
                    borderStyle: 'solid',
                    borderColor: isSelected ? theme.palette.primary.main : theme.palette.grey[400],
                    backgroundColor: isSelected ? theme.palette.primary.main + '20' : 'transparent',
                    color: isSelected ? theme.palette.primary.main : theme.palette.text.primary,
                    '&:hover': disabled
                        ? {}
                        : {
                              backgroundColor: isSelected ? theme.palette.primary.main + '35' : theme.palette.grey[200]
                          }
                }}
            />
        )
        if (isLastDay) {
            return (
                <Tooltip
                    key={valueToken}
                    title='Always runs on the last day of every month — automatically resolves to 28, 29, 30, or 31 (handles short months and leap years). Unlike picking 31, this fires every month.'
                    placement='top'
                    arrow
                >
                    <span style={{ gridColumn: 'span 2', display: 'inline-flex' }}>{chip}</span>
                </Tooltip>
            )
        }
        return chip
    }

    return (
        <Box