Convert package to purely ESM

package.json

@@ -4,7 +4,7 @@
   "version": "3.8.0",
   "author": "J M Rossy",
   "peerDependencies": {
-    "@hyperlane-xyz/sdk": "^3.1",
+    "@hyperlane-xyz/sdk": "^3.8",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -43,22 +43,12 @@
   "files": [
     "/dist"
   ],
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "browser": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
+  "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
-    },
-    "./styles.css": {
-      "import": "./dist/styles.css",
-      "style": "./dist/styles.css",
-      "default": "./dist/styles.css"
-    }
+    ".": "./dist/index.js",
+    "./styles.css": "./dist/styles.css"
   },
+  "types": "./dist/index.d.ts",
   "homepage": "https://www.hyperlane.xyz",
   "keywords": [
     "Hyperlane",
@@ -74,11 +64,10 @@
     "url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
   },
   "scripts": {
-    "build": "yarn build:svg && yarn build:cjs && yarn build:esm && yarn build:css",
-    "build:cjs": "tsc --project ./tsconfig.json",
-    "build:esm": "tsc --project ./tsconfig.esm.json",
-    "build:css": "tailwindcss -c ./tailwind.config.js -i ./src/styles.css -o ./dist/styles.css --minify",
-    "build:svg": "svgr --typescript --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
+    "build": "yarn build:svg && yarn build:ts && yarn build:css",
+    "build:ts": "tsc",
+    "build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify",
+    "build:svg": "svgr --typescript --no-index --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
     "clean": "rm -rf dist cache",
     "lint": "eslint . --ext .ts",
     "prettier": "prettier --write ./src",

src/icons/Airplane.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 interface Props {
   width?: string | number;

src/icons/ChainLogo.tsx

@@ -3,49 +3,49 @@ import React, { ReactElement, memo } from 'react';
 import { Chains, chainMetadata } from '@hyperlane-xyz/sdk';
 import { isNumeric } from '@hyperlane-xyz/utils';
 
-import ArbitrumBlack from '../logos/black/Arbitrum';
-import AvalancheBlack from '../logos/black/Avalanche';
-import BaseBlack from '../logos/black/Base';
-import BscBlack from '../logos/black/Bsc';
-import CeloBlack from '../logos/black/Celo';
-import EthereumBlack from '../logos/black/Ethereum';
-import GnosisBlack from '../logos/black/Gnosis';
-import InevmBlack from '../logos/black/Inevm';
-import InjectiveBlack from '../logos/black/Injective';
-import MantaBlack from '../logos/black/Manta';
-import MoonbeamBlack from '../logos/black/Moonbeam';
-import NautilusBlack from '../logos/black/Nautilus';
-import NeutronBlack from '../logos/black/Neutron';
-import OptimismBlack from '../logos/black/Optimism';
-import PlumeBlack from '../logos/black/Plume';
-import PolygonBlack from '../logos/black/Polygon';
-import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
-import ScrollBlack from '../logos/black/Scroll';
-import SolanaBlack from '../logos/black/Solana';
-import VictionBlack from '../logos/black/Viction';
-import ArbitrumColor from '../logos/color/Arbitrum';
-import AvalancheColor from '../logos/color/Avalanche';
-import BaseColor from '../logos/color/Base';
-import BscColor from '../logos/color/Bsc';
-import CeloColor from '../logos/color/Celo';
-import EthereumColor from '../logos/color/Ethereum';
-import GnosisColor from '../logos/color/Gnosis';
-import InevmColor from '../logos/color/Inevm';
-import InjectiveColor from '../logos/color/Injective';
-import MantaColor from '../logos/color/Manta';
-import MoonbeamColor from '../logos/color/Moonbeam';
-import NautilusColor from '../logos/color/Nautilus';
-import NeutronColor from '../logos/color/Neutron';
-import OptimismColor from '../logos/color/Optimism';
-import PlumeColor from '../logos/color/Plume';
-import PolygonColor from '../logos/color/Polygon';
-import PolygonzkevmColor from '../logos/color/Polygonzkevm';
-import ScrollColor from '../logos/color/Scroll';
-import SolanaColor from '../logos/color/Solana';
-import VictionColor from '../logos/color/Viction';
+import ArbitrumBlack from '../logos/black/Arbitrum.js';
+import AvalancheBlack from '../logos/black/Avalanche.js';
+import BaseBlack from '../logos/black/Base.js';
+import BscBlack from '../logos/black/Bsc.js';
+import CeloBlack from '../logos/black/Celo.js';
+import EthereumBlack from '../logos/black/Ethereum.js';
+import GnosisBlack from '../logos/black/Gnosis.js';
+import InevmBlack from '../logos/black/Inevm.js';
+import InjectiveBlack from '../logos/black/Injective.js';
+import MantaBlack from '../logos/black/Manta.js';
+import MoonbeamBlack from '../logos/black/Moonbeam.js';
+import NautilusBlack from '../logos/black/Nautilus.js';
+import NeutronBlack from '../logos/black/Neutron.js';
+import OptimismBlack from '../logos/black/Optimism.js';
+import PlumeBlack from '../logos/black/Plume.js';
+import PolygonBlack from '../logos/black/Polygon.js';
+import PolygonzkevmBlack from '../logos/black/Polygonzkevm.js';
+import ScrollBlack from '../logos/black/Scroll.js';
+import SolanaBlack from '../logos/black/Solana.js';
+import VictionBlack from '../logos/black/Viction.js';
+import ArbitrumColor from '../logos/color/Arbitrum.js';
+import AvalancheColor from '../logos/color/Avalanche.js';
+import BaseColor from '../logos/color/Base.js';
+import BscColor from '../logos/color/Bsc.js';
+import CeloColor from '../logos/color/Celo.js';
+import EthereumColor from '../logos/color/Ethereum.js';
+import GnosisColor from '../logos/color/Gnosis.js';
+import InevmColor from '../logos/color/Inevm.js';
+import InjectiveColor from '../logos/color/Injective.js';
+import MantaColor from '../logos/color/Manta.js';
+import MoonbeamColor from '../logos/color/Moonbeam.js';
+import NautilusColor from '../logos/color/Nautilus.js';
+import NeutronColor from '../logos/color/Neutron.js';
+import OptimismColor from '../logos/color/Optimism.js';
+import PlumeColor from '../logos/color/Plume.js';
+import PolygonColor from '../logos/color/Polygon.js';
+import PolygonzkevmColor from '../logos/color/Polygonzkevm.js';
+import ScrollColor from '../logos/color/Scroll.js';
+import SolanaColor from '../logos/color/Solana.js';
+import VictionColor from '../logos/color/Viction.js';
 
-import { Circle } from './Circle';
-import { QuestionMarkIcon } from './QuestionMark';
+import { Circle } from './Circle.js';
+import { QuestionMarkIcon } from './QuestionMark.js';
 
 type SvgIcon = (props: { width: number; height: number; title?: string }) => ReactElement;
 

src/icons/Circle.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 
-import { seedToBgColor } from '../color';
+import { seedToBgColor } from '../color.js';
 
 export function Circle({
   size,

src/icons/Envelope.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 interface Props {
   width?: string | number;

src/icons/Lock.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 interface Props {
   width?: string | number;

src/icons/QuestionMark.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 interface Props {
   width?: string | number;

src/icons/Shield.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 interface Props {
   width?: string | number;

src/icons/WideChevron.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { ColorPalette } from '../color';
+import { ColorPalette } from '../color.js';
 
 export interface WideChevronProps {
   width?: string | number;

src/index.ts

@@ -1,12 +1,15 @@
-export { ColorPalette, seedToBgColor } from './color';
-export * from './consts';
-export { ChainLogo } from './icons/ChainLogo';
-export { Circle } from './icons/Circle';
-export { WideChevron } from './icons/WideChevron';
-export * as BlackLogos from './logos/black';
-export * as ColorLogos from './logos/color';
-export { MessageTimeline } from './messages/MessageTimeline';
-export { MessageStage, MessageStatus, type ApiMessage, type StageTimings } from './messages/types';
-export { useMessage } from './messages/useMessage';
-export { useMessageStage } from './messages/useMessageStage';
-export { useMessageTimeline } from './messages/useMessageTimeline';
+export { ColorPalette, seedToBgColor } from './color.js';
+export * from './consts.js';
+export { ChainLogo } from './icons/ChainLogo.js';
+export { Circle } from './icons/Circle.js';
+export { WideChevron } from './icons/WideChevron.js';
+export { MessageTimeline } from './messages/MessageTimeline.js';
+export {
+  MessageStage,
+  MessageStatus,
+  type ApiMessage,
+  type StageTimings,
+} from './messages/types.js';
+export { useMessage } from './messages/useMessage.js';
+export { useMessageStage } from './messages/useMessageStage.js';
+export { useMessageTimeline } from './messages/useMessageTimeline.js';

src/messages/MessageTimeline.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { ColorPalette } from '../color';
-import { AirplaneIcon } from '../icons/Airplane';
-import { EnvelopeIcon } from '../icons/Envelope';
-import { LockIcon } from '../icons/Lock';
-import { ShieldIcon } from '../icons/Shield';
-import { WideChevron } from '../icons/WideChevron';
+import { ColorPalette } from '../color.js';
+import { AirplaneIcon } from '../icons/Airplane.js';
+import { EnvelopeIcon } from '../icons/Envelope.js';
+import { LockIcon } from '../icons/Lock.js';
+import { ShieldIcon } from '../icons/Shield.js';
+import { WideChevron } from '../icons/WideChevron.js';
 
-import { MessageStatus, MessageStage as Stage, StageTimings } from './types';
+import { MessageStatus, MessageStage as Stage, StageTimings } from './types.js';
 
 interface Props {
   status: MessageStatus;

src/messages/useMessage.ts

@@ -1,10 +1,10 @@
 import { useCallback, useState } from 'react';
 
-import { HYPERLANE_EXPLORER_API_URL } from '../consts';
-import { executeExplorerQuery } from '../utils/explorers';
-import { useInterval } from '../utils/useInterval';
+import { HYPERLANE_EXPLORER_API_URL } from '../consts.js';
+import { executeExplorerQuery } from '../utils/explorers.js';
+import { useInterval } from '../utils/useInterval.js';
 
-import { ApiMessage, MessageStatus } from './types';
+import { ApiMessage, MessageStatus } from './types.js';
 
 interface Params {
   messageId?: string;

src/messages/useMessageStage.ts

@@ -2,12 +2,12 @@ import { useCallback, useState } from 'react';
 
 import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
 
-import { HYPERLANE_EXPLORER_API_URL } from '../consts';
-import { queryExplorerForBlock } from '../utils/explorers';
-import { fetchWithTimeout } from '../utils/timeout';
-import { useInterval } from '../utils/useInterval';
+import { HYPERLANE_EXPLORER_API_URL } from '../consts.js';
+import { queryExplorerForBlock } from '../utils/explorers.js';
+import { fetchWithTimeout } from '../utils/timeout.js';
+import { useInterval } from '../utils/useInterval.js';
 
-import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types';
+import { MessageStatus, PartialMessage, MessageStage as Stage, StageTimings } from './types.js';
 
 const VALIDATION_TIME_EST = 5;
 

src/messages/useMessageTimeline.ts

@@ -1,5 +1,5 @@
-import { useMessage } from './useMessage';
-import { useMessageStage } from './useMessageStage';
+import { useMessage } from './useMessage.js';
+import { useMessageStage } from './useMessageStage.js';
 
 interface Params {
   messageId?: string;

src/stories/ChainLogo.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { ChainLogo } from '../icons/ChainLogo';
+import { ChainLogo } from '../icons/ChainLogo.js';
 
 export default {
   title: 'ChainLogo',

src/stories/MessageTimeline.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { MessageTimeline } from '../messages/MessageTimeline';
-import { MessageStage, MessageStatus } from '../messages/types';
+import { MessageTimeline } from '../messages/MessageTimeline.js';
+import { MessageStage, MessageStatus } from '../messages/types.js';
 
 export default {
   title: 'MessageTimeline',

src/stories/WideChevron.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { ColorPalette } from '../color';
-import { WideChevron } from '../icons/WideChevron';
+import { ColorPalette } from '../color.js';
+import { WideChevron } from '../icons/WideChevron.js';
 
 export default {
   title: 'WideChevron',

src/utils/explorers.ts

@@ -1,6 +1,6 @@
 import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
 
-import { fetchWithTimeout } from './timeout';
+import { fetchWithTimeout } from './timeout.js';
 
 export interface ExplorerQueryResponse<R> {
   status: string;