@public-ui/sample-react 2.0.0-rc.9 → 2.0.0

package/src/components/table/test-data.ts

@@ -63,4 +63,344 @@ export const DATA: Data[] = [
 		order: 14,
 		date: new Date('1995-01-25T12:31:27.983Z'),
 	},
+	{
+		order: 15,
+		date: new Date('1995-04-15T02:00:39.048Z'),
+	},
+	{
+		order: 16,
+		date: new Date('1994-03-15T19:13:04.564Z'),
+	},
+	{
+		order: 17,
+		date: new Date('1999-03-02T16:53:04.418Z'),
+	},
+	{
+		order: 18,
+		date: new Date('1982-08-23T18:37:38.014Z'),
+	},
+	{
+		order: 19,
+		date: new Date('1995-06-19T12:39:56.321Z'),
+	},
+	{
+		order: 20,
+		date: new Date('1994-09-23T15:03:35.746Z'),
+	},
+	{
+		order: 21,
+		date: new Date('1990-04-15T23:38:02.147Z'),
+	},
+	{
+		order: 22,
+		date: new Date('1983-08-01T10:36:44.006Z'),
+	},
+	{
+		order: 23,
+		date: new Date('1986-06-28T21:27:04.588Z'),
+	},
+	{
+		order: 24,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 25,
+		date: new Date('1998-07-14T15:52:29.010Z'),
+	},
+	{
+		order: 26,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 27,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 28,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 29,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 30,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 31,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 32,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 33,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 34,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 35,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 36,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 37,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 38,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 39,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 40,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 41,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 42,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 43,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 44,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 45,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 46,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 47,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 48,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 49,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 50,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 51,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 52,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 53,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 54,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 55,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 56,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 57,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 58,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 59,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 60,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 61,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 62,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 63,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 64,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 65,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 66,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 67,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 68,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 69,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 70,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 71,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 72,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 73,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 74,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 75,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 76,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 77,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 78,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 79,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 80,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 81,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 82,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 83,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 84,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 85,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 86,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 87,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 88,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 89,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 90,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 91,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 92,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 93,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 94,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 95,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 96,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 97,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 98,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 99,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
 ];

package/src/components/table/with-pagination.tsx

@@ -2,17 +2,18 @@ import React, { FC } from 'react';
 
 import { KolTable } from '@public-ui/react';
 import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
-import { DATA } from './test-data';
+import { Data, DATA } from './test-data';
+import { DATE_FORMATTER } from './formatter';
 
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
 			{ label: 'Order', key: 'order' },
-			{ label: 'Date', key: 'date' },
+			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
 		],
 	],
 };
-const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _max: 1 };
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const TableWithPagination: FC = () => (
 	<div>

package/src/components/tabs/basic.tsx

@@ -20,11 +20,26 @@ const tabs = [
 		_label: 'Letzter Tab',
 	},
 ];
+
+const tabsWithoutIcons = tabs.map((tab) => ({
+	...tab,
+	_icons: undefined,
+}));
+
 export const TabsBasic: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+
+		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );

package/src/components/toast/basic.tsx

@@ -14,6 +14,15 @@ export const ToastBasic: FC = () => {
 		});
 	};
 
+	const handleButtonClickVariantMessage = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Toast with variant 'msg'`,
+			type: 'warning',
+			alertVariant: 'msg',
+		});
+	};
+
 	const handleButtonClickComplex = () => {
 		void toaster.enqueue({
 			render: (element: HTMLElement, { close }) => {
@@ -54,7 +63,8 @@ export const ToastBasic: FC = () => {
 
 	return (
 		<div>
-			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
+			<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}
 			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
 			<br />
 			<br />

package/src/hooks/useSetCurrentLocation.ts

@@ -0,0 +1,7 @@
+import { setCurrentLocation } from '@public-ui/components';
+import { useLocation } from 'react-router';
+
+export const useSetCurrentLocation = () => {
+	const routerLocation = useLocation();
+	setCurrentLocation('#' + routerLocation.pathname);
+};

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from '@a11y-ui/core';
 import { register } from '@public-ui/components';
-import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
+import { BAMF, BMF, BZStv1, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
 import { TH } from '@public-oss/kolibri-themes';
 import { App } from './App';
 
@@ -23,7 +23,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
+			await register([BAMF, BMF, DEFAULT, BZStv1, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

package/src/scenarios/appointment-form/ErrorList.tsx

@@ -19,7 +19,7 @@ export function ErrorList({ errors }: ErrorListPropType) {
 	};
 
 	return (
-		<KolAlert _type="error" _variant="msg">
+		<KolAlert _type="error">
 			Bitte korrigieren Sie folgende Fehler:
 			<nav aria-label="Fehlerliste">
 				<ul>

package/src/scenarios/complex-form/component.tsx

@@ -40,48 +40,48 @@ export const TerminComponent: FC = () => (
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<KolTable
-				_caption="Öffnungszeiten"
+				_label="Öffnungszeiten"
 				_data={
 					[
 						{
 							stadtteil: 'Brackel',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Dorstfeld',
-							montag: '09:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '09:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '09:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '09:00 - 12:00<br/>14:00 - 18:00',
+							montag: '09:00 - 12:00, 14:00 - 16:00',
+							dienstag: '09:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '09:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '09:00 - 12:00, 14:00 - 18:00',
 							freitag: '09:00 - 12:00',
 						},
 						{
 							stadtteil: 'Aplerbeck',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Innenstadt Ost',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 						},
 						{
 							stadtteil: 'Innenstadt West',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 							/*render: (el, data) => {
 						el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
 					  },*/

package/src/scenarios/custom-tooltip-width.tsx

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolButton } from '@public-ui/react';
+
+export const CustomTooltipWidth: FC = () => (
+	<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+);

package/src/scenarios/inputs-get-value.tsx

@@ -0,0 +1,160 @@
+import React, { createContext, FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { HTMLStencilElement } from '@stencil/core/internal';
+import {
+	KolButton,
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolTextarea,
+	KolButtonLink,
+} from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const EventTargetContext = createContext<EventTarget | undefined>(undefined);
+
+type Props = {
+	InputComponent: React.ComponentType<any>;
+	inputProps: { [key: string]: any };
+	formatter?: (value: any) => string;
+};
+const Scenario = (props: Props) => {
+	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
+	const [value, setValue] = useState<unknown>(undefined);
+	const formatter = props.formatter || JSON.stringify;
+	const eventTarget = useContext(EventTargetContext);
+
+	const handleButtonClick = async () => {
+		setValue(await ref.current?.getValue());
+	};
+
+	useEffect(() => {
+		const handleRunAll = () => {
+			void handleButtonClick();
+		};
+		eventTarget?.addEventListener('runAll', handleRunAll);
+
+		return () => {
+			eventTarget?.removeEventListener('runAll', handleRunAll);
+		};
+	}, [eventTarget]);
+
+	return (
+		<div className="grid grid-cols-3 items-end gap-4">
+			<props.InputComponent ref={ref} {...props.inputProps} />
+			<KolButton
+				_label="getValue()"
+				_on={{
+					onClick: () => {
+						void handleButtonClick();
+					},
+				}}
+			></KolButton>
+			<pre>{formatter(value)}</pre>
+		</div>
+	);
+};
+
+export const InputsGetValue: FC = () => {
+	const eventTarget = useMemo(() => new EventTarget(), []);
+
+	return (
+		<>
+			<EventTargetContext.Provider value={eventTarget}>
+				<SampleDescription>
+					<p>
+						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quout;getValue()&quout; button
+						and prints the current value right next to itself.
+					</p>
+				</SampleDescription>
+
+				<div className="grid gap-4">
+					<Scenario InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
+					<Scenario InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox' }} />
+					<Scenario InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+					<Scenario InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+					<Scenario InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+					<Scenario
+						InputComponent={KolInputFile}
+						inputProps={{ _label: 'KolInputFile' }}
+						formatter={(value) =>
+							value instanceof FileList
+								? `FileList{${Array.from(value)
+										.map((file: File) => file.name)
+										.join(', ')}}`
+								: JSON.stringify(value)
+						}
+					/>
+					<Scenario InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+					<Scenario InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+					<Scenario InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+					<Scenario
+						InputComponent={KolInputRadio}
+						inputProps={{
+							_label: 'KolInputRadio',
+							_orientation: 'horizontal',
+							_options: [
+								{ label: 'New York', value: 'New York' },
+								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+								{ label: 'Rosenheim', value: 'Rosenheim' },
+							],
+							_value: 'New York',
+						}}
+					/>
+					<Scenario
+						InputComponent={KolSelect}
+						inputProps={{
+							_label: 'KolSelect',
+							_options: [
+								{ label: 'New York', value: 'New York' },
+								{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+								{ label: 'Rosenheim', value: 'Rosenheim' },
+							],
+						}}
+					/>
+					<Scenario
+						InputComponent={KolTextarea}
+						inputProps={{
+							_label: 'KolTextarea',
+						}}
+					/>
+					<Scenario
+						InputComponent={KolButton}
+						inputProps={{
+							_label: 'KolButton',
+							_variant: 'ghost',
+							_value: 'KolButton value',
+						}}
+					/>
+					<Scenario
+						InputComponent={KolButtonLink}
+						inputProps={{
+							_label: 'KolButtonLink',
+							_value: 'KolButtonLink value',
+						}}
+					/>
+
+					<div className="grid grid-cols-3 gap-4">
+						<div></div>
+						<KolButton
+							_label="Run all"
+							_variant="primary"
+							_on={{
+								onClick: () => {
+									eventTarget.dispatchEvent(new Event('runAll'));
+								},
+							}}
+						></KolButton>
+					</div>
+				</div>
+			</EventTargetContext.Provider>
+		</>
+	);
+};