chore: migrates @faceless-ui imports to esm (#6681)

packages/richtext-lexical/package.json

@@ -41,8 +41,8 @@
     "translateNewKeys": "tsx scripts/translateNewKeys.ts"
   },
   "dependencies": {
-    "@faceless-ui/modal": "2.1.0-rc.0",
-    "@faceless-ui/scroll-info": "1.4.0-rc.0",
+    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@lexical/headless": "0.16.0",
     "@lexical/link": "0.16.0",
     "@lexical/list": "0.16.0",
@@ -75,8 +75,8 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "@faceless-ui/modal": "2.1.0-rc.0",
-    "@faceless-ui/scroll-info": "1.4.0-rc.0",
+    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@lexical/headless": "0.16.0",
     "@lexical/link": "0.16.0",
     "@lexical/list": "0.16.0",

packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { LexicalCommand, LexicalEditor } from 'lexical'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'
 import { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'
@@ -54,8 +54,6 @@ const insertBlock = ({
 }
 
 export const BlocksDrawerComponent: React.FC = () => {
-  const { useModal } = facelessUIImport
-
   const [editor] = useLexicalComposerContext()
   const { editorConfig, uuid } = useEditorConfigContext()
 

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -3,7 +3,7 @@ import type { LexicalNode } from 'lexical'
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { $findMatchingParent, mergeRegister } from '@lexical/utils'
 import { getTranslation } from '@payloadcms/translations'
@@ -36,8 +36,6 @@ import { $isLinkNode, TOGGLE_LINK_COMMAND } from '../../../nodes/LinkNode.js'
 import { TOGGLE_LINK_WITH_MODAL_COMMAND } from './commands.js'
 
 export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.ReactNode {
-  const { useModal } = facelessUIImport
-
   const [editor] = useLexicalComposerContext()
 
   const editorRef = useRef<HTMLDivElement | null>(null)

packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx

@@ -2,7 +2,7 @@
 import type { FormProps } from '@payloadcms/ui/forms/Form'
 import type { ClientCollectionConfig, FormState } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { getTranslation } from '@payloadcms/translations'
 import { Drawer } from '@payloadcms/ui/elements/Drawer'
@@ -34,8 +34,6 @@ export const ExtraFieldsUploadDrawer: React.FC<
     relatedCollection: ClientCollectionConfig
   }
 > = (props) => {
-  const { useModal } = facelessUIImport
-
   const {
     data: { fields, relationTo, value },
     drawerSlug,

packages/richtext-slate/package.json

@@ -32,7 +32,7 @@
     "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "dependencies": {
-    "@faceless-ui/modal": "2.1.0-rc.0",
+    "@faceless-ui/modal": "3.0.0-beta.0",
     "is-hotkey": "0.2.0",
     "slate": "0.91.4",
     "slate-history": "0.86.0",

packages/richtext-slate/src/field/elements/link/Button/index.tsx

@@ -2,11 +2,10 @@
 
 import type { FormState } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer'
 import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
 import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
@@ -61,8 +60,6 @@ const insertLink = (editor, fields) => {
 }
 
 export const LinkButton: React.FC = () => {
-  const { useModal } = facelessUIImport
-
   const { fieldProps } = useElementButton()
   const [initialState, setInitialState] = useState<FormState>({})
 

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -2,7 +2,7 @@
 
 import type { FormState } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { Button } from '@payloadcms/ui/elements/Button'
 import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer'
@@ -60,7 +60,6 @@ const insertChange = (editor, fields) => {
 export const LinkElement = () => {
   const { attributes, children, editorRef, element, fieldProps, schemaPath } =
     useElement<LinkElementType>()
-  const { useModal } = facelessUIImport
 
   const fieldMapPath = `${schemaPath}.${linkFieldsSchemaPath}`
 

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -3,7 +3,7 @@
 import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { ClientCollectionConfig } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { Drawer } from '@payloadcms/ui/elements/Drawer'
 import { Form, type FormProps } from '@payloadcms/ui/forms/Form'
@@ -34,8 +34,6 @@ export const UploadDrawer: React.FC<{
   relatedCollection: ClientCollectionConfig
   schemaPath: string
 }> = (props) => {
-  const { useModal } = facelessUIImport
-
   const editor = useSlateStatic()
 
   const { drawerSlug, element, fieldProps, relatedCollection, schemaPath } = props

packages/ui/package.json

@@ -96,9 +96,9 @@
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
-    "@faceless-ui/modal": "2.1.0-rc.0",
-    "@faceless-ui/scroll-info": "1.4.0-rc.0",
-    "@faceless-ui/window-info": "2.2.0-rc.0",
+    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/scroll-info": "2.0.0-beta.0",
+    "@faceless-ui/window-info": "3.0.0-beta.0",
     "@monaco-editor/react": "4.5.1",
     "@payloadcms/translations": "workspace:*",
     "body-scroll-lock": "4.0.0-beta.0",

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

@@ -1,7 +1,7 @@
 'use client'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -31,7 +31,6 @@ export type Props = {
 
 export const DeleteDocument: React.FC<Props> = (props) => {
   const { id, buttonId, collectionSlug, singularLabel, title: titleFromProps } = props
-  const { Modal, useModal } = facelessUIImport
 
   const {
     routes: { admin, api },

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

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -27,8 +27,6 @@ export type Props = {
 }
 
 export const DeleteMany: React.FC<Props> = (props) => {
-  const { Modal, useModal } = facelessUIImport
-
   const { collection: { slug, labels: { plural } } = {} } = props
 
   const { permissions } = useAuth()

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

@@ -1,6 +1,6 @@
 'use client'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import queryString from 'qs'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
@@ -27,8 +27,6 @@ export const DocumentDrawerContent: React.FC<DocumentDrawerProps> = ({
   drawerSlug,
   onSave: onSaveFromProps,
 }) => {
-  const { useModal } = facelessUIImport
-
   const config = useConfig()
 
   const {

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
 
@@ -64,8 +64,6 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = (props) => {
 }
 
 export const useDocumentDrawer: UseDocumentDrawer = ({ id, collectionSlug }) => {
-  const { useModal } = facelessUIImport
-
   const drawerDepth = useEditDepth()
   const uuid = useId()
   const { closeModal, modalState, openModal, toggleModal } = useModal()

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Props, TogglerProps } from './types.js'
@@ -26,8 +26,6 @@ export const DrawerToggler: React.FC<TogglerProps> = ({
   onClick,
   ...rest
 }) => {
-  const { Modal, useModal } = facelessUIImport
-
   const { openModal } = useModal()
 
   const handleClick = useCallback(
@@ -54,8 +52,6 @@ export const Drawer: React.FC<Props> = ({
   hoverTitle,
   title,
 }) => {
-  const { Modal, useModal } = facelessUIImport
-
   const { t } = useTranslation()
   const { closeModal, modalState } = useModal()
   const drawerDepth = useEditDepth()

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

@@ -2,7 +2,7 @@
 
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -27,8 +27,6 @@ export type Props = {
 }
 
 export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel }) => {
-  const { Modal, useModal } = facelessUIImport
-
   const router = useRouter()
   const modified = useFormModified()
   const { toggleModal } = useModal()

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FormState } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -100,8 +100,6 @@ const SaveDraftButton: React.FC<{ action: string; disabled: boolean }> = ({ acti
   )
 }
 export const EditMany: React.FC<EditManyProps> = (props) => {
-  const { useModal } = facelessUIImport
-
   const { collection: { slug, labels: { plural } } = {}, collection, fieldMap } = props
 
   const { permissions } = useAuth()

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

@@ -1,8 +1,7 @@
 'use client'
-import type { Data } from 'payload/types'
 import type CropType from 'react-image-crop'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import React, { useRef, useState } from 'react'
 import ReactCrop from 'react-image-crop'
 import 'react-image-crop/dist/ReactCrop.css'
@@ -60,8 +59,6 @@ export const EditUpload: React.FC<EditUploadProps> = ({
   showCrop,
   showFocalPoint,
 }) => {
-  const { useModal } = facelessUIImport
-
   const { closeModal } = useModal()
   const { t } = useTranslation()
 
@@ -75,8 +72,6 @@ export const EditUpload: React.FC<EditUploadProps> = ({
     y: 50,
   }
 
-  console.log({ initialFocalPoint })
-
   const [focalPosition, setFocalPosition] = useState<FocalPosition>(() => ({
     ...defaultFocalPosition,
     ...initialFocalPoint,

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import React from 'react'
 import { toast } from 'react-toastify'
 
@@ -18,8 +18,6 @@ export type GenerateConfirmationProps = {
 }
 
 export const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {
-  const { Modal, useModal } = facelessUIImport
-
   const { highlightField, setKey } = props
 
   const { id } = useDocumentInfo()

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

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig, Where } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/window-info'
+import { useWindowInfo } from '@faceless-ui/window-info'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useRef, useState } from 'react'
 import AnimateHeightImport from 'react-animate-height'
@@ -48,8 +48,6 @@ export type ListControlsProps = {
 export const ListControls: React.FC<ListControlsProps> = (props) => {
   const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props
 
-  const { useWindowInfo } = facelessUIImport
-
   const { handleSearchChange } = useListQuery()
   const { searchParams } = useSearchParams()
   const titleField = useUseTitleField(collectionConfig, fieldMap)

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

@@ -2,7 +2,7 @@
 import type { ClientCollectionConfig } from 'payload/types'
 import type { Where } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback, useEffect, useReducer, useState } from 'react'
 
@@ -50,8 +50,6 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
   onSelect,
   selectedCollection,
 }) => {
-  const { useModal } = facelessUIImport
-
   const { i18n, t } = useTranslation()
   const { permissions } = useAuth()
   const { setPreference } = usePreferences()

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react'
 
 import type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'
@@ -57,8 +57,6 @@ export const useListDrawer: UseListDrawer = ({
   selectedCollection,
   uploads,
 }) => {
-  const { useModal } = facelessUIImport
-
   const { collections } = useConfig()
   const drawerDepth = useEditDepth()
   const uuid = useId()

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

@@ -1,6 +1,2 @@
-import * as facelessUIImport from '@faceless-ui/modal'
-const { Modal } =
-  facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : { Modal: undefined }
-const { useModal } =
-  facelessUIImport && 'useModal' in facelessUIImport ? facelessUIImport : { useModal: undefined }
+import { Modal, useModal } from '@faceless-ui/modal'
 export { Modal, useModal }

packages/ui/src/elements/Nav/NavToggler/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/window-info'
+import { useWindowInfo } from '@faceless-ui/window-info'
 import React from 'react'
 
 import { usePreferences } from '../../../providers/Preferences/index.js'
@@ -16,7 +16,6 @@ export const NavToggler: React.FC<{
   tabIndex?: number
 }> = (props) => {
   const { id, children, className, tabIndex = 0 } = props
-  const { useWindowInfo } = facelessUIImport
 
   const { t } = useTranslation()
 

packages/ui/src/elements/Nav/context.tsx

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/window-info'
+import { useWindowInfo } from '@faceless-ui/window-info'
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import React, { useEffect, useRef } from 'react'
 
@@ -32,8 +32,6 @@ const getNavPreference = async (getPreference): Promise<boolean> => {
 export const NavProvider: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
-  const { useWindowInfo } = facelessUIImport
-
   const {
     breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },
   } = useWindowInfo()

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

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react'
 
 export * as PopupList from './PopupButtonList/index.js'
 
-import * as facelessUIImport from '@faceless-ui/window-info'
+import { useWindowInfo } from '@faceless-ui/window-info'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useIntersect } from '../../hooks/useIntersect.js'
@@ -51,8 +51,6 @@ export const Popup: React.FC<PopupProps> = (props) => {
     size = 'medium',
     verticalAlign: verticalAlignFromProps = 'top',
   } = props
-  const { useWindowInfo } = facelessUIImport
-
   const { height: windowHeight, width: windowWidth } = useWindowInfo()
   const [intersectionRef, intersectionEntry] = useIntersect({
     root: boundingRef?.current || null,

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

@@ -1,7 +1,7 @@
 'use client'
 import type { ClientCollectionConfig } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -26,7 +26,6 @@ export type PublishManyProps = {
 }
 
 export const PublishMany: React.FC<PublishManyProps> = (props) => {
-  const { Modal, useModal } = facelessUIImport
   const { clearRouteCache } = useRouteCache()
 
   const { collection: { slug, labels: { plural }, versions } = {} } = props

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import React, { useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
@@ -16,8 +16,6 @@ import './index.scss'
 const baseClass = 'status'
 
 export const Status: React.FC = () => {
-  const { Modal, useModal } = facelessUIImport
-
   const {
     id,
     collectionSlug,

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 // TODO: abstract the `next/navigation` dependency out from this component
 import { useRouter } from 'next/navigation.js'
 import React from 'react'
@@ -15,7 +15,6 @@ const baseClass = 'stay-logged-in'
 export const stayLoggedInModalSlug = 'stay-logged-in'
 
 export const StayLoggedInModal: React.FC = () => {
-  const { Modal, useModal } = facelessUIImport
   const { refreshCookie } = useAuth()
 
   const router = useRouter()

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

@@ -1,5 +1,5 @@
 'use client'
-import * as facelessUIImport from '@faceless-ui/modal'
+import { Modal, useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { useRouter } from 'next/navigation.js'
 import React, { useCallback, useState } from 'react'
@@ -27,7 +27,6 @@ export type UnpublishManyProps = {
 
 export const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {
   const { collection: { slug, labels: { plural }, versions } = {} } = props
-  const { Modal, useModal } = facelessUIImport
 
   const {
     routes: { api },

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

@@ -1,10 +1,2 @@
-import * as facelessUIImport from '@faceless-ui/window-info'
-const { WindowInfoProvider } =
-  facelessUIImport && 'WindowInfoProvider' in facelessUIImport
-    ? facelessUIImport
-    : { WindowInfoProvider: undefined }
-const { useWindowInfo } =
-  facelessUIImport && 'useWindowInfo' in facelessUIImport
-    ? facelessUIImport
-    : { useWindowInfo: undefined }
+import { WindowInfoProvider, useWindowInfo } from '@faceless-ui/window-info'
 export { WindowInfoProvider, useWindowInfo }

packages/ui/src/exports/elements.ts

@@ -46,9 +46,7 @@ export { Tooltip } from '../elements/Tooltip/index.js'
 export { Translation } from '../elements/Translation/index.js'
 export { UnpublishMany } from '../elements/UnpublishMany/index.js'
 export { Upload } from '../elements/Upload/index.js'
-import * as facelessUIImport from '@faceless-ui/modal'
-const { Modal } =
-  facelessUIImport && 'Modal' in facelessUIImport ? facelessUIImport : { Modal: undefined }
+import { Modal } from '@faceless-ui/modal'
 export { Modal }
 import * as reactToastifyImport from 'react-toastify'
 const { toast } =

packages/ui/src/fields/Blocks/BlocksDrawer/index.tsx

@@ -2,7 +2,7 @@
 import type { I18nClient } from '@payloadcms/translations'
 import type { Labels } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useState } from 'react'
 
@@ -35,7 +35,6 @@ const getBlockLabel = (block: ReducedBlock, i18n: I18nClient) => {
 
 export const BlocksDrawer: React.FC<Props> = (props) => {
   const { addRow, addRowIndex, blocks, drawerSlug, labels } = props
-  const { useModal } = facelessUIImport
 
   const [searchTerm, setSearchTerm] = useState('')
   const [filteredBlocks, setFilteredBlocks] = useState(blocks)

packages/ui/src/fields/Blocks/RowActions.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { Labels } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import React from 'react'
 
 import type {
@@ -40,7 +40,6 @@ export const RowActions: React.FC<{
     rowCount,
     rowIndex,
   } = props
-  const { useModal } = facelessUIImport
 
   const { closeModal, openModal } = useModal()
   const drawerSlug = useDrawerSlug('blocks-drawer')

packages/ui/src/hooks/useHotkey.ts

@@ -1,6 +1,6 @@
 'use client'
 /* eslint-disable no-shadow */
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { setsAreEqual } from 'payload/utilities'
 import { useCallback, useEffect } from 'react'
 
@@ -74,8 +74,6 @@ export const useHotkey = (
   },
   func: (e: KeyboardEvent) => void,
 ): void => {
-  const { useModal } = facelessUIImport
-
   const { cmdCtrlKey, editDepth, keyCodes } = options
 
   const { modalState } = useModal()

packages/ui/src/providers/Auth/index.tsx

@@ -2,7 +2,7 @@
 import type { ClientUser, Permissions } from 'payload/auth'
 import type { MeOperationResult } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
+import { useModal } from '@faceless-ui/modal'
 import { usePathname, useRouter } from 'next/navigation.js'
 import qs from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
@@ -33,8 +33,6 @@ const Context = createContext({} as AuthContext)
 const maxTimeoutTime = 2147483647
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { useModal } = facelessUIImport
-
   const { searchParams } = useSearchParams()
   const [user, setUser] = useState<ClientUser | null>()
   const [tokenInMemory, setTokenInMemory] = useState<string>()

packages/ui/src/providers/Root/index.tsx

@@ -2,9 +2,9 @@
 import type { I18nClient, Language } from '@payloadcms/translations'
 import type { ClientConfig, LanguageOptions } from 'payload/types'
 
-import * as facelessUIImport from '@faceless-ui/modal'
-import * as facelessUIImport3 from '@faceless-ui/scroll-info'
-import * as facelessUIImport2 from '@faceless-ui/window-info'
+import { ModalContainer, ModalProvider } from '@faceless-ui/modal'
+import { ScrollInfoProvider } from '@faceless-ui/scroll-info'
+import { WindowInfoProvider } from '@faceless-ui/window-info'
 import React, { Fragment } from 'react'
 import { Slide, ToastContainer } from 'react-toastify'
 
@@ -55,13 +55,6 @@ export const RootProvider: React.FC<Props> = ({
   theme,
   translations,
 }) => {
-  const { ModalContainer, ModalProvider } = facelessUIImport || {
-    ModalContainer: React.Fragment,
-    ModalProvider: React.Fragment,
-  }
-  const { WindowInfoProvider } = facelessUIImport2 || { WindowInfoProvider: React.Fragment }
-  const { ScrollInfoProvider } = facelessUIImport3 || { ScrollInfoProvider: React.Fragment }
-
   return (
     <Fragment>
       <RouteCache>

pnpm-lock.yaml

@@ -1142,11 +1142,11 @@ importers:
   packages/richtext-lexical:
     dependencies:
       '@faceless-ui/modal':
-        specifier: 2.1.0-rc.0
-        version: 2.1.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 3.0.0-beta.0
+        version: 3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@faceless-ui/scroll-info':
-        specifier: 1.4.0-rc.0
-        version: 1.4.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 2.0.0-beta.0
+        version: 2.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@lexical/headless':
         specifier: 0.16.0
         version: 0.16.0
@@ -1242,8 +1242,8 @@ importers:
   packages/richtext-slate:
     dependencies:
       '@faceless-ui/modal':
-        specifier: 2.1.0-rc.0
-        version: 2.1.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 3.0.0-beta.0
+        version: 3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@payloadcms/translations':
         specifier: workspace:*
         version: link:../translations
@@ -1402,14 +1402,14 @@ importers:
         specifier: 7.0.2
         version: 7.0.2(@dnd-kit/core@6.0.8)(react@19.0.0-rc-f994737d14-20240522)
       '@faceless-ui/modal':
-        specifier: 2.1.0-rc.0
-        version: 2.1.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 3.0.0-beta.0
+        version: 3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@faceless-ui/scroll-info':
-        specifier: 1.4.0-rc.0
-        version: 1.4.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 2.0.0-beta.0
+        version: 2.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@faceless-ui/window-info':
-        specifier: 2.2.0-rc.0
-        version: 2.2.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        specifier: 3.0.0-beta.0
+        version: 3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
       '@monaco-editor/react':
         specifier: 4.5.1
         version: 4.5.1(monaco-editor@0.38.0)(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
@@ -4871,8 +4871,8 @@ packages:
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  /@faceless-ui/modal@2.1.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
-    resolution: {integrity: sha512-BFm7Raj2GE46nOvkTPD0AJ4LR/sdhqUrxx53z9ZgVXjwbyWHkwQVVphbSoRRc01kwnvPwlxoRpRNfXEgUMvTBA==}
+  /@faceless-ui/modal@3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
+    resolution: {integrity: sha512-gZboS0pLMO4THTqAHLmZuxLOE2KyYMN9QOUikd25WSrwPOqdtcgEiRlps/RcOivHA+sowtb1IBitiIWJ0L5Eow==}
     peerDependencies:
       react: ^19.0.0-rc-f994737d14-20240522
       react-dom: ^19.0.0-rc-f994737d14-20240522
@@ -4885,8 +4885,8 @@ packages:
       react-transition-group: 4.4.5(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
     dev: false
 
-  /@faceless-ui/scroll-info@1.4.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
-    resolution: {integrity: sha512-83/4AOgGJd6PGRKGEyr3Ir/F5BP484PwwAoSg3u36QfTTfVANwbD7/TIMIv+e5QcBPrNm7HdCCPVqjqSxq4YTw==}
+  /@faceless-ui/scroll-info@2.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
+    resolution: {integrity: sha512-pUBhQP8vduA7rVndNsjhaCcds1BykA/Q4iV23JWijU6ZFL/M3Fm9P3ypDS+0VVxolqemNhw8S3FXPwZGgjH4Rw==}
     peerDependencies:
       react: ^19.0.0-rc-f994737d14-20240522
       react-dom: ^19.0.0-rc-f994737d14-20240522
@@ -4895,8 +4895,8 @@ packages:
       react-dom: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522)
     dev: false
 
-  /@faceless-ui/window-info@2.2.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
-    resolution: {integrity: sha512-fhvgt7MfbBpbZDa8adcxbJDDgVsprTvQki/W5L4blEYVEUDhSNitcg1IM/zBlO6BVURItJ8eOL3ogomooqmITw==}
+  /@faceless-ui/window-info@3.0.0-beta.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
+    resolution: {integrity: sha512-Qs8xRA+fl4sU2aFVe9xawxfi5TVZ9VTPuhdQpx9aSv7U5a2F0AXwT61lJfnaJ9Flm8tOcxzq67p8cVZsXNCVeQ==}
     peerDependencies:
       react: ^19.0.0-rc-f994737d14-20240522
       react-dom: ^19.0.0-rc-f994737d14-20240522