@public-ui/sample-react 4.0.0-beta.0 → 4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0

package/src/components/dialog/basic.tsx

@@ -0,0 +1,63 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+import { KolButton, KolDialog } from '@public-ui/react-v19';
+import { useSearchParams } from 'react-router';
+import { SampleDescription } from '../SampleDescription';
+
+export const DialogBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+
+	const showDialog = searchParams.get('show-dialog') as string;
+
+	const blankRef = useRef<HTMLKolDialogElement>(null);
+	const cardRef = useRef<HTMLKolDialogElement>(null);
+
+	const onOpenBlankDialog = {
+		onClick: () => blankRef.current?.openModal(),
+	};
+	const onOpenCardDialog = {
+		onClick: () => cardRef.current?.openModal(),
+	};
+	const onCloseBlankDialog = {
+		onClick: () => blankRef.current?.closeModal(),
+	};
+
+	useEffect(() => {
+		if (showDialog === 'true') {
+			blankRef.current?.openModal();
+			cardRef.current?.openModal();
+		}
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					KolDialog supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer
+					button.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<div>
+					<KolButton _label="Open blank dialog" _on={onOpenBlankDialog} />
+					<KolDialog ref={blankRef} _label="Blank dialog" _variant="blank" _width="40%">
+						<div className="bg-white p-4 rounded shadow">
+							<p className="mt-0">You must add styling and a close button yourself.</p>
+							<KolButton _label="Open card dialog" className="mr" _on={onOpenCardDialog} />
+							<KolButton _label="Close" _on={onCloseBlankDialog} />
+						</div>
+					</KolDialog>
+				</div>
+
+				<div>
+					<KolButton _label="Open card dialog" _on={onOpenCardDialog} />
+					<KolDialog ref={cardRef} _label="Card dialog" _variant="card" _width="30%">
+						<p className="mt-0">This variant wraps content inside a KolCard.</p>
+					</KolDialog>
+				</div>
+			</div>
+		</>
+	);
+};

package/src/components/dialog/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { DialogBasic } from './basic';
+
+export const DIALOG_ROUTES: Routes = {
+	dialog: {
+		basic: DialogBasic,
+	},
+};

package/src/components/handout/basic.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
+import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -56,22 +56,21 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				label: 'Workdays',
 				colSpan: 5,
+				width: 500,
 			},
 			{
 				label: 'Weekend',
 				colSpan: 2,
+				width: 200,
 			},
 		],
 		[
 			{
 				key: 'monday',
 				label: 'Monday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolButtonWrapper _label={label} style={{ fontSize: '75%' }} />);
 				},
 				compareFn: (first, second) => {
 					if ((first as TableDataType).monday < (second as TableDataType).monday) {
@@ -84,17 +83,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'tuesday',
 				label: 'Tuesday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#060" _label={label}></KolBadge>);
 				},
 				compareFn: (first, second) => {
 					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
@@ -106,67 +102,52 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					return 0;
 				},
 				sortDirection: 'DESC',
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'wednesday',
 				label: 'Wednesday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#006" _label={label}></KolBadge>);
 				},
-				width: '110px',
+				width: 110,
 			},
 			{
 				key: 'thursday',
 				label: 'Thursday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#600" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'friday',
 				label: 'Friday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#303" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'saturday',
 				label: 'Saturday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#330" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'sunday',
 				label: 'Sunday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#033" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 		],
 	],
@@ -174,20 +155,32 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 		[
 			{
 				label: 'Early',
+				width: 100,
 			},
 			{
 				label: 'Noon',
+				width: 100,
 			},
 			{
 				label: 'Evening',
+				width: 100,
 			},
 			{
 				label: 'Night',
+				width: 100,
 			},
 		],
 	],
 };
 
+const renderCellContent = (element: HTMLElement, content: React.ReactNode) => {
+	const renderElement = document.createElement('div');
+	renderElement.setAttribute('role', 'presentation');
+	element.innerHTML = '';
+	element.appendChild(renderElement);
+	getRoot(renderElement).render(content);
+};
+
 export const HandoutBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 
@@ -471,8 +464,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
-					<div slot="" className="grid gap-2 p-2 flex">
-						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+					<div slot="" className="gap-2 p-2 flex flex-col">
+						<KolTableStateful _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/modal/basic.tsx

@@ -1,63 +1,20 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import { KolButton, KolModal } from '@public-ui/react-v19';
-import { useSearchParams } from 'react-router';
-import { SampleDescription } from '../SampleDescription';
+import { KolAlert, KolLink } from '@public-ui/react-v19';
 
-export const ModalBasic: FC = () => {
-	const [searchParams] = useSearchParams();
+import { DialogBasic } from '../dialog/basic';
 
-	const showModal = searchParams.get('show-modal') as string;
+/**
+ * @deprecated Use `DialogBasic` from '../dialog/basic' instead.
+ */
+export const ModalBasic: FC = () => (
+	<>
+		<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
+			The Modal component was renamed to Dialog. Please use the Dialog sample instead.&nbsp;
+			<KolLink _href="/#/dialog" _target="_blank" _label="Open Dialog samples" />
+		</KolAlert>
 
-	const blankRef = useRef<HTMLKolModalElement>(null);
-	const cardRef = useRef<HTMLKolModalElement>(null);
-
-	const onOpenBlankModal = {
-		onClick: () => blankRef.current?.openModal(),
-	};
-	const onOpenCardModal = {
-		onClick: () => cardRef.current?.openModal(),
-	};
-	const onCloseBlankModal = {
-		onClick: () => blankRef.current?.closeModal(),
-	};
-
-	useEffect(() => {
-		if (showModal === 'true') {
-			blankRef.current?.openModal();
-			cardRef.current?.openModal();
-		}
-	}, []);
-
-	return (
-		<>
-			<SampleDescription>
-				<p>
-					KolModal supports the variants <code>blank</code> and <code>card</code>. The card variant includes a <code>KolCard</code> container and a closer
-					button.
-				</p>
-			</SampleDescription>
-
-			<div className="grid gap-8">
-				<div>
-					<KolButton _label="Open blank modal" _on={onOpenBlankModal} />
-					<KolModal ref={blankRef} _label="Blank modal" _variant="blank" _width="40%">
-						<div className="bg-white p-4 rounded shadow">
-							<p className="mt-0">You must add styling and a close button yourself.</p>
-							<KolButton _label="Open card modal" className="mr" _on={onOpenCardModal} />
-							<KolButton _label="Close" _on={onCloseBlankModal} />
-						</div>
-					</KolModal>
-				</div>
-
-				<div>
-					<KolButton _label="Open card modal" _on={onOpenCardModal} />
-					<KolModal ref={cardRef} _label="Card modal" _variant="card" _width="30%">
-						<p className="mt-0">This variant wraps content inside a KolCard.</p>
-					</KolModal>
-				</div>
-			</div>
-		</>
-	);
-};
+		<DialogBasic />
+	</>
+);

package/src/components/nav/basic.tsx

@@ -6,7 +6,7 @@ import { LINKS, LINKS_SUB_ACTIVE, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {
-	const [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(false);
+	const [hasIconsWhenExpanded, setHasIconsWhenExpanded] = useState(true);
 
 	return (
 		<>

package/src/components/nav/links.ts

@@ -3,7 +3,7 @@ import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -18,11 +18,11 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'fa-solid fa-house',
+				_icons: 'kolicon-house',
 				_href: '#/back-page',
 			},
 			{
@@ -96,7 +96,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -111,7 +111,7 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 	},
 	{
 		_label: '4 Navigation point with children and onClick',
@@ -132,7 +132,7 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -147,11 +147,11 @@ export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'fa-solid fa-house',
+		_icons: 'kolicon-house',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
-				_icons: 'fa-solid fa-house',
+				_icons: 'kolicon-house',
 				_href: '#/back-page',
 			},
 			{

package/src/components/popover-button/basic.tsx

@@ -7,7 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
-	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
+	const buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
@@ -38,7 +38,7 @@ export const PopoverButtonBasic: FC = () => {
 		// Ensure the popover is closed on initial render
 		if (buttonRef.current) {
 			buttonRef.current.showPopover();
-			buttonRef.current.kolFocus();
+			buttonRef.current.focus();
 		}
 	}, []);
 

package/src/components/skip-nav/basic.tsx

@@ -6,10 +6,10 @@ import { KolSkipNav } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const SkipNavBasic: FC = () => {
-	const skipNavRef = useRef<HTMLKolSkipNavElement>(null);
+	const skipNavRef = useRef<HTMLKolSkipNavElement | null>(null);
 
 	useEffect(() => {
-		skipNavRef.current?.kolFocus();
+		skipNavRef.current?.focus();
 	}, []);
 
 	return (

package/src/components/table/column-alignment.tsx

@@ -18,13 +18,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left' },
-							{ label: 'center', key: 'center', textAlign: 'center' },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
 				}}
@@ -36,13 +35,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter, width: 160 },
 						],
 					],
 				}}
@@ -54,13 +52,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
 				}}
@@ -72,16 +69,15 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left' },
-							{ label: 'center', key: 'center', textAlign: 'center' },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
-					vertical: [[{ label: 'Vertical' }]],
+					vertical: [[{ label: 'Vertical', width: 160 }]],
 				}}
 				_data={DATA}
 				className="block"

package/src/components/table/complex-headers.tsx

@@ -12,7 +12,6 @@ export const TableComplexHeaders: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateful
 				_label="Business hours"
-				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',
@@ -21,6 +20,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 					{
 						asp: 'Tiergarten',
@@ -29,6 +30,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 					{
 						asp: 'Maxvorstadt',
@@ -37,6 +40,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 				]}
 				_headers={{
@@ -45,9 +50,11 @@ export const TableComplexHeaders: FC = () => (
 							{
 								label: 'Berlin',
 								rowSpan: 2,
+								width: 100,
 							},
 							{
 								label: 'München',
+								width: 100,
 							},
 						],
 					],
@@ -57,44 +64,64 @@ export const TableComplexHeaders: FC = () => (
 								label: 'District',
 								rowSpan: 2,
 								key: 'asp',
+								width: 120,
+								textAlign: 'center',
 							},
 							{
 								label: 'Workdays',
 								colSpan: 5,
+								width: 580,
+								textAlign: 'center',
 							},
 							{
 								label: 'Weekend',
 								colSpan: 2,
+								width: 200,
+								textAlign: 'center',
 							},
 						],
 						[
 							{
 								label: 'Monday',
 								key: 'monday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Tuesday',
 								key: 'tuesday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Wednesday',
 								key: 'wednesday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Thursday',
 								key: 'thursday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Friday',
 								key: 'friday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Saturday',
 								key: 'saturday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Sunday',
 								key: 'sunday',
+								width: 50,
+								textAlign: 'center',
 							},
 						],
 					],

package/src/components/table/direction-aware-sort.tsx

@@ -23,11 +23,12 @@ const TEMPERATURE_DATA: TemperatureRow[] = [
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'City', key: 'city' },
+			{ label: 'City', key: 'city', width: 160 },
 			{
 				label: 'Temperature (°C)',
 				key: 'temperature',
 				textAlign: 'right',
+				width: 160,
 				compareFn: (rowA, rowB, direction = 'ASC') => {
 					const temperatureA = (rowA as TemperatureRow).temperature;
 					const temperatureB = (rowB as TemperatureRow).temperature;
@@ -59,7 +60,7 @@ export const TableDirectionAwareSort: FC = () => (
 		</SampleDescription>
 
 		<section className="w-full">
-			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+			<KolTableStateful _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
 		</section>
 	</>
 );