ui/src/elements -> H through S, ui/src/utilities

2024-03-07 09:43:17 -05:00
parent 7cf68a4b68
commit e47bafce29
66 changed files with 282 additions and 283 deletions
--- a/packages/ui/src/elements/Hamburger/index.tsx
+++ b/packages/ui/src/elements/Hamburger/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React from 'react'

-import { Chevron } from '../../icons/Chevron'
-import { useTranslation } from '../../providers/Translation'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'hamburger'
--- a/packages/ui/src/elements/Header/index.tsx
+++ b/packages/ui/src/elements/Header/index.tsx
@@ -1,17 +1,17 @@
 'use client'
-import Link from 'next/link'
+import LinkWithDefault from 'next/link.js'
 import React, { useEffect, useRef, useState } from 'react'

-import Account from '../../graphics/Account'
-import { useActions } from '../../providers/ActionsProvider'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
-import { Hamburger } from '../Hamburger'
-import Localizer from '../Localizer'
-import { LocalizerLabel } from '../Localizer/LocalizerLabel'
-import { NavToggler } from '../Nav/NavToggler'
-import { useNav } from '../Nav/context'
-import StepNav from '../StepNav'
+import Account from '../../graphics/Account/index.js'
+import { useActions } from '../../providers/ActionsProvider/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Hamburger } from '../Hamburger/index.js'
+import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js'
+import Localizer from '../Localizer/index.js'
+import { NavToggler } from '../Nav/NavToggler/index.js'
+import { useNav } from '../Nav/context.js'
+import StepNav from '../StepNav/index.js'
 import './index.scss'

 const baseClass = 'app-header'
@@ -48,6 +48,8 @@ export const AppHeader: React.FC = () => {
    }
  }, [actions])

+  const Link = LinkWithDefault.default
+
  const LinkElement = Link || 'a'

  return (
--- a/packages/ui/src/elements/HydrateClientUser/index.tsx
+++ b/packages/ui/src/elements/HydrateClientUser/index.tsx
@@ -4,7 +4,7 @@ import type { Permissions, User } from 'payload/auth'

 import { useEffect } from 'react'

-import { useAuth } from '../../providers/Auth'
+import { useAuth } from '../../providers/Auth/index.js'

 export const HydrateClientUser: React.FC<{ permissions: Permissions; user: User }> = ({
  permissions,
--- a/packages/ui/src/elements/ListControls/index.tsx
+++ b/packages/ui/src/elements/ListControls/index.tsx
@@ -5,25 +5,22 @@ import { fieldAffectsData } from 'payload/types'
 import React, { useState } from 'react'
 import AnimateHeightWithDefault from 'react-animate-height'

-// @ts-expect-error trust me it works
-const AnimateHeight = AnimateHeightWithDefault || AnimateHeightWithDefault.default
+const AnimateHeight = AnimateHeightWithDefault.default

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { Chevron } from '../../icons/Chevron'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
-import ColumnSelector from '../ColumnSelector'
-import { DeleteMany } from '../DeleteMany'
-import { EditMany } from '../EditMany'
-import Pill from '../Pill'
-import { PublishMany } from '../PublishMany'
-import SearchFilter from '../SearchFilter'
-import SortComplex from '../SortComplex'
-import { UnpublishMany } from '../UnpublishMany'
-import WhereBuilder from '../WhereBuilder'
-import validateWhereQuery from '../WhereBuilder/validateWhereQuery'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import ColumnSelector from '../ColumnSelector/index.js'
+import { DeleteMany } from '../DeleteMany/index.js'
+import { EditMany } from '../EditMany/index.js'
+import Pill from '../Pill/index.js'
+import { PublishMany } from '../PublishMany/index.js'
+import SearchFilter from '../SearchFilter/index.js'
+import { UnpublishMany } from '../UnpublishMany/index.js'
+import WhereBuilder from '../WhereBuilder/index.js'
+import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'
 import './index.scss'

 const baseClass = 'list-controls'
--- a/packages/ui/src/elements/ListControls/types.ts
+++ b/packages/ui/src/elements/ListControls/types.ts
@@ -1,6 +1,6 @@
 import type { FieldAffectingData, SanitizedCollectionConfig, Where } from 'payload/types'

-import type { Column } from '../Table/types'
+import type { Column } from '../Table/types.js'

 export type Props = {
  collectionConfig: SanitizedCollectionConfig
--- a/packages/ui/src/elements/ListDrawer/DrawerContent.tsx
+++ b/packages/ui/src/elements/ListDrawer/DrawerContent.tsx
@@ -6,26 +6,26 @@ import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useReducer, useState } from 'react'

-import type { ListPreferences } from '../TableColumns'
-import type { ListDrawerProps } from './types'
+import type { ListPreferences } from '../TableColumns/index.js'
+import type { ListDrawerProps } from './types.js'

-import { baseClass } from '.'
-import Label from '../../forms/Label'
-import usePayloadAPI from '../../hooks/usePayloadAPI'
-import { useUseTitleField } from '../../hooks/useUseAsTitle'
-import { X } from '../../icons/X'
-import { useAuth } from '../../providers/Auth'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { ListInfoProvider } from '../../providers/ListInfo'
-import { usePreferences } from '../../providers/Preferences'
-import { useTranslation } from '../../providers/Translation'
-import { useDocumentDrawer } from '../DocumentDrawer'
-import { LoadingOverlay } from '../Loading'
-import Pill from '../Pill'
-import ReactSelect from '../ReactSelect'
-import { TableColumnsProvider } from '../TableColumns'
-import ViewDescription from '../ViewDescription'
+import Label from '../../forms/Label/index.js'
+import usePayloadAPI from '../../hooks/usePayloadAPI.js'
+import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
+import { X } from '../../icons/X/index.js'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { ListInfoProvider } from '../../providers/ListInfo/index.js'
+import { usePreferences } from '../../providers/Preferences/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { useDocumentDrawer } from '../DocumentDrawer/index.js'
+import { LoadingOverlay } from '../Loading/index.js'
+import Pill from '../Pill/index.js'
+import ReactSelect from '../ReactSelect/index.js'
+import { TableColumnsProvider } from '../TableColumns/index.js'
+import ViewDescription from '../ViewDescription/index.js'
+import { baseClass } from './index.js'

 const hoistQueryParamsToAnd = (where: Where, queryParams: Where) => {
  if ('and' in where) {
@@ -200,7 +200,7 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
      sort,
    }

-    setPreference(preferenceKey, newPreferences, true)
+    void setPreference(preferenceKey, newPreferences, true)
  }, [sort, limit, setPreference, preferenceKey])

  const onCreateNew = useCallback(
--- a/packages/ui/src/elements/ListDrawer/index.tsx
+++ b/packages/ui/src/elements/ListDrawer/index.tsx
@@ -2,12 +2,12 @@
 import { useModal } from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'

-import type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types'
+import type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'

-import { useConfig } from '../../providers/Config'
-import { useEditDepth } from '../../providers/EditDepth'
-import { Drawer, DrawerToggler } from '../Drawer'
-import { ListDrawerContent } from './DrawerContent'
+import { useConfig } from '../../providers/Config/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { Drawer, DrawerToggler } from '../Drawer/index.js'
+import { ListDrawerContent } from './DrawerContent.js'
 import './index.scss'

 export const baseClass = 'list-drawer'
--- a/packages/ui/src/elements/ListDrawer/types.ts
+++ b/packages/ui/src/elements/ListDrawer/types.ts
@@ -2,7 +2,7 @@ import type { SanitizedCollectionConfig } from 'payload/types'
 import type React from 'react'
 import type { HTMLAttributes } from 'react'

-import type { FilterOptionsResult } from '../../forms/fields/Relationship/types'
+import type { FilterOptionsResult } from '../../forms/fields/Relationship/types.js'

 export type ListDrawerProps = {
  collectionSlugs: string[]
--- a/packages/ui/src/elements/ListSelection/index.tsx
+++ b/packages/ui/src/elements/ListSelection/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React, { Fragment } from 'react'

-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
-import { useTranslation } from '../../providers/Translation'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'list-selection'
--- a/packages/ui/src/elements/Loading/index.tsx
+++ b/packages/ui/src/elements/Loading/index.tsx
@@ -2,11 +2,11 @@
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'

-import type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types'
+import type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'

-import { useLoadingOverlay } from '../../elements/LoadingOverlay'
-import { useFormProcessing } from '../../forms/Form/context'
-import { useTranslation } from '../../providers/Translation'
+import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'
+import { useFormProcessing } from '../../forms/Form/context.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'loading-overlay'
@@ -60,25 +60,25 @@ type UseLoadingOverlayToggleT = {
 }
 export const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleT> = ({
  name: key,
+  type = 'fullscreen',
  loadingText,
  show,
-  type = 'fullscreen',
 }) => {
  const { toggleLoadingOverlay } = useLoadingOverlay()

  React.useEffect(() => {
    toggleLoadingOverlay({
+      type,
      isLoading: show,
      key,
      loadingText: loadingText || undefined,
-      type,
    })

    return () => {
      toggleLoadingOverlay({
+        type,
        isLoading: false,
        key,
-        type,
      })
    }
  }, [show, toggleLoadingOverlay, key, type, loadingText])
@@ -95,10 +95,10 @@ type FormLoadingOverlayToggleT = {
 }
 export const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleT> = ({
  name,
+  type = 'fullscreen',
  action,
  formIsLoading = false,
  loadingSuffix,
-  type = 'fullscreen',
 }) => {
  const isProcessing = useFormProcessing()
  const { i18n, t } = useTranslation()
--- a/packages/ui/src/elements/LoadingOverlay/index.tsx
+++ b/packages/ui/src/elements/LoadingOverlay/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import React, { createContext } from 'react'

-import type { LoadingOverlayContext, ToggleLoadingOverlay } from './types'
+import type { LoadingOverlayContext, ToggleLoadingOverlay } from './types.js'

-import { LoadingOverlay } from '../../elements/Loading'
-import { useDelayedRender } from '../../hooks/useDelayedRender'
-import { useTranslation } from '../../providers/Translation'
-import { defaultLoadingOverlayState, reducer } from './reducer'
+import { LoadingOverlay } from '../../elements/Loading/index.js'
+import { useDelayedRender } from '../../hooks/useDelayedRender.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { defaultLoadingOverlayState, reducer } from './reducer.js'

 const animatedDuration = 250

@@ -29,24 +29,24 @@ export const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> =
  })

  const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(
-    ({ isLoading, key, loadingText = fallbackText, type }) => {
+    ({ type, isLoading, key, loadingText = fallbackText }) => {
      if (isLoading) {
        triggerDelayedRender()
        dispatchOverlay({
+          type: 'add',
          payload: {
+            type,
            key,
            loadingText,
-            type,
          },
-          type: 'add',
        })
      } else {
        dispatchOverlay({
-          payload: {
-            key,
-            type,
-          },
          type: 'remove',
+          payload: {
+            type,
+            key,
+          },
        })
      }
    },
--- a/packages/ui/src/elements/LoadingOverlay/reducer.ts
+++ b/packages/ui/src/elements/LoadingOverlay/reducer.ts
@@ -1,4 +1,4 @@
-import type { Action, State } from './types'
+import type { Action, State } from './types.js'

 export const defaultLoadingOverlayState = {
  isLoading: false,
@@ -9,10 +9,10 @@ export const defaultLoadingOverlayState = {

 export const reducer = (state: State, action: Action): State => {
  const loadersCopy = [...state.loaders]
-  const { key = 'user', loadingText, type = 'fullscreen' } = action.payload
+  const { type = 'fullscreen', key = 'user', loadingText } = action.payload

  if (action.type === 'add') {
-    loadersCopy.push({ key, loadingText, type })
+    loadersCopy.push({ type, key, loadingText })
  } else if (action.type === 'remove') {
    const index = loadersCopy.findIndex((item) => item.key === key && item.type === type)
    loadersCopy.splice(index, 1)
--- a/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
+++ b/packages/ui/src/elements/Localizer/LocalizerLabel/index.tsx
@@ -1,9 +1,9 @@
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'

-import { Chevron } from '../../../icons/Chevron'
-import { useLocale } from '../../../providers/Locale'
-import { useTranslation } from '../../../providers/Translation'
+import { Chevron } from '../../../icons/Chevron/index.js'
+import { useLocale } from '../../../providers/Locale/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'localizer-button'
--- a/packages/ui/src/elements/Localizer/index.tsx
+++ b/packages/ui/src/elements/Localizer/index.tsx
@@ -1,14 +1,14 @@
 import { getTranslation } from '@payloadcms/translations'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React from 'react'

-import { useConfig } from '../../providers/Config'
-import { useLocale } from '../../providers/Locale'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
-import Popup from '../Popup'
-import * as PopupList from '../Popup/PopupButtonList'
-import { LocalizerLabel } from './LocalizerLabel'
+import { useConfig } from '../../providers/Config/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import * as PopupList from '../Popup/PopupButtonList/index.js'
+import Popup from '../Popup/index.js'
+import { LocalizerLabel } from './LocalizerLabel/index.js'
 import './index.scss'

 const baseClass = 'localizer'
--- a/packages/ui/src/elements/Logout/index.tsx
+++ b/packages/ui/src/elements/Logout/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import React from 'react'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { LogOut } from '../../icons/LogOut'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { LogOut } from '../../icons/LogOut/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'

 const baseClass = 'nav'

--- a/packages/ui/src/elements/Nav/NavHamburger/index.tsx
+++ b/packages/ui/src/elements/Nav/NavHamburger/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React from 'react'

-import { Hamburger } from '../../Hamburger'
-import { useNav } from '../context'
+import { Hamburger } from '../../Hamburger/index.js'
+import { useNav } from '../context.js'

 export const NavHamburger: React.FC<{
  baseClass?: string
--- a/packages/ui/src/elements/Nav/NavToggler/index.tsx
+++ b/packages/ui/src/elements/Nav/NavToggler/index.tsx
@@ -2,9 +2,9 @@
 import { useWindowInfo } from '@faceless-ui/window-info'
 import React from 'react'

-import { usePreferences } from '../../../providers/Preferences'
-import { useTranslation } from '../../../providers/Translation'
-import { useNav } from '../context'
+import { usePreferences } from '../../../providers/Preferences/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { useNav } from '../context.js'
 import './index.scss'

 const baseClass = 'nav-toggler'
--- a/packages/ui/src/elements/Nav/NavWrapper/index.tsx
+++ b/packages/ui/src/elements/Nav/NavWrapper/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'

-import { useNav } from '../context'
+import { useNav } from '../context.js'
 import './index.scss'

 export const NavWrapper: React.FC<{
--- a/packages/ui/src/elements/Nav/context.tsx
+++ b/packages/ui/src/elements/Nav/context.tsx
@@ -3,7 +3,7 @@ import { useWindowInfo } from '@faceless-ui/window-info'
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import React, { useEffect, useRef } from 'react'

-import { usePreferences } from '../../providers/Preferences'
+import { usePreferences } from '../../providers/Preferences/index.js'

 type NavContextType = {
  navOpen: boolean
--- a/packages/ui/src/elements/Nav/index.tsx
+++ b/packages/ui/src/elements/Nav/index.tsx
@@ -3,18 +3,18 @@ import type { Permissions, User } from 'payload/auth'
 import type { SanitizedConfig } from 'payload/types'

 import { getTranslation } from '@payloadcms/translations'
-import Link from 'next/link'
+import LinkWithDefault from 'next/link.js'
 import { isEntityHidden } from 'payload/utilities'
 import React from 'react'

-import type { EntityToGroup } from '../../utilities/groupNavItems'
+import type { EntityToGroup } from '../../utilities/groupNavItems.js'

-import { Chevron } from '../../icons/Chevron'
-import { EntityType, groupNavItems } from '../../utilities/groupNavItems'
-import Logout from '../Logout'
-import NavGroup from '../NavGroup'
-import { NavHamburger } from './NavHamburger'
-import { NavWrapper } from './NavWrapper'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { EntityType, groupNavItems } from '../../utilities/groupNavItems.js'
+import Logout from '../Logout/index.js'
+import NavGroup from '../NavGroup/index.js'
+import { NavHamburger } from './NavHamburger/index.js'
+import { NavWrapper } from './NavWrapper/index.js'
 import './index.scss'

 const baseClass = 'nav'
@@ -88,6 +88,7 @@ export const DefaultNav: React.FC<{
                  id = `nav-global-${entity.slug}`
                }

+                const Link = LinkWithDefault.default
                const LinkElement = Link || 'a'

                return (
--- a/packages/ui/src/elements/NavGroup/index.tsx
+++ b/packages/ui/src/elements/NavGroup/index.tsx
@@ -7,7 +7,7 @@ import { usePreferences } from '../../providers/Preferences/index.js'
 import { useNav } from '../Nav/context.js'
 import './index.scss'

-const { default: AnimateHeight } = AnimateHeightImport
+const AnimateHeight = AnimateHeightImport.default

 const baseClass = 'nav-group'

@@ -30,7 +30,7 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
        const preferences = (await getPreference(preferencesKey)) || []
        setCollapsed(preferences.indexOf(label) !== -1)
      }
-      setCollapsedFromPreferences()
+      void setCollapsedFromPreferences()
    }
  }, [getPreference, label, preferencesKey])

@@ -43,7 +43,7 @@ const NavGroup: React.FC<Props> = ({ children, label }) => {
      } else {
        preferences.push(label)
      }
-      setPreference(preferencesKey, preferences)
+      void setPreference(preferencesKey, preferences)
      setCollapsed(!collapsed)
    }

--- a/packages/ui/src/elements/Pagination/ClickableArrow/index.tsx
+++ b/packages/ui/src/elements/Pagination/ClickableArrow/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { Chevron } from '../../../icons/Chevron'
+import { Chevron } from '../../../icons/Chevron/index.js'
 import './index.scss'

 const baseClass = 'clickable-arrow'
--- a/packages/ui/src/elements/Pagination/Page/index.tsx
+++ b/packages/ui/src/elements/Pagination/Page/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

 const baseClass = 'paginator__page'

--- a/packages/ui/src/elements/Pagination/index.tsx
+++ b/packages/ui/src/elements/Pagination/index.tsx
@@ -1,14 +1,14 @@
 'use client'
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation.js'
 import queryString from 'qs'
 import React from 'react'

-import type { Node, Props } from './types'
+import type { Node, Props } from './types.js'

-import { useSearchParams } from '../../providers/SearchParams'
-import ClickableArrow from './ClickableArrow'
-import Page from './Page'
-import Separator from './Separator'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import ClickableArrow from './ClickableArrow/index.js'
+import Page from './Page/index.js'
+import Separator from './Separator/index.js'
 import './index.scss'

 const nodeTypes = {
@@ -70,12 +70,12 @@ export const Pagination: React.FC<Props> = (props) => {
  // Add first page if necessary
  if (currentPage > numberOfNeighbors + 1) {
    nodes.unshift({
+      type: 'Page',
      props: {
        isFirstPage: true,
        page: 1,
        updatePage,
      },
-      type: 'Page',
    })
  }

@@ -84,32 +84,32 @@ export const Pagination: React.FC<Props> = (props) => {
  // Add last page if necessary
  if (rangeEndIndex < totalPages) {
    nodes.push({
+      type: 'Page',
      props: {
        isLastPage: true,
        page: totalPages,
        updatePage,
      },
-      type: 'Page',
    })
  }

  // Add prev and next arrows based on necessity
  nodes.unshift({
+    type: 'ClickableArrow',
    props: {
      direction: 'right',
      isDisabled: !hasNextPage,
      updatePage: () => updatePage(nextPage),
    },
-    type: 'ClickableArrow',
  })

  nodes.unshift({
+    type: 'ClickableArrow',
    props: {
      direction: 'left',
      isDisabled: !hasPrevPage,
      updatePage: () => updatePage(prevPage),
    },
-    type: 'ClickableArrow',
  })

  return (
--- a/packages/ui/src/elements/PerPage/index.tsx
+++ b/packages/ui/src/elements/PerPage/index.tsx
@@ -1,15 +1,15 @@
 'use client'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation.js'
 import { collectionDefaults } from 'payload/config'
 import qs from 'qs'
 import React from 'react'

-import { Chevron } from '../../icons/Chevron'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
-import Popup from '../Popup'
-import * as PopupList from '../Popup/PopupButtonList'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import * as PopupList from '../Popup/PopupButtonList/index.js'
+import Popup from '../Popup/index.js'
 import './index.scss'

 const baseClass = 'per-page'
--- a/packages/ui/src/elements/Pill/index.tsx
+++ b/packages/ui/src/elements/Pill/index.tsx
@@ -1,12 +1,13 @@
 'use client'
 import type { ElementType } from 'react'

-import Link from 'next/link'
+import LinkWithDefault from 'next/link.js'
+const Link = LinkWithDefault.default
 import React from 'react' // TODO: abstract this out to support all routers

-import type { Props, RenderedTypeProps } from './types'
+import type { Props, RenderedTypeProps } from './types.js'

-import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable'
+import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'
 import './index.scss'

 const baseClass = 'pill'
--- a/packages/ui/src/elements/Popup/PopupButtonList/index.tsx
+++ b/packages/ui/src/elements/Popup/PopupButtonList/index.tsx
@@ -1,8 +1,9 @@
 'use client'
 // TODO: abstract the `next/link` dependency out from this component
-import type { LinkProps } from 'next/link'
+import type { LinkProps } from 'next/link.js'

-import Link from 'next/link'
+import LinkWithDefault from 'next/link.js'
+const Link = LinkWithDefault.default
 import * as React from 'react' // TODO: abstract this out to support all routers

 import './index.scss'
--- a/packages/ui/src/elements/Popup/PopupTrigger/index.tsx
+++ b/packages/ui/src/elements/Popup/PopupTrigger/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

 import './index.scss'

--- a/packages/ui/src/elements/Popup/index.tsx
+++ b/packages/ui/src/elements/Popup/index.tsx
@@ -2,10 +2,10 @@
 import { useWindowInfo } from '@faceless-ui/window-info'
 import React, { useCallback, useEffect, useRef, useState } from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { useIntersect } from '../../hooks/useIntersect'
-import { PopupTrigger } from './PopupTrigger'
+import { useIntersect } from '../../hooks/useIntersect.js'
+import { PopupTrigger } from './PopupTrigger/index.js'
 import './index.scss'

 const baseClass = 'popup'
--- a/packages/ui/src/elements/PreviewButton/index.tsx
+++ b/packages/ui/src/elements/PreviewButton/index.tsx
@@ -5,13 +5,13 @@ import type { CustomPreviewButtonProps, DefaultPreviewButtonProps } from 'payloa
 import React, { useCallback, useRef, useState } from 'react'
 import { toast } from 'react-toastify'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { useAuth } from '../../providers/Auth'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Button } from '../Button/index.js'

 const baseClass = 'preview-btn'

--- a/packages/ui/src/elements/PreviewSizes/index.tsx
+++ b/packages/ui/src/elements/PreviewSizes/index.tsx
@@ -7,7 +7,7 @@ import type {

 import React, { useEffect, useMemo, useState } from 'react'

-import FileMeta from '../FileDetails/FileMeta'
+import FileMeta from '../FileDetails/FileMeta/index.js'
 import './index.scss'

 const baseClass = 'preview-sizes'
--- a/packages/ui/src/elements/Publish/index.tsx
+++ b/packages/ui/src/elements/Publish/index.tsx
@@ -4,13 +4,13 @@ import type { CustomPublishButtonProps, DefaultPublishButtonProps } from 'payloa
 import qs from 'qs'
 import React, { useCallback } from 'react'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { useForm, useFormModified } from '../../forms/Form/context'
-import FormSubmit from '../../forms/Submit'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { useForm, useFormModified } from '../../forms/Form/context.js'
+import FormSubmit from '../../forms/Submit/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'

 const DefaultPublishButton: React.FC<DefaultPublishButtonProps> = ({
  id,
--- a/packages/ui/src/elements/PublishMany/index.tsx
+++ b/packages/ui/src/elements/PublishMany/index.tsx
@@ -4,17 +4,17 @@ import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { useAuth } from '../../providers/Auth'
-import { useConfig } from '../../providers/Config'
-import { useSearchParams } from '../../providers/SearchParams'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
-import { useTranslation } from '../../providers/Translation'
-import { MinimalTemplate } from '../../templates/Minimal'
-import { requests } from '../../utilities/api'
-import { Button } from '../Button'
-import Pill from '../Pill'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { MinimalTemplate } from '../../templates/Minimal/index.js'
+import { requests } from '../../utilities/api.js'
+import { Button } from '../Button/index.js'
+import Pill from '../Pill/index.js'
 import './index.scss'

 const baseClass = 'publish-many'
--- a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.tsx
@@ -2,9 +2,9 @@ import type { ClearIndicatorProps } from 'react-select'

 import React from 'react'

-import type { Option as OptionType } from '../types'
+import type { Option as OptionType } from '../types.js'

-import { X } from '../../../icons/X'
+import { X } from '../../../icons/X/index.js'
 import './index.scss'

 const baseClass = 'clear-indicator'
--- a/packages/ui/src/elements/ReactSelect/Control/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/Control/index.tsx
@@ -3,13 +3,13 @@ import type { ControlProps } from 'react-select'
 import React from 'react'
 import { components as SelectComponents } from 'react-select'

-import type { Option } from '../types'
+import type { Option } from '../types.js'

 export const Control: React.FC<ControlProps<Option, any>> = (props) => {
  const {
    children,
    innerProps,
-    // @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
+    // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
    selectProps: { customProps: { disableKeyDown, disableMouseDown } = {} } = {},
  } = props

@@ -18,7 +18,6 @@ export const Control: React.FC<ControlProps<Option, any>> = (props) => {
      {...props}
      innerProps={{
        ...innerProps,
-        // @ts-ignore
        onKeyDown: (e) => {
          if (disableKeyDown) {
            e.stopPropagation()
--- a/packages/ui/src/elements/ReactSelect/MultiValue/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.tsx
@@ -3,9 +3,9 @@ import type { MultiValueProps } from 'react-select'
 import React from 'react'
 import { components as SelectComponents } from 'react-select'

-import type { Option } from '../types'
+import type { Option } from '../types.js'

-import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable'
+import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'
 import './index.scss'

 const baseClass = 'multi-value'
--- a/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValueLabel/index.tsx
@@ -3,14 +3,14 @@ import type { MultiValueProps } from 'react-select'
 import React from 'react'
 import { components as SelectComponents } from 'react-select'

-import type { Option } from '../types'
+import type { Option } from '../types.js'

 import './index.scss'

 const baseClass = 'multi-value-label'

 export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
-  // @ts-ignore-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
+  // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
  const { selectProps: { customProps: { draggableProps } = {} } = {} } = props

  return (
--- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.tsx
@@ -2,11 +2,11 @@ import type { MultiValueRemoveProps } from 'react-select'

 import React from 'react'

-import type { Option as OptionType } from '../types'
+import type { Option as OptionType } from '../types.js'

-import { X } from '../../../icons/X'
-import { useTranslation } from '../../../providers/Translation'
-import { Tooltip } from '../../Tooltip'
+import { X } from '../../../icons/X/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { Tooltip } from '../../Tooltip/index.js'
 import './index.scss'

 const baseClass = 'multi-value-remove'
--- a/packages/ui/src/elements/ReactSelect/SingleValue/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/SingleValue/index.tsx
@@ -3,7 +3,7 @@ import type { SingleValueProps } from 'react-select'
 import React from 'react'
 import { components as SelectComponents } from 'react-select'

-import type { Option } from '../types'
+import type { Option } from '../types.js'

 const baseClass = 'react-select--single-value'

--- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.tsx
@@ -3,14 +3,14 @@ import type { ValueContainerProps } from 'react-select'
 import React from 'react'
 import { components as SelectComponents } from 'react-select'

-import type { Option } from '../types'
+import type { Option } from '../types.js'

 import './index.scss'

 const baseClass = 'value-container'

 export const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {
-  // @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
+  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
  const { selectProps: { customProps } = {} } = props

  return (
--- a/packages/ui/src/elements/ReactSelect/index.tsx
+++ b/packages/ui/src/elements/ReactSelect/index.tsx
@@ -7,19 +7,19 @@ import React from 'react'
 import Select from 'react-select'
 import CreatableSelect from 'react-select/creatable'

-import type { Option } from './types'
-import type { Props as ReactSelectAdapterProps } from './types'
+import type { Option } from './types.js'
+import type { Props as ReactSelectAdapterProps } from './types.js'

-import { Chevron } from '../../icons/Chevron'
-import { useTranslation } from '../../providers/Translation'
-import DraggableSortable from '../DraggableSortable'
-import { ClearIndicator } from './ClearIndicator'
-import { Control } from './Control'
-import { MultiValue } from './MultiValue'
-import { MultiValueLabel } from './MultiValueLabel'
-import { MultiValueRemove } from './MultiValueRemove'
-import { SingleValue } from './SingleValue'
-import { ValueContainer } from './ValueContainer'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import DraggableSortable from '../DraggableSortable/index.js'
+import { ClearIndicator } from './ClearIndicator/index.js'
+import { Control } from './Control/index.js'
+import { MultiValue } from './MultiValue/index.js'
+import { MultiValueLabel } from './MultiValueLabel/index.js'
+import { MultiValueRemove } from './MultiValueRemove/index.js'
+import { SingleValue } from './SingleValue/index.js'
+import { ValueContainer } from './ValueContainer/index.js'
 import './index.scss'

 const createOption = (label: string) => ({
--- a/packages/ui/src/elements/ReactSelect/types.ts
+++ b/packages/ui/src/elements/ReactSelect/types.ts
@@ -1,6 +1,6 @@
 import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } from 'react-select'

-import type { DocumentDrawerProps } from '../DocumentDrawer/types'
+import type { DocumentDrawerProps } from '../DocumentDrawer/types.js'

 type CustomSelectProps = {
  disableKeyDown?: boolean
@@ -13,7 +13,7 @@ type CustomSelectProps = {

 // augment the types for the `Select` component from `react-select`
 // this is to include the `selectProps` prop at the top-level `Select` component
-// @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
+// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
 declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
    customProps?: CustomSelectProps
@@ -22,7 +22,7 @@ declare module 'react-select/dist/declarations/src/Select' {

 // augment the types for the `CommonPropsAndClassName` from `react-select`
 // this will include the `selectProps` prop to every `react-select` component automatically
-// @ts-ignore-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
+// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
 declare module 'react-select/dist/declarations/src' {
  export interface CommonPropsAndClassName<
    Option,
--- a/packages/ui/src/elements/RenderTitle/index.tsx
+++ b/packages/ui/src/elements/RenderTitle/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import React from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import IDLabel from '../IDLabel'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import IDLabel from '../IDLabel/index.js'
 import './index.scss'

 const baseClass = 'render-title'
--- a/packages/ui/src/elements/RenderTitle/types.ts
+++ b/packages/ui/src/elements/RenderTitle/types.ts
@@ -1,5 +1,3 @@
-import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
-
 export type Props = {
  className?: string
  dateFormat?: any // TODO: type this
--- a/packages/ui/src/elements/Save/index.tsx
+++ b/packages/ui/src/elements/Save/index.tsx
@@ -3,12 +3,12 @@ import type { CustomSaveButtonProps, DefaultSaveButtonProps } from 'payload/type

 import React, { useRef } from 'react'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { useForm } from '../../forms/Form/context'
-import FormSubmit from '../../forms/Submit'
-import useHotkey from '../../hooks/useHotkey'
-import { useEditDepth } from '../../providers/EditDepth'
-import { useTranslation } from '../../providers/Translation'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { useForm } from '../../forms/Form/context.js'
+import FormSubmit from '../../forms/Submit/index.js'
+import useHotkey from '../../hooks/useHotkey.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'

 const DefaultSaveButton: React.FC<DefaultSaveButtonProps> = ({ label, save }) => {
  const ref = useRef<HTMLButtonElement>(null)
--- a/packages/ui/src/elements/SaveDraft/index.tsx
+++ b/packages/ui/src/elements/SaveDraft/index.tsx
@@ -3,15 +3,15 @@ import type { CustomSaveDraftButtonProps, DefaultSaveDraftButtonProps } from 'pa

 import React, { useCallback, useRef } from 'react'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { useForm, useFormModified } from '../../forms/Form/context'
-import FormSubmit from '../../forms/Submit'
-import useHotkey from '../../hooks/useHotkey'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useEditDepth } from '../../providers/EditDepth'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { useForm, useFormModified } from '../../forms/Form/context.js'
+import FormSubmit from '../../forms/Submit/index.js'
+import useHotkey from '../../hooks/useHotkey.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'

 const baseClass = 'save-draft'

--- a/packages/ui/src/elements/SearchFilter/index.tsx
+++ b/packages/ui/src/elements/SearchFilter/index.tsx
@@ -1,15 +1,15 @@
 import { getTranslation } from '@payloadcms/translations'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation.js'
 import queryString from 'qs'
 import React, { useEffect, useRef, useState } from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import useDebounce from '../../hooks/useDebounce'
-import { Search } from '../../icons/Search'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
+import useDebounce from '../../hooks/useDebounce.js'
+import { Search } from '../../icons/Search/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'search-filter'
--- a/packages/ui/src/elements/SelectAll/index.tsx
+++ b/packages/ui/src/elements/SelectAll/index.tsx
@@ -2,9 +2,9 @@

 import React from 'react'

-import { CheckboxInput } from '../../forms/fields/Checkbox/Input'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
-import { useTranslation } from '../../providers/Translation'
+import { CheckboxInput } from '../../forms/fields/Checkbox/Input.js'
+import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'select-all'
--- a/packages/ui/src/elements/SelectRow/index.tsx
+++ b/packages/ui/src/elements/SelectRow/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import React from 'react'

-import { useTableCell } from '../../elements/Table/TableCellProvider'
-import { CheckboxInput } from '../../forms/fields/Checkbox/Input'
-import { useSelection } from '../../providers/SelectionProvider'
+import { useTableCell } from '../../elements/Table/TableCellProvider/index.js'
+import { CheckboxInput } from '../../forms/fields/Checkbox/Input.js'
+import { useSelection } from '../../providers/SelectionProvider/index.js'
 import './index.scss'

 const baseClass = 'select-row'
--- a/packages/ui/src/elements/ShimmerEffect/index.tsx
+++ b/packages/ui/src/elements/ShimmerEffect/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import * as React from 'react'

-import { useDelay } from '../../hooks/useDelay'
+import { useDelay } from '../../hooks/useDelay.js'
 import './index.scss'

 type ShimmerEffectT = {
--- a/packages/ui/src/elements/SortColumn/index.tsx
+++ b/packages/ui/src/elements/SortColumn/index.tsx
@@ -1,15 +1,15 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation.js'
 import queryString from 'qs'
 import React, { useCallback } from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { Chevron } from '../../icons/Chevron'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'sort-column'
--- a/packages/ui/src/elements/SortComplex/index.tsx
+++ b/packages/ui/src/elements/SortComplex/index.tsx
@@ -2,17 +2,17 @@ import type { OptionObject } from 'payload/types'

 import { getTranslation } from '@payloadcms/translations'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation.js'
 import { sortableFieldTypes } from 'payload/fields/index'
 import { fieldAffectsData } from 'payload/types'
 import queryString from 'qs'
 import React, { useEffect, useState } from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
-import ReactSelect from '../ReactSelect'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import ReactSelect from '../ReactSelect/index.js'
 import './index.scss'

 const baseClass = 'sort-complex'
--- a/packages/ui/src/elements/Status/index.tsx
+++ b/packages/ui/src/elements/Status/index.tsx
@@ -6,13 +6,13 @@ import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'

 // import { requests } from '../../../api'
-import { useForm } from '../../forms/Form/context'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
-import { MinimalTemplate } from '../../templates/Minimal'
-import { Button } from '../Button'
+import { useForm } from '../../forms/Form/context.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { MinimalTemplate } from '../../templates/Minimal/index.js'
+import { Button } from '../Button/index.js'
 import './index.scss'

 const baseClass = 'status'
--- a/packages/ui/src/elements/StayLoggedIn/index.tsx
+++ b/packages/ui/src/elements/StayLoggedIn/index.tsx
@@ -1,14 +1,14 @@
 'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React from 'react'

-import type { Props } from './types'
+import type { Props } from './types.js'

-import { Button } from '../../elements/Button'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
+import { Button } from '../../elements/Button/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'stay-logged-in'
--- a/packages/ui/src/elements/StepNav/SetStepNav.tsx
+++ b/packages/ui/src/elements/StepNav/SetStepNav.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useEffect } from 'react'

-import type { StepNavItem } from './types'
+import type { StepNavItem } from './types.js'

-import { useStepNav } from '.'
+import { useStepNav } from './index.js'

 export const SetStepNav: React.FC<{
  nav: StepNavItem[]
--- a/packages/ui/src/elements/StepNav/index.tsx
+++ b/packages/ui/src/elements/StepNav/index.tsx
@@ -2,11 +2,11 @@
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, createContext, useContext, useState } from 'react'

-import type { Context as ContextType } from './types'
+import type { Context as ContextType } from './types.js'

-import IconGraphic from '../../graphics/Icon'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
+import IconGraphic from '../../graphics/Icon/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

 const baseClass = 'step-nav'
--- a/packages/ui/src/utilities/buildComponentMap/index.tsx
+++ b/packages/ui/src/utilities/buildComponentMap/index.tsx
@@ -3,10 +3,10 @@ import type { EditViewProps, SanitizedConfig } from 'payload/types'

 import React from 'react'

-import type { CollectionComponentMap, ComponentMap, GlobalComponentMap } from './types'
+import type { CollectionComponentMap, ComponentMap, GlobalComponentMap } from './types.js'

-import { mapActions } from './mapActions'
-import { mapFields } from './mapFields'
+import { mapActions } from './mapActions.js'
+import { mapFields } from './mapFields.js'

 export const buildComponentMap = (args: {
  DefaultCell: React.FC<any>
--- a/packages/ui/src/utilities/buildComponentMap/mapActions.tsx
+++ b/packages/ui/src/utilities/buildComponentMap/mapActions.tsx
@@ -2,7 +2,7 @@ import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/t

 import React from 'react'

-import type { ActionMap } from './types'
+import type { ActionMap } from './types.js'

 export const mapActions = (args: {
  collectionConfig?: SanitizedCollectionConfig
--- a/packages/ui/src/utilities/buildComponentMap/mapFields.tsx
+++ b/packages/ui/src/utilities/buildComponentMap/mapFields.tsx
@@ -4,17 +4,17 @@ import type { CellProps, Field, FieldWithPath, LabelProps, SanitizedConfig } fro
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import React, { Fragment } from 'react'

-import type { Props as FieldDescription } from '../../forms/FieldDescription/types'
-import type { FormFieldBase } from '../../forms/fields/shared'
-import type { FieldMap, MappedField, MappedTab, ReducedBlock } from './types'
+import type { Props as FieldDescription } from '../../forms/FieldDescription/types.js'
+import type { FormFieldBase } from '../../forms/fields/shared.js'
+import type { FieldMap, MappedField, MappedTab, ReducedBlock } from './types.js'

-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { SortColumn } from '../../elements/SortColumn'
-import DefaultError from '../../forms/Error'
-import DefaultDescription from '../../forms/FieldDescription'
-import DefaultLabel from '../../forms/Label'
-import { fieldTypes } from '../../forms/fields'
-import HiddenInput from '../../forms/fields/HiddenInput'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { SortColumn } from '../../elements/SortColumn/index.js'
+import DefaultError from '../../forms/Error/index.js'
+import DefaultDescription from '../../forms/FieldDescription/index.js'
+import DefaultLabel from '../../forms/Label/index.js'
+import HiddenInput from '../../forms/fields/HiddenInput/index.js'
+import { fieldTypes } from '../../forms/fields/index.js'

 export const mapFields = (args: {
  DefaultCell?: React.FC<any>
--- a/packages/ui/src/utilities/buildComponentMap/types.ts
+++ b/packages/ui/src/utilities/buildComponentMap/types.ts
@@ -11,7 +11,7 @@ import type {
  TabsField,
 } from 'payload/types'

-import type { fieldTypes } from '../../forms/fields'
+import type { fieldTypes } from '../../forms/fields/index.js'

 export type MappedTab = {
  label: TabsField['tabs'][0]['label']
--- a/packages/ui/src/utilities/buildFieldSchemaMap/index.ts
+++ b/packages/ui/src/utilities/buildFieldSchemaMap/index.ts
@@ -1,8 +1,8 @@
 import type { SanitizedConfig } from 'payload/types'

-import type { FieldSchemaMap } from './types'
+import type { FieldSchemaMap } from './types.js'

-import { traverseFields } from './traverseFields'
+import { traverseFields } from './traverseFields.js'

 export const buildFieldSchemaMap = (config: SanitizedConfig): FieldSchemaMap => {
  const result: FieldSchemaMap = new Map()
--- a/packages/ui/src/utilities/buildFieldSchemaMap/traverseFields.ts
+++ b/packages/ui/src/utilities/buildFieldSchemaMap/traverseFields.ts
@@ -3,7 +3,7 @@ import type { Field, SanitizedConfig } from 'payload/types'
 import { sanitizeFields } from 'payload/config'
 import { tabHasName } from 'payload/types'

-import type { FieldSchemaMap } from './types'
+import type { FieldSchemaMap } from './types.js'

 type Args = {
  config: SanitizedConfig
--- a/packages/ui/src/utilities/formatDate/index.ts
+++ b/packages/ui/src/utilities/formatDate/index.ts
@@ -1,7 +1,7 @@
 import { format, formatDistanceToNow } from 'date-fns'
 import * as Locale from 'date-fns/locale'

-import { getSupportedDateLocale } from './getSupportedDateLocale'
+import { getSupportedDateLocale } from './getSupportedDateLocale.js'

 export const formatDate = (
  date: Date | number | string | undefined,
--- a/packages/ui/src/utilities/formatDocTitle.ts
+++ b/packages/ui/src/utilities/formatDocTitle.ts
@@ -3,7 +3,7 @@ import type { FormField, SanitizedCollectionConfig } from 'payload/types'

 import { getObjectDotNotation } from 'payload/utilities'

-import { formatDate } from './formatDate'
+import { formatDate } from './formatDate/index.js'

 export const formatDocTitle = (args: {
  dateFormat?: any
--- a/packages/ui/src/utilities/getFormState.ts
+++ b/packages/ui/src/utilities/getFormState.ts
@@ -1,6 +1,6 @@
 import type { FormState, SanitizedConfig } from 'payload/types'

-import type { BuildFormStateArgs } from '..'
+import type { BuildFormStateArgs } from '../forms/utilities/buildStateFromSchema/index.js'

 export const getFormState = async (args: {
  apiRoute: SanitizedConfig['routes']['api']
--- a/packages/ui/src/utilities/getRequestLanguage.ts
+++ b/packages/ui/src/utilities/getRequestLanguage.ts
@@ -1,4 +1,4 @@
-import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies'
+import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies.js'

 type GetRequestLanguageArgs = {
  cookies: Map<string, string> | ReadonlyRequestCookies