refactor: migrate dialogs & tooltips from reach-ui (#2314)

packages/web/package.json

@@ -30,14 +30,9 @@
     "@babel/preset-typescript": "^7.18.6",
     "@lexical/react": "0.9.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@reach/alert": "^0.18.0",
-    "@reach/alert-dialog": "^0.18.0",
     "@reach/checkbox": "^0.18.0",
-    "@reach/dialog": "^0.18.0",
     "@reach/disclosure": "^0.18.0",
     "@reach/listbox": "^0.18.0",
-    "@reach/tooltip": "^0.18.0",
-    "@reach/visually-hidden": "^0.18.0",
     "@simplewebauthn/browser": "^7.1.0",
     "@standardnotes/authenticator": "^2.3.9",
     "@standardnotes/autobiography-theme": "^1.2.7",
@@ -117,7 +112,9 @@
     "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
+    "@ariakit/react": "^0.1.2",
     "@lexical/headless": "0.9.2",
+    "@radix-ui/react-slot": "^1.0.1",
     "contactjs": "2.1.5"
   }
 }

packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,35 @@
+import { Dialog, DialogStoreProps, useDialogStore } from '@ariakit/react'
+import { classNames } from '@standardnotes/snjs'
+import { ReactNode } from 'react'
+
+const AlertDialog = ({
+  children,
+  closeDialog,
+  className,
+  ...props
+}: { children: ReactNode; closeDialog: () => void; className?: string } & Partial<DialogStoreProps>) => {
+  const dialog = useDialogStore({
+    open: true,
+    ...props,
+  })
+
+  return (
+    <Dialog store={dialog} role="alertdialog" className="h-full w-full" backdropProps={{ className: '!z-modal' }}>
+      <div
+        className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
+        role="presentation"
+        onClick={closeDialog}
+      />
+      <div
+        className={classNames(
+          'absolute top-1/2 left-1/2 z-[1] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </Dialog>
+  )
+}
+
+export default AlertDialog

packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx

@@ -4,7 +4,6 @@ import { Component } from 'react'
 import ApplicationView from '@/Components/ApplicationView/ApplicationView'
 import { WebOrDesktopDevice } from '@/Application/Device/WebOrDesktopDevice'
 import { ApplicationGroupEvent, ApplicationGroupEventData, DeinitSource } from '@standardnotes/snjs'
-import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { getPlatformString, isDesktopApplication } from '@/Utils'
 import DeallocateHandler from '../DeallocateHandler/DeallocateHandler'
 
@@ -23,6 +22,20 @@ type State = {
   deviceDestroyed?: boolean
 }
 
+const renderDialog = (message: string) => {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-passive-5" role="alert">
+      <div
+        className={
+          'challenge-modal shadow-overlay-light relative flex max-w-125 flex-col items-center rounded border border-solid border-border bg-default p-6'
+        }
+      >
+        <div className="text-base lg:text-xs">{message}</div>
+      </div>
+    </div>
+  )
+}
+
 class ApplicationGroupView extends Component<Props, State> {
   applicationObserverRemover?: () => void
   private group?: ApplicationGroup
@@ -83,21 +96,6 @@ class ApplicationGroupView extends Component<Props, State> {
   }
 
   override render() {
-    const renderDialog = (message: string) => {
-      return (
-        <DialogOverlay className={'sn-component challenge-modal-overlay'}>
-          <DialogContent
-            aria-label="Switching workspace"
-            className={
-              'challenge-modal shadow-overlay-light relative flex flex-col items-center rounded border border-solid border-border bg-default p-8'
-            }
-          >
-            <div className="text-base lg:text-xs">{message}</div>
-          </DialogContent>
-        </DialogOverlay>
-      )
-    }
-
     if (this.state.deviceDestroyed) {
       const message = `Secure memory has destroyed this application instance. ${
         isDesktopApplication()

packages/web/src/javascripts/Components/ApplicationView/DotOrgNotice.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
 
 const DotOrgNotice: FunctionComponent = () => {
   return (
-    <div className="z-modal flex h-30 w-full w-full items-center bg-danger text-center text-info-contrast">
+    <div className="z-modal flex h-30 w-full items-center bg-danger text-center text-info-contrast">
       <div className="w-full text-center text-xl font-bold">
         app.standardnotes.org is no longer maintained. Please switch to{' '}
         <a className="underline" href="https://app.standardnotes.com">

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -71,7 +71,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isProcessing, setIsProcessing] = useState(false)
   const [, setProcessingPrompts] = useState<ChallengePrompt[]>([])
-  const [bypassModalFocusLock, setBypassModalFocusLock] = useState(false)
 
   const shouldShowForgotPasscode = [ChallengeReason.ApplicationUnlock, ChallengeReason.Migration].includes(
     challenge.reason,
@@ -238,23 +237,17 @@ const ChallengeModal: FunctionComponent<Props> = ({
   })
 
   return (
-    <ModalOverlay
+    <ModalOverlay isOpen={true} key={challenge.id} ref={setModalElement}>
-      isOpen={true}
-      className={`sn-component p-0 ${isFullScreenBlocker ? 'bg-passive-5' : ''}`}
-      onDismiss={cancelChallenge}
-      dangerouslyBypassFocusLock={bypassModalFocusLock}
-      key={challenge.id}
-      ref={setModalElement}
-    >
       <Modal
         title="Authenticate"
         close={cancelChallenge}
         className={{
           content: classNames(
-            'challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-auto md:border',
+            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border',
             !isMobileScreen && 'shadow-overlay-light',
             isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
           ),
+          backdrop: isFullScreenBlocker ? 'bg-passive-5' : '',
         }}
         customHeader={<></>}
         customFooter={<></>}
@@ -319,7 +312,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
             <Button
               className="flex min-w-76 items-center justify-center"
               onClick={() => {
-                setBypassModalFocusLock(true)
                 application.alertService
                   .confirm(
                     'If you forgot your local passcode, your only option is to clear your local data from this device and sign back in to your account.',
@@ -333,9 +325,6 @@ const ChallengeModal: FunctionComponent<Props> = ({
                     }
                   })
                   .catch(console.error)
-                  .finally(() => {
-                    setBypassModalFocusLock(false)
-                  })
               }}
             >
               <Icon type="help" className="mr-2 text-neutral" />

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -223,7 +223,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
             )
           })}
       </Menu>
-      <ModalOverlay isOpen={showSuperImporter} onDismiss={closeSuperNoteImporter}>
+      <ModalOverlay isOpen={showSuperImporter}>
         {note && (
           <SuperNoteImporter
             note={note}

packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleMenu.tsx

@@ -180,7 +180,7 @@ const ChangeMultipleMenu = ({ application, notes, setDisableClickOutside }: Prop
           </Fragment>
         ))}
       </Menu>
-      <ModalOverlay isOpen={showSuperImporter} onDismiss={closeCurrentSuperNoteImporter}>
+      <ModalOverlay isOpen={showSuperImporter}>
         {confirmationQueue[0] && (
           <SuperNoteImporter
             note={confirmationQueue[0]}

packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx

@@ -1,11 +1,11 @@
 import { observer } from 'mobx-react-lite'
 import { ViewControllerManager } from '@Controllers/ViewControllerManager'
-import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { useCallback, useRef } from 'react'
 import { STRING_DELETE_ACCOUNT_CONFIRMATION } from '@/Constants/Strings'
 import Button from '@/Components/Button/Button'
 import { WebApplication } from '@/Application/Application'
 import Icon from '../Icon/Icon'
+import AlertDialog from '../AlertDialog/AlertDialog'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -25,37 +25,26 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
   }, [application.user, closeDialog])
 
   return (
-    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
+    <AlertDialog closeDialog={closeDialog}>
-      <div className="sk-modal-content">
+      <div className="flex items-center justify-between text-lg font-bold">
-        <div className="sn-component">
+        Delete account?
-          <div className="sk-panel">
+        <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
-            <div className="sk-panel-content">
+          <Icon type="close" />
-              <div className="sk-panel-section">
+        </button>
-                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+      </div>
-                  Delete account?
+      <div className="sk-panel-row">
-                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+        <div>
-                    <Icon type="close" />
+          <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
-                  </button>
-                </AlertDialogLabel>
-                <AlertDialogDescription className="sk-panel-row">
-                  <div>
-                    <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
-                  </div>
-                </AlertDialogDescription>
-
-                <div className="my-1 mt-4 flex justify-end gap-2">
-                  <Button ref={cancelRef} onClick={closeDialog}>
-                    Cancel
-                  </Button>
-                  <Button primary colorStyle="danger" onClick={confirm}>
-                    Delete my account for good
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
+      <div className="mt-4 flex justify-end gap-2">
+        <Button ref={cancelRef} onClick={closeDialog}>
+          Cancel
+        </Button>
+        <Button primary colorStyle="danger" onClick={confirm}>
+          Delete my account for good
+        </Button>
+      </div>
     </AlertDialog>
   )
 }

packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx

@@ -1,5 +1,4 @@
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
-import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
@@ -8,6 +7,7 @@ import { ApplicationGroup } from '@/Application/ApplicationGroup'
 import { isDesktopApplication } from '@/Utils'
 import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
+import AlertDialog from '../AlertDialog/AlertDialog'
 
 type Props = {
   application: WebApplication
@@ -42,75 +42,65 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
   }, [application, closeDialog, deleteLocalBackups])
 
   return (
-    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
+    <AlertDialog closeDialog={closeDialog}>
-      <div className="sk-modal-content">
+      <div className="flex items-center justify-between text-lg font-bold">
-        <div className="sn-component">
+        Sign out workspace?
-          <div className="sk-panel">
+        <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
-            <div className="sk-panel-content">
+          <Icon type="close" />
-              <div className="sk-panel-section">
+        </button>
-                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+      </div>
-                  Sign out workspace?
+      <div className="sk-panel-row">
-                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+        <div>
-                    <Icon type="close" />
+          <p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
-                  </button>
+          {showWorkspaceWarning && (
-                </AlertDialogLabel>
+            <>
-                <AlertDialogDescription className="sk-panel-row">
+              <br />
-                  <div>
+              <p className="text-base text-foreground lg:text-sm">
-                    <p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                <strong>Note: </strong>
-                    {showWorkspaceWarning && (
+                Because you have other workspaces signed in, this sign out may leave logs and other metadata of your
-                      <>
+                session on this device. For a more robust sign out that performs a hard clear of all app-related data,
-                        <br />
+                use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
-                        <p className="text-base text-foreground lg:text-sm">
+              </p>
-                          <strong>Note: </strong>
+            </>
-                          Because you have other workspaces signed in, this sign out may leave logs and other metadata
+          )}
-                          of your session on this device. For a more robust sign out that performs a hard clear of all
-                          app-related data, use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
-                        </p>
-                      </>
-                    )}
-                  </div>
-                </AlertDialogDescription>
-
-                {localBackupsCount > 0 && (
-                  <div className="flex">
-                    <div className="sk-panel-row"></div>
-                    <label className="flex items-center">
-                      <input
-                        type="checkbox"
-                        checked={deleteLocalBackups}
-                        onChange={(event) => {
-                          setDeleteLocalBackups((event.target as HTMLInputElement).checked)
-                        }}
-                      />
-                      <span className="ml-2">
-                        Delete {localBackupsCount} local backup file
-                        {localBackupsCount > 1 ? 's' : ''}
-                      </span>
-                    </label>
-                    <button
-                      className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
-                      onClick={() => {
-                        application.desktopDevice?.viewlocalBackups()
-                      }}
-                    >
-                      View backup files
-                    </button>
-                  </div>
-                )}
-
-                <div className="my-1 mt-4 flex justify-end gap-2">
-                  <Button ref={cancelRef} onClick={closeDialog}>
-                    Cancel
-                  </Button>
-                  <Button primary colorStyle="danger" onClick={confirm}>
-                    {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
+
+      {localBackupsCount > 0 && (
+        <div className="flex">
+          <div className="sk-panel-row"></div>
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              checked={deleteLocalBackups}
+              onChange={(event) => {
+                setDeleteLocalBackups((event.target as HTMLInputElement).checked)
+              }}
+            />
+            <span className="ml-2">
+              Delete {localBackupsCount} local backup file
+              {localBackupsCount > 1 ? 's' : ''}
+            </span>
+          </label>
+          <button
+            className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
+            onClick={() => {
+              application.desktopDevice?.viewlocalBackups()
+            }}
+          >
+            View backup files
+          </button>
+        </div>
+      )}
+
+      <div className="mt-4 flex justify-end gap-2">
+        <Button ref={cancelRef} onClick={closeDialog}>
+          Cancel
+        </Button>
+        <Button primary colorStyle="danger" onClick={confirm}>
+          {application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
+        </Button>
+      </div>
     </AlertDialog>
   )
 }

packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx

@@ -106,10 +106,10 @@ const AddItemMenuButton = ({
           </MenuItem>
         </Menu>
       </Popover>
-      <ModalOverlay isOpen={captureType === 'photo'} onDismiss={closeCaptureModal}>
+      <ModalOverlay isOpen={captureType === 'photo'}>
         <PhotoCaptureModal filesController={filesController} close={closeCaptureModal} />
       </ModalOverlay>
-      <ModalOverlay isOpen={captureType === 'video'} onDismiss={closeCaptureModal}>
+      <ModalOverlay isOpen={captureType === 'video'}>
         <VideoCaptureModal filesController={filesController} close={closeCaptureModal} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -1,12 +1,12 @@
 import { ListboxArrow, ListboxInput, ListboxList, ListboxPopover } from '@reach/listbox'
 import '@reach/listbox/styles.css'
-import { VisuallyHidden } from '@reach/visually-hidden'
 import { FunctionComponent } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { DropdownItem } from './DropdownItem'
 import StyledListboxButton from './StyledListboxButton'
 import StyledListboxOption from './StyledListboxOption'
 import { classNames } from '@standardnotes/snjs'
+import { VisuallyHidden } from '@ariakit/react'
 
 type DropdownProps = {
   id: string

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -285,13 +285,7 @@ FilePreviewModal.displayName = 'FilePreviewModal'
 
 const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, viewControllerManager }) => {
   return (
-    <ModalOverlay
+    <ModalOverlay aria-label="File preview modal" isOpen={viewControllerManager.filePreviewModalController.isOpen}>
-      className="sn-component p-0"
-      aria-label="File preview modal"
-      isOpen={viewControllerManager.filePreviewModalController.isOpen}
-      onDismiss={viewControllerManager.filePreviewModalController.dismiss}
-      dangerouslyBypassScrollLock
-    >
       <FilePreviewModal application={application} viewControllerManager={viewControllerManager} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/ImportModal/ImportModal.tsx

@@ -33,7 +33,7 @@ const ImportModal = ({ importModalController }: { importModalController: ImportM
   )
 
   return (
-    <ModalOverlay isOpen={isVisible} onDismiss={close}>
+    <ModalOverlay isOpen={isVisible}>
       <Modal title="Import" close={close} actions={modalActions}>
         <div className="px-4 py-4">
           {!files.length && <ImportModalInitialPage setFiles={setFiles} />}

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -1,6 +1,5 @@
 import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { isIOS } from '@/Utils'
-import { DialogContent } from '@reach/dialog'
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode, useMemo, useRef, useState } from 'react'
 import Button from '../Button/Button'
@@ -26,6 +25,7 @@ type Props = {
   className?: {
     content?: string
     description?: string
+    backdrop?: string
   }
   customHeader?: ReactNode
   disableCustomHeader?: boolean
@@ -95,13 +95,17 @@ const Modal = ({
   return (
     <>
       <ModalAndroidBackHandler close={close} />
-      <DialogContent
+      <div
-        tabIndex={0}
+        className={classNames('absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75', className?.backdrop)}
+        role="presentation"
+        onClick={close}
+      />
+      <div
         className={classNames(
-          'm-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'absolute z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
-          className.content,
+          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
+          className?.content,
         )}
-        aria-label={title}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader
@@ -218,7 +222,7 @@ const Modal = ({
                 ))}
               </div>
             )}
-      </DialogContent>
+      </div>
     </>
   )
 }

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -1,35 +1,37 @@
 import { mergeRefs } from '@/Hooks/mergeRefs'
-import { DialogOverlay, DialogOverlayProps } from '@reach/dialog'
+import { Dialog, useDialogStore } from '@ariakit/react'
-import { classNames } from '@standardnotes/snjs'
 import { ForwardedRef, forwardRef, ReactNode } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 
 type Props = {
   isOpen: boolean
-  onDismiss?: () => void
   children: ReactNode
-  className?: string
+}
-} & DialogOverlayProps
 
-const ModalOverlay = forwardRef(
+const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
-  ({ isOpen, onDismiss, children, className, ...props }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isMounted, setElement] = useModalAnimation(isOpen)
-    const [isMounted, setElement] = useModalAnimation(isOpen)
+  const dialog = useDialogStore({
+    open: isMounted,
+  })
 
-    if (!isMounted) {
+  if (!isMounted) {
-      return null
+    return null
-    }
+  }
 
-    return (
+  return (
-      <DialogOverlay
+    <Dialog
-        className={classNames('p-0 md:px-0 md:opacity-100', className)}
+      tabIndex={0}
-        onDismiss={onDismiss}
+      className="h-full w-full"
-        ref={mergeRefs([setElement, ref])}
+      backdropProps={{
-        {...props}
+        className: '!z-modal',
-      >
+      }}
-        {children}
+      ref={mergeRefs([setElement, ref])}
-      </DialogOverlay>
+      store={dialog}
-    )
+      {...props}
-  },
+    >
-)
+      {children}
+    </Dialog>
+  )
+})
 
 export default ModalOverlay

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -395,7 +395,7 @@ const NotesOptions = ({
         </>
       ) : null}
 
-      <ModalOverlay isOpen={showExportSuperModal} onDismiss={closeSuperExportModal}>
+      <ModalOverlay isOpen={showExportSuperModal}>
         <SuperExportModal exportNotes={downloadSelectedItems} close={closeSuperExportModal} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useRef } from 'react'
-import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
+import AlertDialog from '../AlertDialog/AlertDialog'
 
 type Props = {
   application: WebApplication
@@ -27,37 +27,26 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
   }, [application, closeDialog])
 
   return (
-    <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
+    <AlertDialog closeDialog={closeDialog}>
-      <div className="sk-modal-content">
+      <div className="flex items-center justify-between text-lg font-bold capitalize">
-        <div className="sn-component">
+        End all other sessions?
-          <div className="sk-panel">
+        <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
-            <div className="sk-panel-content">
+          <Icon type="close" />
-              <div className="sk-panel-section">
+        </button>
-                <AlertDialogLabel className="flex items-center justify-between text-lg font-bold capitalize">
+      </div>
-                  End all other sessions?
+      <div className="sk-panel-row">
-                  <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
+        <p className="text-base text-foreground lg:text-sm">
-                    <Icon type="close" />
+          This action will sign out all other devices signed into your account, and remove your data from those devices
-                  </button>
+          when they next regain connection to the internet. You may sign back in on those devices at any time.
-                </AlertDialogLabel>
+        </p>
-                <AlertDialogDescription className="sk-panel-row">
+      </div>
-                  <p className="text-base text-foreground lg:text-sm">
+      <div className="mt-4 flex justify-end gap-2">
-                    This action will sign out all other devices signed into your account, and remove your data from
+        <Button ref={cancelRef} onClick={closeDialog}>
-                    those devices when they next regain connection to the internet. You may sign back in on those
+          Cancel
-                    devices at any time.
+        </Button>
-                  </p>
+        <Button primary colorStyle="danger" onClick={confirm}>
-                </AlertDialogDescription>
+          End Sessions
-                <div className="my-1 mt-4 flex justify-end gap-2">
+        </Button>
-                  <Button ref={cancelRef} onClick={closeDialog}>
-                    Cancel
-                  </Button>
-                  <Button primary colorStyle="danger" onClick={confirm}>
-                    End Sessions
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </AlertDialog>
   )

packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx

@@ -1,4 +1,3 @@
-import { VisuallyHidden } from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
@@ -6,6 +5,7 @@ import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { classNames } from '@standardnotes/utils'
 import { keyboardStringForShortcut, PIN_NOTE_COMMAND } from '@standardnotes/ui-services'
 import { useCommandService } from '../CommandProvider'
+import { VisuallyHidden } from '@ariakit/react'
 
 type Props = {
   className?: string

packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx

@@ -58,12 +58,12 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
             Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
           </Text>
           <Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
-          <ModalOverlay isOpen={isChangeEmailDialogOpen} onDismiss={closeChangeEmailDialog}>
+          <ModalOverlay isOpen={isChangeEmailDialogOpen}>
             <ChangeEmail onCloseDialog={closeChangeEmailDialog} application={application} />
           </ModalOverlay>
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowPasswordWizard} onDismiss={dismissPasswordWizard}>
+      <ModalOverlay isOpen={shouldShowPasswordWizard}>
         <PasswordWizard application={application} dismissModal={dismissPasswordWizard} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Account/SubscriptionSharing/SubscriptionSharing.tsx

@@ -48,7 +48,7 @@ const SubscriptionSharing: FunctionComponent<Props> = ({ application, viewContro
                 {!subscriptionState.allInvitationsUsed && (
                   <Button className="min-w-20" label="Invite" onClick={() => setIsInviteDialogOpen(true)} />
                 )}
-                <ModalOverlay isOpen={isInviteDialogOpen} onDismiss={closeInviteDialog}>
+                <ModalOverlay isOpen={isInviteDialogOpen}>
                   <Invite
                     onCloseDialog={closeInviteDialog}
                     application={application}

packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/SmartViews.tsx

@@ -89,13 +89,10 @@ const SmartViews = ({ application, featuresController }: Props) => {
           )}
         </PreferencesSegment>
       </PreferencesGroup>
-      <ModalOverlay isOpen={!!editSmartViewModalController.view} onDismiss={editSmartViewModalController.closeDialog}>
+      <ModalOverlay isOpen={!!editSmartViewModalController.view}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
-      <ModalOverlay
+      <ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
-        isOpen={addSmartViewModalController.isAddingSmartView}
-        onDismiss={addSmartViewModalController.closeModal}
-      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
     </>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthView/TwoFactorAuthView.tsx

@@ -115,7 +115,7 @@ const TwoFactorAuthView: FunctionComponent<Props> = ({ auth, application }) => {
           </PreferencesSegment>
         )}
       </PreferencesGroup>
-      <ModalOverlay isOpen={shouldShowActivationModal} onDismiss={closeActivationModal}>
+      <ModalOverlay isOpen={shouldShowActivationModal}>
         <Modal title={activationModalTitle} close={closeActivationModal} actions={activationModalActions}>
           {shouldShowActivationModal && <TwoFactorActivationView activation={auth.status} />}
         </Modal>

packages/web/src/javascripts/Components/Preferences/PreferencesViewWrapper.tsx

@@ -20,11 +20,7 @@ const PreferencesViewWrapper: FunctionComponent<PreferencesViewWrapperProps> = (
   }, [commandService, viewControllerManager])
 
   return (
-    <ModalOverlay
+    <ModalOverlay isOpen={viewControllerManager.preferencesController.isOpen}>
-      isOpen={viewControllerManager.preferencesController.isOpen}
-      onDismiss={viewControllerManager.preferencesController.closePreferences}
-      className="p-0"
-    >
       <PreferencesView
         closePreferences={() => viewControllerManager.preferencesController.closePreferences()}
         application={application}

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -1,4 +1,4 @@
-import { AlertDialog } from '@reach/alert-dialog'
+import AlertDialog from '../AlertDialog/AlertDialog'
 import { FunctionComponent, useRef } from 'react'
 import { WebApplication } from '@/Application/Application'
 import { PremiumFeatureModalType } from './PremiumFeatureModalType'
@@ -30,9 +30,9 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   }
 
   return (
-    <AlertDialog leastDestructiveRef={ctaButtonRef} className="p-0">
+    <AlertDialog closeDialog={onClose} className="!max-w-89">
       <div tabIndex={-1} className="sn-component bg-default">
-        <div tabIndex={0} className="max-w-89 rounded bg-default p-4 shadow-main">
+        <div tabIndex={0}>
           {type === PremiumFeatureModalType.UpgradePrompt && (
             <UpgradePrompt
               featureName={featureName}

packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/SuccessPrompt.tsx

@@ -1,5 +1,4 @@
 import Icon from '@/Components/Icon/Icon'
-import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 
 export const SuccessPrompt = ({
   ctaRef,
@@ -10,7 +9,7 @@ export const SuccessPrompt = ({
 }) => {
   return (
     <>
-      <AlertDialogLabel>
+      <div>
         <div className="flex justify-end p-1">
           <button
             className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -27,11 +26,9 @@ export const SuccessPrompt = ({
           <Icon className={'h-24 w-24 px-7 py-2 text-[50px]'} size={'custom'} type={'🎉'} />
         </div>
         <div className="mb-1 text-center text-lg font-bold">Your purchase was successful!</div>
-      </AlertDialogLabel>
+      </div>
 
-      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+      <div className="mb-2 px-4.5 text-center text-sm text-passive-1">Enjoy your new powered up experience.</div>
-        Enjoy your new powered up experience.
-      </AlertDialogDescription>
 
       <div className="p-4">
         <button

packages/web/src/javascripts/Components/PremiumFeaturesModal/Subviews/UpgradePrompt.tsx

@@ -1,4 +1,3 @@
-import { AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { useCallback } from 'react'
 import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
@@ -29,7 +28,7 @@ export const UpgradePrompt = ({
 
   return (
     <>
-      <AlertDialogLabel>
+      <div>
         <div className="flex justify-end p-1">
           <button
             className="flex cursor-pointer border-0 bg-transparent p-0"
@@ -46,8 +45,8 @@ export const UpgradePrompt = ({
           <Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} size={'custom'} type={PremiumFeatureIconName} />
         </div>
         <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
-      </AlertDialogLabel>
+      </div>
-      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+      <div className="mb-2 px-4.5 text-center text-sm text-passive-1">
         {featureName && (
           <span>
             To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
@@ -74,7 +73,7 @@ export const UpgradePrompt = ({
             </ul>
           </div>
         )}
-      </AlertDialogDescription>
+      </div>
 
       <div className="p-4">
         <button

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,6 +1,6 @@
 import { getPlatformString } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
-import { DialogOverlay, DialogContent } from '@reach/dialog'
+import { Dialog, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode } from 'react'
 
 type Props = {
@@ -9,23 +9,36 @@ type Props = {
 }
 
 const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: ForwardedRef<HTMLDivElement>) => {
+  const dialog = useDialogStore({
+    open: true,
+  })
+
   return (
-    <DialogOverlay
+    <Dialog
-      className={`sn-component ${getPlatformString()}`}
+      store={dialog}
-      onDismiss={onDismiss}
       aria-label="Note revision history"
       ref={ref}
+      backdropProps={{
+        className: '!z-modal',
+      }}
+      className="h-full w-full"
     >
-      <DialogContent
+      <div
-        aria-label="Note revision history"
+        className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
+        role="presentation"
+        onClick={onDismiss}
+      />
+      <div
         className={classNames(
-          'my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
           'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
+          'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
+          getPlatformString(),
         )}
       >
-        <div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
+        {children}
-      </DialogContent>
+      </div>
-    </DialogOverlay>
+    </Dialog>
   )
 })
 

packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx

@@ -1,8 +1,6 @@
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { SNApplication, SessionStrings, UuidString, SessionListEntry, isErrorResponse } from '@standardnotes/snjs'
 import { FunctionComponent, useState, useEffect, useRef, useMemo, useCallback } from 'react'
-import { Alert } from '@reach/alert'
-import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
 import Spinner from '@/Components/Spinner/Spinner'
@@ -10,6 +8,7 @@ import Button from '@/Components/Button/Button'
 import Icon from '../Icon/Icon'
 import Modal, { ModalAction } from '../Modal/Modal'
 import ModalOverlay from '../Modal/ModalOverlay'
+import AlertDialog from '../AlertDialog/AlertDialog'
 
 type Session = SessionListEntry & {
   revoking?: true
@@ -126,7 +125,14 @@ const SessionsModalContent: FunctionComponent<{
 
   return (
     <>
-      <Modal title="Active Sessions" close={close} actions={sessionModalActions}>
+      <Modal
+        title="Active Sessions"
+        close={close}
+        actions={sessionModalActions}
+        className={{
+          content: 'sessions-modal',
+        }}
+      >
         <div className="px-4 py-4">
           {refreshing ? (
             <div className="flex items-center gap-2">
@@ -135,7 +141,11 @@ const SessionsModalContent: FunctionComponent<{
             </div>
           ) : (
             <>
-              {errorMessage && <Alert className="sk-p bold">{errorMessage}</Alert>}
+              {errorMessage && (
+                <div role="alert" className="sk-p bold">
+                  {errorMessage}
+                </div>
+              )}
               {sessions.length > 0 && (
                 <ul>
                   {sessions.map((session) => (
@@ -166,43 +176,30 @@ const SessionsModalContent: FunctionComponent<{
         </div>
       </Modal>
       {confirmRevokingSessionUuid && (
-        <AlertDialog onDismiss={closeRevokeConfirmationDialog} leastDestructiveRef={cancelRevokeRef} className="p-0">
+        <AlertDialog closeDialog={closeRevokeConfirmationDialog}>
-          <div className="sk-modal-content">
+          <div className="flex items-center justify-between text-lg font-bold">
-            <div className="sn-component">
+            {SessionStrings.RevokeTitle}
-              <div className="sk-panel">
+            <button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeRevokeConfirmationDialog}>
-                <div className="sk-panel-content">
+              <Icon type="close" />
-                  <div className="sk-panel-section">
+            </button>
-                    <AlertDialogLabel className="flex items-center justify-between text-lg font-bold">
+          </div>
-                      {SessionStrings.RevokeTitle}
+          <div className="sk-panel-row">
-                      <button
+            <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
-                        className="rounded p-1 font-bold hover:bg-contrast"
+          </div>
-                        onClick={closeRevokeConfirmationDialog}
+          <div className="mt-4 flex justify-end gap-2">
-                      >
+            <Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
-                        <Icon type="close" />
+              <span>{SessionStrings.RevokeCancelButton}</span>
-                      </button>
+            </Button>
-                    </AlertDialogLabel>
+            <Button
-                    <AlertDialogDescription className="sk-panel-row">
+              primary
-                      <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
+              colorStyle="danger"
-                    </AlertDialogDescription>
+              onClick={() => {
-                    <div className="my-1 mt-4 flex justify-end gap-2">
+                closeRevokeSessionAlert()
-                      <Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
+                revokeSession(confirmRevokingSessionUuid).catch(console.error)
-                        <span>{SessionStrings.RevokeCancelButton}</span>
+              }}
-                      </Button>
+            >
-                      <Button
+              <span>{SessionStrings.RevokeConfirmButton}</span>
-                        primary
+            </Button>
-                        colorStyle="danger"
-                        onClick={() => {
-                          closeRevokeSessionAlert()
-                          revokeSession(confirmRevokingSessionUuid).catch(console.error)
-                        }}
-                      >
-                        <span>{SessionStrings.RevokeConfirmButton}</span>
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
           </div>
         </AlertDialog>
       )}
@@ -215,11 +212,7 @@ const SessionsModal: FunctionComponent<{
   application: WebApplication
 }> = ({ viewControllerManager, application }) => {
   return (
-    <ModalOverlay
+    <ModalOverlay isOpen={viewControllerManager.isSessionsModalVisible}>
-      isOpen={viewControllerManager.isSessionsModalVisible}
-      onDismiss={viewControllerManager.closeSessionsModal}
-      className="sessions-modal"
-    >
       <SessionsModalContent application={application} viewControllerManager={viewControllerManager} />
     </ModalOverlay>
   )

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -1,14 +1,27 @@
-import { Tooltip } from '@reach/tooltip'
+import { classNames } from '@standardnotes/snjs'
-import styled from 'styled-components'
+import { ReactNode } from 'react'
+import { Tooltip, TooltipAnchor, useTooltipStore } from '@ariakit/react'
+import { Slot } from '@radix-ui/react-slot'
 
-export default styled(Tooltip)`
+const StyledTooltip = ({ children, className, label }: { children: ReactNode; className?: string; label: string }) => {
-  &[data-reach-tooltip] {
+  const tooltip = useTooltipStore()
-    border-radius: 0.25rem;
+
-    font-size: 0.875rem;
+  return (
-    padding: 0.375rem 0.75rem;
+    <>
-    background-color: var(--sn-stylekit-contrast-background-color);
+      <TooltipAnchor store={tooltip} as={Slot}>
-    color: var(--sn-stylekit-foreground-color);
+        {children}
-    border-color: var(--sn-stylekit-border-color);
+      </TooltipAnchor>
-    z-index: var(--z-index-tooltip);
+      <Tooltip
-  }
+        store={tooltip}
-`
+        className={classNames(
+          'z-tooltip rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
+          className,
+        )}
+      >
+        {label}
+      </Tooltip>
+    </>
+  )
+}
+
+export default StyledTooltip

packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx

@@ -208,7 +208,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
             </BlocksEditorComposer>
           </FilesControllerProvider>
         </LinkingControllerProvider>
-        <ModalOverlay isOpen={showMarkdownPreview} onDismiss={closeMarkdownPreview}>
+        <ModalOverlay isOpen={showMarkdownPreview}>
           <SuperNoteMarkdownPreview note={note.current} closeDialog={closeMarkdownPreview} />
         </ModalOverlay>
       </ErrorBoundary>

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -1,7 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import '@reach/tooltip/styles.css'
 import { SmartView, SystemViewId, isSystemView } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import {

packages/web/src/javascripts/Components/Tags/SmartViewsSection.tsx

@@ -54,13 +54,10 @@ const SmartViewsSection: FunctionComponent<Props> = ({ application, navigationCo
         featuresController={featuresController}
         setEditingSmartView={editSmartViewModalController.setView}
       />
-      <ModalOverlay isOpen={!!editSmartViewModalController.view} onDismiss={editSmartViewModalController.closeDialog}>
+      <ModalOverlay isOpen={!!editSmartViewModalController.view}>
         <EditSmartViewModal controller={editSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
-      <ModalOverlay
+      <ModalOverlay isOpen={addSmartViewModalController.isAddingSmartView}>
-        isOpen={addSmartViewModalController.isAddingSmartView}
-        onDismiss={addSmartViewModalController.closeModal}
-      >
         <AddSmartViewModal controller={addSmartViewModalController} platform={application.platform} />
       </ModalOverlay>
     </section>

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -3,7 +3,6 @@ import { FOCUSABLE_BUT_NOT_TABBABLE, TAG_FOLDERS_FEATURE_NAME } from '@/Constant
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import '@reach/tooltip/styles.css'
 import { IconType, SNTag } from '@standardnotes/snjs'
 import { computed } from 'mobx'
 import { observer } from 'mobx-react-lite'

packages/web/src/javascripts/Components/Tags/TagsSectionTitle.tsx

@@ -1,9 +1,9 @@
 import { TAG_FOLDERS_FEATURE_NAME, TAG_FOLDERS_FEATURE_TOOLTIP } from '@/Constants/Constants'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { FeaturesController } from '@/Controllers/FeaturesController'
-import { Tooltip } from '@reach/tooltip'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback } from 'react'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   features: FeaturesController
@@ -38,11 +38,11 @@ const TagsSectionTitle: FunctionComponent<Props> = ({ features, hasMigration, on
     <>
       <div className="title text-base md:text-sm">
         <span className="font-bold">Tags</span>
-        <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
+        <StyledTooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
           <label className="ml-1 cursor-pointer font-bold text-passive-2" onClick={showPremiumAlert}>
             Folders
           </label>
-        </Tooltip>
+        </StyledTooltip>
       </div>
     </>
   )

packages/web/src/javascripts/index.ts

@@ -1,7 +1,6 @@
 //= require_tree ./app
 
 // css
-import '@reach/dialog/styles.css'
 import '../stylesheets/index.css.scss'
 
 // entry point

packages/web/src/stylesheets/_modals.scss

@@ -143,7 +143,6 @@
   }
 }
 
-[data-reach-dialog-overlay],
 [data-mobile-popover] {
   max-height: none;
   max-height: var(--ios-viewport-height, none);

packages/web/src/stylesheets/_reach-sub.scss

@@ -1,34 +0,0 @@
-[data-reach-dialog-overlay] {
-  z-index: var(--z-index-modal);
-  background: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: unset;
-}
-
-[data-reach-dialog-overlay]::before {
-  background-color: var(--sn-stylekit-passive-color-5);
-  content: '';
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  opacity: 0.75;
-}
-
-[data-reach-dialog-content] {
-  position: relative;
-}
-
-[data-reach-dialog-content] .sk-modal-content,
-[data-reach-dialog-content] .sn-component,
-[data-reach-dialog-content] .sk-panel {
-  height: 100%;
-}
-
-[data-reach-alert-dialog-content] {
-  width: auto;
-}

packages/web/src/stylesheets/index.css.scss

@@ -14,7 +14,6 @@ $blocks-editor-icons-path: '../javascripts/Components/SuperEditor/Lexical/Icons'
 @import 'menus';
 @import 'modals';
 @import 'stylekit-sub';
-@import 'reach-sub';
 @import 'sessions-modal';
 @import 'preferences';
 @import 'focused';

yarn.lock

@@ -22,6 +22,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ariakit/core@npm:0.1.1":
+  version: 0.1.1
+  resolution: "@ariakit/core@npm:0.1.1"
+  checksum: b4db09f0f0fd5787ad5b76dad33ea01cfc5ba4cbdbfd19fe790bd8663b92beb379fd9f0f5c1bfee8448564b15250c5e1fa571e4fa515b60178faa29e5db5930c
+  languageName: node
+  linkType: hard
+
+"@ariakit/react-core@npm:0.1.2":
+  version: 0.1.2
+  resolution: "@ariakit/react-core@npm:0.1.2"
+  dependencies:
+    "@ariakit/core": 0.1.1
+    use-sync-external-store: ^1.2.0
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: c42738d48ed4cfc1b6afb6cdcc9399970e2f90d7ff5d1d3fab99e9c7383e10ecffd11d0d6faeeb4dcada13bf4eb9268543930675a572fcca58aee88dfb695c7a
+  languageName: node
+  linkType: hard
+
+"@ariakit/react@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "@ariakit/react@npm:0.1.2"
+  dependencies:
+    "@ariakit/core": 0.1.1
+    "@ariakit/react-core": 0.1.2
+    "@floating-ui/dom": ^1.0.0
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  checksum: 5f6687b59ae04c14e90d22d486fe0d9a97df5e2b31d88f248d084fa95ea3f16333231f9f92dff025f21c712975904b3f6e0f9747896f5920583d4bc43c96b11d
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/code-frame@npm:7.18.6"
@@ -1980,7 +2014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.8.4":
   version: 7.19.4
   resolution: "@babel/runtime@npm:7.19.4"
   dependencies:
@@ -1989,6 +2023,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.13.10":
+  version: 7.21.0
+  resolution: "@babel/runtime@npm:7.21.0"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.20.1":
   version: 7.20.1
   resolution: "@babel/runtime@npm:7.20.1"
@@ -2546,6 +2589,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "@floating-ui/core@npm:1.2.6"
+  checksum: e4aa96c435277f1720d4bc939e17a79b1e1eebd589c20b622d3c646a5273590ff889b8c6e126f7be61873cf8c4d7db7d418895986ea19b8b0d0530de32504c3a
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.2.6
+  resolution: "@floating-ui/dom@npm:1.2.6"
+  dependencies:
+    "@floating-ui/core": ^1.2.6
+  checksum: 2226c6c244b96ae75ab14cc35bb119c8d7b83a85e2ff04e9d9800cffdb17faf4a7cf82db741dd045242ced56e31c8a08e33c8c512c972309a934d83b1f410441
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -4178,33 +4237,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/alert-dialog@npm:^0.18.0":
+"@radix-ui/react-compose-refs@npm:1.0.0":
-  version: 0.18.0
+  version: 1.0.0
-  resolution: "@reach/alert-dialog@npm:0.18.0"
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
   dependencies:
-    "@reach/auto-id": 0.18.0
+    "@babel/runtime": ^7.13.10
-    "@reach/dialog": 0.18.0
-    "@reach/polymorphic": 0.18.0
-    "@reach/utils": 0.18.0
-    tiny-invariant: ^1.2.0
   peerDependencies:
-    react: ^16.8.0 || 17.x
+    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8.0 || 17.x
+  checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
-  checksum: 34cd77249cf9ff0ad750fd86a04e6114e184e5b74160e31e0e03482b51e12d0f7986298768322af4b0852b1ec143ab26ed8137dcf1232ca2ea0b329e058419f3
   languageName: node
   linkType: hard
 
-"@reach/alert@npm:^0.18.0":
+"@radix-ui/react-slot@npm:^1.0.1":
-  version: 0.18.0
+  version: 1.0.1
-  resolution: "@reach/alert@npm:0.18.0"
+  resolution: "@radix-ui/react-slot@npm:1.0.1"
   dependencies:
-    "@reach/polymorphic": 0.18.0
+    "@babel/runtime": ^7.13.10
-    "@reach/utils": 0.18.0
+    "@radix-ui/react-compose-refs": 1.0.0
-    "@reach/visually-hidden": 0.18.0
   peerDependencies:
-    react: ^16.8.0 || 17.x
+    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8.0 || 17.x
+  checksum: a20693f8ce532bd6cbff12ba543dfcf90d451f22923bd60b57dc9e639f6e53348915e182002b33444feb6ab753434e78e2a54085bf7092aadda4418f0423763f
-  checksum: 679a90427b1aec2dfd76a4bbcec7dee3f86a80f643f0a3a9060eb9debe93010e248883ac8cb4a7141fed58ad6e803695b78ecf06f13777fdbb67cfdad11f3676
   languageName: node
   linkType: hard
 
@@ -4247,22 +4299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/dialog@npm:0.18.0, @reach/dialog@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/dialog@npm:0.18.0"
-  dependencies:
-    "@reach/polymorphic": 0.18.0
-    "@reach/portal": 0.18.0
-    "@reach/utils": 0.18.0
-    react-focus-lock: 2.5.2
-    react-remove-scroll: 2.4.3
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: c87fe1a7bee9c1acb9b149baa0bdf2fe4c3618883393f3062bf9e5c3bebd398dd7673799e962d3f1b6859957c40f6a3bf344666a8c78f97112fd970e314dbed5
-  languageName: node
-  linkType: hard
-
 "@reach/disclosure@npm:^0.18.0":
   version: 0.18.0
   resolution: "@reach/disclosure@npm:0.18.0"
@@ -4365,23 +4401,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/tooltip@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/tooltip@npm:0.18.0"
-  dependencies:
-    "@reach/auto-id": 0.18.0
-    "@reach/polymorphic": 0.18.0
-    "@reach/portal": 0.18.0
-    "@reach/rect": 0.18.0
-    "@reach/utils": 0.18.0
-    "@reach/visually-hidden": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x
-    react-dom: ^16.8.0 || 17.x
-  checksum: 4080b15c1b5d313751bcb4a7494e83e36d280e4a9bd35df39c62d26b658a18ce1e25d1e2f68bb1bb018a48bffc607049f14d262c7576bfd25a608cfa9c6d4e28
-  languageName: node
-  linkType: hard
-
 "@reach/utils@npm:0.18.0":
   version: 0.18.0
   resolution: "@reach/utils@npm:0.18.0"
@@ -4392,18 +4411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@reach/visually-hidden@npm:0.18.0, @reach/visually-hidden@npm:^0.18.0":
-  version: 0.18.0
-  resolution: "@reach/visually-hidden@npm:0.18.0"
-  dependencies:
-    "@reach/polymorphic": 0.18.0
-  peerDependencies:
-    react: ^16.8.0 || 17.x || 18.x
-    react-dom: ^16.8.0 || 17.x || 18.x
-  checksum: 675ad41121d0ae52a55d3e75ad9e60a4ca7cb91defe756565bf7b8fb3d27553d76f851f9cd069455240ec955465d6e235a8f92b73859e091265607b0cb3358ae
-  languageName: node
-  linkType: hard
-
 "@react-native-async-storage/async-storage@npm:1.17.11":
   version: 1.17.11
   resolution: "@react-native-async-storage/async-storage@npm:1.17.11"
@@ -5677,6 +5684,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@standardnotes/web@workspace:packages/web"
   dependencies:
+    "@ariakit/react": ^0.1.2
     "@babel/core": "*"
     "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-transform-react-jsx": ^7.19.0
@@ -5685,14 +5693,10 @@ __metadata:
     "@lexical/headless": 0.9.2
     "@lexical/react": 0.9.2
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.10
-    "@reach/alert": ^0.18.0
+    "@radix-ui/react-slot": ^1.0.1
-    "@reach/alert-dialog": ^0.18.0
     "@reach/checkbox": ^0.18.0
-    "@reach/dialog": ^0.18.0
     "@reach/disclosure": ^0.18.0
     "@reach/listbox": ^0.18.0
-    "@reach/tooltip": ^0.18.0
-    "@reach/visually-hidden": ^0.18.0
     "@simplewebauthn/browser": ^7.1.0
     "@standardnotes/authenticator": ^2.3.9
     "@standardnotes/autobiography-theme": ^1.2.7
@@ -10771,13 +10775,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node-es@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "detect-node-es@npm:1.1.0"
-  checksum: e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
-  languageName: node
-  linkType: hard
-
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -12885,15 +12882,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-lock@npm:^0.9.1":
-  version: 0.9.2
-  resolution: "focus-lock@npm:0.9.2"
-  dependencies:
-    tslib: ^2.0.3
-  checksum: 7bb35e62c6308b3dd2f4559c9ffb126e2ef89db7b27602fa286c6f7e085f396bc9b34fb8ff0f1c2b409f479331e6a5344f6268f60ea71c300ca7dfd9c8827178
-  languageName: node
-  linkType: hard
-
 "follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.0":
   version: 1.15.2
   resolution: "follow-redirects@npm:1.15.2"
@@ -13232,13 +13220,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-nonce@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "get-nonce@npm:1.0.1"
-  checksum: e2614e43b4694c78277bb61b0f04583d45786881289285c73770b07ded246a98be7e1f78b940c80cbe6f2b07f55f0b724e6db6fd6f1bcbd1e8bdac16521074ed
-  languageName: node
-  linkType: hard
-
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -20472,7 +20453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:*, prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
+"prop-types@npm:*, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -20732,17 +20713,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-clientside-effect@npm:^1.2.5":
-  version: 1.2.6
-  resolution: "react-clientside-effect@npm:1.2.6"
-  dependencies:
-    "@babel/runtime": ^7.12.13
-  peerDependencies:
-    react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 7db6110027a51458b1a46109d2b63dd822825f483c71afef7c0c0a671f3b1aa155049dbd8651c9d536ffac83601f8823b7c3f8916b4f4ee5c3cb7647a85cce4e
-  languageName: node
-  linkType: hard
-
 "react-devtools-core@npm:^4.26.1":
   version: 4.27.2
   resolution: "react-devtools-core@npm:4.27.2"
@@ -20782,22 +20752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-focus-lock@npm:2.5.2":
-  version: 2.5.2
-  resolution: "react-focus-lock@npm:2.5.2"
-  dependencies:
-    "@babel/runtime": ^7.0.0
-    focus-lock: ^0.9.1
-    prop-types: ^15.6.2
-    react-clientside-effect: ^1.2.5
-    use-callback-ref: ^1.2.5
-    use-sidecar: ^1.0.5
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-  checksum: 520b12a4496be21b3228bbf938657f6c33f868e486a0cd355d8bec918129d2c1bf7aabecb20aecdb446a1fbdb61b16f680b5d15b998f544f1b5c0dc5c8914c40
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
@@ -21007,41 +20961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll-bar@npm:^2.1.0":
-  version: 2.3.4
-  resolution: "react-remove-scroll-bar@npm:2.3.4"
-  dependencies:
-    react-style-singleton: ^2.2.1
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: b5ce5f2f98d65c97a3e975823ae4043a4ba2a3b63b5ba284b887e7853f051b5cd6afb74abde6d57b421931c52f2e1fdbb625dc858b1cb5a32c27c14ab85649d4
-  languageName: node
-  linkType: hard
-
-"react-remove-scroll@npm:2.4.3":
-  version: 2.4.3
-  resolution: "react-remove-scroll@npm:2.4.3"
-  dependencies:
-    react-remove-scroll-bar: ^2.1.0
-    react-style-singleton: ^2.1.0
-    tslib: ^1.0.0
-    use-callback-ref: ^1.2.3
-    use-sidecar: ^1.0.1
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0
-    react: ^16.8.0 || ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: c2f4277ee953b3905b8500c72b6f509f5138dc6eff157ff1160f7810cb6934ee148d13aef7f9fa3f4ed12372cc4564347ed6b16083ff1e4d241708bb1b8bf5a7
-  languageName: node
-  linkType: hard
-
 "react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -21054,23 +20973,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-style-singleton@npm:^2.1.0, react-style-singleton@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "react-style-singleton@npm:2.2.1"
-  dependencies:
-    get-nonce: ^1.0.0
-    invariant: ^2.2.4
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 7ee8ef3aab74c7ae1d70ff34a27643d11ba1a8d62d072c767827d9ff9a520905223e567002e0bf6c772929d8ea1c781a3ba0cc4a563e92b1e3dc2eaa817ecbe8
-  languageName: node
-  linkType: hard
-
 "react@link:../web/node_modules/react::locator=%40standardnotes%2Ftoast%40workspace%3Apackages%2Ftoast":
   version: 0.0.0-use.local
   resolution: "react@link:../web/node_modules/react::locator=%40standardnotes%2Ftoast%40workspace%3Apackages%2Ftoast"
@@ -23970,14 +23872,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.0.0, tslib@npm:^1.8.1":
+"tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0":
+"tslib@npm:^2.0.1, tslib@npm:^2.1.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
@@ -24458,37 +24360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-callback-ref@npm:^1.2.3, use-callback-ref@npm:^1.2.5":
-  version: 1.3.0
-  resolution: "use-callback-ref@npm:1.3.0"
-  dependencies:
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 7913df383a5a6fcb399212eedefaac2e0c6f843555202d4e3010bac3848afe38ecaa3d0d6500ad1d936fbeffd637e6c517e68edb024af5e6beca7f27f3ce7b21
-  languageName: node
-  linkType: hard
-
-"use-sidecar@npm:^1.0.1, use-sidecar@npm:^1.0.5":
-  version: 1.1.2
-  resolution: "use-sidecar@npm:1.1.2"
-  dependencies:
-    detect-node-es: ^1.1.0
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 925d1922f9853e516eaad526b6fed1be38008073067274f0ecc3f56b17bb8ab63480140dd7c271f94150027c996cea4efe83d3e3525e8f3eda22055f6a39220b
-  languageName: node
-  linkType: hard
-
 "use-sync-external-store@npm:^1.0.0, use-sync-external-store@npm:^1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"