@coveord/plasma-mantine 54.1.2 → 54.2.1

package/src/components/collection/Collection.module.css

@@ -1,8 +1,10 @@
 .root {
     position: relative;
 }
+
 .item {
     align-items: baseline;
+
     &[data-isdragging='true'] {
         box-shadow: var(--mantine-shadow-md);
         z-index: 2;

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -46,13 +46,12 @@ describe('Collection', () => {
         render(<Fixture />);
         let items = screen.getAllByTestId('item');
         expect(items).toHaveLength(2);
-        /* eslint-disable-next-line testing-library/no-node-access */
+
         const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
 
         await user.click(removeBanana);
 
         items = screen.getAllByTestId('item');
-        // eslint-disable-next-line jest-dom/prefer-in-document
         expect(screen.getAllByTestId('item')).toHaveLength(1);
         expect(items[0]).toHaveTextContent('orange');
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
@@ -76,7 +75,7 @@ describe('Collection', () => {
         render(<Fixture />);
         let items = screen.getAllByTestId('item');
         expect(items).toHaveLength(2);
-        /* eslint-disable-next-line testing-library/no-node-access */
+
         const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
         await user.click(removeOrange);
 
@@ -187,7 +186,6 @@ describe('Collection', () => {
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
 
             const items = screen.getAllByTestId('item');
-            // eslint-disable-next-line jest-dom/prefer-in-document
             expect(items).toHaveLength(1);
             expect(items[0]).toHaveTextContent('banana');
         });
@@ -207,7 +205,7 @@ describe('Collection', () => {
 
             render(<Fixture />);
             await screen.findAllByRole('button', {name: /remove/i});
-            /* eslint-disable-next-line testing-library/no-node-access */
+
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
@@ -234,7 +232,7 @@ describe('Collection', () => {
             render(<Fixture />);
 
             await screen.findAllByRole('button', {name: /remove/i});
-            /* eslint-disable-next-line testing-library/no-node-access */
+
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
@@ -295,7 +293,7 @@ describe('Collection', () => {
                 render(<Fixture />);
 
                 await screen.findAllByRole('button', {name: /remove/i});
-                /* eslint-disable-next-line testing-library/no-node-access */
+
                 const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
                 expect(removeButtons).toHaveLength(2);
 

package/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx

@@ -7,7 +7,7 @@ import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
 
-interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
+interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
     defaultValue?: DateRangePickerValue;
     /** Value for controlled input */
@@ -35,7 +35,7 @@ interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangeP
     >;
 }
 
-export const DateRangePickerPopoverCalendar = <T extends unknown>({
+export const DateRangePickerPopoverCalendar = ({
     presets,
     value,
     defaultValue,
@@ -43,7 +43,7 @@ export const DateRangePickerPopoverCalendar = <T extends unknown>({
     startProps,
     endProps,
     rangeCalendarProps,
-}: DateRangePickerPopoverCalendarProps<T>) => {
+}: DateRangePickerPopoverCalendarProps) => {
     const [opened, setOpened] = useState(false);
     const ref = useClickOutside(() => setOpened(false));
 

package/src/components/date-range-picker/DateRangePickerPresetSelect.tsx

@@ -8,25 +8,25 @@ export interface DateRangePickerPreset {
     range: DateRangePickerValue;
 }
 
-interface DateRangePickerPresetsSelectProps<T> {
+interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
     value: DateRangePickerValue;
     onChange?(value: DateRangePickerValue): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 
-export const DateRangePickerPresetSelect = <T extends unknown>({
+export const DateRangePickerPresetSelect = ({
     presets,
     value,
     onChange,
     selectProps = {},
-}: DateRangePickerPresetsSelectProps<T>) => {
+}: DateRangePickerPresetsSelectProps) => {
     const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));
 
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             const selected = Object.entries(presets).find(
-                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),
+                ([, {range}]) => dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]),
             );
             if (selected) {
                 return selected[0];

package/src/components/header/Header.module.css

@@ -3,6 +3,7 @@
         padding: var(--mantine-spacing-xl);
         padding-bottom: var(--mantine-spacing-lg);
     }
+
     & .description {
         color: var(--mantine-color-gray-6);
         font-weight: 300;
@@ -11,9 +12,11 @@
 
 .title {
     word-break: break-word;
+
     &[data-variant='primary'] {
         color: var(--mantine-color-gray-5);
     }
+
     line-height: var(--mantine-line-height-md);
 }
 

package/src/components/sticky-footer/StickyFooter.module.css

@@ -8,10 +8,8 @@
     &[data-variant='modal-footer'] {
         border-top: 1px solid var(--mantine-color-gray-3);
         padding-bottom: 0;
-        margin-top: var(--mb-padding);
-        margin-bottom: calc(var(--mantine-spacing-md) - var(--mb-padding));
-        margin-left: calc(-1 * var(--mb-padding));
-        margin-right: calc(-1 * var(--mb-padding));
+        margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
+            calc(-1 * var(--mb-padding));
     }
 }
 

package/src/components/table/Table.module.css

@@ -23,6 +23,7 @@
 .actionsDropdown {
     text-align: left;
 }
+
 .actionsGroup {
     &:has(.actionsGroupItems:empty) {
         /* Hide empty groups */
@@ -34,6 +35,7 @@
 .filterWrapper {
     width: 20rem;
 }
+
 .filterEmpty {
     color: var(--mantine-color-gray-5);
 }
@@ -85,6 +87,7 @@
 .lastUpdatedRoot {
     min-height: 98px;
 }
+
 .lastUpdatedLabel {
     color: var(--mantine-color-gray-6);
 }

package/src/components/table/Table.tsx

@@ -150,7 +150,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         manualPagination: options?.getPaginationRowModel === undefined,
         enableMultiRowSelection: !!store.multiRowSelectionEnabled,
         getRowId,
-        getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row) ?? false,
+        getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),
         enableRowSelection: !loading,
         defaultColumn: {
             size: undefined,
@@ -247,7 +247,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
                         <>
                             <Box component="table" {...getStyles('table')} mod={{loading}}>
                                 <thead {...getStyles('header')}>
-                                    {!!header ? (
+                                    {header ? (
                                         <tr>
                                             <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
                                                 {header}

package/src/components/table/Table.types.ts

@@ -8,7 +8,7 @@ import {TableStore} from './use-table';
 
 export type TableLayoutProps<TData = unknown> = Pick<
     TableProps<TData>,
-    'getRowExpandedContent' | 'getRowAttributes' | 'loading'
+    'getRowExpandedContent' | 'getRowAttributes' | 'getRowActions' | 'loading'
 > &
     TableProps<TData>['layoutProps'];
 
@@ -90,7 +90,7 @@ export interface TableProps<TData> extends BoxProps, StylesApiProps<PlasmaTableF
          * @returns
          */
         onRowDoubleClick?: (selectedRow: TData, index: number, row: Row<TData>) => void;
-    } & Record<string, any>;
+    } & Record<string, unknown>;
     /**
      * Whether the table is loading or not
      *

package/src/components/table/__tests__/Table.spec.tsx

@@ -319,7 +319,7 @@ describe('Table', () => {
             expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
         });
 
-        it('does not display number of selected rows if disableRowSelection is true', async () => {
+        it('does not display number of selected rows if disableRowSelection is true', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({
                     enableMultiRowSelection: true,

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -10,7 +10,7 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.DateRangePicker', () => {
-    it('displays the initial dates', async () => {
+    it('displays the initial dates', () => {
         const Fixture = () => {
             const store = useTable<RowData>({initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}});
             return (
@@ -23,6 +23,6 @@ describe('Table.DateRangePicker', () => {
         };
         render(<Fixture />);
 
-        expect(screen.getByRole('button', {name: /jan 01, 2022 \- jan 07, 2022/i})).toBeVisible();
+        expect(screen.getByRole('button', {name: /jan 01, 2022 - jan 07, 2022/i})).toBeVisible();
     });
 });

package/src/components/table/__tests__/TableLastUpdated.spec.tsx

@@ -34,7 +34,7 @@ describe('Table.LastUpdated', () => {
         expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
     });
 
-    it('displays the label and time', () => {
+    it('displays the custom label and time', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
             return (

package/src/components/table/__tests__/Th.spec.tsx

@@ -16,7 +16,7 @@ const columns: Array<ColumnDef<RowData>> = [
 ];
 
 describe('Th', () => {
-    it('displays the sort icon for every sortable column', async () => {
+    it('displays the sort icon for every sortable column', () => {
         const data: RowData[] = [
             {name: 'apple', type: 'fruit', colors: ['red', 'green']},
             {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -219,7 +219,7 @@ describe('RowLayout', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
             return (
-                <Table
+                <Table<RowData>
                     store={store}
                     getRowId={({id}) => id}
                     data={data}
@@ -398,11 +398,9 @@ describe('RowLayout', () => {
             expect(onClick).not.toHaveBeenCalled();
 
             const rows = screen.getAllByRole('row');
-            rows.forEach(async (row) => {
-                await user.click(within(row).getByRole('checkbox', {name: /select/i}));
+            await user.click(within(rows[0]).getByRole('checkbox', {name: /select/i}));
 
-                expect(onClick).not.toHaveBeenCalled();
-            });
+            expect(onClick).not.toHaveBeenCalled();
         });
     });
 

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -10,6 +10,7 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         & + svg {
             color: var(--mantine-color-gray-5);
         }
@@ -18,9 +19,11 @@
 
 .row {
     overflow-wrap: anywhere;
+
     & td:first-of-type {
         padding-left: 40px;
     }
+
     @mixin hover {
         background-color: var(--mantine-color-gray-1);
     }
@@ -30,14 +33,17 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         &:checked + svg {
             color: var(--mantine-color-gray-5);
         }
     }
+
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
             background-color: var(--mantine-color-gray-1);
         }
+
         &[data-multi-selection='true'] {
             background-color: transparent;
         }
@@ -51,7 +57,8 @@
 
 .cell {
     vertical-align: middle;
-    /* We must use height instead of minHeight here, otherwise it doesn’t apply*/
+
+    /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     border-bottom: rem(1) solid var(--mantine-color-gray-3);

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -19,7 +19,7 @@ export type RowLayoutFactory = Factory<{
 }>;
 const defaultProps: Partial<RowLayoutProps> = {};
 
-export const RowLayout = factory<RowLayoutFactory>((props, ref) => {
+export const RowLayout = factory<RowLayoutFactory>((props) => {
     const {children, styles, classNames, unstyled} = useProps('PlasmaRowLayout', defaultProps, props);
     const getStyles = useStyles<RowLayoutFactory>({
         name: 'PlasmaRowLayout',

package/src/components/table/layouts/row-layout/RowLayoutBody.tsx

@@ -94,7 +94,7 @@ export const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: Forwarde
                                 data-testid={cell.id}
                                 className={ctx.getStyles('cell', {classNames, styles}).className}
                                 style={{
-                                    width: `${columnSizing.size}px` ?? 'auto',
+                                    width: columnSizing.size ? `${columnSizing.size}px` : 'auto',
                                     minWidth: `${columnSizing.minSize}px`,
                                     maxWidth: `${columnSizing.maxSize}px`,
                                     ...ctx.getStyles('cell', {classNames, styles}).style,

package/src/components/table/table-columns-selector/TableColumnsSelector.tsx

@@ -111,9 +111,10 @@ export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props,
         >
             <Popover withinPortal position="bottom" shadow="md">
                 <Popover.Target>
-                    <Button variant={buttonVariant}>{`${label}${
-                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''
-                    }`}</Button>
+                    <Button variant={buttonVariant}>
+                        {label}
+                        {showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''}
+                    </Button>
                 </Popover.Target>
                 <Popover.Dropdown miw={240}>
                     <ScrollArea.Autosize mah={154}>

package/src/components/table/use-table.ts

@@ -1,7 +1,7 @@
 import {useDidUpdate} from '@mantine/hooks';
-import {type PaginationState, type SortingState, type ExpandedState} from '@tanstack/table-core';
+import {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {useCallback, useMemo, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';
 import {type DateRangePickerValue} from '../date-range-picker';
 
 // Create a deeply optional version of another type
@@ -85,43 +85,43 @@ export interface TableStore<TData = unknown> {
     /**
      * Allows to change the pagination state.
      */
-    setPagination: React.Dispatch<React.SetStateAction<TableState<TData>['pagination']>>;
+    setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;
     /**
      * Allows to change the total number of entries.
      */
-    setTotalEntries: React.Dispatch<React.SetStateAction<TableState<TData>['totalEntries']>>;
+    setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;
     /**
      * Allows to change the sorting state.
      */
-    setSorting: React.Dispatch<React.SetStateAction<TableState<TData>['sorting']>>;
+    setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;
     /**
      * Allows to change the global filter value.
      */
-    setGlobalFilter: React.Dispatch<React.SetStateAction<TableState<TData>['globalFilter']>>;
+    setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;
     /**
      * Allows to change the rows expanded state.
      */
-    setExpanded: React.Dispatch<React.SetStateAction<TableState<TData>['expanded']>>;
+    setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;
     /**
      * Allows to change the predicates values.
      */
-    setPredicates: React.Dispatch<React.SetStateAction<TableState<TData>['predicates']>>;
+    setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;
     /**
      * Allows to change the selected layout.
      */
-    setLayout: React.Dispatch<React.SetStateAction<TableState<TData>['layout']>>;
+    setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;
     /**
      * Allows to change the selected date range.
      */
-    setDateRange: React.Dispatch<React.SetStateAction<TableState<TData>['dateRange']>>;
+    setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;
     /**
      * Allows to change the current row selection.
      */
-    setRowSelection: React.Dispatch<React.SetStateAction<TableState<TData>['rowSelection']>>;
+    setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;
     /**
      * Allows to change the visible columns.
      */
-    setColumnVisibility: React.Dispatch<React.SetStateAction<TableState<TData>['columnVisibility']>>;
+    setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;
     /**
      * Whether the table is currently filtered.
      */
@@ -210,19 +210,17 @@ const defaultState: Partial<TableState> = {
 };
 
 export const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {
-    const options: UseTableOptions<TData> = defaultsDeep({}, userOptions, defaultOptions);
-    const initialState: TableState<TData> = defaultsDeep({}, options.initialState, defaultState);
+    const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;
+    const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;
 
-    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(
-        initialState.pagination as PaginationState,
-    );
+    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(initialState.pagination);
     const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);
     const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(
         initialState.totalEntries,
     );
-    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting as SortingState);
+    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting);
     const [globalFilter, setGlobalFilter] = useState<TableState<TData>['globalFilter']>(initialState.globalFilter);
-    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded as ExpandedState);
+    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);
     const [predicates, setPredicates] = useState<TableState<TData>['predicates']>(initialState.predicates);
     const [layout, setLayout] = useState<TableState<TData>['layout']>(initialState.layout);
     const [dateRange, setDateRange] = useState<TableState<TData>['dateRange']>(initialState.dateRange);

package/src/hooks/useParentHeight.ts

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {MutableRefObject, useEffect, useRef, useState} from 'react';
 
 const getElementInnerHeight = (el: HTMLElement): number => {
     const fullHeight = el.getBoundingClientRect().height;
@@ -11,7 +11,7 @@ const getElementInnerHeight = (el: HTMLElement): number => {
 /**
  * Computes the available height of the parent element on mount
  */
-export const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {
+export const useParentHeight = (): [number, MutableRefObject<HTMLDivElement>] => {
     const [height, setHeight] = useState(-1);
     const ref = useRef<HTMLDivElement>();
 

package/src/index.ts

@@ -1,7 +1,6 @@
-import {MantineColorsTuple} from '@mantine/core';
-
-import {noop} from '@mantine/core';
-import {PlasmaColors} from './theme/PlasmaColors';
+import {MantineColorsTuple, noop} from '@mantine/core';
+import {type RowData} from '@tanstack/table-core';
+import {type PlasmaColors} from './theme/PlasmaColors';
 
 export * from '@mantine/carousel';
 export * from '@mantine/core';
@@ -36,13 +35,12 @@ export * from './theme';
 
 declare module '@mantine/core' {
     export interface MantineThemeColorsOverride {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;
     }
 }
 
 declare module '@tanstack/react-table' {
-    interface ColumnMeta<TData extends unknown, TValue> {
+    interface ColumnMeta<TData extends RowData, TValue> {
         /**
          * Whether the column is a control column.
          * Control columns are columns that are not part of the data but are used to control the table.

package/src/styles/Alert.module.css

@@ -1,5 +1,6 @@
 .root {
     padding: var(--mantine-spacing-sm);
+
     &:not(&[data-variant]) {
         border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
     }
@@ -22,6 +23,7 @@
 .message {
     @mixin light {
         color: var(--mantine-color-gray-7);
+
         &:where([data-variant='filled']) {
             color: var(--alert-color);
         }

package/src/styles/Checkbox.module.css

@@ -7,6 +7,7 @@
     &[data-indeterminate] {
         background-color: var(--mantine-color-pureWhite);
         border-color: var(--mantine-color-gray-4);
+
         & + svg {
             color: var(--mantine-color-gray-6);
         }

package/src/styles/Combobox.module.css

@@ -4,6 +4,7 @@
     border: 1px solid;
     width: 100%;
     border-color: var(--mantine-color-gray-4);
+
     &:focus {
         border-color: var(--mantine-primary-color-filled);
     }

package/src/styles/Modal.module.css

@@ -4,31 +4,37 @@
             flex: 0 0 100%;
         }
     }
+
     &[data-size='xs'] {
         .content {
             flex: 0 0 rem(432px);
         }
     }
+
     &[data-size='sm'] {
         .content {
             flex: 0 0 rem(664px);
         }
     }
+
     &[data-size='md'] {
         .content {
             flex: 0 0 rem(896px);
         }
     }
+
     &[data-size='lg'] {
         .content {
             flex: 0 0 rem(1120px);
         }
     }
+
     &[data-size='xl'] {
         .content {
             flex: 0 0 rem(88%);
         }
     }
+
     &:not([data-size]) {
         .content {
             flex: 0 0 rem(896px);

package/src/styles/NavLink.module.css

@@ -1,7 +1,7 @@
 .root {
     color: var(--mantine-color-gray-6);
     line-height: var(--mantine-line-height);
-    border-radius: var(--mantine-radius-default) 0px 0px var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
 
     &[data-active] {
         color: var(--mantine-primary-color-6);

package/src/styles/Notification.module.css

@@ -3,6 +3,7 @@
     background-color: var(--mantine-color-gray-0);
     box-shadow: var(--mantine-shadow-lg);
     padding: var(--mantine-spacing-sm);
+
     &[data-with-icon] {
         padding-left: var(--mantine-spacing-sm);
     }

package/src/styles/Pagination.module.css

@@ -1,5 +1,6 @@
 .root {
     --pagination-control-fz: var(--mantine-font-size-sm);
+
     color: var(--mantine-color-gray-6);
 }
 
@@ -8,6 +9,7 @@
 
     @mixin light {
         border-color: var(--mantine-color-gray-3);
+
         @mixin hover {
             &:where(:not(:disabled, [data-disabled])) {
                 background-color: var(--mantine-primary-color-1);
@@ -19,6 +21,7 @@
         @mixin light {
             border-color: var(--pagination-active-bg);
             color: var(--pagination-active-color, var(--mantine-color-white));
+
             @mixin hover {
                 background-color: var(--pagination-active-bg);
             }