@heliosgraphics/ui 2.0.0-alpha.89 → 2.0.0-alpha.91

package/components/Masonry/Masonry.tsx

@@ -4,7 +4,7 @@ import { Masonry as MasonryPlock } from "react-plock"
 import { Children, type ReactElement, type FC } from "react"
 import type { MasonryProps } from "./Masonry.types"
 
-export const Masonry: FC<MasonryProps> = ({ children, columns, gap, brakepoints, useBalancedLayout }) => {
+export const Masonry: FC<MasonryProps> = ({ children, columns, gap, breakpoints, useBalancedLayout }) => {
 	if (!children) return null
 
 	const mappedChildren = Children.toArray(children).map((child) => <div className="Row">{child}</div>) as ReactElement[]
@@ -16,7 +16,7 @@ export const Masonry: FC<MasonryProps> = ({ children, columns, gap, brakepoints,
 			config={{
 				columns: columns,
 				gap: gap,
-				media: brakepoints,
+				media: breakpoints,
 				useBalancedLayout: Boolean(useBalancedLayout),
 			}}
 		/>

package/components/Masonry/Masonry.types.ts

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from "react"
 export interface MasonryBaseProps {
 	columns: [number, number, number]
 	gap: [number, number, number]
-	brakepoints: [number, number, number]
+	breakpoints: [number, number, number]
 	useBalancedLayout?: boolean
 }
 

package/components/Menu/Menu.tsx

@@ -1,6 +1,4 @@
-"use client"
-
-import { FC } from "react"
+import type { FC } from "react"
 import type { MenuProps } from "./Menu.types"
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, type FC } from "react"
+import { useCallback, useState, type FC, type KeyboardEvent } from "react"
 import { Flex } from "../../../Flex"
 import { Icon } from "../../../Icon"
 import { Text } from "../../../Text"
@@ -26,6 +26,16 @@ export const MenuCategory: FC<MenuCategoryProps> = ({
 		}
 	}
 
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onToggle()
+			}
+		},
+		[isControlled],
+	)
+
 	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
 		[styles.menuCategoryFolder]: category,
 		[styles.menuCategoryFolderOpen]: isOpen,
@@ -46,10 +56,11 @@ export const MenuCategory: FC<MenuCategoryProps> = ({
 		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
 			{showHeader && (
 				<Flex
-					{...(isFolder && onToggle && { onClick: onToggle })}
+					{...(isFolder && { onClick: onToggle, onKeyDown: handleKeyDown, role: "button" as const, tabIndex: 0 })}
 					isBetween={true}
 					isYCentered={true}
 					gap={4}
+					aria-expanded={isFolder ? isOpen : undefined}
 					className={styles.menuCategoryTitle}
 				>
 					<Text type="tiny" emphasis={isOpen ? "secondary" : "primary"} fontWeight="medium" isNonSelectable={true}>

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react"
+import type { FC } from "react"
 import { Input } from "../../../Input"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./MenuFilter.module.css"

package/components/Menu/components/MenuItem/MenuItem.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react"
+import { useCallback, type FC, type KeyboardEvent } from "react"
 import { Flex } from "../../../Flex"
 import { Pill } from "../../../Pill"
 import { Icon } from "../../../Icon"
@@ -24,11 +24,24 @@ export const MenuItem: FC<MenuItemProps> = ({
 		[styles.menuItemActive]: isActive,
 	})
 
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onAsideClose()
+			}
+		},
+		[onAsideClose],
+	)
+
 	return (
 		<Flex
 			className={menuItemClasses}
 			data-ui-component="MenuItem"
+			role="menuitem"
+			tabIndex={0}
 			onClick={onAsideClose}
+			onKeyDown={handleKeyDown}
 			isBetween={true}
 			gap={4}
 			isYCentered={true}

package/components/Overlay/Overlay.tsx

@@ -18,7 +18,7 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 	})
 
 	return (
-		<section className={styles.overlay}>
+		<section className={styles.overlay} data-ui-component="Overlay">
 			<div className={contentClasses}>{children}</div>
 			<div className={styles.overlay__layer} onClick={hideFunction} />
 		</section>

package/components/Pie/Pie.tsx

@@ -15,15 +15,18 @@ export const Pie: FC<PieProps> = ({ color, size, data }) => {
 			width={size}
 			viewBox={`0 0 ${size} ${size}`}
 			style={{ backgroundColor: backgroundColor }}
+			role="img"
+			aria-label={`Pie chart with ${data.length} segments`}
+			data-ui-component="Pie"
 		>
-			{data.map((item, key) => {
-				const thisData: Array<PieItem> = data.slice(0, key)
+			{data.map((item, index) => {
+				const thisData: Array<PieItem> = data.slice(0, index)
 				const thisSize = thisData?.reduce((a, b) => a + b.value, 0)
-				const thisColor: string = `hsl(var(--${color}-hue), ${(key + 1) * 20}%, 50%)`
+				const thisColor: string = `hsl(var(--${color}-hue), ${(index + 1) * 20}%, 50%)`
 
 				return (
 					<circle
-						key={key}
+						key={item.name ?? `segment-${index}`}
 						r={size / 4}
 						cx={size / 2}
 						cy={size / 2}

package/components/Pill/Pill.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
 import { Text } from "../Text"

package/components/Placeholder/Placeholder.tsx

@@ -9,6 +9,7 @@ export const Placeholder: FC<PlaceholderProps> = ({ children, height }) => {
 		<Flex
 			className={styles.placeholder}
 			padding={16}
+			data-ui-component="Placeholder"
 			style={{
 				height: height ? `${height}px` : "inherit",
 			}}

package/components/Progress/Progress.tsx

@@ -10,5 +10,13 @@ export const Progress: FC<ProgressProps> = ({ color = "blue", isSmall, max = 100
 		[styles.progressSmall]: isSmall,
 	})
 
-	return <progress className={progressClasses} max={max} value={value} />
+	return (
+		<progress
+			className={progressClasses}
+			max={max}
+			value={value}
+			aria-label={`Progress: ${value} of ${max}`}
+			data-ui-component="Progress"
+		/>
+	)
 }

package/components/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useId } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { useId, memo } from "react"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
@@ -9,63 +9,69 @@ import styles from "./Radio.module.css"
 import type { FC } from "react"
 import type { RadioProps } from "./Radio.types"
 
-export const Radio: FC<RadioProps> = ({
-	color = "gray",
-	isChecked,
-	isVertical,
-	isLabelHidden = false,
-	isSmall,
-	description,
-	isDisabled,
-	isRequired,
-	onChange,
-	label,
-	name,
-	value,
-}) => {
-	const radioId: string = useId()
+export const Radio: FC<RadioProps> = memo(
+	({
+		color = "gray",
+		isChecked,
+		isVertical,
+		isLabelHidden = false,
+		isSmall,
+		description,
+		isDisabled,
+		isRequired,
+		onChange,
+		label,
+		name,
+		value,
+	}) => {
+		const radioId: string = useId()
 
-	const colorClasses = getColorClasses(color, "dark")
-	const radioClasses = getClasses(styles.radio, ...colorClasses, {
-		[styles.radioDisabled]: isDisabled,
-		[styles.radioSmall]: isSmall,
-	})
+		const colorClasses = getColorClasses(color, "dark")
+		const radioClasses = getClasses(styles.radio, ...colorClasses, {
+			[styles.radioDisabled]: isDisabled,
+			[styles.radioSmall]: isSmall,
+		})
 
-	const radioLabelClasses = getClasses(styles.radio__radioLabel, "flex gap-4", {
-		"flex-x-center flex-column": isVertical,
-		"flex-y-center": !isVertical,
-	})
+		const radioLabelClasses = getClasses(styles.radio__radioLabel, "flex gap-4", {
+			"flex-x-center flex-column": isVertical,
+			"flex-y-center": !isVertical,
+		})
 
-	return (
-		<div className={radioClasses}>
-			<label className={radioLabelClasses} htmlFor={radioId}>
-				<span className={styles.radio__mark}>
-					<input
-						type="radio"
-						checked={isChecked}
-						onChange={onChange}
-						disabled={isDisabled}
-						required={isRequired}
-						aria-label={isLabelHidden ? label : undefined}
-						id={radioId}
-						name={name}
-						value={value}
-					/>
-					<div className={styles.radio__radioMark} />
-				</span>
-				{!isLabelHidden && (
-					<Flex isColumn={true}>
-						<Text type={isSmall ? "tiny" : "small"} fontWeight="medium" emphasis={isDisabled ? "tertiary" : "inherit"}>
-							{label}
-						</Text>
-						{description && (
-							<Text type="tiny" emphasis="secondary">
-								{description}
+		return (
+			<div className={radioClasses} data-ui-component="Radio">
+				<label className={radioLabelClasses} htmlFor={radioId}>
+					<span className={styles.radio__mark}>
+						<input
+							type="radio"
+							checked={isChecked}
+							onChange={onChange}
+							disabled={isDisabled}
+							required={isRequired}
+							aria-label={isLabelHidden ? label : undefined}
+							id={radioId}
+							name={name}
+							value={value}
+						/>
+						<div className={styles.radio__radioMark} />
+					</span>
+					{!isLabelHidden && (
+						<Flex isColumn={true}>
+							<Text
+								type={isSmall ? "tiny" : "small"}
+								fontWeight="medium"
+								emphasis={isDisabled ? "tertiary" : "inherit"}
+							>
+								{label}
 							</Text>
-						)}
-					</Flex>
-				)}
-			</label>
-		</div>
-	)
-}
+							{description && (
+								<Text type="tiny" emphasis="secondary">
+									{description}
+								</Text>
+							)}
+						</Flex>
+					)}
+				</label>
+			</div>
+		)
+	},
+)

package/components/Segments/Segments.tsx

@@ -2,10 +2,10 @@
 
 import {
 	type FC,
-	type Ref,
 	useState,
 	useRef,
 	useEffect,
+	useCallback,
 	Children,
 	isValidElement,
 	cloneElement,
@@ -18,10 +18,6 @@ import { SegmentButton } from "./components/SegmentButton"
 import type { SegmentsProps } from "./Segments.types"
 import type { SegmentButtonProps } from "./components/SegmentButton/SegmentButton.types"
 
-type SegmentButtonWithRef = SegmentButtonProps & {
-	ref?: Ref<HTMLButtonElement>
-}
-
 export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall }) => {
 	const validChildren: ReactElement<SegmentButtonProps>[] = Children.toArray(children).filter(
 		(child): child is ReactElement<SegmentButtonProps> => isValidElement(child) && child.type === SegmentButton,
@@ -35,7 +31,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 	const containerRef = useRef<HTMLDivElement>(null)
 	const sliderRef = useRef<HTMLDivElement>(null)
 
-	const updateSliderPosition = (): void => {
+	const updateSliderPosition = useCallback((): void => {
 		if (!containerRef.current || !sliderRef.current || !activeValue) return
 
 		const activeIndex: number = validChildren.findIndex((child) => child.props.value === activeValue)
@@ -52,19 +48,18 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		sliderRef.current.style.transform = `translateX(${left}px)`
 		sliderRef.current.style.width = `${width}px`
 		sliderRef.current.style.opacity = "1"
-	}
+	}, [activeValue, validChildren])
 
 	useEffect(() => {
 		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
-		const handleResize = (): void => updateSliderPosition()
 
-		globalThis.addEventListener("resize", handleResize)
+		globalThis.addEventListener("resize", updateSliderPosition)
 
 		return (): void => {
 			globalThis.clearTimeout(timer)
-			globalThis.removeEventListener("resize", handleResize)
+			globalThis.removeEventListener("resize", updateSliderPosition)
 		}
-	}, [activeValue])
+	}, [updateSliderPosition])
 
 	const segmentedControlClasses: string = getClasses(styles.segmentedControl, {
 		[styles.segmentedControlSmall]: isSmall,
@@ -74,7 +69,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 	return (
 		<Flex className={segmentedControlClasses} isYCentered={true} gap={2} isInline={!isFullWidth} ref={containerRef}>
 			{validChildren.map((child: ReactElement<SegmentButtonProps>, index: number) =>
-				cloneElement<SegmentButtonWithRef>(child, {
+				cloneElement<SegmentButtonProps>(child, {
 					key: child.props.value,
 					isActive: child.props.value === activeValue,
 					onClick: () => {

package/components/Segments/components/SegmentButton/SegmentButton.meta.ts

@@ -26,6 +26,10 @@ export const meta: HeliosAttributeMeta<SegmentButtonProps> = {
 		type: "() => void",
 		isOptional: true,
 	},
+	ref: {
+		type: "Ref<HTMLButtonElement>",
+		isOptional: true,
+	},
 	value: {
 		type: "string",
 	},

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -1,24 +1,21 @@
 import styles from "./SegmentButton.module.css"
-import { forwardRef } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton = forwardRef<HTMLButtonElement, SegmentButtonProps>(
-	({ isActive, value, icon, iconLeft, iconRight, onClick }, ref) => {
-		const segmentButtonClasses: string = getClasses(styles.segmentButton, {
-			[styles.segmentButtonActive]: isActive,
-		})
+export const SegmentButton = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }: SegmentButtonProps) => {
+	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
+		[styles.segmentButtonActive]: isActive,
+	})
 
-		const iconL: HeliosIconType | undefined = iconLeft || icon
+	const iconL: HeliosIconType | undefined = iconLeft || icon
 
-		return (
-			<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
-				{iconL && <Icon icon={iconL} size={16} />}
-				{value}
-				{iconRight && <Icon icon={iconRight} size={16} />}
-			</button>
-		)
-	},
-)
+	return (
+		<button ref={ref} className={segmentButtonClasses} onClick={onClick} data-ui-component="SegmentButton">
+			{iconL && <Icon icon={iconL} size={16} />}
+			{value}
+			{iconRight && <Icon icon={iconRight} size={16} />}
+		</button>
+	)
+}

package/components/Segments/components/SegmentButton/SegmentButton.types.ts

@@ -1,3 +1,4 @@
+import type { Ref } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 
 export interface SegmentButtonProps {
@@ -6,5 +7,6 @@ export interface SegmentButtonProps {
 	iconRight?: HeliosIconType
 	isActive?: boolean
 	onClick?: () => void
+	ref?: Ref<HTMLButtonElement>
 	value: string
 }

package/components/Select/Select.tsx

@@ -2,7 +2,7 @@
 
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { useId, type FC } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Select.module.css"
@@ -26,7 +26,7 @@ export const Select: FC<SelectProps> = ({
 	})
 
 	return (
-		<Flex isColumn={true} className={selectClasses}>
+		<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
 			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
 			<Flex>
 				<select
@@ -34,11 +34,12 @@ export const Select: FC<SelectProps> = ({
 					onChange={onChange}
 					id={htmlFor}
 					value={selectedValue}
+					disabled={isDisabled}
 					aria-label={isLabelHidden ? label : undefined}
 				>
-					{items?.map((item, key) => {
+					{items?.map((item) => {
 						return (
-							<option key={key} value={item.value} disabled={item.isDisabled}>
+							<option key={item.value} value={item.value} disabled={item.isDisabled}>
 								{item.name}
 							</option>
 						)

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { HRMarkup } from "../HRMarkup"
 import styles from "./HorizontalSeparator.module.css"
 import type { FC } from "react"

package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { HRMarkup } from "../HRMarkup"
 import styles from "./VerticalSeparator.module.css"
 import type { FC } from "react"

package/{components.css → components/Setup/Setup.components.css}

@@ -1,7 +1,7 @@
 @layer helios;
 
-@import "@heliosgraphics/css/dist/css.min.layered.css";
-@import "@heliosgraphics/css/dist/css.easings.layered.css";
+@import "@heliosgraphics/css/layered";
+@import "@heliosgraphics/css/easings/layered";
 
 @import "./css/core.colors.css";
 @import "./css/core.colors-helpers.css";

package/components/Setup/Setup.meta.ts

@@ -12,11 +12,11 @@ export const meta: HeliosAttributeMeta<SetupProps> = {
 	_status: "nominal",
 	_category: "meta",
 	fixedTheme: {
-		type: "HeliosThemeType",
+		type: "HeliosFixedThemeType",
 		isOptional: true,
 	},
 	theme: {
-		type: "HeliosFixedThemeType",
+		type: "HeliosThemeType",
 		isOptional: true,
 	},
 }

package/components/Setup/Setup.tsx

@@ -1,4 +1,4 @@
-import "../../components.css"
+import "./Setup.components.css"
 
 import type { FC } from "react"
 import type { HeliosFixedThemeType } from "../../types/themes"
@@ -19,13 +19,15 @@ declare global {
 
 export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 	const preconnectLinks: Array<SetupLinkProps> = [
-		{ rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
+		{ id: "rsms", rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
 		{
+			id: "googleapis",
 			rel: "preconnect",
 			href: "https://fonts.googleapis.com",
 			crossOrigin: "anonymous",
 		},
 		{
+			id: "gstatic",
 			rel: "preconnect",
 			href: "https://fonts.gstatic.com",
 			crossOrigin: "anonymous",
@@ -33,8 +35,9 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 	]
 
 	const stylesheetLinks: Array<SetupLinkProps> = [
-		{ rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
+		{ id: "rsms", rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
 		{
+			id: "googleapis",
 			rel: "stylesheet",
 			href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap",
 		},
@@ -44,11 +47,11 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 
 	return (
 		<>
-			{preconnectLinks.map((linkProps, index) => (
-				<link key={`preconnect-${index}`} {...linkProps} />
+			{preconnectLinks.map((linkProps) => (
+				<link key={`preconnect-${linkProps.id}`} {...linkProps} />
 			))}
-			{stylesheetLinks.map((linkProps, index) => (
-				<link key={`stylesheet-${index}`} {...linkProps} />
+			{stylesheetLinks.map((linkProps) => (
+				<link key={`stylesheet-${linkProps.id}`} {...linkProps} />
 			))}
 			<script
 				dangerouslySetInnerHTML={{

package/components/Setup/Setup.types.ts

@@ -6,6 +6,7 @@ export interface SetupProps {
 }
 
 export interface SetupLinkProps {
+	id: string
 	rel: string
 	href: string
 	crossOrigin?: "anonymous" | "use-credentials"

package/components/Shimmer/Shimmer.tsx

@@ -1,5 +1,5 @@
-import { ShimmerProps } from "./Shimmer.types"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { ShimmerProps } from "./Shimmer.types"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Shimmer.module.css"
 import type { FC } from "react"
 
@@ -12,6 +12,7 @@ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom
 	return (
 		<div
 			className={styles.shimmer}
+			data-ui-component="Shimmer"
 			role="status"
 			aria-busy={true}
 			aria-label="Loading"

package/components/Slider/Slider.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Slider.module.css"
 import type { FC } from "react"
 import type { SliderProps } from "./Slider.types"
@@ -7,9 +7,9 @@ export const Slider: FC<SliderProps> = ({ items }) => {
 	const sliderClasses: string = getClasses(styles.slider, "flex")
 
 	return (
-		<ul className={sliderClasses}>
-			{items?.map((item, key) => (
-				<li key={key}>{item}</li>
+		<ul className={sliderClasses} data-ui-component="Slider">
+			{items?.map((item, index) => (
+				<li key={`slider-${index}`}>{item}</li>
 			))}
 		</ul>
 	)

package/components/Spacer/Spacer.tsx

@@ -2,5 +2,5 @@ import { memo, type FC } from "react"
 import type { SpacerProps } from "./Spacer.types"
 
 export const Spacer: FC<SpacerProps> = memo(({ gap }) => {
-	return <div style={{ height: `${gap ?? 0}px` }} />
+	return <div style={{ height: `${gap ?? 0}px` }} data-ui-component="Spacer" />
 })

package/components/Table/Table.tsx

@@ -12,7 +12,7 @@ export const Table: FC<TableProps> = ({ children, hasBorder, isMonoHeader }) =>
 	})
 
 	return (
-		<div className={tableClasses}>
+		<div className={tableClasses} data-ui-component="Table">
 			<table className={tableElementClasses}>{children}</table>
 		</div>
 	)