import React from 'react';
import { TextField } from '../../src/primitive-components/input-components/text-field/text-field';
import { Button } from '../../src/primitive-components/button-components/button/button';

export function TextFields() {
    return (
        <div
            className={'m3 m3-wrapper'}
            style={{ display: 'flex', flexDirection: 'column', gap: '2em' }}
        >
            <h1> Inputs </h1>
            <div>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '0.5em',
                    }}
                >
                    <h2> Filled Inputs </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField variant={'filled'} />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'filled'}
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'filled'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'filled'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '0.5em',
                    }}
                >
                    <h2> Outlined Inputs </h2>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '2em',
                        }}
                    >
                        <div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField variant={'outlined'} />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    gap: '2em',
                                }}
                            >
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        width: '210px',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '2em',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            supportingText={'Supporting text'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <form
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            required
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                        <Button
                                            type={'submit'}
                                            variant={'outlined'}
                                        >
                                            Send
                                        </Button>
                                    </form>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            placeholder={'Placeholder'}
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                            gap: '0.5em',
                                        }}
                                    >
                                        <TextField
                                            disabled
                                            supportingText={'Supporting text'}
                                            type={'email'}
                                            variant={'outlined'}
                                            withAfterIcon
                                            withBeforeIcon
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}