@coveord/plasma-mantine 56.1.2 → 56.1.3

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

@@ -3,10 +3,10 @@ import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeVa
 import {useForm} from '@mantine/form';
 
 import dayjs from 'dayjs';
-import {Button} from '../button';
+import {Button} from '../button/index.js';
 import DateRangeClasses from './DateRange.module.css';
-import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
-import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
+import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';
 export interface DateRangePickerInlineCalendarProps
     extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /**

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

@@ -4,8 +4,8 @@ import {useClickOutside, useUncontrolled} from '@mantine/hooks';
 import {useState} from 'react';
 
 import dayjs from 'dayjs';
-import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
-import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
+import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';
 
 interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen, userEvent} from '@test-utils';
 
-import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
+import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar.js';
 
 const endOfDay = (year: number, month: number, day: number): Date => new Date(year, month, day, 23, 59, 59, 999);
 

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

@@ -1,8 +1,8 @@
 import {useForm} from '@mantine/form';
 import {render, screen, userEvent, waitFor} from '@test-utils';
-import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
+import {DateRangePickerValue} from '../DateRangePickerInlineCalendar.js';
 
-import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar';
+import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar.js';
 
 describe('DateRangePickerPopoverCalendar', () => {
     it('does not render the preset searchbox when there is no presets', () => {

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

@@ -1,6 +1,6 @@
 import {render, screen, userEvent} from '@test-utils';
 
-import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect';
+import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect.js';
 
 describe('DateRangePickerPresetSelect', () => {
     it('calls onChange when selecting a preset', async () => {

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -2,7 +2,7 @@ import {render, screen, userEvent} from '@test-utils';
 import {useState} from 'react';
 
 import {type DatesRangeValue, type DateStringValue} from '@mantine/dates';
-import {EditableDateRangePicker} from '../EditableDateRangePicker';
+import {EditableDateRangePicker} from '../EditableDateRangePicker.js';
 
 describe('EditableDateRangePicker', () => {
     it('renders an input for the start and an input for the end', () => {

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

@@ -1,3 +1,3 @@
-export * from './DateRangePickerInlineCalendar';
-export * from './DateRangePickerPopoverCalendar';
-export * from './DateRangePickerPresetSelect';
+export * from './DateRangePickerInlineCalendar.js';
+export * from './DateRangePickerPopoverCalendar.js';
+export * from './DateRangePickerPresetSelect.js';

package/src/components/date-time-range-picker/DateTimeRangePicker.tsx

@@ -2,8 +2,8 @@ import {Group} from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 
 import {DatesRangeValue, DateStringValue} from '@mantine/dates';
-import {DateRangePickerPreset, DateRangePickerPresetSelect} from '../date-range-picker/DateRangePickerPresetSelect';
-import {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from '../date-range-picker/DateRangePickerPresetSelect.js';
+import {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker.js';
 
 interface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */

package/src/components/date-time-range-picker/__tests__/DateTimeRangePicker.spec.tsx

@@ -2,7 +2,7 @@ import {useForm} from '@mantine/form';
 import {render, screen, userEvent} from '@test-utils';
 
 import {DatesRangeValue, DateStringValue} from '@mantine/dates';
-import {DateTimeRangePicker} from '../DateTimeRangePicker';
+import {DateTimeRangePicker} from '../DateTimeRangePicker.js';
 
 describe('DateTimeRangePicker', () => {
     it('does not render the preset textbox when there is no presets', () => {

package/src/components/date-time-range-picker/index.ts

@@ -1 +1 @@
-export * from './DateTimeRangePicker';
+export * from './DateTimeRangePicker.js';

package/src/components/ellipsis-text/index.ts

@@ -1 +1 @@
-export * from './EllipsisText';
+export * from './EllipsisText.js';

package/src/components/header/Header.context.ts

@@ -1,5 +1,5 @@
 import {GetStylesApi, createSafeContext} from '@mantine/core';
-import type {HeaderFactory} from './Header';
+import type {HeaderFactory} from './Header.js';
 
 export interface HeaderContextValue {
     getStyles: GetStylesApi<HeaderFactory>;

package/src/components/header/Header.tsx

@@ -17,15 +17,15 @@ import classes from './Header.module.css';
 import {
     HeaderBreadcrumbAnchor,
     type HeaderBreadcrumbAnchorStyleNames,
-} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor';
-import {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-import {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText';
-import {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';
-import {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight';
+} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor.js';
+import {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';
+import {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText.js';
+import {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor.js';
+import {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight.js';
 
-export type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
-export type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';
-export type {HeaderRightProps} from './HeaderRight/HeaderRight';
+export type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';
+export type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor.js';
+export type {HeaderRightProps} from './HeaderRight/HeaderRight.js';
 
 export type HeaderVariant = 'primary' | 'secondary';
 export type HeaderStyleNames =

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mantine/core';
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context';
-import {InfoToken} from '../../info-token';
+import {InfoToken} from '../../info-token/index.js';
 
 export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 

package/src/components/header/__tests__/Header.spec.tsx

@@ -1,7 +1,7 @@
 import {Anchor} from '@mantine/core';
 import {render, screen, within} from '@test-utils';
 
-import {Header} from '../Header';
+import {Header} from '../Header.js';
 
 describe('Header', () => {
     it('renders a heading of level 1 with the specified children within', () => {

package/src/components/header/index.ts

@@ -1 +1 @@
-export * from './Header';
+export * from './Header.js';

package/src/components/index.ts

@@ -1,27 +1,27 @@
-export * from './accordion';
-export * from './action-icon';
-export * from './alert';
-export * from './badge';
-export * from './blank-slate';
-export * from './browser-preview';
-export * from './button';
-export * from './checkbox';
-export * from './child-form';
-export * from './chip';
-export * from './code-editor';
-export * from './collection';
-export * from './copyToClipboard';
-export * from './date-range-picker';
-export * from './date-time-range-picker';
-export * from './ellipsis-text';
-export * from './header';
-export * from './info-token';
-export * from './inline-confirm';
-export * from './last-updated';
-export * from './loader';
-export * from './menu';
-export * from './modal';
-export * from './prompt';
-export * from './read-only';
-export * from './sticky-footer';
-export * from './table';
+export * from './accordion/index.js';
+export * from './action-icon/index.js';
+export * from './alert/index.js';
+export * from './badge/index.js';
+export * from './blank-slate/index.js';
+export * from './browser-preview/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './child-form/index.js';
+export * from './chip/index.js';
+export * from './code-editor/index.js';
+export * from './collection/index.js';
+export * from './copyToClipboard/index.js';
+export * from './date-range-picker/index.js';
+export * from './date-time-range-picker/index.js';
+export * from './ellipsis-text/index.js';
+export * from './header/index.js';
+export * from './info-token/index.js';
+export * from './inline-confirm/index.js';
+export * from './last-updated/index.js';
+export * from './loader/index.js';
+export * from './menu/index.js';
+export * from './modal/index.js';
+export * from './prompt/index.js';
+export * from './read-only/index.js';
+export * from './sticky-footer/index.js';
+export * from './table/index.js';

package/src/components/info-token/index.ts

@@ -1 +1 @@
-export * from './InfoToken';
+export * from './InfoToken.js';

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -1,9 +1,9 @@
 import {Factory, MantineComponent, StylesApiProps, useProps} from '@mantine/core';
 import {Children, ReactElement, ReactNode, useState} from 'react';
-import {InlineConfirmProvider} from './InlineConfirmContext';
-import {InlineConfirmPrompt} from './InlineConfirmPrompt';
+import {InlineConfirmProvider} from './InlineConfirmContext.js';
+import {InlineConfirmPrompt} from './InlineConfirmPrompt.js';
 
-import {InlineConfirmTarget} from './InlineConfirmTarget';
+import {InlineConfirmTarget} from './InlineConfirmTarget.js';
 
 /**
  * Direct children of InlineConfirm that wraps an InlineConfirm.Prompt need this prop

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -1,9 +1,9 @@
 import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';
 import {cloneElement, ReactElement, ReactNode, useEffect} from 'react';
-import {Button} from '../button/Button';
-import {InlineConfirmComponentsProps} from './InlineConfirm';
+import {Button} from '../button/Button.js';
+import {InlineConfirmComponentsProps} from './InlineConfirm.js';
 
-import {useInlineConfirm} from './InlineConfirmContext';
+import {useInlineConfirm} from './InlineConfirmContext.js';
 
 interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineConfirmComponentsProps {
     /**

package/src/components/inline-confirm/InlineConfirmTarget.tsx

@@ -1,8 +1,8 @@
 import {createPolymorphicComponent} from '@mantine/core';
 import {forwardRef, MouseEventHandler} from 'react';
-import {Button, ButtonProps} from '../button';
-import {InlineConfirmComponentsProps} from './InlineConfirm';
-import {useInlineConfirm} from './InlineConfirmContext';
+import {Button, ButtonProps} from '../button/index.js';
+import {InlineConfirmComponentsProps} from './InlineConfirm.js';
+import {useInlineConfirm} from './InlineConfirmContext.js';
 
 export interface InlineConfirmTargetProps extends ButtonProps, InlineConfirmComponentsProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -1,7 +1,7 @@
 import {Button, Menu} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
-import {InlineConfirm, InlineConfirmComponentsProps} from '../InlineConfirm';
+import {InlineConfirm, InlineConfirmComponentsProps} from '../InlineConfirm.js';
 
 describe('InlineConfirm', () => {
     it('renders its children', () => {

package/src/components/inline-confirm/index.ts

@@ -1,2 +1,2 @@
-export * from './InlineConfirm';
-export * from './InlineConfirmContext';
+export * from './InlineConfirm.js';
+export * from './InlineConfirmContext.js';

package/src/components/last-updated/__tests__/LastUpdated.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@test-utils';
 import dayjs from 'dayjs';
-import {LastUpdated} from '../LastUpdated';
+import {LastUpdated} from '../LastUpdated.js';
 
 describe('LastUpdated', () => {
     it('renders with default label, time and formatter', () => {

package/src/components/last-updated/index.ts

@@ -1 +1 @@
-export * from './LastUpdated';
+export * from './LastUpdated.js';

package/src/components/loader/index.ts

@@ -1 +1 @@
-export * from './CircleLoader';
+export * from './CircleLoader.js';

package/src/components/menu/Menu.tsx

@@ -1,9 +1,9 @@
 import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';
 import {forwardRef} from 'react';
 
-import {createPolymorphicComponent, overrideComponent} from '../../utils';
-import {ButtonWithDisabledTooltipProps} from '../button';
-import {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip';
+import {createPolymorphicComponent, overrideComponent} from '../../utils/index.js';
+import {ButtonWithDisabledTooltipProps} from '../button/index.js';
+import {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip.js';
 
 export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
 

package/src/components/menu/__tests__/Menu.spec.tsx

@@ -1,5 +1,5 @@
-import {render, screen} from '../../../__tests__/Utils';
-import {Menu} from '../Menu';
+import {render, screen} from '../../../__tests__/Utils.js';
+import {Menu} from '../Menu.js';
 
 describe('Menu', () => {
     it('prevents navigating to the specified link when disabled', async () => {

package/src/components/menu/index.ts

@@ -1 +1 @@
-export * from './Menu';
+export * from './Menu.js';

package/src/components/modal/Modal.tsx

@@ -4,8 +4,8 @@ import {
     ModalFactory as MantineModalFactory,
     ModalProps as MantineModalProps,
 } from '@mantine/core';
-import {Header, HeaderDocAnchorProps, HeaderProps} from '../header';
-import {ModalFooter as PlasmaModalFooter} from './ModalFooter';
+import {Header, HeaderDocAnchorProps, HeaderProps} from '../header/index.js';
+import {ModalFooter as PlasmaModalFooter} from './ModalFooter.js';
 
 interface PlasmaModalProps extends MantineModalProps {
     /**

package/src/components/modal/ModalFooter.tsx

@@ -1,6 +1,6 @@
 import {useRef, useEffect} from 'react';
 import {Factory, factory} from '@mantine/core';
-import {StickyFooter, StickyFooterProps, StickyFooterStylesNames} from '../sticky-footer';
+import {StickyFooter, StickyFooterProps, StickyFooterStylesNames} from '../sticky-footer/index.js';
 import classes from './ModalFooter.module.css';
 
 export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {}

package/src/components/modal/__tests__/Modal.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@test-utils';
 
-import {Modal} from '../Modal';
+import {Modal} from '../Modal.js';
 
 // Since most part of the modal component directly inherits @mantine/core, many tests are likely covered by Mantine, so we only add tests about our customizations
 describe('Modal', () => {

package/src/components/modal/__tests__/ModalFooter.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@test-utils';
 
-import {Modal} from '../Modal';
+import {Modal} from '../Modal.js';
 
 describe('ModalFooter', () => {
     it('renders children', () => {

package/src/components/modal/index.ts

@@ -1,2 +1,2 @@
-export * from './Modal';
-export * from './ModalFooter';
+export * from './Modal.js';
+export * from './ModalFooter.js';

package/src/components/prompt/Prompt.context.ts

@@ -1,5 +1,5 @@
 import {createSafeContext, GetStylesApi} from '@mantine/core';
-import {PromptFactory, PromptVariant} from './Prompt';
+import {PromptFactory, PromptVariant} from './Prompt.js';
 
 interface PromptContext {
     variant: PromptVariant;

package/src/components/prompt/Prompt.tsx

@@ -10,15 +10,15 @@ import {
     useStyles,
 } from '@mantine/core';
 import {Children, ComponentType, ReactElement, ReactNode} from 'react';
-import {Modal} from '../modal';
+import {Modal} from '../modal/index.js';
 import {PromptContextProvider} from './Prompt.context';
 import classes from './Prompt.module.css';
-import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton';
-import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './PromptConfirmButton';
-import CriticalIcon from './icons/CriticalIcon';
-import InfoIcon from './icons/InfoIcon';
-import SuccessIcon from './icons/SuccessIcon';
-import WarningIcon from './icons/WarningIcon';
+import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton.js';
+import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './PromptConfirmButton.js';
+import CriticalIcon from './icons/CriticalIcon.js';
+import InfoIcon from './icons/InfoIcon.js';
+import SuccessIcon from './icons/SuccessIcon.js';
+import WarningIcon from './icons/WarningIcon.js';
 
 export type PromptVariant = 'success' | 'warning' | 'critical' | 'info';
 export type PromptVars = {root: '--prompt-icon-size'};

package/src/components/prompt/PromptCancelButton.tsx

@@ -1,5 +1,5 @@
 import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
-import {Button, ButtonProps} from '../button/Button';
+import {Button, ButtonProps} from '../button/Button.js';
 import {usePromptContext} from './Prompt.context';
 
 export type PromptCancelButtonStylesNamesVariant = 'cancel';

package/src/components/prompt/PromptConfirmButton.tsx

@@ -1,7 +1,7 @@
 import {CompoundStylesApiProps, factory, Factory, PolymorphicComponentProps, useProps} from '@mantine/core';
 import {JSXElementConstructor, ReactElement} from 'react';
-import {Button, ButtonProps} from '../button/Button';
-import {PromptVariant} from './Prompt';
+import {Button, ButtonProps} from '../button/Button.js';
+import {PromptVariant} from './Prompt.js';
 import {usePromptContext} from './Prompt.context';
 
 export type PromptConfirmButtonStylesNamesVariant = 'confirm';

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -1,5 +1,5 @@
 import {render, screen} from '@test-utils';
-import {Prompt, PromptVariant} from '../Prompt';
+import {Prompt, PromptVariant} from '../Prompt.js';
 
 describe('Prompt', () => {
     it('displays the title, body and close button', () => {

package/src/components/prompt/index.ts

@@ -1 +1 @@
-export * from './Prompt';
+export * from './Prompt.js';

package/src/components/read-only/PasswordInput.tsx

@@ -1,5 +1,5 @@
 import {factory, PasswordInput as MantinePasswordInput, type PasswordInputFactory} from '@mantine/core';
-import {readOnlyInputStyles} from './ReadOnlyInputStyles';
+import {readOnlyInputStyles} from './ReadOnlyInputStyles.js';
 
 const ReadOnlyPasswordInput = MantinePasswordInput.withProps({styles: readOnlyInputStyles});
 

package/src/components/read-only/Select.tsx

@@ -1,5 +1,5 @@
 import {factory, Select as MantineSelect, SelectFactory} from '@mantine/core';
-import {readOnlyInputStyles} from './ReadOnlyInputStyles';
+import {readOnlyInputStyles} from './ReadOnlyInputStyles.js';
 
 const ReadOnlySelect = MantineSelect.withProps({styles: readOnlyInputStyles});
 

package/src/components/read-only/index.ts

@@ -1,2 +1,2 @@
-export * from './PasswordInput';
-export * from './Select';
+export * from './PasswordInput.js';
+export * from './Select.js';

package/src/components/sticky-footer/__tests__/StickyFooter.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen} from '@test-utils';
 
-import {StickyFooter} from '../StickyFooter';
+import {StickyFooter} from '../StickyFooter.js';
 
 describe('StickyFooter', () => {
     it('renders children', () => {

package/src/components/sticky-footer/index.ts

@@ -1 +1 @@
-export * from './StickyFooter';
+export * from './StickyFooter.js';

package/src/components/table/Table.tsx

@@ -10,33 +10,33 @@ import {
 } from '@tanstack/react-table';
 import isEqual from 'fast-deep-equal';
 import {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../utils';
+import {CustomComponentThemeExtend, identity} from '../../utils/index.js';
 import classes from './Table.module.css';
 import {TableLayout, TableProps} from './Table.types';
-import {TableProvider} from './TableContext';
-import {TableLayouts} from './layouts/TableLayouts';
-import {TableActionItem, TableActionItemStylesNames, TableHeaderActionsStylesNames} from './table-actions';
-import {TableActionsListStylesNames} from './table-actions/TableActionsList';
-import {TableActionsColumn} from './table-column/TableActionsColumn';
+import {TableProvider} from './TableContext.js';
+import {TableLayouts} from './layouts/TableLayouts.js';
+import {TableActionItem, TableActionItemStylesNames, TableHeaderActionsStylesNames} from './table-actions/index.js';
+import {TableActionsListStylesNames} from './table-actions/TableActionsList.js';
+import {TableActionsColumn} from './table-column/TableActionsColumn.js';
 import {
     TableAccordionColumn,
     TableCollapsibleColumn,
     TableCollapsibleColumnStylesNames,
-} from './table-column/TableCollapsibleColumn';
-import {TableSelectableColumn} from './table-column/TableSelectableColumn';
-import {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector';
-import {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker';
-import {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter';
-import {TableFooter} from './table-footer/TableFooter';
-import {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader';
-import {TableThStylesNames} from './table-header/Th';
-import {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated';
-import {TableLoading} from './table-loading/TableLoading';
-import {TableNoData} from './table-no-data/TableNoData';
-import {TablePagination} from './table-pagination/TablePagination';
-import {TablePerPage} from './table-per-page/TablePerPage';
-import {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate';
-import {TableState} from './use-table';
+} from './table-column/TableCollapsibleColumn.js';
+import {TableSelectableColumn} from './table-column/TableSelectableColumn.js';
+import {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector.js';
+import {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker.js';
+import {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter.js';
+import {TableFooter} from './table-footer/TableFooter.js';
+import {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader.js';
+import {TableThStylesNames} from './table-header/Th.js';
+import {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated.js';
+import {TableLoading} from './table-loading/TableLoading.js';
+import {TableNoData} from './table-no-data/TableNoData.js';
+import {TablePagination} from './table-pagination/TablePagination.js';
+import {TablePerPage} from './table-per-page/TablePerPage.js';
+import {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate.js';
+import {TableState} from './use-table.js';
 
 type TableStylesNames =
     | 'root'

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

@@ -3,8 +3,8 @@ import {BoxProps, StylesApiProps} from '@mantine/core';
 import {ColumnDef, CoreOptions, Row, TableOptions} from '@tanstack/table-core';
 import {ReactElement, ReactNode} from 'react';
 
-import {type PlasmaTableFactory} from './Table';
-import {TableStore} from './use-table';
+import {type PlasmaTableFactory} from './Table.js';
+import {TableStore} from './use-table.js';
 
 export type TableLayoutProps<TData = unknown> = Pick<
     TableProps<TData>,

package/src/components/table/TableContext.tsx

@@ -1,9 +1,9 @@
 import {createSafeContext, GetStylesApi} from '@mantine/core';
 import {Table} from '@tanstack/table-core';
 import {MutableRefObject, ReactElement} from 'react';
-import {type PlasmaTableFactory} from './Table';
+import {type PlasmaTableFactory} from './Table.js';
 import {TableAction, TableLayout} from './Table.types';
-import {TableStore} from './use-table';
+import {TableStore} from './use-table.js';
 
 export interface TableContextValue<TData = unknown> {
     getStyles: GetStylesApi<PlasmaTableFactory>;

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

@@ -2,9 +2,9 @@ import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, within} from '@test-utils';
 
 import {useState} from 'react';
-import {Table} from '../Table';
+import {Table} from '../Table.js';
 import {TableLayout} from '../Table.types';
-import {useTable} from '../use-table';
+import {useTable} from '../use-table.js';
 
 type RowData = {id: string; firstName: string; lastName?: string};
 

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

@@ -2,8 +2,8 @@ import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {useState} from 'react';
 
-import {Table} from '../Table';
-import {useTable} from '../use-table';
+import {Table} from '../Table.js';
+import {useTable} from '../use-table.js';
 
 type RowData = {name: string};
 const columnHelper = createColumnHelper<RowData>();

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

@@ -2,8 +2,8 @@ import {Box} from '@mantine/core';
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent} from '@test-utils';
 import {waitFor} from '@testing-library/react';
-import {Table} from '../Table';
-import {useTable} from '../use-table';
+import {Table} from '../Table.js';
+import {useTable} from '../use-table.js';
 
 const mockData = [
     {

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

@@ -1,9 +1,9 @@
 import {Box} from '@mantine/core';
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor, within} from '@test-utils';
-import {Table} from '../Table';
-import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector';
-import {useTable} from '../use-table';
+import {Table} from '../Table.js';
+import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector.js';
+import {useTable} from '../use-table.js';
 
 const mockData = [
     {