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

package/src/components/combobox/Combobox.tsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames';
 import { Popover } from 'radix-ui';
 import { useCallback, useContext, useId, useMemo, useRef } from 'react';
-import { PopupParentContext } from 'Utils/PopupParentContext';
-import { buildOptionGroups } from './buildListboxDisplayOptions';
-import { ComboboxButtonTrigger } from './ComboboxButtonTrigger';
-import { ComboboxListbox } from './ComboboxListbox';
-import { ComboboxTrigger } from './ComboboxTrigger';
-import type { ComboboxAriaInvalid, ComboboxCreateResult, ComboboxOption, ComboboxProps, ComboboxSearchFn, ComboboxSearchType } from './types';
-import { useChipSelection } from './useChipSelection';
-import { useComboboxKeyboard } from './useComboboxKeyboard';
-import { useComboboxListboxDom } from './useComboboxListboxDom';
-import { useComboboxPopoverBehavior } from './useComboboxPopoverBehavior';
-import { useComboboxState } from './useComboboxState';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
+import { buildOptionGroups } from './buildListboxDisplayOptions.js';
+import { ComboboxButtonTrigger } from './ComboboxButtonTrigger.js';
+import { ComboboxListbox } from './ComboboxListbox.js';
+import { ComboboxTrigger } from './ComboboxTrigger.js';
+import type { ComboboxAriaInvalid, ComboboxCreateResult, ComboboxOption, ComboboxProps, ComboboxSearchFn, ComboboxSearchType } from './types.js';
+import { useChipSelection } from './useChipSelection.js';
+import { useComboboxKeyboard } from './useComboboxKeyboard.js';
+import { useComboboxListboxDom } from './useComboboxListboxDom.js';
+import { useComboboxPopoverBehavior } from './useComboboxPopoverBehavior.js';
+import { useComboboxState } from './useComboboxState.js';
 
 const ComboboxRoot = (props: ComboboxProps): React.JSX.Element => {
   const {

package/src/components/combobox/ComboboxButtonTrigger.tsx

@@ -4,9 +4,9 @@ import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
 import { Popover } from 'radix-ui';
 import { useMemo, useRef } from 'react';
-import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types';
-import { useElementWidth } from './useElementWidth';
-import { useVisibleChips } from './useVisibleChips';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
+import { useElementWidth } from './useElementWidth.js';
+import { useVisibleChips } from './useVisibleChips.js';
 
 export type ComboboxButtonTriggerProps = {
   triggerRef: React.RefObject<HTMLDivElement | null>;

package/src/components/combobox/ComboboxListbox.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
-import { ComboboxOptionRow } from './ComboboxOptionRow';
-import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSearchType } from './types';
+import { ComboboxOptionRow } from './ComboboxOptionRow.js';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSearchType } from './types.js';
 
 export type ComboboxListboxProps = {
   listboxRef: React.RefObject<HTMLUListElement | null>;

package/src/components/combobox/ComboboxOptionRow.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
 import { memo } from 'react';
-import { highlightLabel } from './highlightLabel';
-import type { ComboboxOption, ComboboxSearchType } from './types';
+import { highlightLabel } from './highlightLabel.js';
+import type { ComboboxOption, ComboboxSearchType } from './types.js';
 
 type ComboboxOptionRowProps = {
   option: ComboboxOption;

package/src/components/combobox/ComboboxTrigger.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
 import { Popover } from 'radix-ui';
-import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types.js';
 
 export type ComboboxTriggerProps = {
   'inputRef': React.RefObject<HTMLInputElement | null>;

package/src/components/combobox/buildListboxDisplayOptions.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
-import type { ComboboxOption } from './types';
-import { buildOptionGroups } from './buildListboxDisplayOptions';
+import type { ComboboxOption } from './types.js';
+import { buildOptionGroups } from './buildListboxDisplayOptions.js';
 
 describe('buildOptionGroups', () => {
   test('groups by group field', () => {

package/src/components/combobox/buildListboxDisplayOptions.ts

@@ -1,4 +1,4 @@
-import type { ComboboxOption } from './types';
+import type { ComboboxOption } from './types.js';
 
 export function buildOptionGroups(options: ComboboxOption[]): Map<string, ComboboxOption[]> {
   const map = new Map<string, ComboboxOption[]>();

package/src/components/combobox/comboboxKeyboardTypes.ts

@@ -1,4 +1,4 @@
-import type { ComboboxOption } from './types';
+import type { ComboboxOption } from './types.js';
 
 export type UseComboboxChipKeyboardParams = {
   inputRef: React.RefObject<HTMLInputElement | null>;

package/src/components/combobox/highlightLabel.tsx

@@ -1,4 +1,4 @@
-import type { ComboboxSearchType } from './types';
+import type { ComboboxSearchType } from './types.js';
 
 type HighlightLabelOptions = {
   label: string;

package/src/components/combobox/useComboboxChipKeyboard.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, test, vi } from 'vitest';
-import { useComboboxChipKeyboard } from './useComboboxChipKeyboard';
+import { useComboboxChipKeyboard } from './useComboboxChipKeyboard.js';
 
 const keyEvent = (
   key: string,

package/src/components/combobox/useComboboxChipKeyboard.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { UseComboboxChipKeyboardParams } from './comboboxKeyboardTypes';
+import type { UseComboboxChipKeyboardParams } from './comboboxKeyboardTypes.js';
 
 export const useComboboxChipKeyboard = ({
   inputRef,

package/src/components/combobox/useComboboxKeyboard.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { isSelectAllChord } from 'Utils/isSelectAllChord';
-import type { UseComboboxKeyboardParams } from './comboboxKeyboardTypes';
-import { useComboboxChipKeyboard } from './useComboboxChipKeyboard';
-import { useComboboxListboxKeyboard } from './useComboboxListboxKeyboard';
+import type { UseComboboxKeyboardParams } from './comboboxKeyboardTypes.js';
+import { useComboboxChipKeyboard } from './useComboboxChipKeyboard.js';
+import { useComboboxListboxKeyboard } from './useComboboxListboxKeyboard.js';
 
-export type { UseComboboxKeyboardParams } from './comboboxKeyboardTypes';
+export type { UseComboboxKeyboardParams } from './comboboxKeyboardTypes.js';
 
 export const useComboboxKeyboard = ({
   inputRef,

package/src/components/combobox/useComboboxListboxKeyboard.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, test, vi } from 'vitest';
-import type { ComboboxOption } from './types';
-import { useComboboxListboxKeyboard } from './useComboboxListboxKeyboard';
+import type { ComboboxOption } from './types.js';
+import { useComboboxListboxKeyboard } from './useComboboxListboxKeyboard.js';
 
 const keyEvent = (
   key: string,

package/src/components/combobox/useComboboxListboxKeyboard.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { nextCircularIndex } from 'Utils/nextCircularIndex';
-import type { UseComboboxListboxKeyboardParams } from './comboboxKeyboardTypes';
-import { normaliseComboboxQuery } from './normaliseComboboxQuery';
+import type { UseComboboxListboxKeyboardParams } from './comboboxKeyboardTypes.js';
+import { normaliseComboboxQuery } from './normaliseComboboxQuery.js';
 
 export const useComboboxListboxKeyboard = ({
   allowCreate,

package/src/components/combobox/useComboboxState.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { normaliseComboboxQuery } from './normaliseComboboxQuery';
-import type { ComboboxCreateResult, ComboboxOption, ComboboxProps } from './types';
+import { normaliseComboboxQuery } from './normaliseComboboxQuery.js';
+import type { ComboboxCreateResult, ComboboxOption, ComboboxProps } from './types.js';
 
 const builtInFilters = {
   prefix: (option: ComboboxOption, query: string) =>

package/src/components/combobox/useVisibleChips.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { computeTriggerLayoutModel } from './useVisibleChips';
+import { computeTriggerLayoutModel } from './useVisibleChips.js';
 
 describe('computeTriggerLayoutModel', () => {
   test('shows all chips and no ellipsis when there is no overflow', () => {

package/src/components/dataViewCard/DataViewCard.stories.tsx

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

package/src/components/dataViewCard/DataViewCard.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { describe, expect, test, vi } from 'vitest';
-import { DataViewCard } from './DataViewCard';
+import { DataViewCard } from './DataViewCard.js';
 
 const baseRows = [
   { label: 'Year', value: 'Year 8' },

package/src/components/datePicker/DatePicker.stories.tsx

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { FormField } from 'Components/formField/FormField';
-import { DatePicker } from './DatePicker';
+import { DatePicker } from './DatePicker.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/datePicker/DatePicker.test.tsx

@@ -2,9 +2,9 @@ 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 { DatePicker } from './DatePicker';
-import { formatNativeDateInputValue } from './dateInputUtils';
-import { getDropdownTrigger } from './datePickerTestUtils.test-helpers';
+import { DatePicker } from './DatePicker.js';
+import { formatNativeDateInputValue } from './dateInputUtils.js';
+import { getDropdownTrigger } from './datePickerTestUtils.test-helpers.js';
 
 const getDateField = (container: HTMLElement) => (
   container.querySelector('input[type="date"]') as HTMLInputElement

package/src/components/datePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import { TextInput } from 'Components/formField/inputs/text/TextInput';
 import { Popover } from 'radix-ui';
 import { useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
 import { DayPicker } from 'react-day-picker';
-import { PopupParentContext } from 'Utils/PopupParentContext';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 import {
   formatNativeDateInputValue,
   formatTimeInputValue,
@@ -12,8 +12,8 @@ import {
   mergeDateAndTime,
   parseNativeDateInputValue,
   type DateDisplayFormat,
-} from './dateInputUtils';
-import { DatePickerCalendarHeader } from './DatePickerCalendarHeader';
+} from './dateInputUtils.js';
+import { DatePickerCalendarHeader } from './DatePickerCalendarHeader.js';
 
 const TIME_PRESERVATION_GRANULARITY = 'minute' as const;
 

package/src/components/dateTimePicker/DateTimePicker.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { FormField } from 'Components/formField/FormField';
 import type { TimeValue } from 'Components/formField/inputs/time/TimeInput';
-import { DateTimePicker } from './DateTimePicker';
+import { DateTimePicker } from './DateTimePicker.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/vitest';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { DateTimePicker } from './DateTimePicker';
+import { DateTimePicker } from './DateTimePicker.js';
 import { getDropdownTrigger } from 'Components/datePicker/datePickerTestUtils.test-helpers';
 
 describe('DateTimePicker', () => {

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -19,7 +19,7 @@ import { TimeInput, type TimeGranularity, type TimeValue } from 'Components/form
 import { Popover } from 'radix-ui';
 import { useCallback, useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
 import { DayPicker } from 'react-day-picker';
-import { PopupParentContext } from 'Utils/PopupParentContext';
+import { PopupParentContext } from 'Utils/popupParent/PopupParentContext';
 
 export type DateTimePickerProps = {
   'className'?: string;

package/src/components/dot/Dot.stories.tsx

@@ -9,7 +9,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { Tag } from 'Components/tag/Tag';
-import { Dot, type DotColour } from './Dot';
+import { Dot, type DotColour } from './Dot.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/dot/Dot.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
 import { describe, expect, test } from 'vitest';
-import { Dot } from './Dot';
+import { Dot } from './Dot.js';
 
 describe('Dot', () => {
   test('renders a dot with an explicit label', () => {

package/src/components/dropdown/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Controls, Heading, Markdown, Primary, Stories, Subheading, Subtitle, Title } from '@storybook/addon-docs/blocks';
 import { useState } from 'react';
-import { Dropdown } from './Dropdown';
+import { Dropdown } from './Dropdown.js';
 import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
 

package/src/components/dropdown/Dropdown.test.tsx

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

package/src/components/dropdown/Dropdown.tsx

@@ -1,10 +1,10 @@
 import { DropdownMenu } from 'radix-ui';
-import { DropdownTrigger, type DropdownTriggerProps } from './DropdownTrigger';
-import { DropdownContent, type DropdownContentProps } from './DropdownContent';
-import { DropdownItem } from './items/DropdownItem';
-import { DropdownSelectItem, type DropdowSelectItemProps } from './items/DropdownSelectItem';
-import { DropdownSeparator } from './items/DropdownSeparator';
-import { DropdownGroup } from './items/DropdownGroup';
+import { DropdownTrigger, type DropdownTriggerProps } from './DropdownTrigger.js';
+import { DropdownContent, type DropdownContentProps } from './DropdownContent.js';
+import { DropdownItem } from './items/DropdownItem.js';
+import { DropdownSelectItem, type DropdowSelectItemProps } from './items/DropdownSelectItem.js';
+import { DropdownSeparator } from './items/DropdownSeparator.js';
+import { DropdownGroup } from './items/DropdownGroup.js';
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => {
   const { children, ...rest } = props;

package/src/components/dropdown/DropdownContent.tsx

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

package/src/components/editableText/EditableText.test.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-import { EditableText } from './EditableText';
+import { EditableText } from './EditableText.js';
 
 describe('EditableText', () => {
   const defaultProps = {

package/src/components/formField/FormField.stories.tsx

@@ -9,8 +9,8 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { fn } from 'storybook/test';
-import { comboboxPeopleOptions } from '../../mocks/comboboxStoryOptions';
-import { FormField } from './FormField';
+import { comboboxPeopleOptions } from '../../mocks/comboboxStoryOptions.js';
+import { FormField } from './FormField.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/formField/FormField.test.tsx

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

package/src/components/formField/FormField.tsx

@@ -3,14 +3,14 @@ import { Combobox } from 'Components/combobox/Combobox';
 import type { ComboboxProps } from 'Components/combobox/types';
 import { DatePicker, type DatePickerProps } from 'Components/datePicker/DatePicker';
 import { DateTimePicker, type DateTimePickerProps } from 'Components/dateTimePicker/DateTimePicker';
-import { Icon } from '../icon/Icon';
-import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown';
-import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput';
-import { SelectDropdown, type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown';
-import { TextInput, type TextInputProps } from './inputs/text/TextInput';
-import { TimeInput, type TimeInputProps } from './inputs/time/TimeInput';
-import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea';
-import { Label } from './label/Label';
+import { Icon } from '../icon/Icon.js';
+import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown.js';
+import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput.js';
+import { SelectDropdown, type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown.js';
+import { TextInput, type TextInputProps } from './inputs/text/TextInput.js';
+import { TimeInput, type TimeInputProps } from './inputs/time/TimeInput.js';
+import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea.js';
+import { Label } from './label/Label.js';
 
 export type FormFieldProps = {
   className?: string;

package/src/components/formField/fieldset/Fieldset.test.tsx

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

package/src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx

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

package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset';
-import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput';
+import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput.js';
 
 export type CheckboxGroupProps = {
   options: (CheckboxInputProps & { id: string })[];

package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx

@@ -10,8 +10,8 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { useState } from 'react';
 import { fn } from 'storybook/test';
-import { CheckboxInput } from './CheckboxInput';
-import { CheckboxGroup } from './CheckboxGroup';
+import { CheckboxInput } from './CheckboxInput.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
 
 // ---------------------------------------------------------------------------
 // Component description — built as joined arrays to avoid no-useless-escape

package/src/components/formField/inputs/checkbox/CheckboxInput.test.tsx

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

package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import type { ColorResult } from '@uiw/color-convert';
 import { FormField } from 'Components/formField/FormField';
-import { ColourPickerDropdown } from './ColourPickerDropdown';
+import { ColourPickerDropdown } from './ColourPickerDropdown.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.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 { ColourPickerDropdown } from './ColourPickerDropdown';
+import { ColourPickerDropdown } from './ColourPickerDropdown.js';
 import type { ColorResult } from '@uiw/react-color';
 
 // Mock the Sketch component from @uiw/react-color

package/src/components/formField/inputs/number/NumberInput.stories.tsx

@@ -11,7 +11,7 @@ import {
 import { fn } from 'storybook/test';
 import { useState } from 'react';
 import { FormField } from 'Components/formField/FormField';
-import { NumberInput } from './NumberInput';
+import { NumberInput } from './NumberInput.js';
 
 // ---------------------------------------------------------------------------
 // Component description — built as joined arrays to avoid no-useless-escape

package/src/components/formField/inputs/number/NumberInput.test.tsx

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

package/src/components/formField/inputs/radio/RadioButtonGroup.test.tsx

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

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { ChangeEvent } from 'react';
-import { RadioButtonInput } from './RadioButtonInput';
-import { Fieldset, type FieldsetProps } from '../../fieldset/Fieldset';
+import { RadioButtonInput } from './RadioButtonInput.js';
+import { Fieldset, type FieldsetProps } from '../../fieldset/Fieldset.js';
 
 export type RadioGroupOption = {
   id: string;

package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx

@@ -11,8 +11,8 @@ import {
 import { useState } from 'react';
 import { fn } from 'storybook/test';
 import { Icon } from 'Components/icon/Icon';
-import { RadioButtonInput } from './RadioButtonInput';
-import { RadioButtonGroup } from './RadioButtonGroup';
+import { RadioButtonInput } from './RadioButtonInput.js';
+import { RadioButtonGroup } from './RadioButtonGroup.js';
 
 // ---------------------------------------------------------------------------
 // Component description — built as joined arrays to avoid no-useless-escape

package/src/components/formField/inputs/radio/RadioButtonInput.test.tsx

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

package/src/components/formField/inputs/selectDropdown/SelectDropdown.stories.tsx

@@ -10,7 +10,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks';
 import { FormField } from 'Components/formField/FormField';
-import { SelectDropdown } from './SelectDropdown';
+import { SelectDropdown } from './SelectDropdown.js';
 
 // ---------------------------------------------------------------------------
 // Docs page content

package/src/components/formField/inputs/selectDropdown/SelectDropdown.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 { SelectDropdown } from './SelectDropdown';
+import { SelectDropdown } from './SelectDropdown.js';
 
 describe('SelectDropdown component', () => {
   test('renders with default placeholder', () => {

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { SelectDropdownItem, type SelectDropdownItemProps } from './items/item/SelectDropdownItem';
+import { SelectDropdownItem, type SelectDropdownItemProps } from './items/item/SelectDropdownItem.js';
 import { Dropdown } from 'Components/dropdown/Dropdown';
 import { Button } from 'Components/button/Button';
 

package/src/components/formField/inputs/text/TextInput.stories.tsx

@@ -10,8 +10,8 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { useRef, useState } from 'react';
 import { fn } from 'storybook/test';
-import { FormField } from '../../FormField';
-import { TextInput } from './TextInput';
+import { FormField } from '../../FormField.js';
+import { TextInput } from './TextInput.js';
 
 // ---------------------------------------------------------------------------
 // Component description — built as joined arrays to avoid no-useless-escape

package/src/components/formField/inputs/text/TextInput.test.tsx

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

package/src/components/formField/inputs/textArea/TextArea.stories.tsx

@@ -11,7 +11,7 @@ import {
 import { useState } from 'react';
 import { fn } from 'storybook/test';
 import { FormField } from 'Components/formField/FormField';
-import { TextArea } from './TextArea';
+import { TextArea } from './TextArea.js';
 
 // ---------------------------------------------------------------------------
 // Component description — built as joined arrays to avoid no-useless-escape

package/src/components/formField/inputs/textArea/TextArea.test.tsx

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