chore: converts more files in ui package to esm

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

@@ -1,10 +1,10 @@
 'use client'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTableColumns } from '../TableColumns'
-import { TableCellProvider } from './TableCellProvider'
+import { useTableColumns } from '../TableColumns/index.js'
+import { TableCellProvider } from './TableCellProvider/index.js'
 import './index.scss'
 
 const baseClass = 'table'

packages/ui/src/elements/TableColumns/buildColumns.tsx

@@ -2,12 +2,12 @@ import type { CellProps, SanitizedCollectionConfig } from 'payload/types'
 
 import React from 'react'
 
-import type { ColumnPreferences } from '../../providers/ListInfo/types'
-import type { FieldMap } from '../../utilities/buildComponentMap/types'
-import type { Column } from '../Table/types'
+import type { ColumnPreferences } from '../../providers/ListInfo/types.d.ts'
+import type { FieldMap } from '../../utilities/buildComponentMap/types.d.ts'
+import type { Column } from '../Table/types.d.ts'
 
-import { SelectAll } from '../SelectAll'
-import { SelectRow } from '../SelectRow'
+import { SelectAll } from '../SelectAll/index.js'
+import { SelectRow } from '../SelectRow/index.js'
 
 export const buildColumns = (args: {
   cellProps: Partial<CellProps>[]

packages/ui/src/elements/TableColumns/columnReducer.ts

@@ -1,4 +1,4 @@
-import type { Column } from '../Table/types'
+import type { Column } from '../Table/types.d.ts'
 
 type TOGGLE = {
   payload: {

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

@@ -4,15 +4,15 @@ import type { CellProps } from 'payload/types'
 
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
-import type { ColumnPreferences } from '../../providers/ListInfo/types'
-import type { Column } from '../Table/types'
-import type { Action } from './columnReducer'
+import type { ColumnPreferences } from '../../providers/ListInfo/types.d.ts'
+import type { Column } from '../Table/types.d.ts'
+import type { Action } from './columnReducer.js'
 
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { usePreferences } from '../../providers/Preferences'
-import { buildColumns } from './buildColumns'
-import { columnReducer } from './columnReducer'
+import { useComponentMap } from '../../providers/ComponentMapProvider/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { usePreferences } from '../../providers/Preferences/index.js'
+import { buildColumns } from './buildColumns.js'
+import { columnReducer } from './columnReducer.js'
 
 export interface ITableColumns {
   columns: Column[]

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

@@ -1,10 +1,10 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import FileGraphic from '../../graphics/File'
-import useThumbnail from '../../hooks/useThumbnail'
+import FileGraphic from '../../graphics/File/index.js'
+import useThumbnail from '../../hooks/useThumbnail.js'
 import './index.scss'
 
 const baseClass = 'thumbnail'

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

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTranslation } from '../../providers/Translation'
-import { formatDocTitle } from '../../utilities/formatDocTitle'
-import Thumbnail from '../Thumbnail'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { formatDocTitle } from '../../utilities/formatDocTitle.js'
+import Thumbnail from '../Thumbnail/index.js'
 import './index.scss'
 
 const baseClass = 'thumbnail-card'

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

@@ -1,9 +1,9 @@
 'use client'
 import React, { useEffect } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useIntersect } from '../../hooks/useIntersect'
+import { useIntersect } from '../../hooks/useIntersect.js'
 import './index.scss'
 
 export const Tooltip: React.FC<Props> = (props) => {

packages/ui/src/elements/UnpublishMany/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 = 'unpublish-many'

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

@@ -2,22 +2,22 @@
 import { isImage } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import Error from '../../forms/Error'
-import { useFormSubmitted } from '../../forms/Form/context'
-import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues'
-import { fieldBaseClass } from '../../forms/fields/shared'
-import useField from '../../forms/useField'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
-import { Drawer, DrawerToggler } from '../Drawer'
-import { Dropzone } from '../Dropzone'
-import { EditUpload } from '../EditUpload'
-import FileDetails from '../FileDetails'
-import PreviewSizes from '../PreviewSizes'
-import Thumbnail from '../Thumbnail'
+import Error from '../../forms/Error/index.js'
+import { useFormSubmitted } from '../../forms/Form/context.js'
+import reduceFieldsToValues from '../../forms/Form/reduceFieldsToValues.js'
+import { fieldBaseClass } from '../../forms/fields/shared.js'
+import useField from '../../forms/useField/index.js'
+import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Button } from '../Button/index.js'
+import { Drawer, DrawerToggler } from '../Drawer/index.js'
+import { Dropzone } from '../Dropzone/index.js'
+import { EditUpload } from '../EditUpload/index.js'
+import FileDetails from '../FileDetails/index.js'
+import PreviewSizes from '../PreviewSizes/index.js'
+import Thumbnail from '../Thumbnail/index.js'
 import './index.scss'
 
 const baseClass = 'file-field'

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

@@ -2,11 +2,11 @@
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTranslation } from '../../providers/Translation'
+import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'
-import { isComponent } from './types'
+import { isComponent } from './types.js'
 
 const ViewDescription: React.FC<Props> = (props) => {
   const { i18n } = useTranslation()

packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import DatePicker from '../../../DatePicker'
+import DatePicker from '../../../DatePicker/index.js'
 
 const baseClass = 'condition-value-date'
 

packages/ui/src/elements/WhereBuilder/Condition/Date/types.ts

@@ -1,4 +1,4 @@
-import type { Props as DateType } from '../../../../elements/DatePicker/types'
+import type { Props as DateType } from '../../../../elements/DatePicker/types.d.ts'
 
 export type Props = {
   admin?: {

packages/ui/src/elements/WhereBuilder/Condition/Number/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTranslation } from '../../../../providers/Translation'
+import { useTranslation } from '../../../../providers/Translation/index.js'
 import './index.scss'
 
 const baseClass = 'condition-value-number'

packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx

@@ -2,15 +2,15 @@ import type { PaginatedDocs } from 'payload/database'
 
 import React, { useCallback, useEffect, useReducer, useState } from 'react'
 
-import type { Option } from '../../../ReactSelect/types'
-import type { GetResults, Props, ValueWithRelation } from './types'
+import type { Option } from '../../../ReactSelect/types.d.ts'
+import type { GetResults, Props, ValueWithRelation } from './types.d.ts'
 
-import useDebounce from '../../../../hooks/useDebounce'
-import { useConfig } from '../../../../providers/Config'
-import { useTranslation } from '../../../../providers/Translation'
-import ReactSelect from '../../../ReactSelect'
+import useDebounce from '../../../../hooks/useDebounce.js'
+import { useConfig } from '../../../../providers/Config/index.js'
+import { useTranslation } from '../../../../providers/Translation/index.js'
+import ReactSelect from '../../../ReactSelect/index.js'
 import './index.scss'
-import optionsReducer from './optionsReducer'
+import optionsReducer from './optionsReducer.js'
 
 const baseClass = 'condition-value-relationship'
 
@@ -38,7 +38,7 @@ const RelationshipField: React.FC<Props> = (props) => {
   const addOptions = useCallback(
     (data, relation) => {
       const collection = collections.find((coll) => coll.slug === relation)
-      dispatchOptions({ collection, data, hasMultipleRelations, i18n, relation, type: 'ADD' })
+      dispatchOptions({ type: 'ADD', collection, data, hasMultipleRelations, i18n, relation })
     },
     [collections, hasMultipleRelations, i18n],
   )
@@ -200,9 +200,9 @@ const RelationshipField: React.FC<Props> = (props) => {
 
   useEffect(() => {
     dispatchOptions({
+      type: 'CLEAR',
       i18n,
       required: true,
-      type: 'CLEAR',
     })
 
     setHasLoadedFirstOptions(true)

packages/ui/src/elements/WhereBuilder/Condition/Relationship/optionsReducer.ts

@@ -1,6 +1,6 @@
 import { getTranslation } from '@payloadcms/translations'
 
-import type { Action, Option } from './types'
+import type { Action, Option } from './types.d.ts'
 
 const reduceToIDs = (options) =>
   options.reduce((ids, option) => {

packages/ui/src/elements/WhereBuilder/Condition/Select/index.tsx

@@ -3,10 +3,10 @@ import type { Option, OptionObject } from 'payload/types'
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTranslation } from '../../../../providers/Translation'
-import ReactSelect from '../../../ReactSelect'
+import { useTranslation } from '../../../../providers/Translation/index.js'
+import ReactSelect from '../../../ReactSelect/index.js'
 
 const formatOptions = (options: Option[]): OptionObject[] =>
   options.map((option) => {

packages/ui/src/elements/WhereBuilder/Condition/Text/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useTranslation } from '../../../../providers/Translation'
+import { useTranslation } from '../../../../providers/Translation/index.js'
 import './index.scss'
 
 const baseClass = 'condition-value-text'

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react'
 
-import type { FieldCondition } from '../types'
-import type { Props } from './types'
+import type { FieldCondition } from '../types.d.ts'
+import type { Props } from './types.d.ts'
 
-import { RenderCustomComponent } from '../../../elements/RenderCustomComponent'
-import useDebounce from '../../../hooks/useDebounce'
-import { Button } from '../../Button'
-import ReactSelect from '../../ReactSelect'
-import Date from './Date'
-import Number from './Number'
-import Relationship from './Relationship'
-import { Select } from './Select'
-import Text from './Text'
+import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/index.js'
+import useDebounce from '../../../hooks/useDebounce.js'
+import { Button } from '../../Button/index.js'
+import ReactSelect from '../../ReactSelect/index.js'
+import Date from './Date/index.js'
+import Number from './Number/index.js'
+import Relationship from './Relationship/index.js'
+import { Select } from './Select/index.js'
+import Text from './Text/index.js'
 import './index.scss'
 
 const valueFields = {
@@ -52,9 +52,9 @@ const Condition: React.FC<Props> = (props) => {
 
   useEffect(() => {
     dispatch({
+      type: 'update',
       andIndex,
       orIndex,
-      type: 'update',
       value: debouncedValue || '',
     })
   }, [debouncedValue, dispatch, orIndex, andIndex])
@@ -80,10 +80,10 @@ const Condition: React.FC<Props> = (props) => {
               isClearable={false}
               onChange={(field) => {
                 dispatch({
-                  andIndex: andIndex,
-                  field: field?.value,
-                  orIndex: orIndex,
                   type: 'update',
+                  andIndex,
+                  field: field?.value,
+                  orIndex,
                 })
               }}
               options={fields}
@@ -96,10 +96,10 @@ const Condition: React.FC<Props> = (props) => {
               isClearable={false}
               onChange={(operator) => {
                 dispatch({
+                  type: 'update',
                   andIndex,
                   operator: operator.value,
                   orIndex,
-                  type: 'update',
                 })
                 setInternalOperatorField(operator.value)
               }}
@@ -134,9 +134,9 @@ const Condition: React.FC<Props> = (props) => {
             iconStyle="with-border"
             onClick={() =>
               dispatch({
+                type: 'remove',
                 andIndex,
                 orIndex,
-                type: 'remove',
               })
             }
             round
@@ -148,11 +148,11 @@ const Condition: React.FC<Props> = (props) => {
             iconStyle="with-border"
             onClick={() =>
               dispatch({
+                type: 'add',
                 andIndex: andIndex + 1,
                 field: fields[0].value,
                 orIndex,
                 relation: 'and',
-                type: 'add',
               })
             }
             round

packages/ui/src/elements/WhereBuilder/Condition/types.ts

@@ -1,6 +1,6 @@
 import type { Where } from 'payload/types'
 
-import type { Action, FieldCondition } from '../types'
+import type { Action, FieldCondition } from '../types.d.ts'
 
 export type Props = {
   andIndex: number

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

@@ -4,19 +4,19 @@ import { flattenTopLevelFields } from 'payload/utilities'
 import React, { useReducer, useState } from 'react'
 
 // import type { Where } from 'payload/types'
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { useConfig } from '../../providers/Config'
+import { useConfig } from '../../providers/Config/index.js'
 // import useThrottledEffect from '../../hooks/useThrottledEffect'
-import { useSearchParams } from '../../providers/SearchParams'
-import { useTranslation } from '../../providers/Translation'
-import { Button } from '../Button'
-import Condition from './Condition'
-import fieldTypes from './field-types'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import { Button } from '../Button/index.js'
+import Condition from './Condition/index.js'
+import fieldTypes from './field-types.js'
 import './index.scss'
-import reducer from './reducer'
-import { transformWhereQuery } from './transformWhereQuery'
-import validateWhereQuery from './validateWhereQuery'
+import reducer from './reducer.js'
+import { transformWhereQuery } from './transformWhereQuery.js'
+import validateWhereQuery from './validateWhereQuery.js'
 
 const baseClass = 'where-builder'
 

packages/ui/src/elements/WhereBuilder/reducer.ts

@@ -1,6 +1,6 @@
 import type { Where } from 'payload/types'
 
-import type { Action } from './types'
+import type { Action } from './types.d.ts'
 
 const reducer = (state: Where[], action: Action): Where[] => {
   const newState = [...state]

packages/ui/src/exports/providers.ts

@@ -1,32 +1,36 @@
-export { useActions } from '../providers/ActionsProvider'
-export { useAuth } from '../providers/Auth'
-export { ClientFunctionProvider, useAddClientFunction } from '../providers/ClientFunction'
-export { useClientFunctions } from '../providers/ClientFunction'
-export { useComponentMap } from '../providers/ComponentMapProvider'
-export type { IComponentMapContext } from '../providers/ComponentMapProvider'
-export { ConfigProvider, useConfig } from '../providers/Config'
-export { CustomProvider } from '../providers/CustomProvider'
-export { useDocumentEvents } from '../providers/DocumentEvents'
-export { useDocumentInfo } from '../providers/DocumentInfo'
+export { useActions } from '../providers/ActionsProvider/index.js'
+export { useAuth } from '../providers/Auth/index.js'
+export { ClientFunctionProvider, useAddClientFunction } from '../providers/ClientFunction/index.js'
+export { useClientFunctions } from '../providers/ClientFunction/index.js'
+export { useComponentMap } from '../providers/ComponentMapProvider/index.js'
+export type { IComponentMapContext } from '../providers/ComponentMapProvider/index.js'
+export { ConfigProvider, useConfig } from '../providers/Config/index.js'
+export { CustomProvider } from '../providers/CustomProvider/index.js'
+export { useDocumentEvents } from '../providers/DocumentEvents/index.js'
+export { SetDocumentInfo } from '../providers/DocumentInfo/SetDocumentInfo/index.js'
+export { useDocumentInfo } from '../providers/DocumentInfo/index.js'
 export {
   type DocumentInfo,
   type DocumentInfoContext,
   type DocumentInfoProps,
   DocumentInfoProvider,
-} from '../providers/DocumentInfo'
-export { SetDocumentInfo } from '../providers/DocumentInfo/SetDocumentInfo'
-export { EditDepthContext, EditDepthProvider } from '../providers/EditDepth'
-export { useEditDepth } from '../providers/EditDepth'
-export { FormQueryParams, FormQueryParamsProvider } from '../providers/FormQueryParams'
-export type { QueryParamTypes } from '../providers/FormQueryParams'
-export { useFormQueryParams } from '../providers/FormQueryParams'
-export { useListInfo } from '../providers/ListInfo'
-export { ListInfoProvider } from '../providers/ListInfo'
-export type { ColumnPreferences } from '../providers/ListInfo/types'
-export { useLocale } from '../providers/Locale'
-export { OperationProvider } from '../providers/OperationProvider'
-export { RootProvider } from '../providers/Root'
-export { SelectAllStatus, SelectionProvider, useSelection } from '../providers/SelectionProvider'
-export { useTheme } from '../providers/Theme'
-export type { Theme } from '../providers/Theme/types'
-export { useTranslation } from '../providers/Translation'
+} from '../providers/DocumentInfo/index.js'
+export { EditDepthContext, EditDepthProvider } from '../providers/EditDepth/index.js'
+export { useEditDepth } from '../providers/EditDepth/index.js'
+export { FormQueryParams, FormQueryParamsProvider } from '../providers/FormQueryParams/index.js'
+export type { QueryParamTypes } from '../providers/FormQueryParams/index.js'
+export { useFormQueryParams } from '../providers/FormQueryParams/index.js'
+export { useListInfo } from '../providers/ListInfo/index.js'
+export { ListInfoProvider } from '../providers/ListInfo/index.js'
+export type { ColumnPreferences } from '../providers/ListInfo/types.d.ts'
+export { useLocale } from '../providers/Locale/index.js'
+export { OperationProvider } from '../providers/OperationProvider/index.js'
+export { RootProvider } from '../providers/Root/index.js'
+export {
+  SelectAllStatus,
+  SelectionProvider,
+  useSelection,
+} from '../providers/SelectionProvider/index.js'
+export { useTheme } from '../providers/Theme/index.js'
+export type { Theme } from '../providers/Theme/types.d.ts'
+export { useTranslation } from '../providers/Translation/index.js'

packages/ui/src/exports/templates.ts

@@ -1,2 +1,2 @@
-export { DefaultTemplate } from '../templates/Default'
-export { MinimalTemplate } from '../templates/Minimal'
+export { DefaultTemplate } from '../templates/Default/index.js'
+export { MinimalTemplate } from '../templates/Minimal/index.js'

packages/ui/src/exports/types.ts

@@ -6,5 +6,5 @@ import type React from 'react'
 // @example
 // import { Link } from 'next/link'
 export type LinkType = React.ElementType
-export type { FormFieldBase } from '../forms/fields/shared'
-export type { ReducedBlock } from '../utilities/buildComponentMap/types'
+export type { FormFieldBase } from '../forms/fields/shared.d.ts'
+export type { ReducedBlock } from '../utilities/buildComponentMap/types.d.ts'

packages/ui/src/exports/utilities.ts

@@ -1,13 +1,13 @@
-export { mapFields } from '../utilities/buildComponentMap/mapFields'
-export type { FieldMap, MappedField } from '../utilities/buildComponentMap/types'
-export { buildFieldSchemaMap } from '../utilities/buildFieldSchemaMap'
-export type { FieldSchemaMap } from '../utilities/buildFieldSchemaMap/types'
-export { default as canUseDOM } from '../utilities/canUseDOM'
-export { findLocaleFromCode } from '../utilities/findLocaleFromCode'
-export { formatDate } from '../utilities/formatDate'
-export { formatDocTitle } from '../utilities/formatDocTitle'
-export { formatFields } from '../utilities/formatFields'
-export { getFormState } from '../utilities/getFormState'
-export type { EntityToGroup, Group } from '../utilities/groupNavItems'
-export { EntityType, groupNavItems } from '../utilities/groupNavItems'
-export { withMergedProps } from '../utilities/withMergedProps'
+export { mapFields } from '../utilities/buildComponentMap/mapFields.js'
+export type { FieldMap, MappedField } from '../utilities/buildComponentMap/types.d.ts'
+export { buildFieldSchemaMap } from '../utilities/buildFieldSchemaMap/index.js'
+export type { FieldSchemaMap } from '../utilities/buildFieldSchemaMap/types.d.ts'
+export { default as canUseDOM } from '../utilities/canUseDOM.js'
+export { findLocaleFromCode } from '../utilities/findLocaleFromCode.js'
+export { formatDate } from '../utilities/formatDate/index.js'
+export { formatDocTitle } from '../utilities/formatDocTitle.js'
+export { formatFields } from '../utilities/formatFields.js'
+export { getFormState } from '../utilities/getFormState.js'
+export type { EntityToGroup, Group } from '../utilities/groupNavItems.d.ts'
+export { EntityType, groupNavItems } from '../utilities/groupNavItems.js'
+export { withMergedProps } from '../utilities/withMergedProps/index.js'

packages/ui/src/graphics/Account/Gravatar/index.tsx

@@ -3,7 +3,7 @@ import md5 from 'md5'
 import qs from 'qs'
 import React from 'react'
 
-import { useAuth } from '../../../providers/Auth'
+import { useAuth } from '../../../providers/Auth/index.js'
 
 const Gravatar: React.FC = () => {
   const { user } = useAuth()

packages/ui/src/graphics/Account/index.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { usePathname } from 'next/navigation'
+import { usePathname } from 'next/navigation.js'
 import React from 'react'
 
-import { useAuth } from '../../providers/Auth'
-import { useConfig } from '../../providers/Config'
-import { DefaultAccountIcon } from './Default'
-import Gravatar from './Gravatar'
+import { useAuth } from '../../providers/Auth/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { DefaultAccountIcon } from './Default/index.js'
+import Gravatar from './Gravatar/index.js'
 
 const Account = () => {
   const {

packages/ui/src/graphics/Icon/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { useConfig } from '../../providers/Config'
-import { useTranslation } from '../../providers/Translation'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { useConfig } from '../../providers/Config/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
 
 const css = `
   .graphic-icon {

packages/ui/src/graphics/Logo/index.tsx

@@ -2,7 +2,7 @@ import type { SanitizedConfig } from 'payload/config'
 
 import React from 'react'
 
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
 
 const css = `
   .graphic-logo path {

packages/ui/src/hooks/useAdminThumbnail.tsx

@@ -1,6 +1,7 @@
 import type { GetAdminThumbnail } from 'payload/types'
 
-import { useAddClientFunction, useDocumentInfo } from '..'
+import { useAddClientFunction } from '../providers/ClientFunction/index.js'
+import { useDocumentInfo } from '../providers/DocumentInfo/index.js'
 
 export const useAdminThumbnail = (func: GetAdminThumbnail) => {
   const { collectionSlug } = useDocumentInfo()

packages/ui/src/hooks/useDelayedRender.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { useDelay } from './useDelay'
+import { useDelay } from './useDelay.js'
 
 type DelayedRenderProps = {
   /** Time in ms to wait before "mounting" the component. */

packages/ui/src/hooks/usePayloadAPI.tsx

@@ -2,9 +2,9 @@
 import queryString from 'qs'
 import { useEffect, useRef, useState } from 'react'
 
-import { useLocale } from '../providers/Locale'
-import { useTranslation } from '../providers/Translation'
-import { requests } from '../utilities/api'
+import { useLocale } from '../providers/Locale/index.js'
+import { useTranslation } from '../providers/Translation/index.js'
+import { requests } from '../utilities/api.js'
 
 type Result = [
   {

packages/ui/src/hooks/useThumbnail.ts

@@ -2,8 +2,8 @@ import type { SanitizedCollectionConfig } from 'payload/types'
 
 import { isImage } from 'payload/utilities'
 
-import { useComponentMap } from '..'
-import { useConfig } from '../providers/Config'
+import { useComponentMap } from '../providers/ComponentMapProvider/index.js'
+import { useConfig } from '../providers/Config/index.js'
 
 const absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i')
 const base64Pattern = new RegExp(/^data:image\/[a-z]+;base64,/)

packages/ui/src/index.ts

@@ -1 +1 @@
-export * from './exports'
+export * from './exports/index.js'

packages/ui/src/templates/Default/NavHamburger/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import React from 'react'
 
-import { Hamburger } from '../../../elements/Hamburger'
-import { useNav } from '../../../elements/Nav/context'
+import { Hamburger } from '../../../elements/Hamburger/index.js'
+import { useNav } from '../../../elements/Nav/context.js'
 
 export const NavHamburger: React.FC = () => {
   const { navOpen } = useNav()

packages/ui/src/templates/Default/Wrapper/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import { useNav } from '../../../elements/Nav/context'
+import { useNav } from '../../../elements/Nav/context.js'
 import './index.scss'
 
 export const Wrapper: React.FC<{

packages/ui/src/templates/Default/index.tsx

@@ -1,13 +1,13 @@
 import React, { Fragment } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { AppHeader } from '../../elements/Header'
-import { DefaultNav } from '../../elements/Nav'
-import { NavToggler } from '../../elements/Nav/NavToggler'
-import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
-import { NavHamburger } from './NavHamburger'
-import { Wrapper } from './Wrapper'
+import { AppHeader } from '../../elements/Header/index.js'
+import { NavToggler } from '../../elements/Nav/NavToggler/index.js'
+import { DefaultNav } from '../../elements/Nav/index.js'
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { NavHamburger } from './NavHamburger/index.js'
+import { Wrapper } from './Wrapper/index.js'
 import './index.scss'
 
 const baseClass = 'template-default'

packages/ui/src/templates/Minimal/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'