@heliosgraphics/ui 2.0.0-alpha.88 → 2.0.0-alpha.90

package/components/Details/Details.tsx

@@ -6,7 +6,7 @@ import type { FC } from "react"
 
 export const Details: FC<DetailsProps> = ({ children, label, isOpen }) => {
 	return (
-		<details className={styles.details} open={isOpen}>
+		<details className={styles.details} open={isOpen} data-ui-component="Details">
 			<summary className="flex space-between flex-y-center">
 				<Text type="small" fontWeight="medium">
 					{label}

package/components/Dialog/Dialog.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { useEffect, useRef, type FC, MouseEvent } from "react"
+import { useEffect, useRef, type FC, type MouseEvent } from "react"
 import styles from "./Dialog.module.css"
 import { Button } from "../Button"
 import { ButtonGroup } from "../ButtonGroup"
 import { Heading } from "../Heading"
 import { Flex } from "../Flex"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import type { DialogProps } from "./Dialog.types"
 
 const ATTRIBUTE_SCROLL = "data-scroll" as const
@@ -14,6 +14,7 @@ const POSITION_FIXED_CLASS = "fixed" as const
 
 export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isCentered, onClose, noPadding }) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
+	const triggerRef = useRef<Element | null>(null)
 
 	const resetScroll = (): void => {
 		globalThis?.requestAnimationFrame(() => {
@@ -35,15 +36,20 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 
 	useEffect(() => {
 		return (): void => {
-			resetDocumentStyle(0)
+			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
+			const scrollPosition: number = parseInt(localPos) ?? 0
+
+			resetDocumentStyle(scrollPosition)
 			resetScroll()
 		}
-	}, [title])
+	}, [title, isOpen])
 
 	useEffect(() => {
 		dialogRef?.current?.scrollTo?.(0, 0)
 
 		if (isOpen) {
+			triggerRef.current = document.activeElement
+
 			const localPosition: number = document?.documentElement?.scrollTop ?? 0
 
 			document.body.classList.add(POSITION_FIXED_CLASS)
@@ -51,6 +57,25 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 			document.body.setAttribute(ATTRIBUTE_SCROLL, localPosition.toString())
 
 			dialogRef?.current?.showModal?.()
+
+			const dialog = dialogRef.current
+
+			const handleCancel = (event: Event): void => {
+				event.preventDefault()
+				onClose()
+			}
+
+			dialog?.addEventListener("cancel", handleCancel)
+
+			return (): void => {
+				dialog?.removeEventListener("cancel", handleCancel)
+
+				const trigger = triggerRef.current
+				if (trigger && trigger instanceof HTMLElement) {
+					trigger.focus()
+				}
+				triggerRef.current = null
+			}
 		} else if (!dialogRef?.current) {
 			const localPos: string = document?.body?.getAttribute(ATTRIBUTE_SCROLL) ?? "0"
 			const scrollPosition: number = parseInt(localPos) ?? 0
@@ -61,6 +86,8 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 
 			dialogRef?.current?.close?.()
 		}
+
+		return undefined
 	}, [isOpen])
 
 	if (!isOpen) return null
@@ -81,7 +108,7 @@ export const Dialog: FC<DialogProps> = ({ title, children, isNarrow, isOpen, isC
 	})
 
 	return (
-		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose}>
+		<dialog ref={dialogRef} className={dialogClasses} onClick={onDialogClose} data-ui-component="Dialog">
 			{!!title && (
 				<Flex isBetween={true} isYCentered={true} padding={8} className={dialogFlexClasses}>
 					<Heading level={5} fontWeight="medium">

package/components/Donut/Donut.module.css

@@ -4,5 +4,5 @@
 }
 
 .donut .donut__svg circle {
-	transition: all var(--speed-sm) var(--ease-in-out-sine);
+	transition: stroke-dashoffset var(--speed-sm) var(--ease-in-out-sine);
 }

package/components/Donut/Donut.tsx

@@ -18,7 +18,12 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 	}
 
 	return (
-		<Flex style={donutContainerStyle} className={`${styles.donut} relative`} isCentered={true}>
+		<Flex
+			style={donutContainerStyle}
+			className={`${styles.donut} relative`}
+			isCentered={true}
+			data-ui-component="Donut"
+		>
 			<Flex className="absolute top-0 left-0 z-50" style={donutContainerStyle} isCentered={true}>
 				{children}
 			</Flex>
@@ -28,6 +33,8 @@ export const Donut: FC<DonutProps> = ({ children, size, percentage = 0, color })
 				viewBox={`0 0 ${size} ${size}`}
 				height={size}
 				width={size}
+				role="img"
+				aria-label={`Donut chart: ${percentage}%`}
 			>
 				<circle
 					fill="none"

package/components/Dot/Dot.tsx

@@ -25,7 +25,7 @@ export const Dot: FC<DotProps> = ({ colorAccent, size = 8, color = "blue" }) =>
 	}
 
 	return (
-		<div className={styles.dot} style={dotStyle}>
+		<div className={styles.dot} style={dotStyle} data-ui-component="Dot">
 			<svg width="100%" height="100%" viewBox="0 0 20 20" aria-hidden={true}>
 				{colorAccent ? (
 					<>

package/components/Dropdown/Dropdown.tsx

@@ -1,18 +1,27 @@
 "use client"
 
-import { useEffect, useState, useRef, cloneElement, Children as ReactChildren, type ReactElement, type FC } from "react"
+import {
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+	cloneElement,
+	Children as ReactChildren,
+	type ReactElement,
+	type FC,
+} from "react"
 import { ANIMATION_FAST } from "../../constants/animations"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { ResultList } from "../shared/ResultList"
 import styles from "./Dropdown.module.css"
 import type { MouseEvent, ReactNode } from "react"
 import type { DropdownProps } from "./Dropdown.types"
 import type { HeliosIconType } from "../../types/icons"
 
-// NOTE @03b8 instead of passing ref, should use https://www.w3.org/TR/css-anchor-position-1/ when ready
 export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, position = "bottom-left" }) => {
 	const hoverStateRef = useRef<boolean>(false)
 	const resultListRef = useRef<HTMLOListElement | null>(null)
+	const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	const [isVisible, setVisible] = useState<boolean>(false)
 	const [isHovering, setHovering] = useState<boolean>(false)
@@ -24,6 +33,12 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		}
 	}, [isVisible, items?.length])
 
+	useEffect(() => {
+		return (): void => {
+			if (hideTimeoutRef.current) globalThis.clearTimeout(hideTimeoutRef.current)
+		}
+	}, [])
+
 	hoverStateRef.current = isHovering
 
 	if (isDisabled) {
@@ -37,11 +52,19 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		[styles.dropdownTopRight]: position === "top-right",
 	})
 
-	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => setHovering(true)
-	const mouseLeave = (_event: MouseEvent<HTMLDivElement>): ReturnType<typeof setTimeout> => {
+	const mouseEnter = (_event: MouseEvent<HTMLDivElement>): void => {
+		if (hideTimeoutRef.current) {
+			globalThis.clearTimeout(hideTimeoutRef.current)
+			hideTimeoutRef.current = null
+		}
+		setHovering(true)
+	}
+	const mouseLeave = (_event: MouseEvent<HTMLDivElement>): void => {
 		setHovering(false)
-
-		return setTimeout(() => !hoverStateRef.current && setVisible(false), ANIMATION_FAST)
+		hideTimeoutRef.current = setTimeout(() => {
+			if (!hoverStateRef.current) setVisible(false)
+			hideTimeoutRef.current = null
+		}, ANIMATION_FAST)
 	}
 
 	const renderChildren = ReactChildren.map(
@@ -62,20 +85,24 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 		[styles.dropdown__navActive]: isVisible,
 	})
 
-	const itemsWithClose = items?.map((item) => {
-		if (item.isDisabled) return item
-
-		return {
-			...item,
-			onClick: (event: MouseEvent<HTMLElement>): void => {
-				item.onClick?.(event)
-				setVisible(false)
-			},
-		}
-	})
+	const itemsWithClose = useMemo(
+		() =>
+			items?.map((item) => {
+				if (item.isDisabled) return item
+
+				return {
+					...item,
+					onClick: (event: MouseEvent<HTMLElement>): void => {
+						item.onClick?.(event)
+						setVisible(false)
+					},
+				}
+			}),
+		[items],
+	)
 
 	return (
-		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
+		<div className={dropdownClasses} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} data-ui-component="Dropdown">
 			<div onClick={onSetVisible} aria-expanded={isVisible} aria-haspopup="listbox">
 				{renderChildren}
 			</div>

package/components/Fieldset/Fieldset.tsx

@@ -4,7 +4,7 @@ import type { FieldsetProps } from "./Fieldset.types"
 
 export const Fieldset: FC<FieldsetProps> = ({ children, legend }) => {
 	return (
-		<fieldset className={styles.fieldset}>
+		<fieldset className={styles.fieldset} data-ui-component="Fieldset">
 			<legend>{legend}</legend>
 			{children}
 		</fieldset>

package/components/Flex/Flex.tsx

@@ -1,14 +1,16 @@
-import { forwardRef, type ForwardedRef } from "react"
+import { forwardRef, memo, type ForwardedRef } from "react"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
 
-export const Flex = forwardRef<HTMLDivElement, FlexProps>((props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
-	const flexClasses: string = getFlexUtility(props)
-	const safeProps = getSafeFlexProps(props)
+export const Flex = memo(
+	forwardRef<HTMLDivElement, FlexProps>((props: FlexProps, ref: ForwardedRef<HTMLDivElement>) => {
+		const flexClasses: string = getFlexUtility(props)
+		const safeProps = getSafeFlexProps(props)
 
-	return (
-		<div {...safeProps} className={flexClasses} onClick={props.onClick} ref={ref}>
-			{props.children}
-		</div>
-	)
-})
+		return (
+			<div {...safeProps} className={flexClasses} onClick={props.onClick} ref={ref}>
+				{props.children}
+			</div>
+		)
+	}),
+)

package/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
-import { GridProps } from "./Grid.types"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { GridProps } from "./Grid.types"
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 
 export const Grid: FC<GridProps> = ({ columns, children }) => {
@@ -7,5 +7,9 @@ export const Grid: FC<GridProps> = ({ columns, children }) => {
 		[`grid-cols-${columns}`]: columns,
 	})
 
-	return <div className={gridClasses}>{children}</div>
+	return (
+		<div className={gridClasses} data-ui-component="Grid">
+			{children}
+		</div>
+	)
 }

package/components/Heading/Heading.tsx

@@ -1,5 +1,5 @@
 import { getTypographyUtility } from "../Text/Text.utils"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { H0 } from "./components/H0"
 import { H1 } from "./components/H1"
 import { H2 } from "./components/H2"
@@ -9,10 +9,12 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import type { FC, CSSProperties } from "react"
+import { memo, type FC, type CSSProperties } from "react"
 
-export const Heading: FC<HeadingProps> = (props) => {
-	const headingClasses: string = getClasses(props.className, styles.heading, {
+export const Heading: FC<HeadingProps> = memo((props) => {
+	const { level, lineClamp, style, className, ...rest } = props
+
+	const headingClasses: string = getClasses(className, styles.heading, {
 		[styles.headingPrimary]: props.emphasis === "primary",
 		[styles.headingSecondary]: props.emphasis === "secondary",
 		[styles.headingTertiary]: props.emphasis === "tertiary",
@@ -21,23 +23,26 @@ export const Heading: FC<HeadingProps> = (props) => {
 		...props,
 		className: headingClasses,
 	})
-	const lineClampStyle: CSSProperties | undefined = props.lineClamp
+	const lineClampStyle: CSSProperties | undefined = lineClamp
 		? {
 				display: "-webkit-box",
-				WebkitLineClamp: props.lineClamp,
+				WebkitLineClamp: lineClamp,
 				WebkitBoxOrient: "vertical",
 				overflow: "hidden",
 			}
 		: undefined
 
+	const mergedStyle: CSSProperties | undefined =
+		style || lineClampStyle ? { ...(style || {}), ...(lineClampStyle || {}) } : undefined
+
 	const allProps: Omit<HeadingProps, "level"> = {
-		onClick: props.onClick,
+		...rest,
 		children: props.children,
-		style: lineClampStyle,
+		style: mergedStyle,
 		className: utility,
 	}
 
-	switch (props.level) {
+	switch (level) {
 		case 0:
 			return <H0 {...allProps} />
 		case 1:
@@ -55,4 +60,4 @@ export const Heading: FC<HeadingProps> = (props) => {
 		default:
 			return null
 	}
-}
+})

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

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

package/components/Icon/Icon.tsx

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

package/components/Input/Input.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useId, type FC } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Button } from "../Button"
 import { ButtonGroup } from "../ButtonGroup"
 import { Loading } from "../Loading"
@@ -22,10 +22,14 @@ export const Input: FC<InputProps> = ({
 	isLoading,
 	isRequired,
 	label,
+	maxLength,
+	name,
 	onBlur,
 	onChange,
 	onClear,
 	onFocus,
+	onKeyDown,
+	onKeyUp,
 	placeholder,
 	results,
 	showResults,
@@ -33,6 +37,7 @@ export const Input: FC<InputProps> = ({
 	value,
 }) => {
 	const htmlFor: string = useId()
+	const helperId: string = `${htmlFor}-helper`
 
 	const filteredItems: Array<ResultItem> =
 		results
@@ -52,7 +57,7 @@ export const Input: FC<InputProps> = ({
 	})
 
 	return (
-		<div className={inputClasses}>
+		<div className={inputClasses} data-ui-component="Input">
 			<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
 			<Flex className="grow-1">
 				{onClear && !!value && (
@@ -74,13 +79,18 @@ export const Input: FC<InputProps> = ({
 					autoComplete={autoComplete}
 					autoFocus={autoFocus}
 					id={htmlFor}
+					maxLength={maxLength}
+					name={name}
 					onBlur={onBlur}
 					type={type}
 					onChange={onChange}
 					onFocus={onFocus}
+					onKeyDown={onKeyDown}
+					onKeyUp={onKeyUp}
 					placeholder={placeholder}
 					required={isRequired}
 					value={value}
+					aria-describedby={helperText ? helperId : undefined}
 				/>
 				{isLoading && (
 					<div className={styles.input__loading}>
@@ -94,7 +104,7 @@ export const Input: FC<InputProps> = ({
 				</div>
 			)}
 			{!!helperText && (
-				<Text type="tiny" emphasis="tertiary" className={styles.input__helper}>
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
 					{helperText}
 				</Text>
 			)}

package/components/Layout/components/LayoutAside/LayoutAside.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { useLayoutContext } from "../../../../hooks/useLayoutContext"
 import styles from "./LayoutAside.module.css"
 import type { LayoutAsideProps } from "./LayoutAside.types"

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideContent.module.css"
 import type { LayoutAsideContentProps } from "./LayoutAsideContent.types"

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideFooter.module.css"
 import type { LayoutAsideFooterProps } from "./LayoutAsideFooter.types"

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react"
+import type { FC } from "react"
 import { Button } from "../../../../../Button/Button"
 import { ButtonGroup } from "../../../../../ButtonGroup/ButtonGroup"
 import { useLayoutContext } from "../../../../../../hooks/useLayoutContext"

package/components/Layout/components/LayoutMain/LayoutMain.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
 import styles from "./LayoutMain.module.css"
 import type { FC } from "react"

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./LayoutMainContent.module.css"
 import { useLayoutEffect, useRef, type FC } from "react"
 import {

package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx

@@ -1,5 +1,5 @@
 import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./LayoutNavigation.module.css"
 import type { FC } from "react"
 import type { LayoutNavigationProps } from "./LayoutNavigation.types"

package/components/Loading/Loading.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Loading.module.css"
 import { memo, type FC } from "react"
 import type { LoadingProps } from "./Loading.types"
@@ -18,7 +18,15 @@ export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) =>
 	})
 
 	return (
-		<svg className={loadingClasses} xmlns="http://www.w3.org/2000/svg" height={size + 4} width={size + 4}>
+		<svg
+			className={loadingClasses}
+			xmlns="http://www.w3.org/2000/svg"
+			height={size + 4}
+			width={size + 4}
+			role="status"
+			aria-label="Loading"
+			data-ui-component="Loading"
+		>
 			<circle
 				fill="none"
 				strokeWidth={4}

package/components/Markdown/Markdown.meta.ts

@@ -11,11 +11,18 @@ export const meta: HeliosAttributeMeta<MarkdownProps> = {
 	],
 	_status: "nominal",
 	_category: "content",
+	children: {
+		type: "ReactNode",
+		isOptional: true,
+		description: "Children to render inside the markdown wrapper",
+	},
 	isNonSelectable: {
 		type: "boolean",
 		isOptional: true,
 	},
 	text: {
 		type: "string",
+		isOptional: true,
+		description: "Markdown string to render as HTML",
 	},
 }

package/components/Markdown/Markdown.tsx

@@ -1,16 +1,25 @@
-import { md } from "./Markdown.utils"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { renderMarkdown } from "./Markdown.utils"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Markdown.module.css"
 import type { FC } from "react"
 import type { MarkdownProps } from "./Markdown.types"
 
-export const Markdown: FC<MarkdownProps> = ({ text, isNonSelectable }) => {
-	if (!text) return null
+export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable }) => {
+	if (!text && !children) return null
 
-	const innerHTML = { __html: md.render(text) }
 	const markdownClasses: string = getClasses(styles.markdown, {
 		[styles.markdownNonSelectable]: isNonSelectable,
 	})
 
-	return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML}></div>
+	if (text) {
+		const innerHTML = { __html: renderMarkdown(text) }
+
+		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
+	}
+
+	return (
+		<div className={markdownClasses} data-ui-component="Markdown">
+			{children}
+		</div>
+	)
 }

package/components/Markdown/Markdown.types.ts

@@ -1,4 +1,7 @@
+import type { ReactNode } from "react"
+
 export interface MarkdownProps {
+	children?: ReactNode
 	isNonSelectable?: boolean
-	text: string
+	text?: string
 }

package/components/Markdown/Markdown.utils.spec.ts

@@ -1,11 +1,11 @@
 import { it, describe, expect } from "vitest"
-import { md } from "./Markdown.utils"
+import { renderMarkdown } from "./Markdown.utils"
 
 describe("markdown", () => {
-	describe("md", () => {
+	describe("renderMarkdown", () => {
 		const SAMPLE = `Hello\n\nHey`
 		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
 
-		it("Returns", () => expect(md.render(SAMPLE)).toEqual(SAMPLE_OUTPUT))
+		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
 	})
 })

package/components/Markdown/Markdown.utils.ts

@@ -1,8 +1,10 @@
-import markdownIt from "markdown-it"
+import { Marked } from "marked"
+import { markedXhtml } from "marked-xhtml"
+import markedLinkifyIt from "marked-linkify-it"
 
-export const md = markdownIt({
-	breaks: true,
-	html: true,
-	xhtmlOut: true,
-	linkify: true,
-})
+const marked = new Marked({ breaks: true, gfm: true })
+
+marked.use(markedXhtml())
+marked.use(markedLinkifyIt())
+
+export const renderMarkdown = (text: string): string => marked.parse(text) as string

package/components/Masonry/Masonry.meta.ts

@@ -12,7 +12,7 @@ export const meta: HeliosAttributeMeta<MasonryBaseProps> = {
 	],
 	_status: "experimental",
 	_category: "layout",
-	brakepoints: {
+	breakpoints: {
 		type: "[number, number, number]",
 	},
 	columns: {