@epam/uui 5.3.0 → 5.4.1

package/components/filters/__tests__/filtersPanel.test.tsx

@@ -1,371 +0,0 @@
-import { FiltersPanel, FiltersPanelProps } from '../FiltersPanel';
-import { ArrayDataSource, TableFiltersConfig } from '@epam/uui-core';
-import { defaultPredicates } from '../defaultPredicates';
-import {
-    setupComponentForTest, screen, within, userEvent,
-} from '@epam/uui-test-utils';
-import React from 'react';
-import dayjs from 'dayjs';
-
-const now = dayjs();
-const TODAY_DAY_OF_MONTH = now.date().toString();
-const TODAY_DATE_ISO = now.format('YYYY-MM-DD');
-const TODAY_DATE_FORMATTED = now.format('MMM DD, YYYY');
-
-type TestItemType = {
-    name: string;
-    status: number;
-    position: number;
-    age: number;
-    hireDate: number;
-    exitDate: number;
-};
-
-jest.mock('react-popper', () => ({
-    ...jest.requireActual('react-popper'),
-    Popper: function PopperMock({ children }: any) {
-        return children({
-            ref: jest.fn,
-            update: jest.fn(),
-            style: {},
-            arrowProps: { ref: jest.fn },
-            placement: 'bottom-start',
-            isReferenceHidden: false,
-        });
-    },
-}));
-
-jest.mock('react-focus-lock', () => ({
-    ...jest.requireActual('react-focus-lock'),
-    __esModule: true,
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    default: ({ children }) => (<>{ children }</>),
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    FreeFocusInside: ({ children }) => (<>{ children }</>),
-}));
-
-const filtersConfigWithoutPredicatesAll: TableFiltersConfig<TestItemType>[] = [
-    {
-        field: 'status',
-        columnKey: 'status',
-        title: 'Status',
-        type: 'singlePicker',
-        dataSource: new ArrayDataSource({
-            items: [
-                { id: 1, name: 'Green' }, { id: 2, name: 'Red' }, { id: 3, name: 'White' },
-            ],
-        }),
-    }, {
-        field: 'position',
-        columnKey: 'position',
-        title: 'Position',
-        type: 'multiPicker',
-        dataSource: new ArrayDataSource({
-            items: [
-                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
-            ],
-        }),
-    }, {
-        field: 'age',
-        columnKey: 'age',
-        title: 'Age',
-        type: 'numeric',
-    }, {
-        field: 'hireDate',
-        columnKey: 'hireDate',
-        title: 'Hire Date',
-        type: 'rangeDatePicker',
-    }, {
-        field: 'exitDate',
-        columnKey: 'exitDate',
-        title: 'Exit Date',
-        type: 'datePicker',
-    },
-];
-
-const filtersConfigWithPredicatesAll: TableFiltersConfig<TestItemType>[] = [
-    {
-        field: 'position',
-        columnKey: 'position',
-        title: 'Position',
-        type: 'multiPicker',
-        predicates: defaultPredicates.multiPicker,
-        dataSource: new ArrayDataSource({
-            items: [
-                { id: 1, name: 'Designer' }, { id: 2, name: 'QA' }, { id: 3, name: 'Dev' },
-            ],
-        }),
-    }, {
-        field: 'age',
-        columnKey: 'age',
-        title: 'Age',
-        type: 'numeric',
-        predicates: defaultPredicates.numeric,
-    }, {
-        field: 'hireDate',
-        columnKey: 'hireDate',
-        title: 'Hire Date',
-        type: 'rangeDatePicker',
-        predicates: defaultPredicates.rangeDatePicker,
-    },
-];
-
-async function setupFilterPanelComponent({ filtersConfig }: { filtersConfig: TableFiltersConfig<TestItemType>[] }) {
-    const { result, mocks } = await setupComponentForTest<FiltersPanelProps<TestItemType>>(
-        (contextRef) => {
-            return {
-                filters: filtersConfig,
-                tableState: {},
-                setTableState: jest.fn().mockImplementation((newTableState) => contextRef.current.setProperty('tableState', newTableState)),
-            };
-        },
-        (props) => <FiltersPanel { ...props } />,
-    );
-    const dom = {
-        add: screen.getByText('Add filter'),
-    };
-    return { result, dom, mocks };
-}
-
-function withinDialog() {
-    return within(screen.queryByRole('dialog'));
-}
-function expectDialog() {
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-}
-function notExpectDialog() {
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-}
-
-describe('FiltersPanel', () => {
-    describe('filter type: singlePicker', () => {
-        it('should add / view / clear / remove (without predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithoutPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const statusOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Status' });
-            expect(statusOption).toBeInTheDocument();
-            await user.click(statusOption);
-            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' }));
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { status: 2 } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Status:Red' }));
-            expectDialog();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'true');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Red' })).toHaveAttribute('aria-selected', 'false');
-            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-    });
-
-    describe('filter type: datePicker', () => {
-        it('should add / view / clear / remove (without predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithoutPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const exitDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Exit Date' });
-            expect(exitDateOption).toBeInTheDocument();
-            await user.click(exitDateOption);
-            await user.click(withinDialog().getByText(TODAY_DAY_OF_MONTH));
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { exitDate: TODAY_DATE_ISO } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: `Exit Date:${TODAY_DATE_FORMATTED}` }));
-            expectDialog();
-            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).toHaveClass('uui-calendar-selected-day');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
-            expect(withinDialog().getByText(TODAY_DAY_OF_MONTH).parentElement).not.toHaveClass('uui-calendar-selected-day');
-            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-    });
-    describe('filter type: multiPicker', () => {
-        it('should add / view / clear / remove (without predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithoutPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
-            expect(positionOption).toBeInTheDocument();
-            await user.click(positionOption);
-            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
-            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
-            await user.click(window.document.body);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: [2, 3] } }));
-            await user.click(screen.getByRole('button', { name: 'Position: QA , Dev' }));
-            expectDialog();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
-            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-        it('should add / view / clear / remove (with multiPicker predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const positionOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Position' });
-            expect(positionOption).toBeInTheDocument();
-            await user.click(positionOption);
-            expect(
-                withinDialog()
-                    .queryAllByRole('tab')
-                    .map((t) => t.textContent),
-            ).toEqual(['is', 'is not']);
-            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' }));
-            await user.click(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' }));
-            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'is not' }));
-            await user.click(window.document.body);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { position: { nin: [2, 3] } } }));
-            await user.click(screen.getByRole('button', { name: 'Position is not QA , Dev' }));
-            expectDialog();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).toBeChecked();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).toBeChecked();
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'QA' })).not.toBeChecked();
-            expect(withinDialog().getByRoleAndText({ role: 'option', text: 'Dev' })).not.toBeChecked();
-            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-    });
-    describe('filter type: numeric', () => {
-        it('should add / view / clear / remove (without predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithoutPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
-            expect(ageOption).toBeInTheDocument();
-            await user.click(ageOption);
-            await user.type(withinDialog().getByRole('spinbutton'), '20');
-            await user.click(window.document.body);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: 20 } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age:20' }));
-            expectDialog();
-            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
-            expect(input.placeholder).toEqual('20');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
-            expect(input.placeholder).toEqual('Enter a number');
-            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-        it('should add / view / clear / remove (with numeric predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const ageOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Age' });
-            expect(ageOption).toBeInTheDocument();
-            await user.click(ageOption);
-            expect(
-                withinDialog()
-                    .queryAllByRole('tab')
-                    .map((t) => t.textContent),
-            ).toEqual([
-                '=', '≠', '≤', '≥', 'In Range',
-            ]);
-            await user.type(withinDialog().getByRole('spinbutton'), '20');
-            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: '≠' }));
-            await user.click(window.document.body);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { age: { neq: 20 } } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: 'Age ≠20' }));
-            expectDialog();
-            const input = withinDialog().getByRole('spinbutton') as HTMLInputElement;
-            expect(input.placeholder).toEqual('20');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR' }));
-            expect(input.placeholder).toEqual('Enter a number');
-            const removeButton = withinDialog().queryByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-    });
-    describe('filter type: rangeDatePicker', () => {
-        it('should add / view / clear / remove (without predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithoutPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
-            expect(hireDateOption).toBeInTheDocument();
-            await user.click(hireDateOption);
-            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
-            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
-            await user.click(window.document.body);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date:${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
-            expectDialog();
-            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
-            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
-            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-        it('should add / view / clear / remove (with rangeDatePicker predicate)', async () => {
-            const user = userEvent.setup();
-            const { dom, mocks } = await setupFilterPanelComponent({
-                filtersConfig: filtersConfigWithPredicatesAll,
-            });
-            await user.click(dom.add);
-            expectDialog();
-            const hireDateOption = withinDialog().queryByRoleAndText({ role: 'option', text: 'Hire Date' });
-            expect(hireDateOption).toBeInTheDocument();
-            await user.click(hireDateOption);
-            expect(
-                withinDialog()
-                    .queryAllByRole('tab')
-                    .map((t) => t.textContent),
-            ).toEqual(['In Range', 'Not in Range']);
-            await user.click(withinDialog().getByRoleAndText({ role: 'tab', text: 'Not in Range' }));
-            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
-            await user.click(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0]);
-            notExpectDialog();
-            expect(mocks.setTableState).lastCalledWith(expect.objectContaining({ filter: { hireDate: { notInRange: { from: TODAY_DATE_ISO, to: TODAY_DATE_ISO } } } }));
-            await user.click(screen.getByRoleAndText({ role: 'button', text: `Hire Date Not in Range${TODAY_DATE_FORMATTED} - ${TODAY_DATE_FORMATTED}` }));
-            expectDialog();
-            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).toHaveClass('uui-calendar-selected-day');
-            await user.click(withinDialog().getByRoleAndText({ role: 'button', text: 'CLEAR ALL' }));
-            expect(withinDialog().getAllByText(TODAY_DAY_OF_MONTH)[0].parentElement).not.toHaveClass('uui-calendar-selected-day');
-            const removeButton = withinDialog().getByRoleAndText({ role: 'button', text: 'REMOVE FILTER' });
-            await user.click(removeButton);
-            notExpectDialog();
-            expect(screen.getByRoleAndText({ role: 'button', text: 'Add filter' })).toBeInTheDocument();
-        });
-    });
-});

package/components/filters/constants.ts

@@ -1,4 +0,0 @@
-export const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
-export const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
-export const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
-export const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';

package/components/filters/defaultPredicates.ts

@@ -1,11 +0,0 @@
-import { IFilterPredicate } from '@epam/uui-core';
-
-type defaultPredicateName = 'numeric' | 'multiPicker' | 'rangeDatePicker';
-
-export const defaultPredicates: Record<defaultPredicateName, IFilterPredicate[]> = {
-    numeric: [
-        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
-    ],
-    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
-    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
-};

package/components/filters/index.ts

@@ -1,4 +0,0 @@
-export * from './FiltersPanel';
-export * from './FilterItemBody';
-export * from './PresetPanel';
-export * from './defaultPredicates';

package/components/forms/Form.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import {
-    Form as UuiForm, FormProps, useUuiContext, INotification,
-} from '@epam/uui-core';
-import { Text, RichTextView } from '../typography';
-import { ConfirmationModal, WarningNotification } from '../overlays';
-import { i18n } from '../../i18n';
-
-export function Form<T>(props: FormProps<T>) {
-    const context = useUuiContext();
-
-    const beforeLeave = (): Promise<boolean> => {
-        return context.uuiModals.show<boolean>((modalProps) => <ConfirmationModal caption={ i18n.form.modals.beforeLeaveMessage } { ...modalProps } />);
-    };
-
-    const loadUnsavedChanges = (): Promise<void> => {
-        return context.uuiNotifications
-            .show(
-                (props: INotification) => (
-                    <WarningNotification
-                        { ...props }
-                        actions={ [
-                            {
-                                name: i18n.form.notifications.actionButtonCaption,
-                                action: props.onSuccess,
-                            },
-                        ] }
-                    >
-                        <RichTextView>
-                            <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
-                        </RichTextView>
-                    </WarningNotification>
-                ),
-                { duration: 5, position: 'bot-left' },
-            );
-    };
-
-    return <UuiForm<T> loadUnsavedChanges={ loadUnsavedChanges } beforeLeave={ beforeLeave } { ...props } />;
-}

package/components/forms/index.tsx

@@ -1,2 +0,0 @@
-export * from './Form';
-export * from './useForm';

package/components/forms/useForm.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import {
-    useUuiContext, UseFormProps, useForm as uuiUseForm, INotification,
-} from '@epam/uui-core';
-import { WarningNotification } from '../overlays';
-import { Text, RichTextView } from '../typography';
-import { ConfirmationModal } from '../overlays/ConfirmationModal';
-import { i18n } from '../../i18n';
-
-export function useForm<T>(props: UseFormProps<T>) {
-    const context = useUuiContext();
-
-    const beforeLeave = (): Promise<boolean> => {
-        return context.uuiModals.show<boolean>((modalProps) => <ConfirmationModal caption={ i18n.form.modals.beforeLeaveMessage } { ...modalProps } />);
-    };
-
-    const loadUnsavedChanges = (): Promise<void> => {
-        return context.uuiNotifications.show(
-            (props: INotification) => (
-                <WarningNotification
-                    { ...props }
-                    actions={ [
-                        {
-                            name: i18n.form.notifications.actionButtonCaption,
-                            action: props.onSuccess,
-                        },
-                    ] }
-                >
-                    <RichTextView>
-                        <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
-                    </RichTextView>
-                </WarningNotification>
-            ),
-            { duration: 5, position: 'bot-left' },
-        );
-    };
-
-    return uuiUseForm({ beforeLeave, loadUnsavedChanges, ...props });
-}

package/components/index.ts

@@ -1,15 +0,0 @@
-export * from './buttons';
-export * from './datePickers';
-export * from './dnd';
-export * from './inputs';
-export * from './layout';
-export * from './overlays';
-export * from './pickers';
-export * from './typography';
-export * from './widgets';
-export * from './tables';
-export * from './types';
-export * from './filters';
-export * from './navigation';
-export * from './forms';
-export * from './fileUpload';

package/components/inputs/Checkbox.module.scss

@@ -1,162 +0,0 @@
-@use  '../../assets/styles/index.scss' as *;
-
-@mixin icon-sizes($size, $font-size, $line-height) {
-    :global(.uui-checkbox) {
-        box-sizing: border-box;
-        width: $size;
-        height: $size;
-
-        :global(.uui-icon) {
-            svg {
-                width: $size;
-            }
-        }
-    }
-
-    :global(.uui-input-label) {
-        font-size: $font-size;
-        line-height: $line-height;
-    }
-}
-
-.root {
-    --uui-checkbox-border: var(--uui-control-border);
-    --uui-checkbox-border-hover: var(--uui-color-60);
-    --uui-checkbox-border-disabled: var(--uui-control-border-disabled);
-    --uui-checkbox-border-checked: var(--uui-color-50);
-    --uui-checkbox-border-checked-disabled: var(--uui-color-20);
-    --uui-checkbox-bg: var(--uui-control-bg);
-    --uui-checkbox-bg-checked: var(--uui-color-50);
-    --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
-    --uui-checkbox-bg-checked-hover: var(--uui-color-60);
-    --uui-checkbox-bg-checked-disabled: var(--uui-color-20);
-    --uui-checkbox-error: var(--uui-error-60);
-    --uui-checkbox-fill: var(--uui-color-contrast);
-    --uui-checkbox-label: var(--uui-text-primary);
-    --uui-checkbox-label-disabled: var(--uui-text-disabled);
-    --uui-checkbox-label-readonly: var(--uui-text-primary);
-
-    --uui-checkbox-border-radius: var(--uui-border-radius);
-
-    --uui-checkbox-font: var(--uui-font);
-    --uui-checkbox-font-weight: 400;
-    //Colors
-    &:hover, &:active, &:focus-within {
-        :global(.uui-checkbox) {
-            border-color: var(--uui-checkbox-border-hover);
-        }
-
-        :global(.uui-checked) {
-            background-color: var(--uui-checkbox-bg-checked-hover);
-        }
-    }
-
-    :global(.uui-checkbox) {
-        background-color: var(--uui-checkbox-bg);
-        border: 1px solid var(--uui-checkbox-border);
-        border-radius: var(--uui-checkbox-border-radius);
-        position: relative;
-
-        :global(input[type='checkbox']):focus-visible {
-            @include focus-visible-effect();
-            position: absolute;
-            width: inherit;
-            height: inherit;
-        }
-    }
-
-    :global(.uui-input-label) {
-        font-family: var(--uui-checkbox-font);
-        font-weight: var(--uui-checkbox-font-weigth);
-        color: var(--uui-checkbox-label);
-        margin-left: 12px;
-        flex-grow: 1;
-    }
-
-    :global(.uui-checked) {
-        background-color: var(--uui-checkbox-bg-checked);
-        border-color: var(--uui-checkbox-border-checked);
-        fill: var(--uui-checkbox-fill);
-    }
-
-    &:global(.uui-disabled),
-    &:global(.uui-readonly) {
-        cursor: default;
-
-        :global(.uui-checkbox) {
-            cursor: default;
-            background-color: var(--uui-checkbox-bg-disabled);
-            border-color: var(--uui-checkbox-border-disabled);
-        }
-
-        &:hover, &:global(.uui-checked), &:focus-within {
-            &:global(.uui-checkbox) {
-                border-color: var(--uui-checkbox-border-checked-disabled);
-            }
-
-            &:global(.uui-icon) {
-                background-color: var(--uui-checkbox-bg-checked-disabled);
-                border-color: var(--uui-checkbox-border-checked-disabled);
-            }
-        }
-
-        :global(.uui-input-label) {
-            color: var(--uui-checkbox-label-disabled);
-        }
-
-        :global(.uui-checked) {
-            background-color: var(--uui-checkbox-bg-checked-disabled);
-            border-color: var(--uui-checkbox-border-checked-disabled);
-        }
-    }
-
-    &:global(.uui-readonly) {
-        :global(.uui-input-label) {
-            color: var(--uui-checkbox-label-readonly);
-        }
-    }
-
-    &:global(.uui-invalid) {
-        :global(.uui-checkbox) {
-            border-color: var(--uui-checkbox-error);
-            fill: var(--uui-checkbox-error);
-
-            &:hover, &:active, &:focus-within {
-                border-color: var(--uui-checkbox-error);
-                fill: var(--uui-checkbox-error);
-            }
-
-            &:global(.uui-checked) {
-                fill: var(--uui-checkbox-fill);
-                background-color: var(--uui-checkbox-error);
-                border-color: var(--uui-checkbox-error);
-
-                &:hover, &:active, &:focus-within {
-                    background-color: var(--uui-checkbox-error);
-                    border-color: var(--uui-checkbox-error);
-                }
-            }
-        }
-
-        :global(.uui-input-label) {
-            color: var(--uui-checkbox-error);
-        }
-    }
-
-    //Sizes
-    &.size-18 {
-        @include icon-sizes(18px, 14px, 18px);
-    }
-
-    &.size-12 {
-        @include icon-sizes(12px, 12px, 12px);
-
-        :global(.uui-input-label) {
-            margin-left: 6px;
-        }
-    }
-
-    &.mode-cell {
-        justify-content: center;
-    }
-}