wini-web-components 0.1.0

package/src/component/dialog/dialog.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './dialog.css'
+import { ComponentStatus, getStatusIcon } from '../export-component'
+
+
+export enum DialogAlignment {
+    start = 'start',
+    center = 'center',
+    end = 'end'
+}
+
+interface DialogState {
+    readonly open?: boolean,
+    title: string,
+    status: ComponentStatus,
+    content: string,
+    onSubmit: Function,
+    submitTitle?: string,
+    alignment?: DialogAlignment,
+}
+
+export const showDialog = ({ ref, title, status, content, onSubmit, submitTitle, alignment }: {
+    ref: React.MutableRefObject<Dialog>,
+    title?: string,
+    status?: ComponentStatus,
+    content?: string,
+    onSubmit?: Function,
+    submitTitle?: string,
+    alignment?: DialogAlignment
+}) => {
+    ref.current.showDialogNoti({
+        title: title ?? '',
+        status: status ?? ComponentStatus.INFOR,
+        content: content ?? '',
+        onSubmit: onSubmit ?? (() => { }),
+        submitTitle: submitTitle,
+        alignment: alignment
+    })
+}
+
+export class Dialog extends React.Component<Object, DialogState> {
+    state: Readonly<DialogState> = {
+        open: false,
+        title: '',
+        status: ComponentStatus.INFOR,
+        content: '',
+        onSubmit: () => { }
+    }
+    showDialogNoti(data: DialogState) {
+        this.setState({ open: true, ...data })
+    }
+
+    closeDialog() {
+        this.setState({ open: false })
+    }
+
+    render() {
+        return (
+            <>
+                {this.state.open &&
+                    ReactDOM.createPortal(
+                        <div className='dialog-overlay'>
+                            <div className='dialog-container col' style={{ width: '41.4rem', alignItems: this.state.alignment }} dialog-type={this.state.status} onClick={e => e.stopPropagation()} >
+                                <div key={'dialog-body'} className='dialog-body col' style={{ alignItems: 'inherit' }}>
+                                    <div className='dialog-status row'>{getStatusIcon(this.state.status)}</div>
+                                    <div className='dialog-title' style={{ textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' }}>{this.state.title}</div>
+                                    <div className='dialog-content' style={{ textAlign: this.state.alignment === DialogAlignment.center ? 'center' : 'start' }}>{this.state.content}</div>
+                                </div>
+                                <div key={'dialog-footer'} className='dialog-footer row'>
+                                    <button type='button' style={this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined} onClick={() => this.setState({ open: false })} className='dialog-action'>Quay lại</button>
+                                    <button type='button' style={this.state.alignment === DialogAlignment.center ? { flex: 1, width: '100%' } : undefined} onClick={() => {
+                                        this.state.onSubmit();
+                                        this.setState({ open: false });
+                                    }} className='dialog-action dialog-submit' >
+                                        {this.state.submitTitle ?? 'Xác nhận'}
+                                    </button>
+                                </div>
+                                <button type='button' onClick={() => this.setState({ open: false })} className='dialog-close-btn row' >
+                                    <svg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: '2rem', height: '2rem' }} >
+                                        <path fillRule='evenodd' clipRule='evenodd' d='M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z' fill='#00204D' fillOpacity={0.6} />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>,
+                        document.body
+                    )}
+            </>
+        )
+    }
+}

package/src/component/export-component.js

@@ -0,0 +1,48 @@
+import { Checkbox } from './checkbox/checkbox.tsx'
+import { Select1 } from './select1/select1.tsx'
+import { Switch } from './switch/switch.tsx'
+import { showPopup, closePopup, Popup } from './popup/popup.tsx'
+import { showDialog, Dialog, DialogAlignment } from './dialog/dialog.tsx'
+import { DatePicker } from './date-picker/date-picker.tsx'
+import { SelectMultiple } from './input-multi-select/input-multi-select.tsx'
+import { ProgressBar } from './progress-bar/progress-bar.tsx'
+import { ComponentStatus, getStatusIcon } from './component-status.tsx'
+import { Text } from './text/text.tsx'
+import { Pagination } from './pagination/pagination.tsx'
+import { Table, TbCell, TbHeader, TbRow, TbBody, CellAlignItems } from './table/table.tsx'
+import { TextField } from './text-field/text-field.tsx'
+import { RadioButton } from './radio-button/radio-button.tsx'
+import { TextArea } from './text-area/text-area.tsx'
+import { ImportFile } from './import-file/import-file.tsx'
+import { ToastMessage } from './toast-noti/toast-noti.tsx'
+import { Calendar, CalendarType } from './calendar/calendar'
+import { InfiniteScroll } from './infinite-scroll/infinite-scroll.tsx'
+import { Rating } from './rating/rating.tsx'
+import { ProgressCircle } from './progress-circle/progress-circle.tsx'
+import { CustomSlider } from './slider/slider.tsx'
+
+export {
+    Calendar, CalendarType,
+    ComponentStatus,
+    getStatusIcon,
+    Checkbox,
+    Select1,
+    Switch,
+    Popup, showPopup, closePopup,
+    Dialog, showDialog, DialogAlignment,
+    DatePicker,
+    SelectMultiple,
+    ProgressBar,
+    Text,
+    Pagination,
+    Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems,
+    TextField,
+    RadioButton,
+    TextArea,
+    ImportFile,
+    ToastMessage,
+    InfiniteScroll,
+    Rating,
+    ProgressCircle,
+    CustomSlider,
+}

package/src/component/import-file/import-file.css

@@ -0,0 +1,86 @@
+.import-file-container {
+    align-items: center;
+    justify-content: center;
+}
+
+.import-file-container input {
+    display: none;
+}
+
+.import-file-container button {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+}
+
+.import-file-container:not(.button-only) {
+    max-width: 57rem;
+    padding: 2.4rem;
+    gap: 1.6rem;
+    border-radius: 0.8rem;
+    border: 1px solid #00358033;
+}
+
+.import-file-container:not(.button-only):has(svg.preview-icon) {
+    border-style: dashed;
+}
+
+.import-file-container>.import-file-prefix:not(*:has(>img)) {
+    width: 4.8rem;
+    height: 4.8rem;
+    border-radius: 50%;
+}
+
+.import-file-container>.import-file-prefix {
+    background-color: #edf2fd;
+    align-items: center;
+    justify-content: center;
+}
+
+.import-file-container>.import-file-prefix>img {
+    max-width: 14rem;
+    max-height: 8.8rem;
+    border-radius: 0.8rem;
+}
+
+.import-file-container>.file-preview-content {
+    max-width: 100%;
+    flex: 1;
+    row-gap: 0.4rem;
+    align-items: start;
+}
+
+.import-file-container.col>.file-preview-content {
+    align-items: center;
+}
+
+.import-file-container>.import-file-suffix {
+    padding: 0.8rem 1.6rem;
+    border-radius: 0.8rem;
+    column-gap: 0.8rem;
+    align-items: center;
+    justify-content: center;
+    background-color: #f2f5f8;
+}
+
+.import-file-container>.import-file-suffix>span {
+    padding: 0;
+    font: 500 1.4rem/2.2rem "Inter";
+    color: #00204d99;
+}
+
+.import-file-container .preview-file-link {
+    font: 500 1.2rem/1.6rem "Inter";
+    color: #366ae2;
+}
+
+.remove-preview-file {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-left: 0.6rem;
+}
+
+.Toastify__toast-body>div:last-child {
+    font: 500 1.2rem/1.6rem "Inter";
+}

package/src/component/import-file/import-file.tsx

@@ -0,0 +1,154 @@
+import React, { CSSProperties } from 'react'
+import './import-file.css'
+import { ComponentStatus } from '../component-status'
+import { Text, ToastMessage } from '../export-component'
+
+const cloudSvg = (
+    <svg width='100%' height='100%' style={{ width: '3rem', height: '3rem' }} viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+        <path d='M22.5312 6.51941C20.3258 6.12929 18.0555 6.35518 15.9702 7.1722C13.8849 7.98923 12.0654 9.36573 10.712 11.1502C9.53042 12.7081 8.74407 14.5243 8.41412 16.4432C6.99557 16.9154 5.7486 17.8144 4.85059 19.0274C3.77621 20.4786 3.27749 22.2764 3.45068 24.0737C3.62388 25.871 4.45672 27.5405 5.78845 28.7599C7.12018 29.9792 8.85639 30.6621 10.662 30.6766H13.1063C13.7786 30.6766 14.3236 30.1316 14.3236 29.4594C14.3236 28.7871 13.7786 28.2421 13.1063 28.2421H10.6769C9.47485 28.2313 8.31921 27.7762 7.43253 26.9643C6.54471 26.1514 5.98948 25.0384 5.87402 23.8402C5.75855 22.642 6.09103 21.4435 6.80729 20.476C7.52354 19.5085 8.57279 18.8406 9.75252 18.6013C10.2753 18.4952 10.6682 18.061 10.7216 17.5303C10.9012 15.7476 11.5691 14.049 12.6518 12.6214C13.7345 11.1938 15.1901 10.0926 16.8583 9.43899C18.5266 8.78536 20.3428 8.60466 22.1071 8.91675C23.8715 9.22884 25.5155 10.0216 26.8583 11.2079C28.2011 12.3941 29.1905 13.9278 29.7178 15.6402C30.2451 17.3526 30.2898 19.1772 29.8469 20.9134C29.404 22.6495 28.4907 24.2297 27.2075 25.4802C25.9244 26.7308 24.3211 27.603 22.5742 28.001C21.9187 28.1504 21.5084 28.8028 21.6577 29.4583C21.807 30.1138 22.4595 30.5241 23.115 30.3748C25.2987 29.8772 27.3028 28.7869 28.9067 27.2238C30.5107 25.6606 31.6523 23.6853 32.2059 21.5152C32.7595 19.345 32.7037 17.0642 32.0446 14.9237C31.3855 12.7833 30.1486 10.8661 28.4701 9.38333C26.7916 7.90052 24.7366 6.90953 22.5312 6.51941Z' fill='#366AE2' />
+        <path
+            d='M17.1146 17.6431C17.2313 17.5264 17.3658 17.4384 17.5094 17.379C17.6513 17.3201 17.8067 17.2874 17.9697 17.2866L17.9753 17.2866L17.9809 17.2866C18.2906 17.288 18.5998 17.4069 18.8361 17.6431L23.7052 22.5123C24.1806 22.9876 24.1806 23.7584 23.7052 24.2338C23.2298 24.7091 22.4591 24.7091 21.9837 24.2338L19.1926 21.4427V29.4594C19.1926 30.1317 18.6476 30.6767 17.9753 30.6767C17.303 30.6767 16.758 30.1317 16.758 29.4594V21.4427L13.9669 24.2338C13.4916 24.7091 12.7208 24.7091 12.2455 24.2338C11.7701 23.7584 11.7701 22.9876 12.2455 22.5123L17.1146 17.6431Z'
+            fill='#366AE2'
+        />
+    </svg>
+)
+
+const fileSvg = (
+    <svg className='preview-icon' width='100%' height='100%' style={{ width: '3rem', height: '3rem' }} viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg' >
+        <path d='M20.9163 3.41669H7.54829C7.22597 3.41669 6.91686 3.54472 6.68895 3.77263C6.46105 4.00054 6.33301 4.30965 6.33301 4.63196V31.3681C6.33301 31.6904 6.46105 31.9995 6.68895 32.2274C6.91686 32.4553 7.22597 32.5834 7.54829 32.5834H29.4233C29.7456 32.5834 30.0547 32.4553 30.2826 32.2274C30.5105 31.9995 30.6386 31.6904 30.6386 31.3681V13.1389H22.1316C21.8093 13.1389 21.5002 13.0109 21.2723 12.783C21.0444 12.5551 20.9163 12.2459 20.9163 11.9236V3.41669Z' fill='#366AE2' />
+        <path d='M29.9264 10.7084H23.3469V4.12884L29.9264 10.7084Z' fill='#366AE2' />
+    </svg>
+)
+
+const closeSvg = (
+    <svg width='100%' height='100%' style={{ width: '2.4rem', height: '2.4rem' }} fill='none' xmlns='http://www.w3.org/2000/svg' >
+        <path d='M13.4144 12.0002L20.4144 5.00015L19.0002 3.58594L12.0002 10.5859L5.00015 3.58594L3.58594 5.00015L10.5859 12.0002L3.58594 19.0002L5.00015 20.4144L12.0002 13.4144L19.0002 20.4144L20.4144 19.0002L13.4144 12.0002Z' fill='#E60012FF' />
+    </svg>
+)
+
+const uploadSvg = (
+    <svg width='100%' height='100%' style={{ width: '1.4rem', height: '1.4rem' }} fill='none' xmlns='http://www.w3.org/2000/svg' >
+        <path d='M3.66732 3.88889L7.00065 0L10.334 3.88889H7.55621V8.88889H6.4451V3.88889H3.66732Z' fill='#262626' />
+        <path d='M12.5562 11.1111H1.4451V7.77778H0.333984V11.6667C0.333984 11.9733 0.582873 12.2222 0.88954 12.2222H13.1118C13.4184 12.2222 13.6673 11.9733 13.6673 11.6667V7.77778H12.5562V11.1111Z' fill='#262626' />
+    </svg>
+)
+
+interface ObjWithKnownKeys {
+    [k: string]: any;
+}
+
+interface ImportFileState {
+    status?: ComponentStatus,
+    preview: File | ObjWithKnownKeys | undefined | null
+}
+
+type ChangeFileFunction = (a?: File) => void;
+
+interface ImportFileProps {
+    status?: ComponentStatus,
+    value?: File | ObjWithKnownKeys,
+    buttonOnly: boolean,
+    onChange?: ChangeFileFunction,
+    label?: string,
+    className?: string,
+    style?: CSSProperties,
+    allowType?: Array<string>,
+    subTitle?: string,
+    /**
+    * maxSize unit: kb (kilobytes)
+    */
+    maxSize?: number
+}
+
+export class ImportFile extends React.Component<ImportFileProps, ImportFileState> {
+    private fileRef: React.RefObject<HTMLInputElement>;
+    constructor(props: ImportFileProps | Readonly<ImportFileProps>) {
+        super(props);
+        this.fileRef = React.createRef();
+    }
+
+    state: Readonly<ImportFileState> = {
+        preview: this.props.value
+    }
+
+    showFilePicker() {
+        this.fileRef.current?.click()
+    }
+
+    componentDidUpdate(prevProps: Readonly<ImportFileProps>, prevState: Readonly<ImportFileState>): void {
+        if (prevProps.value !== this.props.value || prevProps.status !== this.props.status) {
+            this.setState({ ...this.state, status: this.props.status, preview: this.props.value })
+        }
+    }
+
+    render() {
+        let sizeTitle: string | undefined
+        if (this.props.maxSize) {
+            sizeTitle = this.props.maxSize > Math.pow(1024, 3) ? `${Math.round(this.props.maxSize / Math.pow(1024, 3))}TB` : this.props.maxSize > Math.pow(1024, 2) ? `${Math.round(this.props.maxSize / Math.pow(1024, 2))}GB` : this.props.maxSize > 1024 ? `${Math.round(this.props.maxSize / 1024)}MB` : `${this.props.maxSize}KB`
+        }
+        return <div className={`import-file-container ${this.props.className ?? 'row'} ${this.props.buttonOnly ? 'button-only' : ''}`} style={this.state.preview ? this.props.style : { cursor: 'pointer', ...this.props.style }}
+            onClick={() => {
+                if (!this.state.preview && !this.props.buttonOnly) this.showFilePicker()
+            }}
+        >
+            <input type='file' accept={(this.props.allowType ?? []).join(',')} ref={this.fileRef} onChange={(ev) => {
+                let file: File | undefined
+                if (ev.target.files && ev.target.files[0]) {
+                    file = ev.target.files[0]
+                    if (this.props.maxSize) {
+                        if (file.size > (this.props.maxSize * 1024)) {
+                            ToastMessage.errors(`Tệp ${file.name} vượt qua kích thước cho phép`)
+                            file = undefined
+                        }
+                    }
+                }
+                if (file) {
+                    this.setState({ ...this.state, preview: file })
+                    if (this.props.onChange) this.props.onChange(file)
+                }
+            }} />
+            {this.props.buttonOnly
+                ? null
+                : [
+                    <div key={'import-file-prefix'} className='import-file-prefix row'>
+                        {this.state.preview ? this.state.preview.type?.includes('image') ? <img src={this.state.preview instanceof File ? URL.createObjectURL(this.state.preview) : this.state.preview.url} /> : fileSvg : cloudSvg}
+                    </div>,
+                    <div key={'file-preview-content'} className='file-preview-content col' >
+                        <Text className='title-file heading-8' style={{ maxWidth: '100%' }}>
+                            {this.state.preview?.name ?? (this.props.label ?? 'Nhấp hoặc kéo tệp vào đây để tải lên')}
+                        </Text>
+                        <Text className='subtitle-file subtitle-3' style={{ maxWidth: '100%' }}>
+                            {this.state.preview?.size
+                                ? `${this.state.preview?.size}KB`
+                                : (this.props.subTitle ?? (sizeTitle ? `Kích thước tệp nhỏ hơn ${sizeTitle}.` : ''))}
+                        </Text>
+                    </div>
+                ]}
+            {this.state.preview && this.props.buttonOnly ? (
+                <div className='row' style={{}}>
+                    <Text className='preview-file-link'>
+                        {this.state.preview?.name ?? ''}
+                    </Text>
+                    <button type='button' className='remove-preview-file' onClick={() => {
+                        this.setState({ ...this.state, preview: null })
+                    }}
+                    >
+                        {closeSvg}
+                    </button>
+                </div>
+            ) : (
+                <button
+                    type='button'
+                    className='import-file-suffix row'
+                    onClick={() => {
+                        if (this.props.buttonOnly || this.state.preview) this.showFilePicker()
+                    }}
+                >
+                    {this.props.buttonOnly ? uploadSvg : null}
+                    <span>{this.state.preview ? 'Thay tệp' : 'Chọn tệp'}</span>
+                </button>
+            )}
+        </div>
+    }
+}
+

package/src/component/infinite-scroll/infinite-scroll.css

@@ -0,0 +1,37 @@
+.infinite-scroll.loading {
+    position: relative;
+}
+
+.infinite-scroll.loading::after {
+    content: '';
+    position: absolute;
+    width: 1.2rem;
+    height: 1.2rem;
+    border: 0.4rem solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 0.4rem solid var(--infor-color);
+    -webkit-animation: spin 2s linear infinite;
+    /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/component/infinite-scroll/infinite-scroll.tsx

@@ -0,0 +1,33 @@
+import React, { CSSProperties, ReactNode } from 'react';
+
+
+interface InfiniteScrollProps {
+    className?: string,
+    style?: CSSProperties,
+    handleScroll?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => Promise<any> | null,
+    children?: ReactNode,
+    totalCount?: number,
+}
+
+interface InfiniteScrollState {
+    loading: boolean
+}
+
+export class InfiniteScroll extends React.Component<InfiniteScrollProps, InfiniteScrollState> {
+    state: Readonly<InfiniteScrollState> = {
+        loading: false
+    }
+
+    render() {
+        return <div onScroll={async (ev) => {
+            if (this.props.handleScroll) {
+                this.setState({ ...this.state, loading: true })
+                let scrollElement = ev.target as HTMLDivElement
+                await this.props.handleScroll(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)
+                this.setState({ loading: false })
+            }
+        }} className={`infinite-scroll ${this.state.loading ? 'loading' : ''} ${this.props.className ?? 'col'}`} style={this.props.style ?? { 'overflow': 'hidden auto' }}>
+            {this.props.children}
+        </div>
+    }
+}

package/src/component/input-multi-select/input-multi-select.css

@@ -0,0 +1,127 @@
+.select-multi-container {
+    border-radius: 0.4rem;
+    align-items: center;
+    justify-content: start;
+    width: 100%;
+    height: 4rem;
+    max-height: 100%;
+    box-sizing: border-box;
+    padding: 0.8rem;
+    gap: 0.8rem;
+    width: 16rem;
+    position: relative;
+    border: 0.5px solid #00358033;
+    border-radius: 4px;
+    cursor: context-menu;
+}
+
+.select-multi-container.disabled {
+    background-color: var(--disabled-background) !important;
+    pointer-events: none !important;
+}
+
+.select-multi-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.select-multi-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -4px;
+    width: max-content;
+    font: 400 1.2rem/1.6rem 'Inter';
+    transform: translate(-7.5%, 92.5%) scale(0.85);
+}
+
+.select-multi-container>.row::-webkit-scrollbar {
+    display: none;
+}
+
+.selected-item-value>* {
+    pointer-events: none;
+}
+
+.select-multi-container .select-multi-placeholder {
+    font: 400 1.4rem/2.2rem "Inter";
+    color: #c5c5c5;
+}
+
+.select-multi-container .selected-item-value {
+    border-radius: 10rem;
+    padding: 0.4rem 0.8rem;
+    background-color: var(--selected-background);
+    column-gap: 0.8rem;
+}
+
+.select-multi-container .selected-item-value>.selected-value-title {
+    font: 400 1.2rem/1.6rem "Inter";
+    color: #161D24E5;
+}
+
+.select-multi-popup {
+    position: absolute;
+    z-index: 9999;
+    background-color: #fff;
+    border-radius: 0.8rem;
+    height: fit-content;
+    box-shadow: 0 0 12px 0 #00204d1f;
+    align-items: center;
+    padding: 0.8rem 0;
+    box-shadow: -20px 20px 40px -4px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24);
+}
+
+.select-multi-popup>.header-search {
+    width: 100%;
+    padding: 0.8rem 1.6rem;
+    box-sizing: border-box;
+    align-items: center;
+}
+
+.select-multi-popup>.header-search>input {
+    outline: none;
+    padding: 0;
+    border: 0;
+    font: 400 1.4rem/2.2rem "Inter";
+    color: #1C2430;
+    min-width: 0;
+    flex: 1;
+    max-width: 100%;
+}
+
+.select-multi-popup>.select-body {
+    max-height: 100%;
+    flex: 1;
+    align-items: start;
+    row-gap: 2px;
+    max-height: 28rem;
+    min-height: 8rem;
+    width: 100%;
+    padding-top: 0.4rem;
+    overflow: hidden auto;
+}
+
+.select-multi-popup>.select-body>.select-tile {
+    justify-content: start;
+    align-items: center;
+    padding: 0.8rem 1.6rem;
+    gap: 0.8rem;
+    width: 100%;
+    cursor: context-menu;
+}
+
+.select-multi-popup>.select-body>.select-tile:hover {
+    background-color: var(--hover-background);
+}
+
+.select-multi-popup>.select-body>.select-tile:has(input:checked) {
+    background-color: var(--selected-background);
+}
+
+.no-results-found {
+    padding: 0.8rem;
+    font: 400 1.4rem/2rem "Inter";
+    color: #1C2430;
+}