@tinacms/app 0.0.0-71744f0-20241229224727 → 0.0.0-71fbfa7-20250315003438

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,76 @@
1
1
  # @tinacms/app
2
2
 
3
- ## 0.0.0-71744f0-20241229224727
3
+ ## 0.0.0-71fbfa7-20250315003438
4
4
 
5
5
  ### Patch Changes
6
6
 
7
- - Updated dependencies [[`82b0039`](https://github.com/tinacms/tinacms/commit/82b00393da8bbcc2cf357fbbb546904f07e8d89c)]:
8
- - @tinacms/mdx@0.0.0-71744f0-20241229224727
9
- - tinacms@0.0.0-71744f0-20241229224727
7
+ - Updated dependencies [[`7429a46`](https://github.com/tinacms/tinacms/commit/7429a4601e24eb517d6a55564840030b88a1a947)]:
8
+ - tinacms@0.0.0-71fbfa7-20250315003438
9
+
10
+ ## 2.2.2
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies [[`619e601`](https://github.com/tinacms/tinacms/commit/619e6010d6f95d893e980952bef64f747808c956), [`602b4d0`](https://github.com/tinacms/tinacms/commit/602b4d07f94de4c10d5bb059a5edc49546a2031c)]:
15
+ - tinacms@2.7.2
16
+ - @tinacms/mdx@1.6.1
17
+
18
+ ## 2.2.1
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies [[`74513b3`](https://github.com/tinacms/tinacms/commit/74513b357aa27165aa86f7b3218c697c663539e8), [`06c1716`](https://github.com/tinacms/tinacms/commit/06c17163b558a96275b0ef66c746b005a6f90d13)]:
23
+ - tinacms@2.7.1
24
+
25
+ ## 2.2.0
26
+
27
+ ### Minor Changes
28
+
29
+ - [#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
30
+
31
+ ### Patch Changes
32
+
33
+ - [#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
34
+
35
+ - 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)]:
36
+ - tinacms@2.7.0
37
+ - @tinacms/mdx@1.6.0
38
+
39
+ ## 2.1.19
40
+
41
+ ### Patch Changes
42
+
43
+ - Updated dependencies []:
44
+ - tinacms@2.6.4
45
+
46
+ ## 2.1.18
47
+
48
+ ### Patch Changes
49
+
50
+ - Updated dependencies [[`05ba069`](https://github.com/tinacms/tinacms/commit/05ba0692a7e990fbb671177829562869d517e7c1), [`42daaf7`](https://github.com/tinacms/tinacms/commit/42daaf7af125da265d2c5998168e9c7345dc0a59), [`bc986dd`](https://github.com/tinacms/tinacms/commit/bc986dd48f9a7da264281b55926ec51ce1068bb7), [`3af2354`](https://github.com/tinacms/tinacms/commit/3af23542b984c10e138d0cf10a165d50b99bb0e9)]:
51
+ - tinacms@2.6.3
52
+
53
+ ## 2.1.17
54
+
55
+ ### Patch Changes
56
+
57
+ - Updated dependencies []:
58
+ - tinacms@2.6.2
59
+
60
+ ## 2.1.16
61
+
62
+ ### Patch Changes
63
+
64
+ - Updated dependencies [[`61c45f4`](https://github.com/tinacms/tinacms/commit/61c45f49a2abe82336b661dedbbe2a15d0f3da05)]:
65
+ - tinacms@2.6.1
66
+
67
+ ## 2.1.15
68
+
69
+ ### Patch Changes
70
+
71
+ - Updated dependencies [[`9931d5a`](https://github.com/tinacms/tinacms/commit/9931d5a0d7e5e9e5165170047cf5653041bddd7a), [`4aadf3e`](https://github.com/tinacms/tinacms/commit/4aadf3ee0b5e7ba6614baee9507a3b51abc92053), [`92b683b`](https://github.com/tinacms/tinacms/commit/92b683bd3d73b47271eee5b8ff648ed4dcde51e3), [`82b0039`](https://github.com/tinacms/tinacms/commit/82b00393da8bbcc2cf357fbbb546904f07e8d89c), [`877699d`](https://github.com/tinacms/tinacms/commit/877699d08b3e2c2470742a3acf25d02a95e440b3)]:
72
+ - tinacms@2.6.0
73
+ - @tinacms/mdx@1.5.4
10
74
 
11
75
  ## 2.1.14
12
76
 
@@ -720,7 +784,7 @@
720
784
  > NOTE: Relative paths are fine to use here, but make sure it's relative to the `.tina/config` file
721
785
 
722
786
  ```ts
723
- localContentPath: process.env.REMOTE_ROOT_PATH // eg. '../../my-content-repo'
787
+ localContentPath: process.env.REMOTE_ROOT_PATH; // eg. '../../my-content-repo'
724
788
  ```
725
789
 
726
790
  ### Production workflow
@@ -764,18 +828,18 @@
764
828
  EX:
765
829
 
766
830
  ```ts
767
- import { defineConfig } from 'tinacms'
831
+ import { defineConfig } from "tinacms";
768
832
 
769
833
  export default defineConfig({
770
834
  admin: {
771
835
  auth: {
772
836
  onLogin: () => {
773
- console.log('On Log in!')
837
+ console.log("On Log in!");
774
838
  },
775
839
  },
776
840
  },
777
841
  /// ...
778
- })
842
+ });
779
843
  ```
780
844
 
781
845
  - 9d4943a82: Fix issue resolving alias fields when passing through the `useTina` hook
@@ -998,13 +1062,13 @@
998
1062
 
999
1063
  ```ts
1000
1064
  // .tina/config.ts
1001
- import schema from './schema'
1065
+ import schema from "./schema";
1002
1066
 
1003
1067
  export default defineConfig({
1004
1068
  schema: schema,
1005
1069
  //.. Everything from define config in `schema.ts`
1006
1070
  //.. Everything from `schema.config`
1007
- })
1071
+ });
1008
1072
  ```
1009
1073
 
1010
1074
  2. Add Build config
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@tinacms/app",
3
- "version": "0.0.0-71744f0-20241229224727",
3
+ "version": "0.0.0-71fbfa7-20250315003438",
4
4
  "main": "src/main.tsx",
5
5
  "license": "Apache-2.0",
6
6
  "devDependencies": {
7
- "@types/react": "^18.3.12",
8
- "@types/react-dom": "^18.3.1",
9
- "typescript": "^5.6.3"
7
+ "@types/react": "^18.3.18",
8
+ "@types/react-dom": "^18.3.5",
9
+ "typescript": "^5.7.3"
10
10
  },
11
11
  "dependencies": {
12
12
  "@graphiql/toolkit": "0.8.4",
@@ -20,9 +20,9 @@
20
20
  "react": "^18.3.1",
21
21
  "react-dom": "^18.3.1",
22
22
  "react-router-dom": "6.3.0",
23
- "typescript": "^5.6.3",
24
- "zod": "^3.23.8",
25
- "@tinacms/mdx": "0.0.0-71744f0-20241229224727",
26
- "tinacms": "0.0.0-71744f0-20241229224727"
23
+ "typescript": "^5.7.3",
24
+ "zod": "^3.24.2",
25
+ "@tinacms/mdx": "1.6.1",
26
+ "tinacms": "0.0.0-71fbfa7-20250315003438"
27
27
  }
28
28
  }
package/src/App.tsx CHANGED
@@ -1,20 +1,20 @@
1
- import React, { Suspense } from 'react'
2
- import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
3
- import { Preview } from './preview'
4
- import Playground from './Playground'
1
+ import React, { Suspense } from 'react';
2
+ import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms';
3
+ import { Preview } from './preview';
4
+ import Playground from './Playground';
5
5
 
6
6
  // TODO: Resolve this to local file in tsconfig.json
7
7
  // @ts-expect-error
8
- import config from 'TINA_IMPORT'
8
+ import config from 'TINA_IMPORT';
9
9
  // @ts-expect-error
10
- import schemaJson from 'SCHEMA_IMPORT'
10
+ import schemaJson from 'SCHEMA_IMPORT';
11
11
  // @ts-expect-error
12
- import staticMedia from 'STATIC_MEDIA_IMPORT'
12
+ import staticMedia from 'STATIC_MEDIA_IMPORT';
13
13
 
14
- const RawEditor = React.lazy(() => import('./fields/rich-text'))
14
+ const RawEditor = React.lazy(() => import('./fields/rich-text'));
15
15
 
16
16
  const Editor = (props) => {
17
- const [rawMode, setRawMode] = React.useState(false)
17
+ const [rawMode, setRawMode] = React.useState(false);
18
18
  return (
19
19
  <MdxFieldPluginExtendible.Component
20
20
  rawMode={rawMode}
@@ -26,32 +26,32 @@ const Editor = (props) => {
26
26
  </Suspense>
27
27
  }
28
28
  />
29
- )
30
- }
29
+ );
30
+ };
31
31
 
32
32
  const SetPreview = () => {
33
- const cms = useCMS()
33
+ const cms = useCMS();
34
34
  React.useEffect(() => {
35
35
  // Override original 'rich-text' field with one that has raw mode support
36
36
  cms.fields.add({
37
37
  ...MdxFieldPluginExtendible,
38
38
  Component: Editor,
39
- })
40
- const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '')
41
- cms.flags.set('tina-basepath', basePath)
39
+ });
40
+ const basePath = __BASE_PATH__.replace(/^\/|\/$/g, '');
41
+ cms.flags.set('tina-basepath', basePath);
42
42
  cms.flags.set(
43
43
  'tina-preview',
44
44
  `${basePath ? `${basePath}/` : ''}${config.build.outputFolder.replace(
45
45
  /^\/|\/$/g,
46
46
  ''
47
47
  )}`
48
- )
49
- }, [])
50
- return null
51
- }
48
+ );
49
+ }, []);
50
+ return null;
51
+ };
52
52
 
53
53
  export const TinaAdminWrapper = () => {
54
- const schema = { ...config?.schema, config }
54
+ const schema = { ...config?.schema, config };
55
55
  return (
56
56
  // @ts-ignore JSX element type 'TinaCMS' does not have any construct or call signatures.ts(2604)
57
57
  <TinaCMS
@@ -70,10 +70,10 @@ export const TinaAdminWrapper = () => {
70
70
  schemaJson={schemaJson}
71
71
  />
72
72
  </TinaCMS>
73
- )
74
- }
73
+ );
74
+ };
75
75
 
76
76
  function App() {
77
- return <TinaAdminWrapper />
77
+ return <TinaAdminWrapper />;
78
78
  }
79
- export default App
79
+ export default App;
@@ -1,28 +1,28 @@
1
- import { createGraphiQLFetcher } from '@graphiql/toolkit'
2
- import { GraphiQL } from 'graphiql'
3
- import { parse, print } from 'graphql'
4
- import React from 'react'
5
- import { useCMS } from 'tinacms'
6
- import { FolderIcon } from '@heroicons/react/outline'
7
- import { queries } from 'CLIENT_IMPORT'
1
+ import { createGraphiQLFetcher } from '@graphiql/toolkit';
2
+ import { GraphiQL } from 'graphiql';
3
+ import { parse, print } from 'graphql';
4
+ import React from 'react';
5
+ import { useCMS } from 'tinacms';
6
+ import { FolderIcon } from '@heroicons/react/outline';
7
+ import { queries } from 'CLIENT_IMPORT';
8
8
 
9
- import 'graphiql/graphiql.min.css'
9
+ import 'graphiql/graphiql.min.css';
10
10
 
11
11
  const Playground = () => {
12
- const cms = useCMS()
13
- const [query, setQuery] = React.useState('')
14
- const [variables, setVariables] = React.useState('')
15
- const [autoQueries, setAutoQueries] = React.useState()
12
+ const cms = useCMS();
13
+ const [query, setQuery] = React.useState('');
14
+ const [variables, setVariables] = React.useState('');
15
+ const [autoQueries, setAutoQueries] = React.useState();
16
16
  const [collectionInfo, setCollectionInfo] = React.useState<{
17
17
  collections: {
18
- name: string
19
- documents: { edges: { node: { _sys: { relativePath: string } } }[] }
20
- }[]
21
- }>()
18
+ name: string;
19
+ documents: { edges: { node: { _sys: { relativePath: string } } }[] };
20
+ }[];
21
+ }>();
22
22
  React.useEffect(() => {
23
23
  const run = async () => {
24
24
  if (queries) {
25
- const q = queries({ request: async () => query })
25
+ const q = queries({ request: async () => query });
26
26
  setCollectionInfo(
27
27
  await cms.api.tina.request(
28
28
  `
@@ -45,52 +45,52 @@ const Playground = () => {
45
45
  `,
46
46
  { variables: {} }
47
47
  )
48
- )
49
- setAutoQueries(q)
48
+ );
49
+ setAutoQueries(q);
50
50
  } else {
51
- setAutoQueries({})
51
+ setAutoQueries({});
52
52
  }
53
- }
54
- run()
55
- }, [])
53
+ };
54
+ run();
55
+ }, []);
56
56
 
57
- const ref = React.useRef()
57
+ const ref = React.useRef();
58
58
 
59
59
  const getToken = () => {
60
- return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token
61
- }
60
+ return JSON.parse(localStorage.getItem('tinacms-auth') || '{}')?.id_token;
61
+ };
62
62
 
63
63
  if (!autoQueries) {
64
- return null
64
+ return null;
65
65
  }
66
66
 
67
67
  const Plugin = () => {
68
- const noAutoQueries = Object.keys(autoQueries).length === 0
68
+ const noAutoQueries = Object.keys(autoQueries).length === 0;
69
69
  return (
70
70
  <div>
71
- <div className="graphiql-doc-explorer-title">Queries</div>
72
- <div className="graphiql-doc-explorer-content">
73
- <div className="graphiql-markdown-description">
71
+ <div className='graphiql-doc-explorer-title'>Queries</div>
72
+ <div className='graphiql-doc-explorer-content'>
73
+ <div className='graphiql-markdown-description'>
74
74
  {noAutoQueries
75
75
  ? 'No auto-generated queries found, the Tina config is likely set to client.skip = true'
76
76
  : "Tina's auto-generated queries can be found here as well as any queries you may have defined yourself."}{' '}
77
- <a href="https://tina.io/docs/data-fetching/custom-queries/">
77
+ <a href='https://tina.io/docs/data-fetching/custom-queries/'>
78
78
  Learn more here
79
79
  </a>
80
80
  </div>
81
- <nav className="space-y-1" aria-label="Sidebar">
81
+ <nav className='space-y-1' aria-label='Sidebar'>
82
82
  <ul>
83
83
  {Object.entries(autoQueries).map(([key, value]) => {
84
84
  const collection = collectionInfo?.collections.find(
85
85
  ({ name }) => name === key
86
- )
87
- let variables = ''
88
- let relativePath = ''
86
+ );
87
+ let variables = '';
88
+ let relativePath = '';
89
89
  if (collection) {
90
90
  relativePath =
91
91
  collection?.documents?.edges[0]?.node?._sys.relativePath ||
92
- ''
93
- variables = JSON.stringify({ relativePath }, null, 2)
92
+ '';
93
+ variables = JSON.stringify({ relativePath }, null, 2);
94
94
  }
95
95
  return (
96
96
  <li>
@@ -104,31 +104,31 @@ const Playground = () => {
104
104
  )}
105
105
  onClick={async () => {
106
106
  if (typeof value === 'function') {
107
- const v = await value({})
108
- const ast = parse(v.query)
109
- setVariables(variables)
110
- setQuery(print(ast))
107
+ const v = await value({});
108
+ const ast = parse(v.query);
109
+ setVariables(variables);
110
+ setQuery(print(ast));
111
111
  }
112
112
  }}
113
113
  >
114
- <span className="truncate">
114
+ <span className='truncate'>
115
115
  {key}{' '}
116
116
  {relativePath && (
117
- <span className="pl-2 text-sm text-gray-300">
117
+ <span className='pl-2 text-sm text-gray-300'>
118
118
  ({relativePath})
119
119
  </span>
120
120
  )}{' '}
121
121
  </span>
122
122
  </button>
123
123
  </li>
124
- )
124
+ );
125
125
  })}
126
126
  </ul>
127
127
  </nav>
128
128
  </div>
129
129
  </div>
130
- )
131
- }
130
+ );
131
+ };
132
132
  return (
133
133
  <div style={{ height: '100vh' }}>
134
134
  <GraphiQL
@@ -136,11 +136,11 @@ const Playground = () => {
136
136
  const fetcher = createGraphiQLFetcher({
137
137
  url: __API_URL__,
138
138
  headers: { Authorization: `Bearer ${getToken()}` },
139
- })
140
- return fetcher(params, options)
139
+ });
140
+ return fetcher(params, options);
141
141
  }}
142
142
  query={query}
143
- defaultEditorToolsVisibility="variables"
143
+ defaultEditorToolsVisibility='variables'
144
144
  isHeadersEditorEnabled={false}
145
145
  defaultTabs={[]}
146
146
  plugins={[
@@ -153,11 +153,11 @@ const Playground = () => {
153
153
  variables={variables}
154
154
  ></GraphiQL>
155
155
  </div>
156
- )
157
- }
156
+ );
157
+ };
158
158
 
159
- export default Playground
159
+ export default Playground;
160
160
 
161
161
  function classNames(...classes: string[]) {
162
- return classes.filter(Boolean).join(' ')
162
+ return classes.filter(Boolean).join(' ');
163
163
  }
@@ -1 +1 @@
1
- export const queries = false
1
+ export const queries = false;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
 
3
3
  */
4
- import RawEditor from './monaco'
4
+ import RawEditor from './monaco';
5
5
 
6
- export default RawEditor
6
+ export default RawEditor;
@@ -3,45 +3,45 @@
3
3
 
4
4
 
5
5
  */
6
- import React from 'react'
7
- import { XCircleIcon } from '@heroicons/react/solid'
6
+ import React from 'react';
7
+ import { XCircleIcon } from '@heroicons/react/solid';
8
8
  import {
9
9
  Popover,
10
10
  PopoverButton,
11
11
  PopoverPanel,
12
12
  Transition,
13
- } from '@headlessui/react'
14
- import { Fragment } from 'react'
13
+ } from '@headlessui/react';
14
+ import { Fragment } from 'react';
15
15
  // import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
16
- export type EmptyTextElement = { type: 'text'; text: '' }
16
+ export type EmptyTextElement = { type: 'text'; text: '' };
17
17
  export type PositionItem = {
18
- line?: number | null
19
- column?: number | null
20
- offset?: number | null
21
- _index?: number | null
22
- _bufferIndex?: number | null
23
- }
18
+ line?: number | null;
19
+ column?: number | null;
20
+ offset?: number | null;
21
+ _index?: number | null;
22
+ _bufferIndex?: number | null;
23
+ };
24
24
  export type Position = {
25
- start: PositionItem
26
- end: PositionItem
27
- }
25
+ start: PositionItem;
26
+ end: PositionItem;
27
+ };
28
28
  export type InvalidMarkdownElement = {
29
- type: 'invalid_markdown'
30
- value: string
31
- message: string
32
- position?: Position
33
- children: [EmptyTextElement]
34
- }
29
+ type: 'invalid_markdown';
30
+ value: string;
31
+ message: string;
32
+ position?: Position;
33
+ children: [EmptyTextElement];
34
+ };
35
35
 
36
36
  type ErrorType = {
37
- message: string
37
+ message: string;
38
38
  position?: {
39
- startColumn: number
40
- endColumn: number
41
- startLineNumber: number
42
- endLineNumber: number
43
- }
44
- }
39
+ startColumn: number;
40
+ endColumn: number;
41
+ startLineNumber: number;
42
+ endLineNumber: number;
43
+ };
44
+ };
45
45
  export const buildError = (element: InvalidMarkdownElement): ErrorType => {
46
46
  return {
47
47
  message: element.message,
@@ -51,28 +51,28 @@ export const buildError = (element: InvalidMarkdownElement): ErrorType => {
51
51
  startLineNumber: element.position.start.line,
52
52
  endLineNumber: element.position.end.line,
53
53
  },
54
- }
55
- }
54
+ };
55
+ };
56
56
  export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
57
57
  if (!element) {
58
- return ''
58
+ return '';
59
59
  }
60
- const errorMessage = buildError(element)
60
+ const errorMessage = buildError(element);
61
61
  const message = errorMessage
62
62
  ? `${errorMessage.message}${
63
63
  errorMessage.position
64
64
  ? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
65
65
  : ''
66
66
  }`
67
- : null
68
- return message
69
- }
67
+ : null;
68
+ return message;
69
+ };
70
70
 
71
71
  export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
72
- const message = buildErrorMessage(error)
72
+ const message = buildErrorMessage(error);
73
73
 
74
74
  return (
75
- <Popover className="relative">
75
+ <Popover className='relative'>
76
76
  {() => (
77
77
  <>
78
78
  <PopoverButton
@@ -80,29 +80,29 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
80
80
  error ? '' : ' opacity-0 hidden '
81
81
  }`}
82
82
  >
83
- <span className="sr-only">Errors</span>
84
- <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
83
+ <span className='sr-only'>Errors</span>
84
+ <XCircleIcon className='h-5 w-5 text-red-400' aria-hidden='true' />
85
85
  </PopoverButton>
86
86
  <Transition
87
- enter="transition ease-out duration-200"
88
- enterFrom="opacity-0 translate-y-1"
89
- enterTo="opacity-100 translate-y-0"
90
- leave="transition ease-in duration-150"
91
- leaveFrom="opacity-100 translate-y-0"
92
- leaveTo="opacity-0 translate-y-1"
87
+ enter='transition ease-out duration-200'
88
+ enterFrom='opacity-0 translate-y-1'
89
+ enterTo='opacity-100 translate-y-0'
90
+ leave='transition ease-in duration-150'
91
+ leaveFrom='opacity-100 translate-y-0'
92
+ leaveTo='opacity-0 translate-y-1'
93
93
  >
94
- <PopoverPanel className="absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0">
95
- <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
96
- <div className="rounded-md bg-red-50 p-4 overflow-scroll">
97
- <div className="flex">
98
- <div className="flex-shrink-0">
94
+ <PopoverPanel className='absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0'>
95
+ <div className='overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5'>
96
+ <div className='rounded-md bg-red-50 p-4 overflow-scroll'>
97
+ <div className='flex'>
98
+ <div className='flex-shrink-0'>
99
99
  <XCircleIcon
100
- className="h-5 w-5 text-red-400"
101
- aria-hidden="true"
100
+ className='h-5 w-5 text-red-400'
101
+ aria-hidden='true'
102
102
  />
103
103
  </div>
104
- <div className="ml-3">
105
- <h3 className="text-sm font-medium text-red-800 whitespace-pre-wrap">
104
+ <div className='ml-3'>
105
+ <h3 className='text-sm font-medium text-red-800 whitespace-pre-wrap'>
106
106
  {message}
107
107
  </h3>
108
108
  </div>
@@ -114,5 +114,5 @@ export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
114
114
  </>
115
115
  )}
116
116
  </Popover>
117
- )
117
+ );
118
118
  }