Convert ui to ESM (WIP)

packages/redux-devtools-ui/babel.config.esm.json

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults", "modules": false }],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/redux-devtools-ui/babel.config.json

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": "defaults" }],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

packages/redux-devtools-ui/package.json

@@ -13,9 +13,9 @@
     "lib",
     "src"
   ],
-  "main": "lib/cjs/index.js",
+  "main": "lib/index.js",
-  "module": "lib/esm/index.js",
+  "types": "lib/index.d.ts",
-  "types": "lib/types/index.d.ts",
+  "type": "module",
   "sideEffects": [
     "*.css"
   ],
@@ -28,20 +28,16 @@
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build --quiet",
     "build": "pnpm run build:lib && pnpm run build:storybook",
-    "build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
+    "build:lib": "tsc && pnpm run build:css",
-    "build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
-    "build:esm": "babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm",
-    "build:types": "tsc --emitDeclarationOnly",
     "build:css": "ncp fonts lib/fonts",
     "clean": "rimraf lib storybook-static",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "eslint .",
     "type-check": "tsc --noEmit",
     "prepack": "pnpm run clean && pnpm run build",
-    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
+    "prepublish": "pnpm run lint && pnpm run test"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
     "@rjsf/core": "^5.24.10",
     "@rjsf/utils": "^5.24.10",
     "@rjsf/validator-ajv8": "^5.24.10",
@@ -56,13 +52,6 @@
     "simple-element-resize-detector": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.1",
-    "@babel/eslint-parser": "^7.27.1",
-    "@babel/plugin-transform-runtime": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@storybook/addon-onboarding": "^9.0.2",
@@ -74,7 +63,6 @@
     "@types/node": "^22.15.21",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.1.6",
-    "babel-loader": "^10.0.0",
     "csstype": "^3.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

packages/redux-devtools-ui/src/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { MdFiberManualRecord } from 'react-icons/md';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Button from './';
+import Button from './index.js';
 
 const meta: Meta = {
   title: 'Button',

packages/redux-devtools-ui/src/Button/Button.tsx

@@ -1,8 +1,8 @@
 import React, { Component, ReactNode } from 'react';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import * as styles from './styles';
+import * as styles from './styles/index.js';
-import { commonStyle, tooltipStyle } from './styles/common';
+import { commonStyle, tooltipStyle } from './styles/common.js';
 
 const ButtonWrapper = createStyledComponent(styles, 'button');
 const TooltipWrapper = createStyledComponent(tooltipStyle);

packages/redux-devtools-ui/src/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { default } from './Button.js';

packages/redux-devtools-ui/src/Button/styles/common.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { fadeIn } from '../../utils/animations';
+import { fadeIn } from '../../utils/animations.js';
-import colorEffect from '../../utils/color';
+import colorEffect from '../../utils/color.js';
-import { Mark, Size, TooltipPosition } from '../Button';
+import { Mark, Size, TooltipPosition } from '../Button.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 const both = (tooltipPosition: TooltipPosition) => {
   switch (tooltipPosition) {

packages/redux-devtools-ui/src/Button/styles/default.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export interface StyleProps {
   primary: boolean | undefined;

packages/redux-devtools-ui/src/Button/styles/index.ts

@@ -1,2 +1,2 @@
-export { style as default } from './default';
+export { style as default } from './default.js';
-export { style as material } from './material';
+export { style as material } from './material.js';

packages/redux-devtools-ui/src/Button/styles/material.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { ripple } from '../../utils/animations';
+import { ripple } from '../../utils/animations.js';
-import { StyleProps } from './default';
+import { StyleProps } from './default.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export const style = ({
   theme,

packages/redux-devtools-ui/src/Container/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { useTheme, ThemeData } from '../utils/theme';
+import { useTheme, ThemeData } from '../utils/theme.js';
-import { MainContainerWrapper, ContainerWrapper } from './styles';
+import { MainContainerWrapper, ContainerWrapper } from './styles/index.js';
-import { Theme } from '../themes/default';
+import { Theme } from '../themes/default.js';
 
 interface ContainerFromThemeDataProps {
   children?: React.ReactNode;

packages/redux-devtools-ui/src/Container/styles/index.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import color from '../../utils/color';
+import color from '../../utils/color.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export const MainContainerWrapper = styled.div`
   display: flex;

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import ContextMenu from './';
+import ContextMenu from './index.js';
-import { items } from './data';
+import { items } from './data.js';
 
 const meta: Meta = {
   title: 'ContextMenu',

packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import styles from './styles/index';
+import styles from './styles/index.js';
 
 const ContextMenuWrapper = createStyledComponent(styles);
 

packages/redux-devtools-ui/src/ContextMenu/index.ts

@@ -1 +1 @@
-export { default } from './ContextMenu';
+export { default } from './ContextMenu.js';

packages/redux-devtools-ui/src/ContextMenu/styles/index.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 interface StyleProps {
   left: number;

packages/redux-devtools-ui/src/Dialog/Dialog.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Dialog from './';
+import Dialog from './index.js';
-import { schema, uiSchema, formData } from '../Form/schema';
+import { schema, uiSchema, formData } from '../Form/schema.js';
 
 const meta: Meta = {
   title: 'Dialog',

packages/redux-devtools-ui/src/Dialog/Dialog.tsx

@@ -1,10 +1,10 @@
 import React, { PureComponent } from 'react';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import * as styles from './styles';
+import * as styles from './styles/index.js';
-import Button from '../Button';
+import Button from '../Button/index.js';
-import Form from '../Form';
+import Form from '../Form/index.js';
-import { Props as FormProps } from '../Form/Form';
+import { Props as FormProps } from '../Form/Form.js';
 
 const DialogWrapper = createStyledComponent(styles);
 

packages/redux-devtools-ui/src/Dialog/index.ts

@@ -1 +1 @@
-export { default } from './Dialog';
+export { default } from './Dialog.js';

packages/redux-devtools-ui/src/Dialog/styles/default.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export interface StyleProps {
   open: boolean | undefined;

packages/redux-devtools-ui/src/Dialog/styles/index.ts

@@ -1,2 +1,2 @@
-export { style as default } from './default';
+export { style as default } from './default.js';
-export { style as material } from './material';
+export { style as material } from './material.js';

packages/redux-devtools-ui/src/Dialog/styles/material.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { StyleProps } from './default';
+import { StyleProps } from './default.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export const style = ({
   theme,

packages/redux-devtools-ui/src/Editor/Editor.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Editor from './';
+import Editor from './index.js';
-import { default as WithTabsComponent, WithTabsProps } from './WithTabs';
+import { default as WithTabsComponent, WithTabsProps } from './WithTabs.js';
 
 const value = `
 var themes = [];

packages/redux-devtools-ui/src/Editor/Editor.tsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import styled from '@emotion/styled';
 import CodeMirror, { EditorChange } from 'codemirror';
 import type { Base16Theme } from 'react-base16-styling';
-import { defaultStyle, themedStyle } from './styles';
+import { defaultStyle, themedStyle } from './styles/index.js';
-import { Theme } from '../themes/default';
+import { Theme } from '../themes/default.js';
 
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/fold/foldgutter';

packages/redux-devtools-ui/src/Editor/WithTabs.tsx

@@ -1,6 +1,6 @@
 import React, { Component, ComponentType } from 'react';
-import Editor from './';
+import Editor from './index.js';
-import Tabs from '../Tabs';
+import Tabs from '../Tabs/index.js';
 
 const value1 = `
   const func1 = () => {}

packages/redux-devtools-ui/src/Editor/index.ts

@@ -1 +1 @@
-export { default } from './Editor';
+export { default } from './Editor.js';

packages/redux-devtools-ui/src/Form/Form.stories.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Form from './';
+import Form from './index.js';
-import { schema, uiSchema, formData } from './schema';
+import { schema, uiSchema, formData } from './schema.js';
 
 const meta: Meta = {
   title: 'Form',

packages/redux-devtools-ui/src/Form/Form.tsx

@@ -2,10 +2,10 @@ import React, { PureComponent, Component } from 'react';
 import JSONSchemaForm, { FormProps } from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import styles from './styles';
+import styles from './styles/index.js';
-import Button from '../Button';
+import Button from '../Button/index.js';
-import customWidgets from './widgets';
+import customWidgets from './widgets.js';
 
 const FormContainer = createStyledComponent(styles, JSONSchemaForm);
 

packages/redux-devtools-ui/src/Form/index.ts

@@ -1 +1 @@
-export { default } from './Form';
+export { default } from './Form.js';

packages/redux-devtools-ui/src/Form/styles/index.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export default ({ theme }: { theme: Theme }) => css`
   padding: 10px;

packages/redux-devtools-ui/src/Form/widgets.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FieldProps, Widget, WidgetProps } from '@rjsf/utils';
-import Select from '../Select';
+import Select from '../Select/index.js';
-import Slider from '../Slider';
+import Slider from '../Slider/index.js';
 
 /* eslint-disable react/prop-types */
 const SelectWidget: Widget = ({

packages/redux-devtools-ui/src/Notification/Notification.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Notification from './';
+import Notification from './index.js';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/Notification/Notification.tsx

@@ -4,8 +4,8 @@ import { MdWarning } from 'react-icons/md';
 import { MdError } from 'react-icons/md';
 import { MdCheckCircle } from 'react-icons/md';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import styles from './styles';
+import styles from './styles/index.js';
 
 const NotificationWrapper = createStyledComponent(styles);
 

packages/redux-devtools-ui/src/Notification/index.ts

@@ -1 +1 @@
-export { default } from './Notification';
+export { default } from './Notification.js';

packages/redux-devtools-ui/src/Notification/styles/index.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
-import { Type } from '../Notification';
+import { Type } from '../Notification.js';
 
 const getBackground = (theme: Theme, type: Type) => {
   switch (type) {

packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import SegmentedControl from './';
+import SegmentedControl from './index.js';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/SegmentedControl/SegmentedControl.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import styles from './styles';
+import styles from './styles/index.js';
 
 const SegmentedWrapper = createStyledComponent(styles);
 

packages/redux-devtools-ui/src/SegmentedControl/index.tsx

@@ -1 +1 @@
-export { default } from './SegmentedControl';
+export { default } from './SegmentedControl.js';

packages/redux-devtools-ui/src/SegmentedControl/styles/index.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import color from '../../utils/color';
+import color from '../../utils/color.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 interface StyleProps {
   disabled: boolean | undefined;

packages/redux-devtools-ui/src/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import Select from './';
+import Select from './index.js';
-import { options } from './options';
+import { options } from './options.js';
 import { Meta, StoryObj } from '@storybook/react-vite';
 
 const Container = styled.div`

packages/redux-devtools-ui/src/Select/Select.tsx

@@ -3,8 +3,8 @@ import ReactSelect, {
   GroupBase,
   Props as ReactSelectProps,
 } from 'react-select';
-import createThemedComponent from '../utils/createThemedComponent';
+import createThemedComponent from '../utils/createThemedComponent.js';
-import { Theme } from '../themes/default';
+import { Theme } from '../themes/default.js';
 
 export interface SelectProps<
   Option,

packages/redux-devtools-ui/src/Select/index.ts

@@ -1 +1 @@
-export { default } from './Select';
+export { default } from './Select.js';

packages/redux-devtools-ui/src/Slider/Slider.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Slider from './';
+import Slider from './index.js';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/Slider/Slider.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import type { Base16Theme } from 'react-base16-styling';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import * as styles from './styles';
+import * as styles from './styles/index.js';
-import { containerStyle } from './styles/common';
+import { containerStyle } from './styles/common.js';
 
 const SliderWrapper = createStyledComponent(styles);
 const ContainerWithValue = createStyledComponent(containerStyle);

packages/redux-devtools-ui/src/Slider/index.ts

@@ -1 +1 @@
-export { default } from './Slider';
+export { default } from './Slider.js';

packages/redux-devtools-ui/src/Slider/styles/common.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export const containerStyle = ({ theme }: { theme: Theme }) => css`
   display: flex;

packages/redux-devtools-ui/src/Slider/styles/default.ts

@@ -7,8 +7,8 @@ Based on:
 */
 
 import { css } from '@emotion/react';
-import { prefixSelectors } from '../../utils/autoPrefix';
+import { prefixSelectors } from '../../utils/autoPrefix.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export interface StyleProps {
   percent: number;

packages/redux-devtools-ui/src/Slider/styles/index.ts

@@ -1,2 +1,2 @@
-export { style as default } from './default';
+export { style as default } from './default.js';
-export { style as material } from './material';
+export { style as material } from './material.js';

packages/redux-devtools-ui/src/Slider/styles/material.ts

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-import { prefixSelectors } from '../../utils/autoPrefix';
+import { prefixSelectors } from '../../utils/autoPrefix.js';
-import color from '../../utils/color';
+import color from '../../utils/color.js';
-import { animationCurve } from '../../utils/animations';
+import { animationCurve } from '../../utils/animations.js';
-import { StyleProps } from './default';
+import { StyleProps } from './default.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export const style = ({
   theme,

packages/redux-devtools-ui/src/Tabs/Tabs.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react-vite';
-import Tabs from './';
+import Tabs from './index.js';
-import { tabs, simple10Tabs } from './data';
+import { tabs, simple10Tabs } from './data.js';
-import { TabsProps } from './Tabs';
+import { TabsProps } from './Tabs.js';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import TabsHeader, { ReactButtonElement, Tab } from './TabsHeader';
+import TabsHeader, { Tab } from './TabsHeader.js';
-import { TabsContainer } from './styles/common';
+import { TabsContainer } from './styles/common.js';
 
 export type Position = 'left' | 'right' | 'center';
 

packages/redux-devtools-ui/src/Tabs/TabsHeader.tsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import observeResize from 'simple-element-resize-detector';
 import { FaAngleDoubleRight } from 'react-icons/fa';
-import ContextMenu from '../ContextMenu';
+import ContextMenu from '../ContextMenu/index.js';
-import createStyledComponent from '../utils/createStyledComponent';
+import createStyledComponent from '../utils/createStyledComponent.js';
-import * as styles from './styles';
+import * as styles from './styles/index.js';
 
 const TabsWrapper = createStyledComponent(styles);
 

packages/redux-devtools-ui/src/Tabs/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Tabs';
+export { default } from './Tabs.js';
-export type { Tab } from './TabsHeader';
+export type { Tab } from './TabsHeader.js';

packages/redux-devtools-ui/src/Tabs/styles/common.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Position } from '../Tabs';
+import { Position } from '../Tabs.js';
 
 interface StyleProps {
   position: Position;

packages/redux-devtools-ui/src/Tabs/styles/default.ts

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
 
 export interface StyleProps {
   main: boolean | undefined;

packages/redux-devtools-ui/src/Tabs/styles/index.ts

@@ -1,2 +1,2 @@
-export { style as default } from './default';
+export { style as default } from './default.js';
-export { style as material } from './material';
+export { style as material } from './material.js';

packages/redux-devtools-ui/src/Tabs/styles/material.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { ripple } from '../../utils/animations';
+import { ripple } from '../../utils/animations.js';
-import { Theme } from '../../themes/default';
+import { Theme } from '../../themes/default.js';
-import { StyleProps } from './default';
+import { StyleProps } from './default.js';
 
 export const style = ({ theme, main }: StyleProps & { theme: Theme }) => css`
   display: flex;

packages/redux-devtools-ui/src/Toolbar/Toolbar.stories.tsx

@@ -14,12 +14,12 @@ import {
   Slider,
   SegmentedControl,
   Tabs as TabsComponent,
-} from '../';
+} from '../index.js';
-import { options } from '../Select/options';
+import { options } from '../Select/options.js';
-import { simple10Tabs } from '../Tabs/data';
+import { simple10Tabs } from '../Tabs/data.js';
-import { BorderPosition } from './styles/Toolbar';
+import { BorderPosition } from './styles/Toolbar.js';
-import { TooltipPosition } from '../Button/Button';
+import { TooltipPosition } from '../Button/Button.js';
-import { Position } from '../Tabs/Tabs';
+import { Position } from '../Tabs/Tabs.js';
 
 const Container = styled.div`
   display: flex;

packages/redux-devtools-ui/src/Toolbar/index.ts

@@ -1,3 +1,3 @@
-export { default as Toolbar } from './styles/Toolbar';
+export { default as Toolbar } from './styles/Toolbar.js';
-export { default as Divider } from './styles/Divider';
+export { default as Divider } from './styles/Divider.js';
-export { default as Spacer } from './styles/Spacer';
+export { default as Spacer } from './styles/Spacer.js';

packages/redux-devtools-ui/src/colorSchemes/index.ts

@@ -1,14 +1,14 @@
-export { default } from './default';
+export { default } from './default.js';
-export { default as github } from './github';
+export { default as github } from './github.js';
-export { default as atomOneDark } from './atom-one-dark';
+export { default as atomOneDark } from './atom-one-dark.js';
-export { default as dracula } from './dracula';
+export { default as dracula } from './dracula.js';
-export { default as iRBlack } from './ir-black';
+export { default as iRBlack } from './ir-black.js';
-export { default as macintosh } from './macintosh';
+export { default as macintosh } from './macintosh.js';
-export { default as materia } from './materia';
+export { default as materia } from './materia.js';
-export { default as oceanicNext } from './oceanic-next';
+export { default as oceanicNext } from './oceanic-next.js';
-export { default as phD } from './phd';
+export { default as phD } from './phd.js';
-export { default as pico } from './pico';
+export { default as pico } from './pico.js';
-export { default as solarFlare } from './solar-flare';
+export { default as solarFlare } from './solar-flare.js';
-export { default as spacemacs } from './spacemacs';
+export { default as spacemacs } from './spacemacs.js';
-export { default as unikitty } from './unikitty';
+export { default as unikitty } from './unikitty.js';
-export { default as woodland } from './woodland';
+export { default as woodland } from './woodland.js';

packages/redux-devtools-ui/src/index.ts

@@ -1,26 +1,26 @@
 export type { Base16Theme } from 'react-base16-styling';
 
-export { default as Container } from './Container';
+export { default as Container } from './Container/index.js';
-export { default as Button } from './Button';
+export { default as Button } from './Button/index.js';
-export { default as ContextMenu } from './ContextMenu';
+export { default as ContextMenu } from './ContextMenu/index.js';
-export { default as Dialog } from './Dialog';
+export { default as Dialog } from './Dialog/index.js';
-export { default as Editor } from './Editor';
+export { default as Editor } from './Editor/index.js';
-export { default as Form } from './Form';
+export { default as Form } from './Form/index.js';
-export { default as Select } from './Select';
+export { default as Select } from './Select/index.js';
-export { default as Slider } from './Slider';
+export { default as Slider } from './Slider/index.js';
-export { default as Tabs, type Tab } from './Tabs';
+export { default as Tabs, type Tab } from './Tabs/index.js';
-export { default as SegmentedControl } from './SegmentedControl';
+export { default as SegmentedControl } from './SegmentedControl/index.js';
-export { default as Notification } from './Notification';
+export { default as Notification } from './Notification/index.js';
-export * from './Toolbar';
+export * from './Toolbar/index.js';
 
-import color from './utils/color';
+import color from './utils/color.js';
 export const effects = { color };
-export { default as createStyledComponent } from './utils/createStyledComponent';
+export { default as createStyledComponent } from './utils/createStyledComponent.js';
 export {
   listSchemes,
   listThemes,
   type ThemeName,
   type ThemeFromProvider,
   type SchemeName,
-} from './utils/theme';
+} from './utils/theme.js';
-export type { Theme } from './themes/default';
+export type { Theme } from './themes/default.js';

packages/redux-devtools-ui/src/themes/default.ts

@@ -1,6 +1,6 @@
 import type { Base16Theme } from 'react-base16-styling';
 import * as CSS from 'csstype';
-import * as themes from './index';
+import * as themes from './index.js';
 
 export interface Theme extends Base16Theme {
   fontFamily: CSS.Property.FontFamily;

packages/redux-devtools-ui/src/themes/index.ts

@@ -1,2 +1,2 @@
-export { default } from './default';
+export { default } from './default.js';
-export { default as material } from './material';
+export { default as material } from './material.js';

packages/redux-devtools-ui/src/utils/animations.ts

@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import { Theme } from '../themes/default';
+import { Theme } from '../themes/default.js';
 
 export const spin = keyframes`
   to { transform: rotate(1turn); }

packages/redux-devtools-ui/src/utils/createStyledComponent.ts

@@ -5,8 +5,8 @@ import styled, {
 } from '@emotion/styled';
 import { PropsOf } from '@emotion/react';
 import type { Base16Theme } from 'react-base16-styling';
-import getDefaultTheme, { Theme } from '../themes/default';
+import getDefaultTheme, { Theme } from '../themes/default.js';
-import { ThemeFromProvider } from './theme';
+import { ThemeFromProvider } from './theme.js';
 
 type StyleFunction<Props> = FunctionInterpolation<Props>;
 

packages/redux-devtools-ui/src/utils/createThemedComponent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withTheme } from '@emotion/react';
 import type { Base16Theme } from 'react-base16-styling';
-import getDefaultTheme, { Theme } from '../themes/default';
+import getDefaultTheme, { Theme } from '../themes/default.js';
 
 export default <C extends React.ComponentType<any>>(
   UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }

packages/redux-devtools-ui/src/utils/theme.ts

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
-import * as themes from '../themes';
+import * as themes from '../themes/index.js';
 import { base16Themes as baseSchemes } from 'react-base16-styling';
-import * as additionalSchemes from '../colorSchemes';
+import * as additionalSchemes from '../colorSchemes/index.js';
-import invertColors from '../utils/invertColors';
+import invertColors from '../utils/invertColors.js';
-import { Theme as ThemeBase } from '../themes/default';
+import { Theme as ThemeBase } from '../themes/default.js';
 
 const defaultDarkScheme = baseSchemes.nicinabox;
 

packages/redux-devtools-ui/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
-    "outDir": "lib/types",
+    "outDir": "lib",
     "types": ["node"],
     "skipLibCheck": true
   },

packages/redux-devtools-ui/tsconfig.test.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.react.base.json",
+  "extends": "../../tsconfig.esm.react.base.json",
   "compilerOptions": {
     "types": ["jest"]
   },

pnpm-lock.yaml

@@ -2354,9 +2354,6 @@ importers:
 
   packages/redux-devtools-ui:
     dependencies:
-      '@babel/runtime':
-        specifier: ^7.27.1
-        version: 7.27.1
       '@rjsf/core':
         specifier: ^5.24.10
         version: 5.24.10(@rjsf/utils@5.24.10(react@19.1.0))(react@19.1.0)
@@ -2394,27 +2391,6 @@ importers:
         specifier: ^1.3.0
         version: 1.3.0
     devDependencies:
-      '@babel/cli':
-        specifier: ^7.27.2
-        version: 7.27.2(@babel/core@7.27.1)
-      '@babel/core':
-        specifier: ^7.27.1
-        version: 7.27.1
-      '@babel/eslint-parser':
-        specifier: ^7.27.1
-        version: 7.27.1(@babel/core@7.27.1)(eslint@9.27.0)
-      '@babel/plugin-transform-runtime':
-        specifier: ^7.27.1
-        version: 7.27.1(@babel/core@7.27.1)
-      '@babel/preset-env':
-        specifier: ^7.27.2
-        version: 7.27.2(@babel/core@7.27.1)
-      '@babel/preset-react':
-        specifier: ^7.27.1
-        version: 7.27.1(@babel/core@7.27.1)
-      '@babel/preset-typescript':
-        specifier: ^7.27.1
-        version: 7.27.1(@babel/core@7.27.1)
       '@emotion/react':
         specifier: ^11.14.0
         version: 11.14.0(@types/react@19.1.6)(react@19.1.0)
@@ -2448,9 +2424,6 @@ importers:
       '@types/react':
         specifier: ^19.1.6
         version: 19.1.6
-      babel-loader:
-        specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.1)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4))
       csstype:
         specifier: ^3.1.3
         version: 3.1.3
@@ -13776,12 +13749,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@10.0.0(@babel/core@7.27.1)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)):
-    dependencies:
-      '@babel/core': 7.27.1
-      find-up: 5.0.0
-      webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)
-
   babel-loader@10.0.0(@babel/core@7.27.1)(webpack@5.99.9):
     dependencies:
       '@babel/core': 7.27.1
@@ -18366,18 +18333,6 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser-webpack-plugin@5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      jest-worker: 27.5.1
-      schema-utils: 4.3.2
-      serialize-javascript: 6.0.2
-      terser: 5.39.2
-      webpack: 5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)
-    optionalDependencies:
-      '@swc/core': 1.11.29(@swc/helpers@0.5.17)
-      esbuild: 0.25.4
-
   terser-webpack-plugin@5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
@@ -18867,37 +18822,6 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.7
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.14.1
-      browserslist: 4.24.5
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.1
-      es-module-lexer: 1.7.0
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 4.3.2
-      tapable: 2.2.2
-      terser-webpack-plugin: 5.3.14(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4))
-      watchpack: 2.4.4
-      webpack-sources: 3.3.0
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-
   webpack@5.99.9(@swc/core@1.11.29(@swc/helpers@0.5.17))(esbuild@0.25.4)(webpack-cli@6.0.1):
     dependencies:
       '@types/eslint-scope': 3.7.7