@tinacms/app 0.0.0-ad9a889-20250218035304 → 0.0.0-b25c5f0-20250618074247

package/CHANGELOG.md

@@ -1,15 +1,89 @@
 # @tinacms/app
 
-## 0.0.0-ad9a889-20250218035304
+## 0.0.0-b25c5f0-20250618074247
+
+### Patch Changes
+
+- [#5741](https://github.com/tinacms/tinacms/pull/5741) [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287) Thanks [@wicksipedia](https://github.com/wicksipedia)! - CMS admin UI - Refactor Sidebar and Branch Button Components
+  Forms header - Adds breadcrumb navigation
+
+- [#5784](https://github.com/tinacms/tinacms/pull/5784) [`b25c5f0`](https://github.com/tinacms/tinacms/commit/b25c5f0b0e1d3f37870b780230b41dbc56bef1ab) Thanks [@JackDevAU](https://github.com/JackDevAU)! - - Fixed padding issues in FormLists
+  - Fixed Visual Editing's "Edit" button (Reference Fields)
+- Updated dependencies [[`2a3ed6c`](https://github.com/tinacms/tinacms/commit/2a3ed6c3ec3233fd90fd94f3dd3d0243aaad079a), [`bc47f93`](https://github.com/tinacms/tinacms/commit/bc47f938431c400714808613f633b05659a87be1), [`0e9de37`](https://github.com/tinacms/tinacms/commit/0e9de379dab2970206b9b60eb014808662f67287), [`468f0ee`](https://github.com/tinacms/tinacms/commit/468f0eefc0a15a9a9a23737d29ea9a5cb5c6aef6), [`b25c5f0`](https://github.com/tinacms/tinacms/commit/b25c5f0b0e1d3f37870b780230b41dbc56bef1ab), [`dbef36f`](https://github.com/tinacms/tinacms/commit/dbef36f594b949024d5525184b6a9e1b9085b759), [`3ba6d78`](https://github.com/tinacms/tinacms/commit/3ba6d78f35f817d55bfc3d12b750e54b7e0d11f2)]:
+  - tinacms@0.0.0-b25c5f0-20250618074247
+  - @tinacms/mdx@0.0.0-b25c5f0-20250618074247
+
+## 2.2.8
+
+### Patch Changes
+
+- Updated dependencies [[`5e36123`](https://github.com/tinacms/tinacms/commit/5e361239a372e21dda624d17b4ff274bab23ce90), [`856e07a`](https://github.com/tinacms/tinacms/commit/856e07a0b8d742ee78d5eba565623cf081a61534), [`4d9c8ab`](https://github.com/tinacms/tinacms/commit/4d9c8abf6badd1bcc833bda432ab22dace4925ae), [`7346dc9`](https://github.com/tinacms/tinacms/commit/7346dc996fd81ecb395b62f373976512e8224c21)]:
+  - tinacms@2.7.8
+  - @tinacms/mdx@1.6.3
+
+## 2.2.7
+
+### Patch Changes
+
+- [#5607](https://github.com/tinacms/tinacms/pull/5607) [`1965236`](https://github.com/tinacms/tinacms/commit/19652363784e48b065ec1924a9cd9611c8e79cae) Thanks [@jeffsee55](https://github.com/jeffsee55)! - Specify react and react-dom as peer deps
+
+- Updated dependencies [[`1965236`](https://github.com/tinacms/tinacms/commit/19652363784e48b065ec1924a9cd9611c8e79cae)]:
+  - tinacms@2.7.7
+
+## 2.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`65cee5d`](https://github.com/tinacms/tinacms/commit/65cee5d6ae16c7320a4a14f0d9a82dc5f9103e34)]:
+  - tinacms@2.7.6
+
+## 2.2.5
+
+### Patch Changes
+
+- [#5602](https://github.com/tinacms/tinacms/pull/5602) [`ab43169`](https://github.com/tinacms/tinacms/commit/ab43169af5a95f31fa27bb0236623a031883a1fd) Thanks [@wicksipedia](https://github.com/wicksipedia)! - fix naming of TinaCloud
+
+- [#5588](https://github.com/tinacms/tinacms/pull/5588) [`fd664d8`](https://github.com/tinacms/tinacms/commit/fd664d8f4e83941ed1b1f234668ab6341a6178f8) Thanks [@JackDevAU](https://github.com/JackDevAU)! - - Fix server-side branch queries by storing the active branch in a cookie and passing it via the x-branch header.
+  - Ensure GraphQL playground correctly updates when switching branches.
+- Updated dependencies [[`921f235`](https://github.com/tinacms/tinacms/commit/921f2356e4615d532d02eefa7103fdb70f83b97a), [`ab43169`](https://github.com/tinacms/tinacms/commit/ab43169af5a95f31fa27bb0236623a031883a1fd), [`b551232`](https://github.com/tinacms/tinacms/commit/b5512326ad0ad9855bc75e2073a3ab2a8ec4c064), [`ea204c9`](https://github.com/tinacms/tinacms/commit/ea204c9045451f3ebea04f503e6158d2016613e4), [`fd664d8`](https://github.com/tinacms/tinacms/commit/fd664d8f4e83941ed1b1f234668ab6341a6178f8)]:
+  - tinacms@2.7.5
+  - @tinacms/mdx@1.6.2
+
+## 2.2.3
+
+### Patch Changes
+
+- Updated dependencies [[`991db1f`](https://github.com/tinacms/tinacms/commit/991db1f10c1f9cf9211d7e82bd56658cdcce24c7)]:
+  - tinacms@2.7.3
+
+## 2.2.2
+
+### Patch Changes
+
+- Updated dependencies [[`619e601`](https://github.com/tinacms/tinacms/commit/619e6010d6f95d893e980952bef64f747808c956), [`602b4d0`](https://github.com/tinacms/tinacms/commit/602b4d07f94de4c10d5bb059a5edc49546a2031c)]:
+  - tinacms@2.7.2
+  - @tinacms/mdx@1.6.1
+
+## 2.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`74513b3`](https://github.com/tinacms/tinacms/commit/74513b357aa27165aa86f7b3218c697c663539e8), [`06c1716`](https://github.com/tinacms/tinacms/commit/06c17163b558a96275b0ef66c746b005a6f90d13)]:
+  - tinacms@2.7.1
+
+## 2.2.0
 
 ### Minor Changes
 
-- [#5503](https://github.com/tinacms/tinacms/pull/5503) [`3505170`](https://github.com/tinacms/tinacms/commit/35051705b14f1674e7e2bdfb9236b1273b2f953c) Thanks [@JackDevAU](https://github.com/JackDevAU)! - feat: add experimental user form select to the useTina hook
+- [#5503](https://github.com/tinacms/tinacms/pull/5503) [`99bb59f`](https://github.com/tinacms/tinacms/commit/99bb59ff7b9f3cf27a1382b91826eb81831ecb95) Thanks [@JackDevAU](https://github.com/JackDevAU)! - feat: add experimental user form select to the useTina hook
 
 ### Patch Changes
 
-- Updated dependencies [[`3505170`](https://github.com/tinacms/tinacms/commit/35051705b14f1674e7e2bdfb9236b1273b2f953c)]:
-  - tinacms@0.0.0-ad9a889-20250218035304
+- [#5486](https://github.com/tinacms/tinacms/pull/5486) [`d7c5ec1`](https://github.com/tinacms/tinacms/commit/d7c5ec1b174419dcc6ddba3cfb3684dd469da571) Thanks [@JackDevAU](https://github.com/JackDevAU)! - Update dependencies across packages
+
+- Updated dependencies [[`3974aa7`](https://github.com/tinacms/tinacms/commit/3974aa759192713140733b99ee0254a1a056e124), [`7541614`](https://github.com/tinacms/tinacms/commit/7541614527a02268ea453b23ce84637f978dcf2d), [`d7c5ec1`](https://github.com/tinacms/tinacms/commit/d7c5ec1b174419dcc6ddba3cfb3684dd469da571), [`99bb59f`](https://github.com/tinacms/tinacms/commit/99bb59ff7b9f3cf27a1382b91826eb81831ecb95)]:
+  - tinacms@2.7.0
+  - @tinacms/mdx@1.6.0
 
 ## 2.1.19
 
@@ -436,7 +510,7 @@
 
   fix: Use clean page-sizes on media manager (to make pagination more obvious)
 
-  Fix issue with uploading media in a folder with tina cloud
+  Fix issue with uploading media in a folder with TinaCloud
 
 - Updated dependencies [9c27087fb]
 - Updated dependencies [65d0a701f]
@@ -759,7 +833,7 @@
   > NOTE: Relative paths are fine to use here, but make sure it's relative to the `.tina/config` file
 
   ```ts
-  localContentPath: process.env.REMOTE_ROOT_PATH // eg. '../../my-content-repo'
+  localContentPath: process.env.REMOTE_ROOT_PATH; // eg. '../../my-content-repo'
   ```
 
   ### Production workflow
@@ -803,18 +877,18 @@
   EX:
 
   ```ts
-  import { defineConfig } from 'tinacms'
+  import { defineConfig } from "tinacms";
 
   export default defineConfig({
     admin: {
       auth: {
         onLogin: () => {
-          console.log('On Log in!')
+          console.log("On Log in!");
         },
       },
     },
     /// ...
-  })
+  });
   ```
 
 - 9d4943a82: Fix issue resolving alias fields when passing through the `useTina` hook
@@ -1037,13 +1111,13 @@
 
   ```ts
   // .tina/config.ts
-  import schema from './schema'
+  import schema from "./schema";
 
   export default defineConfig({
     schema: schema,
     //.. Everything from define config in `schema.ts`
     //.. Everything from `schema.config`
-  })
+  });
   ```
 
   2. Add Build config

package/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-ad9a889-20250218035304",
+  "version": "0.0.0-b25c5f0-20250618074247",
   "main": "src/main.tsx",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1 <20.0.0",
+    "react-dom": ">=18.3.1 <20.0.0"
   },
   "dependencies": {
     "@graphiql/toolkit": "0.8.4",
     "@headlessui/react": "2.1.8",
     "@heroicons/react": "^1.0.6",
-    "@monaco-editor/react": "4.4.5",
+    "@monaco-editor/react": "4.7.0-rc.0",
     "final-form": "4.20.10",
     "graphiql": "3.0.0-alpha.1",
     "graphql": "15.8.0",
     "monaco-editor": "0.31.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-router-dom": "6.3.0",
-    "typescript": "^5.6.3",
-    "zod": "^3.23.8",
-    "@tinacms/mdx": "1.5.4",
-    "tinacms": "0.0.0-ad9a889-20250218035304"
+    "typescript": "^5.7.3",
+    "zod": "^3.24.2",
+    "@tinacms/mdx": "0.0.0-b25c5f0-20250618074247",
+    "tinacms": "0.0.0-b25c5f0-20250618074247"
   }
 }

package/src/App.tsx

@@ -1,20 +1,20 @@
-import React, { Suspense } from 'react'
-import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
-import { Preview } from './preview'
-import Playground from './Playground'
+import React, { Suspense } from 'react';
+import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms';
+import { Preview } from './preview';
+import Playground from './Playground';
 
 // TODO: Resolve this to local file in tsconfig.json
 // @ts-expect-error
-import config from 'TINA_IMPORT'
+import config from 'TINA_IMPORT';
 // @ts-expect-error
-import schemaJson from 'SCHEMA_IMPORT'
+import schemaJson from 'SCHEMA_IMPORT';
 // @ts-expect-error
-import staticMedia from 'STATIC_MEDIA_IMPORT'
+import staticMedia from 'STATIC_MEDIA_IMPORT';
 
-const RawEditor = React.lazy(() => import('./fields/rich-text'))
+const RawEditor = React.lazy(() => import('./fields/rich-text'));
 
 const Editor = (props) => {
-  const [rawMode, setRawMode] = React.useState(false)
+  const [rawMode, setRawMode] = React.useState(false);
   return (
     <MdxFieldPluginExtendible.Component
       rawMode={rawMode}
@@ -26,32 +26,32 @@ const Editor = (props) => {
         </Suspense>
       }
     />
-  )
-}
+  );
+};
 
 const SetPreview = () => {
-  const cms = useCMS()
+  const cms = useCMS();
   React.useEffect(() => {
     // Override original 'rich-text' field with one that has raw mode support
     cms.fields.add({
       ...MdxFieldPluginExtendible,
       Component: Editor,
-    })
-    const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '')
-    cms.flags.set('tina-basepath', basePath)
+    });
+    const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '');
+    cms.flags.set('tina-basepath', basePath);
     cms.flags.set(
       'tina-preview',
       `${basePath ? `${basePath}/` : ''}${config.build.outputFolder.replace(
         /^\/|\/$/g,
         ''
       )}`
-    )
-  }, [])
-  return null
-}
+    );
+  }, []);
+  return null;
+};
 
 export const TinaAdminWrapper = () => {
-  const schema = { ...config?.schema, config }
+  const schema = { ...config?.schema, config };
   return (
     // @ts-ignore JSX element type 'TinaCMS' does not have any construct or call signatures.ts(2604)
     <TinaCMS
@@ -70,10 +70,10 @@ export const TinaAdminWrapper = () => {
         schemaJson={schemaJson}
       />
     </TinaCMS>
-  )
-}
+  );
+};
 
 function App() {
-  return <TinaAdminWrapper />
+  return <TinaAdminWrapper />;
 }
-export default App
+export default App;

package/src/Playground.tsx

@@ -1,28 +1,28 @@
-import { createGraphiQLFetcher } from '@graphiql/toolkit'
-import { GraphiQL } from 'graphiql'
-import { parse, print } from 'graphql'
-import React from 'react'
-import { useCMS } from 'tinacms'
-import { FolderIcon } from '@heroicons/react/outline'
-import { queries } from 'CLIENT_IMPORT'
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { FolderIcon } from '@heroicons/react/outline';
+import { queries } from 'CLIENT_IMPORT';
+import { GraphiQL } from 'graphiql';
+import { parse, print } from 'graphql';
+import React from 'react';
+import { useCMS } from 'tinacms';
 
-import 'graphiql/graphiql.min.css'
+import 'graphiql/graphiql.min.css';
 
 const Playground = () => {
-  const cms = useCMS()
-  const [query, setQuery] = React.useState('')
-  const [variables, setVariables] = React.useState('')
-  const [autoQueries, setAutoQueries] = React.useState()
+  const cms = useCMS();
+  const [query, setQuery] = React.useState('');
+  const [variables, setVariables] = React.useState('');
+  const [autoQueries, setAutoQueries] = React.useState();
   const [collectionInfo, setCollectionInfo] = React.useState<{
     collections: {
-      name: string
-      documents: { edges: { node: { _sys: { relativePath: string } } }[] }
-    }[]
-  }>()
+      name: string;
+      documents: { edges: { node: { _sys: { relativePath: string } } }[] };
+    }[];
+  }>();
   React.useEffect(() => {
     const run = async () => {
       if (queries) {
-        const q = queries({ request: async () => query })
+        const q = queries({ request: async () => query });
         setCollectionInfo(
           await cms.api.tina.request(
             `
@@ -45,52 +45,52 @@ const Playground = () => {
       `,
             { variables: {} }
           )
-        )
-        setAutoQueries(q)
+        );
+        setAutoQueries(q);
       } else {
-        setAutoQueries({})
+        setAutoQueries({});
       }
-    }
-    run()
-  }, [])
+    };
+    run();
+  }, []);
 
-  const ref = React.useRef()
+  const ref = React.useRef();
 
   const getToken = () => {
-    return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token
-  }
+    return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
+  };
 
   if (!autoQueries) {
-    return null
+    return null;
   }
 
   const Plugin = () => {
-    const noAutoQueries = Object.keys(autoQueries).length === 0
+    const noAutoQueries = Object.keys(autoQueries).length === 0;
     return (
       <div>
-        <div className="graphiql-doc-explorer-title">Queries</div>
-        <div className="graphiql-doc-explorer-content">
-          <div className="graphiql-markdown-description">
+        <div className='graphiql-doc-explorer-title'>Queries</div>
+        <div className='graphiql-doc-explorer-content'>
+          <div className='graphiql-markdown-description'>
             {noAutoQueries
               ? 'No auto-generated queries found, the Tina config is likely set to client.skip = true'
               : "Tina's auto-generated queries can be found here as well as any queries you may have defined yourself."}{' '}
-            <a href="https://tina.io/docs/data-fetching/custom-queries/">
+            <a href='https://tina.io/docs/data-fetching/custom-queries/'>
               Learn more here
             </a>
           </div>
-          <nav className="space-y-1" aria-label="Sidebar">
+          <nav className='space-y-1' aria-label='Sidebar'>
             <ul>
               {Object.entries(autoQueries).map(([key, value]) => {
                 const collection = collectionInfo?.collections.find(
                   ({ name }) => name === key
-                )
-                let variables = ''
-                let relativePath = ''
+                );
+                let variables = '';
+                let relativePath = '';
                 if (collection) {
                   relativePath =
                     collection?.documents?.edges[0]?.node?._sys.relativePath ||
-                    ''
-                  variables = JSON.stringify({ relativePath }, null, 2)
+                    '';
+                  variables = JSON.stringify({ relativePath }, null, 2);
                 }
                 return (
                   <li>
@@ -100,47 +100,47 @@ const Playground = () => {
                         false
                           ? 'bg-gray-100 text-gray-900'
                           : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
-                        'flex items-center rounded-md px-3 py-2 text-sm font-medium w-full text-left'
+                        'flex items-center rounded px-3 py-2 text-sm font-medium w-full text-left'
                       )}
                       onClick={async () => {
                         if (typeof value === 'function') {
-                          const v = await value({})
-                          const ast = parse(v.query)
-                          setVariables(variables)
-                          setQuery(print(ast))
+                          const v = await value({});
+                          const ast = parse(v.query);
+                          setVariables(variables);
+                          setQuery(print(ast));
                         }
                       }}
                     >
-                      <span className="truncate">
+                      <span className='truncate'>
                         {key}{' '}
                         {relativePath && (
-                          <span className="pl-2 text-sm text-gray-300">
+                          <span className='pl-2 text-sm text-gray-300'>
                             ({relativePath})
                           </span>
                         )}{' '}
                       </span>
                     </button>
                   </li>
-                )
+                );
               })}
             </ul>
           </nav>
         </div>
       </div>
-    )
-  }
+    );
+  };
   return (
     <div style={{ height: '100vh' }}>
       <GraphiQL
         fetcher={async (params, options) => {
           const fetcher = createGraphiQLFetcher({
-            url: __API_URL__,
+            url: cms.api.tina.contentApiUrl || __API_URL__,
             headers: { Authorization: `Bearer ${getToken()}` },
-          })
-          return fetcher(params, options)
+          });
+          return fetcher(params, options);
         }}
         query={query}
-        defaultEditorToolsVisibility="variables"
+        defaultEditorToolsVisibility='variables'
         isHeadersEditorEnabled={false}
         defaultTabs={[]}
         plugins={[
@@ -153,11 +153,11 @@ const Playground = () => {
         variables={variables}
       ></GraphiQL>
     </div>
-  )
-}
+  );
+};
 
-export default Playground
+export default Playground;
 
 function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ');
 }

package/src/dummy-client.ts

@@ -1 +1 @@
-export const queries = false
+export const queries = false;

package/src/fields/rich-text/index.tsx

@@ -1,6 +1,6 @@
 /**
 
 */
-import RawEditor from './monaco'
+import RawEditor from './monaco';
 
-export default RawEditor
+export default RawEditor;

package/src/fields/rich-text/monaco/error-message.tsx

@@ -1,47 +1,47 @@
-/**
-
-
-
-*/
-import React from 'react'
-import { XCircleIcon } from '@heroicons/react/solid'
 import {
   Popover,
   PopoverButton,
   PopoverPanel,
   Transition,
-} from '@headlessui/react'
-import { Fragment } from 'react'
+} from '@headlessui/react';
+import { XCircleIcon } from '@heroicons/react/solid';
+/**
+
+
+
+*/
+import React from 'react';
+import { Fragment } from 'react';
 // import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
-export type EmptyTextElement = { type: 'text'; text: '' }
+export type EmptyTextElement = { type: 'text'; text: '' };
 export type PositionItem = {
-  line?: number | null
-  column?: number | null
-  offset?: number | null
-  _index?: number | null
-  _bufferIndex?: number | null
-}
+  line?: number | null;
+  column?: number | null;
+  offset?: number | null;
+  _index?: number | null;
+  _bufferIndex?: number | null;
+};
 export type Position = {
-  start: PositionItem
-  end: PositionItem
-}
+  start: PositionItem;
+  end: PositionItem;
+};
 export type InvalidMarkdownElement = {
-  type: 'invalid_markdown'
-  value: string
-  message: string
-  position?: Position
-  children: [EmptyTextElement]
-}
+  type: 'invalid_markdown';
+  value: string;
+  message: string;
+  position?: Position;
+  children: [EmptyTextElement];
+};
 
 type ErrorType = {
-  message: string
+  message: string;
   position?: {
-    startColumn: number
-    endColumn: number
-    startLineNumber: number
-    endLineNumber: number
-  }
-}
+    startColumn: number;
+    endColumn: number;
+    startLineNumber: number;
+    endLineNumber: number;
+  };
+};
 export const buildError = (element: InvalidMarkdownElement): ErrorType => {
   return {
     message: element.message,
@@ -51,28 +51,28 @@ export const buildError = (element: InvalidMarkdownElement): ErrorType => {
       startLineNumber: element.position.start.line,
       endLineNumber: element.position.end.line,
     },
-  }
-}
+  };
+};
 export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
   if (!element) {
-    return ''
+    return '';
   }
-  const errorMessage = buildError(element)
+  const errorMessage = buildError(element);
   const message = errorMessage
     ? `${errorMessage.message}${
         errorMessage.position
           ? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
           : ''
       }`
-    : null
-  return message
-}
+    : null;
+  return message;
+};
 
 export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
-  const message = buildErrorMessage(error)
+  const message = buildErrorMessage(error);
 
   return (
-    <Popover className="relative">
+    <Popover className='relative'>
       {() => (
         <>
           <PopoverButton
@@ -80,29 +80,29 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
               error ? '' : ' opacity-0 hidden '
             }`}
           >
-            <span className="sr-only">Errors</span>
-            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+            <span className='sr-only'>Errors</span>
+            <XCircleIcon className='h-5 w-5 text-red-400' aria-hidden='true' />
           </PopoverButton>
           <Transition
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
+            enter='transition ease-out duration-200'
+            enterFrom='opacity-0 translate-y-1'
+            enterTo='opacity-100 translate-y-0'
+            leave='transition ease-in duration-150'
+            leaveFrom='opacity-100 translate-y-0'
+            leaveTo='opacity-0 translate-y-1'
           >
-            <PopoverPanel className="absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0">
-              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                <div className="rounded-md bg-red-50 p-4 overflow-scroll">
-                  <div className="flex">
-                    <div className="flex-shrink-0">
+            <PopoverPanel className='absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0'>
+              <div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
+                <div className='rounded bg-red-50 p-4 overflow-scroll'>
+                  <div className='flex'>
+                    <div className='flex-shrink-0'>
                       <XCircleIcon
-                        className="h-5 w-5 text-red-400"
-                        aria-hidden="true"
+                        className='h-5 w-5 text-red-400'
+                        aria-hidden='true'
                       />
                     </div>
-                    <div className="ml-3">
-                      <h3 className="text-sm font-medium text-red-800 whitespace-pre-wrap">
+                    <div className='ml-3'>
+                      <h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
                         {message}
                       </h3>
                     </div>
@@ -114,5 +114,5 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
         </>
       )}
     </Popover>
-  )
+  );
 }