@arbor-education/design-system.components 0.19.0 → 0.20.0

package/src/components/table/TableSettingsContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
-import { TABLE_SPACING } from './tableConsts';
-import { type useTableSettings } from './useTableSettings';
+import { TABLE_SPACING } from './tableConsts.js';
+import { type useTableSettings } from './useTableSettings.js';
 
 export const TableSettingsContext = createContext<ReturnType<typeof useTableSettings>>({
   settings: {

package/src/components/table/cellColorStyles.ts

@@ -1,5 +1,5 @@
 import type { CellStyleFunc } from 'ag-grid-community';
-import type { TableSettings } from './useTableSettings';
+import type { TableSettings } from './useTableSettings.js';
 
 const SEMANTIC_COLORS = {
   DESTRUCTIVE: {

package/src/components/table/cellEditors/DateCellEditor.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
 import type { CustomCellEditorProps } from 'ag-grid-react';
-import { DateCellEditor } from './DateCellEditor';
+import { DateCellEditor } from './DateCellEditor.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellEditors/DateCellEditor.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
-import { DateCellEditor } from './DateCellEditor';
+import { DateCellEditor } from './DateCellEditor.js';
 import type { CustomCellEditorProps } from 'ag-grid-react';
 
 const createMockProps = (overrides: Partial<CustomCellEditorProps> = {}): CustomCellEditorProps => ({

package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { BooleanCellRenderer } from './BooleanCellRenderer';
+import { BooleanCellRenderer } from './BooleanCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/BooleanCellRenderer.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { BooleanCellRenderer } from './BooleanCellRenderer';
+import { BooleanCellRenderer } from './BooleanCellRenderer.js';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 
 const renderWithValue = (value: unknown) =>

package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { ButtonCellRenderer } from './ButtonCellRenderer';
+import { ButtonCellRenderer } from './ButtonCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { CheckboxCellRenderer } from './CheckboxCellRenderer';
+import { CheckboxCellRenderer } from './CheckboxCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/CheckboxCellRenderer.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import userEvent from '@testing-library/user-event';
-import { CheckboxCellRenderer } from './CheckboxCellRenderer';
+import { CheckboxCellRenderer } from './CheckboxCellRenderer.js';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 
 const createMockProps = (overrides: Partial<CustomCellRendererProps> = {}): CustomCellRendererProps => ({

package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom/vitest';
 import userEvent from '@testing-library/user-event';
 import type { SuppressKeyboardEventParams } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { ComboboxCellRenderer } from './ComboboxCellRenderer';
+import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
 import type { ComboboxOption, ComboboxProps } from 'Components/combobox/types';
 
 const options: ComboboxOption[] = [

package/src/components/table/cellRenderers/DefaultCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { DefaultCellRenderer } from './DefaultCellRenderer';
+import { DefaultCellRenderer } from './DefaultCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { InlineTextCellRenderer } from './InlineTextCellRenderer';
+import { InlineTextCellRenderer } from './InlineTextCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import type { GridApi } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { SelectDropdownCellRenderer } from './SelectDropdownCellRenderer';
+import { SelectDropdownCellRenderer } from './SelectDropdownCellRenderer.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import type { CustomCellRendererProps } from 'ag-grid-react';
 import type { GridApi } from 'ag-grid-community';
-import { SelectDropdownCellRenderer } from './SelectDropdownCellRenderer';
+import { SelectDropdownCellRenderer } from './SelectDropdownCellRenderer.js';
 
 const MOCK_API = {
   addEventListener: vi.fn(),

package/src/components/table/columnFilters/BooleanFilter/BooleanFilter.test.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter';
+import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter.js';
 import userEvent from '@testing-library/user-event';
 
 type BooleanFilterModel = { allowTrue: boolean; allowFalse: boolean };

package/src/components/table/columnFilters/BooleanFilter/BooleanFilter.tsx

@@ -2,7 +2,7 @@ import type { DoesFilterPassParams } from 'ag-grid-community';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
-import { PopupParentContext } from 'Utils/PopupParentContext';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 type BooleanFilterModel = { allowTrue: boolean; allowFalse: boolean };
 

package/src/components/table/columnFilters/BooleanFilter.stories.tsx

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter/BooleanFilter';
+import { BooleanFilter, doesBooleanFilterPass } from './BooleanFilter/BooleanFilter.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/columnFilters/TimeFilter/TimeFilter.test.tsx

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom/vitest';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { TimeFilter, doesTimeFilterPass } from './TimeFilter';
-import { FILTER_TYPES, type FilterType } from './utils/compareTimeByFilterType';
+import { TimeFilter, doesTimeFilterPass } from './TimeFilter.js';
+import { FILTER_TYPES, type FilterType } from './utils/compareTimeByFilterType.js';
 import userEvent from '@testing-library/user-event';
 
 const createTimeDate = (hours: number, minutes: number): Date => {

package/src/components/table/columnFilters/TimeFilter/TimeFilter.tsx

@@ -1,10 +1,10 @@
 import type { DoesFilterPassParams } from 'ag-grid-community';
 import { useEffect, useRef, useState } from 'react';
-import { compareTimeByFilterType, type FilterType, FILTER_TYPES } from './utils/compareTimeByFilterType';
-import { transformTimeStringToDate } from './utils/transformTimeStringToDate';
-import { FilterResetButton } from '../filterResetButton/FilterResetButton';
+import { compareTimeByFilterType, type FilterType, FILTER_TYPES } from './utils/compareTimeByFilterType.js';
+import { transformTimeStringToDate } from './utils/transformTimeStringToDate.js';
+import { FilterResetButton } from '../filterResetButton/FilterResetButton.js';
 import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
-import { PopupParentContext } from 'Utils/PopupParentContext';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 type TimeFilterModel = {
   filterType: FilterType;

package/src/components/table/columnFilters/TimeFilter/utils/compareTimeByFilterType.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { compareTimeByFilterType, FILTER_TYPES, type FilterType } from './compareTimeByFilterType';
+import { compareTimeByFilterType, FILTER_TYPES, type FilterType } from './compareTimeByFilterType.js';
 
 describe('compareTimeByFilterType', () => {
   const createDateWithTime = (hours: number, minutes: number): Date => {

package/src/components/table/columnFilters/TimeFilter/utils/transformTimeStringToDate.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { transformTimeStringToDate } from './transformTimeStringToDate';
+import { transformTimeStringToDate } from './transformTimeStringToDate.js';
 
 describe('transformTimeStringToDate', () => {
   describe('valid time strings', () => {

package/src/components/table/columnFilters/TimeFilter.stories.tsx

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { TimeFilter, doesTimeFilterPass } from './TimeFilter/TimeFilter';
+import { TimeFilter, doesTimeFilterPass } from './TimeFilter/TimeFilter.js';
 import { Table } from 'Components/table/Table';
 
 // ---------------------------------------------------------------------------

package/src/components/table/pagination/Pagination.test.tsx

@@ -4,11 +4,11 @@ import React from 'react';
 import '@testing-library/jest-dom/vitest';
 import userEvent from '@testing-library/user-event';
 import type { AgEvent, GridApi } from 'ag-grid-enterprise';
-import { PaginationControls } from './PaginationControls';
-import { RowCountInfo } from './RowCountInfo';
-import { PageSizeSelector } from './PageSizeSelector';
-import { PaginationPanel } from './PaginationPanel';
-import { GridApiContext } from '../GridApiContext';
+import { PaginationControls } from './PaginationControls.js';
+import { RowCountInfo } from './RowCountInfo.js';
+import { PageSizeSelector } from './PageSizeSelector.js';
+import { PaginationPanel } from './PaginationPanel.js';
+import { GridApiContext } from '../GridApiContext.js';
 
 describe('Table Pagination', () => {
   const createMockGridApi = (overrides?: Partial<GridApi>): Partial<GridApi> => {

package/src/components/table/pagination/PaginationPanel.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { PaginationPanel } from './PaginationPanel';
+import { PaginationPanel } from './PaginationPanel.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/table/pagination/PaginationPanel.tsx

@@ -1,6 +1,6 @@
-import { PageSizeSelector, type PageSizeSelectorProps } from './PageSizeSelector';
-import { RowCountInfo, type RowCountInfoProps } from './RowCountInfo';
-import { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+import { PageSizeSelector, type PageSizeSelectorProps } from './PageSizeSelector.js';
+import { RowCountInfo, type RowCountInfoProps } from './RowCountInfo.js';
+import { PaginationControls, type PaginationControlsProps } from './PaginationControls.js';
 import classNames from 'classnames';
 
 type PaginationPanelProps = {

package/src/components/table/tableControls/BulkActionsDropdown.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { GridApiContext } from '../GridApiContext';
+import { GridApiContext } from '../GridApiContext.js';
 import type { GridApi } from 'ag-grid-community';
 import { Button } from 'Components/button/Button';
 import { Dropdown } from 'Components/dropdown/Dropdown';

package/src/components/table/tableControls/HideColumnsDropdown.tsx

@@ -1,6 +1,6 @@
 import { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 import { useContext, useEffect, useState } from 'react';
-import { GridApiContext } from '../GridApiContext';
+import { GridApiContext } from '../GridApiContext.js';
 import type { Column } from 'ag-grid-community';
 
 export type HideColumnsDropdownProps = {

package/src/components/table/tableControls/TableControls.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { TableControls } from './TableControls';
+import { TableControls } from './TableControls.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/table/tableControls/TableControls.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import { TableControls } from './TableControls';
+import { TableControls } from './TableControls.js';
 
 describe('TableControls', () => {
   test('renders nothing when no props are passed', () => {

package/src/components/table/tableControls/TableControls.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import { Button } from 'Components/button/Button';
 import { SearchBar } from 'Components/searchBar/SearchBar';
-import { BulkActionsDropdown, type BulkAction } from './BulkActionsDropdown';
+import { BulkActionsDropdown, type BulkAction } from './BulkActionsDropdown.js';
 import {
   HideColumnsDropdown,
   type HideColumnsDropdownProps,
-} from './HideColumnsDropdown';
-import { TableSettingsDropdown } from './TableSettingsDropdown';
+} from './HideColumnsDropdown.js';
+import { TableSettingsDropdown } from './TableSettingsDropdown.js';
 
 export type { BulkAction };
 

package/src/components/table/tableControls/TableSettingsDropdown.test.tsx

@@ -2,10 +2,10 @@ import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
-import { TableSettingsDropdown } from './TableSettingsDropdown';
-import { TableSettingsContext } from '../TableSettingsContext';
-import { TABLE_SPACING } from '../tableConsts';
-import { useTableSettings } from '../useTableSettings';
+import { TableSettingsDropdown } from './TableSettingsDropdown.js';
+import { TableSettingsContext } from '../TableSettingsContext.js';
+import { TABLE_SPACING } from '../tableConsts.js';
+import { useTableSettings } from '../useTableSettings.js';
 
 const buildContextValue = (overrides: Partial<ReturnType<typeof useTableSettings>> = {}) => ({
   settings: {

package/src/components/table/tableControls/TableSettingsDropdown.tsx

@@ -4,8 +4,8 @@ import { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGrou
 import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
 import { Separator } from 'Components/separator/Separator';
 import { useContext, type ChangeEvent } from 'react';
-import { TABLE_SPACING } from '../tableConsts';
-import { TableSettingsContext } from '../TableSettingsContext';
+import { TABLE_SPACING } from '../tableConsts.js';
+import { TableSettingsContext } from '../TableSettingsContext.js';
 
 export const TABLE_SETTINGS_ITEMS = [
   'tableSpacing',

package/src/components/table/theme/defaultTheme.ts

@@ -1,5 +1,5 @@
 import { themeQuartz } from 'ag-grid-enterprise';
-import { baseThemeParams } from './baseThemeParams';
+import { baseThemeParams } from './baseThemeParams.js';
 
 export const defaultTheme = themeQuartz.withParams({
   ...baseThemeParams,

package/src/components/table/theme/tidyTheme.ts

@@ -1,5 +1,5 @@
 import { themeQuartz } from 'ag-grid-enterprise';
-import { baseThemeParams } from './baseThemeParams';
+import { baseThemeParams } from './baseThemeParams.js';
 
 export const tidyTheme = themeQuartz.withParams({
   ...baseThemeParams,

package/src/components/table/useTableSettings.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TABLE_SPACING } from './tableConsts';
+import { TABLE_SPACING } from './tableConsts.js';
 import { useComponentDidUpdate } from 'Utils/hooks/useComponentDidUpdate';
 
 export type TableSettings = {

package/src/components/tabs/Tabs.stories.tsx

@@ -9,7 +9,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Tabs } from './Tabs';
+import { Tabs } from './Tabs.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import { expect, test, describe, vi } from 'vitest';
-import { Tabs } from './Tabs';
+import { Tabs } from './Tabs.js';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 

package/src/components/tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { type HTMLAttributes } from 'react';
-import { TabsItem } from './TabsItem';
+import { TabsItem } from './TabsItem.js';
 
 export const Tabs = (props: HTMLAttributes<HTMLUListElement> & { children: React.ReactNode }) => {
   const { children, className, ...rest } = props;

package/src/components/tabs/TabsItem.stories.tsx

@@ -7,8 +7,8 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { TabsItem } from './TabsItem';
-import { Tabs } from './Tabs';
+import { TabsItem } from './TabsItem.js';
+import { Tabs } from './Tabs.js';
 import { allowedIcons } from 'Components/icon/allowedIcons';
 
 // ---------------------------------------------------------------------------

package/src/components/tag/Tag.stories.tsx

@@ -12,7 +12,7 @@ import { useState } from 'react';
 import { fn } from 'storybook/test';
 import { Dot } from 'Components/dot/Dot';
 import { Icon } from 'Components/icon/Icon';
-import { Tag, type TagColor } from './Tag';
+import { Tag, type TagColor } from './Tag.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/tag/Tag.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
-import { Tag } from './Tag';
+import { Tag } from './Tag.js';
 import { Dot } from 'Components/dot/Dot';
 
 describe('Tag', () => {

package/src/components/toast/Toast.stories.tsx

@@ -10,7 +10,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Toast, type ToastProps } from './Toast';
+import { Toast, type ToastProps } from './Toast.js';
 import { Button } from 'Components/button/Button';
 
 // ---------------------------------------------------------------------------

package/src/components/toast/Toast.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
-import { Toast } from './Toast';
+import { Toast } from './Toast.js';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
 

package/src/components/toast/Toast.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Toast as RadixToast } from 'radix-ui';
-import { ToastViewport } from './ToastViewport';
+import { ToastViewport } from './ToastViewport.js';
 import { Icon } from 'Components/icon/Icon';
 
 export type ToastProps = RadixToast.ToastProps & {

package/src/components/toggle/Toggle.stories.tsx

@@ -10,7 +10,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Toggle } from './Toggle';
+import { Toggle } from './Toggle.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/toggle/Toggle.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import { Toggle } from './Toggle';
+import { Toggle } from './Toggle.js';
 
 describe('Toggle component', () => {
   test('renders a switch element', () => {

package/src/components/tooltip/Tooltip.stories.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { Tooltip } from './Tooltip';
+import { Tooltip } from './Tooltip.js';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
 

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test, describe } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import { Tooltip } from './Tooltip';
+import { Tooltip } from './Tooltip.js';
 import userEvent from '@testing-library/user-event';
 
 describe('Tooltip component', () => {

package/src/components/tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
-import { TooltipContent, type TooltipContentProps } from './TooltipContent';
-import { TooltipTrigger } from './TooltipTrigger';
+import { TooltipContent, type TooltipContentProps } from './TooltipContent.js';
+import { TooltipTrigger } from './TooltipTrigger.js';
 
 export const Tooltip = (props: TooltipPrimitive.TooltipProps) => {
   const { children, delayDuration = 400, ...rest } = props;

package/src/components/tooltip/TooltipContent.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 import { useContext } from 'react';
-import { PopupParentContext } from 'Utils/PopupParentContext';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 export type TooltipContentProps = {
   children: React.ReactNode;

package/src/components/tooltip/TooltipWrapper.stories.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { TooltipWrapper } from './TooltipWrapper';
+import { TooltipWrapper } from './TooltipWrapper.js';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
 

package/src/components/tooltip/TooltipWrapper.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test, describe } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
-import { TooltipWrapper } from './TooltipWrapper';
+import { TooltipWrapper } from './TooltipWrapper.js';
 import userEvent from '@testing-library/user-event';
 
 describe('TooltipWrapper component', () => {

package/src/components/tooltip/TooltipWrapper.tsx

@@ -1,6 +1,6 @@
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
-import { Tooltip } from './Tooltip';
-import type { TooltipContentProps } from './TooltipContent';
+import { Tooltip } from './Tooltip.js';
+import type { TooltipContentProps } from './TooltipContent.js';
 
 export type TooltipWrapperProps = {
   children: TooltipPrimitive.TooltipTriggerProps['children'];

package/src/components/userDropdown/UserDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { UserDropdown } from './UserDropdown';
-import { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './assets/logos';
+import { UserDropdown } from './UserDropdown.js';
+import { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './assets/logos.js';
 
 const meta: Meta<typeof UserDropdown> = {
   title: 'Components/UserDropdown',

package/src/components/userDropdown/UserDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test, describe, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { UserDropdown } from './UserDropdown';
+import { UserDropdown } from './UserDropdown.js';
 import '@testing-library/jest-dom/vitest';
 
 describe('UserDropdown', () => {

package/src/components/userDropdown/UserDropdown.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Dropdown } from 'Components/dropdown/Dropdown';
-import { UserDropdownTrigger } from './internal/UserDropdownTrigger';
-import { UserDropdownUserInfo } from './internal/UserDropdownUserInfo';
-import { UserDropdownAppItem } from './internal/UserDropdownAppItem';
-import { UserDropdownCollapsibleSection } from './internal/UserDropdownCollapsibleSection';
-import { UserDropdownSignOut } from './internal/UserDropdownSignOut';
+import { UserDropdownTrigger } from './internal/UserDropdownTrigger.js';
+import { UserDropdownUserInfo } from './internal/UserDropdownUserInfo.js';
+import { UserDropdownAppItem } from './internal/UserDropdownAppItem.js';
+import { UserDropdownCollapsibleSection } from './internal/UserDropdownCollapsibleSection.js';
+import { UserDropdownSignOut } from './internal/UserDropdownSignOut.js';
 
 export type UserDropdownUser = {
   name: string;

package/src/components/userDropdown/internal/UserDropdownAppItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropdown } from 'Components/dropdown/Dropdown';
 import { Icon } from 'Components/icon/Icon';
-import type { UserDropdownApp } from '../UserDropdown';
+import type { UserDropdownApp } from '../UserDropdown.js';
 
 export const UserDropdownAppItem = (props: UserDropdownApp) => {
   const { logo, name, description, onClick } = props;