@heliosgraphics/ui 2.0.0-alpha.94 → 2.0.0-alpha.96

package/components/Dialog/Dialog.module.css

@@ -12,23 +12,49 @@
 	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 	touch-action: pan-y;
 	transform: translateX(-50%);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-lg) ease-in-out,
+		transform var(--speed-lg) ease-in-out,
+		overlay var(--speed-lg) ease-in-out allow-discrete,
+		display var(--speed-lg) ease-in-out allow-discrete;
 }
 
-.dialogNarrow {
-	width: 420px;
+.dialog[open] {
+	opacity: 1;
+	transform: translateX(-50%);
+}
+
+@starting-style {
+	.dialog[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(6px);
+	}
 }
 
-.dialog:not(.dialogCentered) {
-	animation: dialogFadeIn var(--speed-lg) ease-in-out;
+.dialogNarrow {
+	width: 420px;
 }
 
 .dialogCentered {
 	top: 50%;
 
-	animation: dialogCenterFadeIn var(--speed-lg) ease-in-out;
 	transform: translateX(-50%) translateY(-50%);
 }
 
+.dialogCentered[open] {
+	opacity: 1;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+@starting-style {
+	.dialogCentered[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(calc(-50% + 6px));
+	}
+}
+
 .dialog__content {
 	position: relative;
 	z-index: var(--z-index-1);
@@ -48,54 +74,36 @@
 .dialog::backdrop {
 	--ui-bg-backdrop: rgba(80, 80, 80, 0.5);
 
-	animation: backdropFadeIn var(--speed-sm) ease-in-out;
 	background-color: var(--ui-bg-backdrop);
 	backdrop-filter: blur(2px);
-}
 
-@media (max-width: 576px) {
-	.dialog:not(.dialogCentered) {
-		width: calc(100% - 16px);
-	}
-
-	.dialog__content {
-		padding: 12px;
-	}
+	opacity: 0;
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		overlay var(--speed-sm) ease-in-out allow-discrete,
+		display var(--speed-sm) ease-in-out allow-discrete;
 }
 
-@media (max-width: 576px) {
-	.dialogCentered {
-		width: calc(100% - 16px);
-	}
+.dialog[open]::backdrop {
+	opacity: 1;
 }
 
-@keyframes dialogFadeIn {
-	0% {
+@starting-style {
+	.dialog[open]::backdrop {
 		opacity: 0;
-		transform: translateX(-50%) translateY(6px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(0);
 	}
 }
 
-@keyframes dialogCenterFadeIn {
-	0% {
-		opacity: 0;
-		transform: translateX(-50%) translateY(calc(-50% + 6px));
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(-50%) translateY(-50%);
+@media (max-width: 576px) {
+	.dialog:not(.dialogCentered) {
+		width: calc(100% - 16px);
 	}
-}
 
-@keyframes backdropFadeIn {
-	0% {
-		opacity: 0;
+	.dialogCentered {
+		width: calc(100% - 16px);
 	}
-	100% {
-		opacity: 1;
+
+	.dialog__content {
+		padding: 12px;
 	}
 }

package/components/Dialog/Dialog.tsx

@@ -9,9 +9,6 @@ import { Flex } from "../Flex"
 import { getClasses } from "@heliosgraphics/utils"
 import type { DialogProps } from "./Dialog.types"
 
-const ATTRIBUTE_SCROLL = "data-scroll" as const
-const POSITION_FIXED_CLASS = "fixed" as const
-
 export const Dialog: FC<DialogProps> = ({
 	title,
 	children,
@@ -24,60 +21,25 @@ export const Dialog: FC<DialogProps> = ({
 }) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
 	const triggerRef = useRef<Element | null>(null)
-
-	const resetScroll = (): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.setAttribute(ATTRIBUTE_SCROLL, "")
-			dialogRef?.current?.scrollTo?.(0, 0)
-		})
-	}
-
-	const resetDocumentStyle = (scrollPosition: number): void => {
-		globalThis?.requestAnimationFrame(() => {
-			document.body.style.position = ""
-			document.body.style.height = ""
-			document.body.style.top = ""
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			return globalThis?.scrollTo?.(0, scrollPosition)
-		})
-	}
+	const onCloseRef = useRef<() => void>(onClose)
 
 	useEffect(() => {
-		return (): void => {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			resetDocumentStyle(scrollPosition)
-			resetScroll()
-		}
-	}, [title, isOpen])
+		onCloseRef.current = onClose
+	}, [onClose])
 
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
 		if (isOpen) {
 			triggerRef.current = document.activeElement
+			document.documentElement.style.overflow = "hidden"
 
-			const localPosition: number = document?.documentElement?.scrollTop ?? 0
-
-			document.body.classList.add(POSITION_FIXED_CLASS)
-			document.body.style.top = `-${localPosition}px`
-			document.body.setAttribute(ATTRIBUTE_SCROLL, localPosition.toString())
-
-			dialogRef?.current?.showModal?.()
-
-			const dialog = dialogRef.current
-
-			const handleCancel = (event: Event): void => {
-				event.preventDefault()
-				onClose()
+			if (!dialogRef.current?.open) {
+				dialogRef?.current?.showModal?.()
 			}
 
-			dialog?.addEventListener("cancel", handleCancel)
-
 			return (): void => {
-				dialog?.removeEventListener("cancel", handleCancel)
+				document.documentElement.style.overflow = ""
 
 				const trigger = triggerRef.current
 				if (trigger && trigger instanceof HTMLElement) {
@@ -85,20 +47,14 @@ export const Dialog: FC<DialogProps> = ({
 				}
 				triggerRef.current = null
 			}
-		} else if (!dialogRef?.current) {
-			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
-			const scrollPosition: number = parseInt(localPos) ?? 0
-
-			document.body.classList.remove(POSITION_FIXED_CLASS)
-
-			resetDocumentStyle(scrollPosition)
-
-			dialogRef?.current?.close?.()
 		}
-
-		return undefined
 	}, [isOpen])
 
+	const onCancel = (event: React.SyntheticEvent<HTMLDialogElement>): void => {
+		event.preventDefault()
+		onCloseRef.current()
+	}
+
 	if (!isOpen) return null
 
 	const onDialogClose = (event: MouseEvent<HTMLDialogElement>): boolean | void | Promise<void> => {
@@ -117,7 +73,14 @@ export const Dialog: FC<DialogProps> = ({
 	})
 
 	return (
-		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose} role={role} data-ui-component="Dialog">
+		<dialog
+			ref={dialogRef}
+			className={dialogClasses}
+			onClick={onDialogClose}
+			onCancel={onCancel}
+			role={role}
+			data-ui-component="Dialog"
+		>
 			{!!title && (
 				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
 					<Heading level={5} fontWeight="medium">
@@ -128,7 +91,9 @@ export const Dialog: FC<DialogProps> = ({
 					</ButtonGroup>
 				</Flex>
 			)}
-			{isOpen && <div className={dialogContentClasses}>{children}</div>}
+			<div className={dialogContentClasses}>{children}</div>
 		</dialog>
 	)
 }
+
+Dialog.displayName = "Dialog"

package/components/Donut/Donut.tsx

@@ -1,3 +1,4 @@
+import { getClasses } from "@heliosgraphics/utils"
 import { getDonutBorderSize } from "./Donut.utils"
 import { Flex } from "../Flex"
 import styles from "./Donut.module.css"
@@ -12,18 +13,14 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 	const dashSize = 100 - percentage
 	const donutColor: string = `hsl(var(--${color}-hue), var(--${color}-saturation), 50%)`
 
+	const donutClasses: string = getClasses(styles.donut, "relative")
 	const donutContainerStyle: object = {
 		height: size + "px",
 		width: size + "px",
 	}
 
 	return (
-		<Flex
-			style={donutContainerStyle}
-			className={`${styles.donut} relative`}
-			isCentered={true}
-			data-ui-component="Donut"
-		>
+		<Flex style={donutContainerStyle} className={donutClasses} isCentered={true} data-ui-component="Donut">
 			<Flex className="absolute top-0 left-0 z-50" style={donutContainerStyle} isCentered={true}>
 				{children}
 			</Flex>
@@ -62,3 +59,5 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 		</Flex>
 	)
 }
+
+Donut.displayName = "Donut"

package/components/Dot/Dot.tsx

@@ -42,3 +42,5 @@ export const Dot: FC<DotProps> = ({ colorAccent, size = 8, color = "blue" }) =>
 		</div>
 	)
 }
+
+Dot.displayName = "Dot"

package/components/Dropdown/Dropdown.module.css

@@ -5,6 +5,11 @@
 	user-select: none;
 }
 
+.dropdownOpen [data-ui-component="Icon"] {
+	transition: transform 96ms ease-in-out;
+	transform: rotate(180deg);
+}
+
 .dropdownDisabled {
 	cursor: not-allowed;
 	pointer-events: none;
@@ -48,30 +53,40 @@
 	position: absolute;
 	z-index: var(--z-index-8);
 
+	display: none;
 	min-width: 240px;
 	opacity: 0;
 
 	transition:
+		display 96ms ease-in-out allow-discrete,
 		transform 96ms ease-in-out,
 		opacity 96ms ease-in-out;
 	pointer-events: none;
 }
 
-.dropdown__nav.dropdown__navActive {
-	opacity: 1 !important;
+.dropdown__navActive {
+	display: block;
+	opacity: 1;
 
-	transform: translateY(0) !important;
+	transform: translateY(0);
 
 	pointer-events: all;
-}
 
-@keyframes dropdownFade {
-	0% {
+	@starting-style {
 		opacity: 0;
-		/* transform: translateY(-8px); */
 	}
-	100% {
-		opacity: 1;
-		/* transform: translateY(0); */
+}
+
+.dropdownBottomLeft .dropdown__navActive,
+.dropdownBottomRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(-6px);
+	}
+}
+
+.dropdownTopLeft .dropdown__navActive,
+.dropdownTopRight .dropdown__navActive {
+	@starting-style {
+		transform: translateY(6px);
 	}
 }

package/components/Dropdown/Dropdown.tsx

@@ -1,22 +1,12 @@
 "use client"
 
-import {
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-	cloneElement,
-	Children as ReactChildren,
-	type ReactElement,
-	type FC,
-} from "react"
+import { useEffect, useMemo, useState, useRef, type FC } from "react"
 import { ANIMATION_FAST } from "../../constants/animations"
 import { getClasses } from "@heliosgraphics/utils"
 import { ResultList } from "../shared/ResultList"
 import styles from "./Dropdown.module.css"
-import type { MouseEvent, ReactNode } from "react"
+import type { KeyboardEvent, MouseEvent } from "react"
 import type { DropdownProps } from "./Dropdown.types"
-import type { HeliosIconType } from "../../types/icons"
 
 export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
 	const hoverStateRef = useRef<boolean>(false)
@@ -55,6 +45,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		[styles.dropdownBottomRight]: position === "bottom-right",
 		[styles.dropdownTopLeft]: position === "top-left",
 		[styles.dropdownTopRight]: position === "top-right",
+		[styles.dropdownOpen]: isVisible,
 	})
 
 	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => {
@@ -72,23 +63,16 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		}, ANIMATION_FAST)
 	}
 
-	const renderChildren = ReactChildren.map(
-		children as ReactElement<{ children: ReactNode; icon: HeliosIconType }>,
-		(child: ReactElement<{ children: ReactNode; icon: HeliosIconType }>) => {
-			const caretProps = {
-				...(child?.props?.icon === "caret-down" && isVisible && { icon: "caret-up" as HeliosIconType }),
-				...(child?.props?.icon === "chevron-down" && isVisible && { icon: "chevron-up" as HeliosIconType }),
-			}
-
-			return cloneElement(child, { ...child.props, ...caretProps })
-		},
-	)
-
 	const onSetVisible = (): void => setVisible(!isVisible)
 
-	const navClasses: string = getClasses(styles.dropdown__nav, {
-		[styles.dropdown__navActive]: isVisible,
-	})
+	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault()
+			onSetVisible()
+		}
+	}
+
+	const navClasses: string = getClasses(styles.dropdown__nav, isVisible && styles.dropdown__navActive)
 
 	const itemsWithClose = useMemo(
 		() =>
@@ -108,8 +92,15 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 
 	return (
 		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} data-ui-component="Dropdown">
-			<div onClick={onSetVisible} aria-expanded={isVisible} aria-haspopup="listbox">
-				{renderChildren}
+			<div
+				role="button"
+				tabIndex={0}
+				onClick={onSetVisible}
+				onKeyDown={onKeyDown}
+				aria-expanded={isVisible}
+				aria-haspopup="listbox"
+			>
+				{children}
 			</div>
 			<nav
 				className={navClasses}
@@ -122,3 +113,5 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		</div>
 	)
 }
+
+Dropdown.displayName = "Dropdown"

package/components/Fieldset/Fieldset.tsx

@@ -10,3 +10,5 @@ export const Fieldset: FC<FieldsetProps> = ({ children, legend }) => {
 		</fieldset>
 	)
 }
+
+Fieldset.displayName = "Fieldset"

package/components/Flex/Flex.meta.ts

@@ -25,6 +25,7 @@ export const meta: HeliosAttributeMeta<FlexBaseProps> = {
 	isBetween: { type: "boolean", isOptional: true },
 	isCentered: { type: "boolean", isOptional: true },
 	isColumn: { type: "boolean", isOptional: true },
+	isFullHeight: { type: "boolean", isOptional: true },
 	isFullWidth: { type: "boolean", isOptional: true },
 	isInline: { type: "boolean", isOptional: true },
 	isNoWrap: { type: "boolean", isOptional: true },

package/components/Flex/Flex.tsx

@@ -1,14 +1,35 @@
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
+import type { FC, KeyboardEvent } from "react"
 
-export const Flex = (props: FlexProps) => {
+export const Flex: FC<FlexProps> = (props) => {
 	const { ref, ...restProps } = props
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+		if (restProps.onClick && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault()
+			restProps.onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+		}
+	}
+
+	const a11yProps = restProps.onClick
+		? { role: (restProps.role ?? "button") as string, tabIndex: restProps.tabIndex ?? 0, onKeyDown: handleKeyDown }
+		: {}
+
 	return (
-		<div {...safeProps} className={flexClasses} onClick={restProps.onClick} ref={ref}>
+		<div
+			{...safeProps}
+			className={flexClasses}
+			onClick={restProps.onClick}
+			ref={ref}
+			data-ui-component="Flex"
+			{...a11yProps}
+		>
 			{restProps.children}
 		</div>
 	)
 }
+
+Flex.displayName = "Flex"

package/components/Flex/Flex.types.ts

@@ -14,6 +14,7 @@ export interface FlexBaseProps {
 	isBetween?: boolean
 	isCentered?: boolean
 	isColumn?: boolean
+	isFullHeight?: boolean
 	isFullWidth?: boolean
 	isInline?: boolean
 	isNoWrap?: boolean

package/components/Flex/Flex.utils.spec.ts

@@ -40,6 +40,9 @@ describe("getFlexUtility", () => {
 	it("Generates without duplicated classes", () =>
 		expect(getFlexUtility(MOCK_FLEX_DUPLICATE)).toEqual(MOCK_FLEX_DUPLICATE_CLASSES))
 
+	it("Generates xAlign center class", () =>
+		expect(getFlexUtility({ children: null, xAlign: "center" })).toEqual("flex flex-x-center"))
+
 	const MOCK_FLEX_RESPONSIVE_CLASSES = `flex mobile:p-0 tablet:p-8 p-16`
 	const MOCK_FLEX_RESPONSIVE: FlexProps = {
 		children: null,
@@ -60,7 +63,7 @@ describe("getFlexUtility", () => {
 })
 
 describe("getSafeFlexProps", () => {
-	const MOCK_FLEX_ATTRIBUTES: unknown = {
+	const MOCK_FLEX_ATTRIBUTES: Record<string, unknown> = {
 		children: null,
 		className: "xo",
 		draggable: true,

package/components/Flex/Flex.utils.ts

@@ -21,10 +21,12 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	if (props.yAlign === "start") flexClasses.add("align-flex-start")
 	if (props.yAlign === "end") flexClasses.add("align-flex-end")
 	if (props.xAlign === "start") flexClasses.add("justify-flex-start")
+	if (props.xAlign === "center") flexClasses.add("flex-x-center")
 	if (props.xAlign === "end") flexClasses.add("justify-flex-end")
 	if (props.isBetween) flexClasses.add("space-between")
 	if (props.isAround) flexClasses.add("space-around")
 	if (props.onClick) flexClasses.add("cursor-pointer")
+	if (props.isFullHeight) flexClasses.add("hp-100")
 	if (props.isFullWidth) flexClasses.add("wp-100")
 	if (props.isNoWrap) flexClasses.add("nowrap")
 	if (props.elevation === "small") flexClasses.add("elevation-sm")
@@ -128,7 +130,7 @@ export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
+export const getSafeFlexProps = (props: Record<string, any>): Record<string, unknown> => {
 	const {
 		gap: _gap,
 		isAround: _isAround,
@@ -136,6 +138,7 @@ export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
 		isCentered: _isCentered,
 		isColumn: _isColumn,
 		isColumnCentered: _isColumnCentered,
+		isFullHeight: _isFullHeight,
 		isFullWidth: _isFullWidth,
 		isInline: _isInline,
 		isStretch: _isStretch,

package/components/Grid/Grid.tsx

@@ -13,3 +13,5 @@ export const Grid: FC<GridProps> = ({ columns, children }) => {
 		</div>
 	)
 }
+
+Grid.displayName = "Grid"

package/components/Heading/Heading.meta.ts

@@ -15,4 +15,9 @@ export const meta: HeliosAttributeMeta<HeadingBaseProps> = {
 	level: {
 		type: "0 | 1 | 2 | 3 | 4 | 5 | 6",
 	},
+	lineHeight: {
+		type: "number",
+		isOptional: true,
+		description: "Overrides the default line-height",
+	},
 }

package/components/Heading/Heading.tsx

@@ -12,7 +12,7 @@ import type { HeadingProps } from "./Heading.types"
 import type { FC, CSSProperties } from "react"
 
 export const Heading: FC<HeadingProps> = (props) => {
-	const { level, lineClamp, style, className, ...rest } = props
+	const { level, lineClamp, lineHeight, style, className, ...rest } = props
 
 	const headingClasses: string = getClasses(className, styles.heading, {
 		[styles.headingPrimary]: props.emphasis === "primary",
@@ -32,8 +32,12 @@ export const Heading: FC<HeadingProps> = (props) => {
 			}
 		: undefined
 
+	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
+
 	const mergedStyle: CSSProperties | undefined =
-		style || lineClampStyle ? { ...(style || {}), ...(lineClampStyle || {}) } : undefined
+		style || lineClampStyle || lineHeightStyle
+			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
+			: undefined
 
 	const allProps: Omit<HeadingProps, "level"> = {
 		...rest,
@@ -44,20 +48,22 @@ export const Heading: FC<HeadingProps> = (props) => {
 
 	switch (level) {
 		case 0:
-			return <H0 {...allProps} />
+			return <H0 {...allProps} data-ui-component="Heading" />
 		case 1:
-			return <H1 {...allProps} />
+			return <H1 {...allProps} data-ui-component="Heading" />
 		case 2:
-			return <H2 {...allProps} />
+			return <H2 {...allProps} data-ui-component="Heading" />
 		case 3:
-			return <H3 {...allProps} />
+			return <H3 {...allProps} data-ui-component="Heading" />
 		case 4:
-			return <H4 {...allProps} />
+			return <H4 {...allProps} data-ui-component="Heading" />
 		case 5:
-			return <H5 {...allProps} />
+			return <H5 {...allProps} data-ui-component="Heading" />
 		case 6:
-			return <H6 {...allProps} />
+			return <H6 {...allProps} data-ui-component="Heading" />
 		default:
 			return null
 	}
 }
+
+Heading.displayName = "Heading"

package/components/Heading/Heading.types.ts

@@ -3,6 +3,7 @@ import type { TextBaseProps } from "../Text/Text.types"
 
 export interface HeadingBaseProps {
 	level: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	lineHeight?: number
 }
 
 export type HeadingProps = HeadingBaseProps & Omit<TextBaseProps, "type"> & HTMLAttributes<HTMLHeadingElement>

package/components/Heading/components/H0/H0.tsx

@@ -8,3 +8,5 @@ export const H0: FC<H0Props> = (props) => {
 
 	return <h1 {...props} className={h0Classes} data-ui-component="Heading.H0" />
 }
+
+H0.displayName = "H0"

package/components/Heading/components/H1/H1.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H1Props } from "./H1.types"
 
 export const H1: FC<H1Props> = (props) => {
-	return <h1 {...props} className={`h1 ${props.className}`} data-ui-component="Heading.H1" />
+	return <h1 {...props} className={getClasses("h1", props.className)} data-ui-component="Heading.H1" />
 }
+
+H1.displayName = "H1"

package/components/Heading/components/H2/H2.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H2Props } from "./H2.types"
 
 export const H2: FC<H2Props> = (props) => {
-	return <h2 {...props} className={`h2 ${props.className}`} data-ui-component="Heading.H2" />
+	return <h2 {...props} className={getClasses("h2", props.className)} data-ui-component="Heading.H2" />
 }
+
+H2.displayName = "H2"

package/components/Heading/components/H3/H3.tsx

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { H3Props } from "./H3.types"
 
 export const H3: FC<H3Props> = (props) => {
-	return <h3 {...props} className={`h3 ${props.className}`} data-ui-component="Heading.H3" />
+	return <h3 {...props} className={getClasses("h3", props.className)} data-ui-component="Heading.H3" />
 }
+
+H3.displayName = "H3"