chore: updates imports for ESM

packages/ui/src/elements/ArrayAction/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Chevron } from '../../icons/Chevron'
-import { Copy } from '../../icons/Copy'
-import { MoreIcon } from '../../icons/More'
-import { Plus } from '../../icons/Plus'
-import { X } from '../../icons/X'
-import { useTranslation } from '../../providers/Translation'
-import Popup from '../Popup'
-import * as PopupList from '../Popup/PopupButtonList'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { Copy } from '../../icons/Copy/index.js'
+import { MoreIcon } from '../../icons/More/index.js'
+import { Plus } from '../../icons/Plus/index.js'
+import { X } from '../../icons/X/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 = 'array-actions'

packages/ui/src/elements/Autosave/index.tsx

@@ -1,19 +1,19 @@
 'use client'
 // TODO: abstract the `next/navigation` dependency out from this component
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useAllFormFields, useFormModified } from '../../forms/Form/context'
-import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues'
-import useDebounce from '../../hooks/useDebounce'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
-import { formatTimeToNow } from '../../utilities/formatDate'
+import { useAllFormFields, useFormModified } from '../../forms/Form/context.js'
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues.js'
+import useDebounce from '../../hooks/useDebounce.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 { formatTimeToNow } from '../../utilities/formatDate/index.js'
 import './index.scss'
 
 const baseClass = 'autosave'

packages/ui/src/elements/Banner/index.tsx

@@ -1,20 +1,20 @@
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react' // TODO: abstract this out to support all routers
 
-import type { Props, RenderedTypeProps } from './types'
+import type { Props, RenderedTypeProps } from './types.d.ts'
 
 import './index.scss'
 
 const baseClass = 'banner'
 
 export const Banner: React.FC<Props> = ({
+  type = 'default',
   alignIcon = 'right',
   children,
   className,
   icon,
   onClick,
   to,
-  type = 'default',
 }) => {
   const classes = [
     baseClass,

packages/ui/src/elements/Button/index.tsx

@@ -1,15 +1,15 @@
 'use client'
 import React, { Fragment, forwardRef, isValidElement } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Chevron } from '../../icons/Chevron'
-import { Edit } from '../../icons/Edit'
-import { LinkIcon } from '../../icons/Link'
-import { Plus } from '../../icons/Plus'
-import { Swap } from '../../icons/Swap'
-import { X } from '../../icons/X'
-import { Tooltip } from '../Tooltip'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { Edit } from '../../icons/Edit/index.js'
+import { LinkIcon } from '../../icons/Link/index.js'
+import { Plus } from '../../icons/Plus/index.js'
+import { Swap } from '../../icons/Swap/index.js'
+import { X } from '../../icons/X/index.js'
+import { Tooltip } from '../Tooltip/index.js'
 import './index.scss'
 
 const icons = {

packages/ui/src/elements/Button/types.ts

@@ -1,7 +1,7 @@
 import type { ElementType, MouseEvent } from 'react'
 import type React from 'react'
 
-import type { LinkType } from '../../exports/types'
+import type { LinkType } from '../../exports/types.d.ts'
 
 export type Props = {
   Link?: LinkType

packages/ui/src/elements/Card/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Button } from '../Button'
+import { Button } from '../Button/index.js'
 import './index.scss'
 
 const baseClass = 'card'

packages/ui/src/elements/CodeEditor/CodeEditor.tsx

@@ -1,10 +1,10 @@
 import Editor from '@monaco-editor/react'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTheme } from '../../providers/Theme'
-import { ShimmerEffect } from '../ShimmerEffect'
+import { useTheme } from '../../providers/Theme/index.js'
+import { ShimmerEffect } from '../ShimmerEffect/index.js'
 import './index.scss'
 
 const baseClass = 'code-editor'

packages/ui/src/elements/CodeEditor/index.tsx

@@ -1,10 +1,10 @@
 import React, { Suspense, lazy } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { ShimmerEffect } from '../ShimmerEffect'
+import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
-// @ts-ignore-next-line Just TypeScript being broken // TODO: Open TypeScript issue
+// @ts-expect-error-next-line Just TypeScript being broken // TODO: Open TypeScript issue
 const LazyEditor = lazy(() => import('./CodeEditor'))
 
 export const CodeEditor: React.FC<Props> = (props) => {

packages/ui/src/elements/Collapsible/index.tsx

@@ -5,13 +5,13 @@ import AnimateHeightWithDefault from 'react-animate-height'
 // @ts-expect-error trust me it works
 const AnimateHeight = AnimateHeightWithDefault || AnimateHeightWithDefault.default
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Chevron } from '../../icons/Chevron'
-import { DragHandle } from '../../icons/DragHandle'
-import { useTranslation } from '../../providers/Translation'
+import { Chevron } from '../../icons/Chevron/index.js'
+import { DragHandle } from '../../icons/DragHandle/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
-import { CollapsibleProvider, useCollapsible } from './provider'
+import { CollapsibleProvider, useCollapsible } from './provider.js'
 
 const baseClass = 'collapsible'
 

packages/ui/src/elements/Collapsible/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types'
+import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.d.ts'
 
 export type Props = {
   actions?: React.ReactNode

packages/ui/src/elements/ColumnSelector/index.tsx

@@ -2,15 +2,15 @@
 import { getTranslation } from '@payloadcms/translations'
 import React, { useId } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Plus } from '../../icons/Plus'
-import { X } from '../../icons/X'
-import { useEditDepth } from '../../providers/EditDepth'
-import { useTranslation } from '../../providers/Translation'
-import DraggableSortable from '../DraggableSortable'
-import Pill from '../Pill'
-import { useTableColumns } from '../TableColumns'
+import { Plus } from '../../icons/Plus/index.js'
+import { X } from '../../icons/X/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import DraggableSortable from '../DraggableSortable/index.js'
+import Pill from '../Pill/index.js'
+import { useTableColumns } from '../TableColumns/index.js'
 import './index.scss'
 
 const baseClass = 'column-selector'

packages/ui/src/elements/CopyToClipboard/index.tsx

@@ -1,11 +1,11 @@
 'use client'
 import React, { useRef, useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Copy } from '../../icons/Copy'
-import { useTranslation } from '../../providers/Translation'
-import { Tooltip } from '../Tooltip'
+import { Copy } from '../../icons/Copy/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Tooltip } from '../Tooltip/index.js'
 import './index.scss'
 
 const baseClass = 'copy-to-clipboard'

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -3,12 +3,12 @@ import React from 'react'
 import DatePicker, { registerLocale } from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Calendar as CalendarIcon } from '../../icons/Calendar'
-import { X as XIcon } from '../../icons/X'
-import { useTranslation } from '../../providers/Translation'
-import { getSupportedDateLocale } from '../../utilities/formatDate/getSupportedDateLocale'
+import { Calendar as CalendarIcon } from '../../icons/Calendar/index.js'
+import { X as XIcon } from '../../icons/X/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { getSupportedDateLocale } from '../../utilities/formatDate/getSupportedDateLocale.js'
 import './index.scss'
 
 const baseClass = 'date-time-picker'

packages/ui/src/elements/DatePicker/index.tsx

@@ -1,10 +1,10 @@
 import React, { Suspense, lazy } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { ShimmerEffect } from '../ShimmerEffect'
+import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
-// @ts-ignore-next-line Just TypeScript being broken // TODO: Open TypeScript issue
+// @ts-expect-error-next-line Just TypeScript being broken // TODO: Open TypeScript issue
 const DatePicker = lazy(() => import('./DatePicker'))
 
 const DatePickerField: React.FC<Props> = (props) => (

packages/ui/src/elements/DeleteDocument/index.tsx

@@ -1,21 +1,21 @@
 'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useForm } from '../../forms/Form/context'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useTranslation } from '../../providers/Translation'
-import { MinimalTemplate } from '../../templates/Minimal'
-import { requests } from '../../utilities/api'
-import { Button } from '../Button'
-import * as PopupList from '../Popup/PopupButtonList'
-import { Translation } from '../Translation'
+import { useForm } from '../../forms/Form/context.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/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 * as PopupList from '../Popup/PopupButtonList/index.js'
+import { Translation } from '../Translation/index.js'
 import './index.scss'
 
 const baseClass = 'delete-document'

packages/ui/src/elements/DeleteMany/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.d.ts'
 
-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 = 'delete-documents'

packages/ui/src/elements/DocumentControls/index.tsx

@@ -4,21 +4,21 @@ import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/t
 
 import React, { Fragment } from 'react'
 
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useTranslation } from '../../providers/Translation'
-import { formatDate } from '../../utilities/formatDate'
-import Autosave from '../Autosave'
-import DeleteDocument from '../DeleteDocument'
-import DuplicateDocument from '../DuplicateDocument'
-import { Gutter } from '../Gutter'
-import Popup from '../Popup'
-import * as PopupList from '../Popup/PopupButtonList'
-import PreviewButton from '../PreviewButton'
-import { Publish } from '../Publish'
-import { Save } from '../Save'
-import { SaveDraft } from '../SaveDraft'
-import Status from '../Status'
+import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { formatDate } from '../../utilities/formatDate/index.js'
+import Autosave from '../Autosave/index.js'
+import DeleteDocument from '../DeleteDocument/index.js'
+import DuplicateDocument from '../DuplicateDocument/index.js'
+import { Gutter } from '../Gutter/index.js'
+import * as PopupList from '../Popup/PopupButtonList/index.js'
+import Popup from '../Popup/index.js'
+import PreviewButton from '../PreviewButton/index.js'
+import { Publish } from '../Publish/index.js'
+import { Save } from '../Save/index.js'
+import { SaveDraft } from '../SaveDraft/index.js'
+import Status from '../Status/index.js'
 import './index.scss'
 
 const baseClass = 'doc-controls'

packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx

@@ -8,23 +8,23 @@ import queryString from 'qs'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { DocumentDrawerProps } from './types'
+import type { DocumentDrawerProps } from './types.d.ts'
 
-import { baseClass } from '.'
-import { FieldPathProvider, useFieldPath } from '../../forms/FieldPathProvider'
-import { useRelatedCollections } from '../../forms/fields/Relationship/AddNew/useRelatedCollections'
-import usePayloadAPI from '../../hooks/usePayloadAPI'
-import { X } from '../../icons/X'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { DocumentInfoProvider } from '../../providers/DocumentInfo'
-import { useFormQueryParams } from '../../providers/FormQueryParams'
-import { useLocale } from '../../providers/Locale'
-import { useTranslation } from '../../providers/Translation'
-import { getFormState } from '../../utilities/getFormState'
-import { Gutter } from '../Gutter'
-import IDLabel from '../IDLabel'
-import { LoadingOverlay } from '../Loading'
+import { FieldPathProvider, useFieldPath } from '../../forms/FieldPathProvider/index.js'
+import { useRelatedCollections } from '../../forms/fields/Relationship/AddNew/useRelatedCollections.js'
+import usePayloadAPI from '../../hooks/usePayloadAPI.js'
+import { X } from '../../icons/X/index.js'
+import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'
+import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
+import { useLocale } from '../../providers/Locale/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { getFormState } from '../../utilities/getFormState.js'
+import { Gutter } from '../Gutter/index.js'
+import IDLabel from '../IDLabel/index.js'
+import { LoadingOverlay } from '../Loading/index.js'
+import { baseClass } from './index.js'
 
 const Content: React.FC<DocumentDrawerProps> = ({
   id,

packages/ui/src/elements/DocumentDrawer/index.tsx

@@ -3,13 +3,13 @@ import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
 
-import type { DocumentDrawerProps, DocumentTogglerProps, UseDocumentDrawer } from './types'
+import type { DocumentDrawerProps, DocumentTogglerProps, UseDocumentDrawer } from './types.d.ts'
 
-import { useRelatedCollections } from '../../forms/fields/Relationship/AddNew/useRelatedCollections'
-import { useEditDepth } from '../../providers/EditDepth'
-import { useTranslation } from '../../providers/Translation'
-import { Drawer, DrawerToggler } from '../Drawer'
-import { DocumentDrawerContent } from './DrawerContent'
+import { useRelatedCollections } from '../../forms/fields/Relationship/AddNew/useRelatedCollections.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Drawer, DrawerToggler } from '../Drawer/index.js'
+import { DocumentDrawerContent } from './DrawerContent.js'
 import './index.scss'
 
 export const baseClass = 'doc-drawer'

packages/ui/src/elements/DocumentDrawer/types.ts

@@ -1,8 +1,8 @@
 import type React from 'react'
 import type { HTMLAttributes } from 'react'
 
-import type { DocumentInfoContext } from '../../providers/DocumentInfo/types'
-import type { Props as DrawerProps } from '../Drawer/types'
+import type { DocumentInfoContext } from '../../providers/DocumentInfo/types.d.ts'
+import type { Props as DrawerProps } from '../Drawer/types.d.ts'
 
 export type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {
   collectionSlug: string

packages/ui/src/elements/DocumentFields/index.tsx

@@ -3,10 +3,10 @@ import type { Description, Operation } from 'payload/types'
 
 import React from 'react'
 
-import type { FieldMap } from '../../utilities/buildComponentMap/types'
+import type { FieldMap } from '../../utilities/buildComponentMap/types.js'
 
-import RenderFields from '../../forms/RenderFields'
-import { Gutter } from '../Gutter'
+import RenderFields from '../../forms/RenderFields/index.js'
+import { Gutter } from '../Gutter/index.js'
 import './index.scss'
 
 const baseClass = 'document-fields'

packages/ui/src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type React from 'react'
 
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'
 
 export const ShouldRenderTabs: React.FC<{
   children: React.ReactNode

packages/ui/src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { SanitizedConfig } from 'payload/types'
 
-import Link from 'next/link'
-import { useParams, usePathname } from 'next/navigation'
+import Link from 'next/link.js'
+import { useParams, usePathname } from 'next/navigation.js'
 import React from 'react'
 
 export const DocumentTabLink: React.FC<{

packages/ui/src/elements/DocumentHeader/Tabs/Tab/index.tsx

@@ -2,7 +2,7 @@ import type { DocumentTabConfig, DocumentTabProps } from 'payload/types'
 
 import React, { Fragment } from 'react'
 
-import { DocumentTabLink } from './TabLink'
+import { DocumentTabLink } from './TabLink.js'
 import './index.scss'
 
 export const baseClass = 'doc-tab'

packages/ui/src/elements/DocumentHeader/Tabs/getCustomViews.ts

@@ -1,7 +1,7 @@
 import type { EditViewConfig } from 'payload/config'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
-import { documentViewKeys } from './tabs'
+import { documentViewKeys } from './tabs/index.js'
 
 export const getCustomViews = (args: {
   collectionConfig: SanitizedCollectionConfig

packages/ui/src/elements/DocumentHeader/Tabs/index.tsx

@@ -7,12 +7,12 @@ import type {
 
 import React from 'react'
 
-import { ShouldRenderTabs } from './ShouldRenderTabs'
-import { DocumentTab } from './Tab'
-import { getCustomViews } from './getCustomViews'
-import { getViewConfig } from './getViewConfig'
+import { ShouldRenderTabs } from './ShouldRenderTabs.js'
+import { DocumentTab } from './Tab/index.js'
+import { getCustomViews } from './getCustomViews.js'
+import { getViewConfig } from './getViewConfig.js'
 import './index.scss'
-import { tabs as defaultTabs } from './tabs'
+import { tabs as defaultTabs } from './tabs/index.js'
 
 const baseClass = 'doc-tabs'
 

packages/ui/src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import React from 'react'
 
-import { useDocumentInfo } from '../../../../../providers/DocumentInfo'
-import { baseClass } from '../../Tab'
+import { useDocumentInfo } from '../../../../../providers/DocumentInfo/index.js'
+import { baseClass } from '../../Tab/index.js'
 
 export const VersionsPill: React.FC = () => {
   const { versions } = useDocumentInfo()

packages/ui/src/elements/DocumentHeader/Tabs/tabs/index.tsx

@@ -1,6 +1,6 @@
 import type { DocumentTabConfig } from 'payload/types'
 
-import { VersionsPill } from './VersionsPill'
+import { VersionsPill } from './VersionsPill/index.js'
 
 export const documentViewKeys = [
   'API',

packages/ui/src/elements/DocumentHeader/index.tsx

@@ -7,9 +7,9 @@ import type {
 
 import React, { Fragment } from 'react'
 
-import { Gutter } from '../Gutter'
-import RenderTitle from '../RenderTitle'
-import { DocumentTabs } from './Tabs'
+import { Gutter } from '../Gutter/index.js'
+import RenderTitle from '../RenderTitle/index.js'
+import { DocumentTabs } from './Tabs/index.js'
 import './index.scss'
 
 const baseClass = `doc-header`

packages/ui/src/elements/DraggableSortable/DraggableSortableItem/index.tsx

@@ -2,9 +2,9 @@ import type { UseDraggableArguments } from '@dnd-kit/core'
 
 import React, { Fragment } from 'react'
 
-import type { ChildFunction } from './types'
+import type { ChildFunction } from './types.d.ts'
 
-import { useDraggableSortable } from '../useDraggableSortable'
+import { useDraggableSortable } from '../useDraggableSortable/index.js'
 
 export const DraggableSortableItem: React.FC<
   UseDraggableArguments & {

packages/ui/src/elements/DraggableSortable/DraggableSortableItem/types.ts

@@ -3,7 +3,7 @@ import type { UseDraggableArguments } from '@dnd-kit/core'
 import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
 import type React from 'react'
 
-import type { UseDraggableSortableReturn } from '../useDraggableSortable/types'
+import type { UseDraggableSortableReturn } from '../useDraggableSortable/types.d.ts'
 
 export type DragHandleProps = UseDraggableArguments & {
   attributes: UseDraggableArguments['attributes']

packages/ui/src/elements/DraggableSortable/index.tsx

@@ -12,7 +12,7 @@ import {
 import { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import React, { useCallback, useId } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
 const DraggableSortable: React.FC<Props> = (props) => {
   const { children, className, ids, onDragEnd } = props

packages/ui/src/elements/DraggableSortable/useDraggableSortable/index.tsx

@@ -2,7 +2,7 @@ import type { UseDraggableArguments } from '@dnd-kit/core'
 
 import { useSortable } from '@dnd-kit/sortable'
 
-import type { UseDraggableSortableReturn } from './types'
+import type { UseDraggableSortableReturn } from './types.d.ts'
 
 export const useDraggableSortable = (props: UseDraggableArguments): UseDraggableSortableReturn => {
   const { id, disabled } = props

packages/ui/src/elements/Drawer/index.tsx

@@ -2,12 +2,12 @@
 import { Modal, useModal } from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { Props, TogglerProps } from './types'
+import type { Props, TogglerProps } from './types.d.ts'
 
-import { X } from '../../icons/X'
-import { EditDepthContext, useEditDepth } from '../../providers/EditDepth'
-import { useTranslation } from '../../providers/Translation'
-import { Gutter } from '../Gutter'
+import { X } from '../../icons/X/index.js'
+import { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Gutter } from '../Gutter/index.js'
 import './index.scss'
 
 const baseClass = 'drawer'

packages/ui/src/elements/Drawer/useDrawerSlug.tsx

@@ -1,13 +1,13 @@
 import { useId } from 'react'
 
-import { formatDrawerSlug } from '.'
-import { useEditDepth } from '../../providers/EditDepth'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
+import { formatDrawerSlug } from './index.js'
 
 export const useDrawerSlug = (slug: string): string => {
   const uuid = useId()
   const editDepth = useEditDepth()
   return formatDrawerSlug({
-    depth: editDepth,
     slug: `${slug}-${uuid}`,
+    depth: editDepth,
   })
 }

packages/ui/src/elements/Dropzone/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Button } from '../Button/index.js'
 import './index.scss'
 
 const handleDragOver = (e: DragEvent) => {

packages/ui/src/elements/DuplicateDocument/index.tsx

@@ -1,24 +1,24 @@
 'use client'
 import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
 // import { requests } from '../../../api'
-import { useForm, useFormModified } from '../../forms/Form/context'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
-import { MinimalTemplate } from '../../templates/Minimal'
-import { Button } from '../Button'
-import * as PopupList from '../Popup/PopupButtonList'
+import { useForm, useFormModified } from '../../forms/Form/context.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { MinimalTemplate } from '../../templates/Minimal/index.js'
+import { Button } from '../Button/index.js'
+import * as PopupList from '../Popup/PopupButtonList/index.js'
 import './index.scss'
 
 const baseClass = 'duplicate'
 
-const Duplicate: React.FC<Props> = ({ id, singularLabel, slug }) => {
+const Duplicate: React.FC<Props> = ({ id, slug, singularLabel }) => {
   const { push } = useRouter()
   const modified = useFormModified()
   const { toggleModal } = useModal()

packages/ui/src/elements/EditMany/index.tsx

@@ -5,25 +5,25 @@ import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { FieldPathProvider } from '../../forms/FieldPathProvider'
-import Form from '../../forms/Form'
-import { useForm } from '../../forms/Form/context'
-import RenderFields from '../../forms/RenderFields'
-import FormSubmit from '../../forms/Submit'
-import { X } from '../../icons/X'
-import { useAuth } from '../../providers/Auth'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { DocumentInfoProvider } from '../../providers/DocumentInfo'
-import { OperationContext } from '../../providers/OperationProvider'
-import { useSearchParams } from '../../providers/SearchParams'
-import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider'
-import { useTranslation } from '../../providers/Translation'
-import { getFormState } from '../../utilities/getFormState'
-import { Drawer, DrawerToggler } from '../Drawer'
-import { FieldSelect } from '../FieldSelect'
+import { FieldPathProvider } from '../../forms/FieldPathProvider/index.js'
+import { useForm } from '../../forms/Form/context.js'
+import Form from '../../forms/Form/index.js'
+import RenderFields from '../../forms/RenderFields/index.js'
+import FormSubmit from '../../forms/Submit/index.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 { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js'
+import { OperationContext } from '../../providers/OperationProvider/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 { getFormState } from '../../utilities/getFormState.js'
+import { Drawer, DrawerToggler } from '../Drawer/index.js'
+import { FieldSelect } from '../FieldSelect/index.js'
 import './index.scss'
 
 const baseClass = 'edit-many'

packages/ui/src/elements/EditUpload/index.tsx

@@ -6,11 +6,11 @@ import React, { useRef, useState } from 'react'
 import ReactCrop, { type Crop as CropType } from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
 
-import { editDrawerSlug } from '../../elements/Upload'
-import { Plus } from '../../icons/Plus'
-import { useFormQueryParams } from '../../providers/FormQueryParams'
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
+import { editDrawerSlug } from '../../elements/Upload/index.js'
+import { Plus } from '../../icons/Plus/index.js'
+import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Button } from '../Button/index.js'
 import './index.scss'
 
 const baseClass = 'edit-upload'

packages/ui/src/elements/ErrorPill/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
 import './index.scss'
 

packages/ui/src/elements/FieldSelect/index.tsx

@@ -4,11 +4,11 @@ import { getTranslation } from '@payloadcms/translations'
 import { fieldAffectsData, fieldHasSubFields, tabHasName } from 'payload/types'
 import React, { useState } from 'react'
 
-import { useForm } from '../../forms/Form/context'
-import { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath'
-import Label from '../../forms/Label'
-import { useTranslation } from '../../providers/Translation'
-import ReactSelect from '../ReactSelect'
+import { useForm } from '../../forms/Form/context.js'
+import { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath.js'
+import Label from '../../forms/Label/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import ReactSelect from '../ReactSelect/index.js'
 import './index.scss'
 
 const baseClass = 'field-select'

packages/ui/src/elements/FileDetails/FileMeta/index.tsx

@@ -1,12 +1,12 @@
 import { formatFilesize } from 'payload/utilities'
 import React, { useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { Edit } from '../../../icons/Edit'
-import CopyToClipboard from '../../CopyToClipboard'
-import { useDocumentDrawer } from '../../DocumentDrawer'
-import { Tooltip } from '../../Tooltip'
+import { Edit } from '../../../icons/Edit/index.js'
+import CopyToClipboard from '../../CopyToClipboard/index.js'
+import { useDocumentDrawer } from '../../DocumentDrawer/index.js'
+import { Tooltip } from '../../Tooltip/index.js'
 import './index.scss'
 
 const baseClass = 'file-meta'

packages/ui/src/elements/FileDetails/index.tsx

@@ -1,12 +1,12 @@
 import { isImage } from 'payload/utilities'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { UploadActions } from '../../elements/Upload'
-import { Button } from '../Button'
-import Thumbnail from '../Thumbnail'
-import FileMeta from './FileMeta'
+import { UploadActions } from '../../elements/Upload/index.js'
+import { Button } from '../Button/index.js'
+import Thumbnail from '../Thumbnail/index.js'
+import FileMeta from './FileMeta/index.js'
 import './index.scss'
 
 const baseClass = 'file-details'

packages/ui/src/elements/GenerateConfirmation/index.tsx

@@ -3,13 +3,13 @@ import { Modal, useModal } from '@faceless-ui/modal'
 import React from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useTranslation } from '../../providers/Translation'
-import { MinimalTemplate } from '../../templates/Minimal'
-import { Button } from '../Button'
-import { Translation } from '../Translation'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { MinimalTemplate } from '../../templates/Minimal/index.js'
+import { Button } from '../Button/index.js'
+import { Translation } from '../Translation/index.js'
 import './index.scss'
 
 const baseClass = 'generate-confirmation'

packages/ui/src/elements/GetFilterOptions/index.tsx

@@ -3,14 +3,14 @@ import type { FilterOptions } from 'payload/types'
 import equal from 'deep-equal'
 import { useEffect } from 'react'
 
-import type { FilterOptionsResult } from '../../forms/fields/Relationship/types'
+import type { FilterOptionsResult } from '../../forms/fields/Relationship/types.d.ts'
 
-import { useAllFormFields } from '../../forms/Form/context'
-import getSiblingData from '../../forms/Form/getSiblingData'
-import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues'
-import { getFilterOptionsQuery } from '../../forms/fields/getFilterOptionsQuery'
-import { useAuth } from '../../providers/Auth'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
+import { useAllFormFields } from '../../forms/Form/context.js'
+import getSiblingData from '../../forms/Form/getSiblingData.js'
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues.js'
+import { getFilterOptionsQuery } from '../../forms/fields/getFilterOptionsQuery.js'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 
 type Args = {
   filterOptions: FilterOptions

packages/ui/src/elements/Popup/PopupButtonList/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 // TODO: abstract the `next/link` dependency out from this component
-import type { LinkProps } from 'next/link.js'
+import type { LinkProps } from 'next/link.d.ts'
 
-import LinkWithDefault from 'next/link.js'
-const Link = LinkWithDefault.default
+import Link from 'next/link.js'
 import * as React from 'react' // TODO: abstract this out to support all routers
 
 import './index.scss'