@heliosgraphics/ui 2.0.0-alpha.76 → 2.0.0-alpha.78

package/components/Menu/components/MenuCategory/MenuCategory.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { MenuCategoryBaseProps } from "./MenuCategory.types"
 
 export const meta: HeliosAttributeMeta<MenuCategoryBaseProps> = {

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

@@ -1,14 +1,30 @@
 "use client"
 
-import { useEffect, useState, type FC } from "react"
-import { Flex, Icon, Text } from "../../../.."
+import { useState, type FC } from "react"
+import { Flex } from "../../../Flex"
+import { Icon } from "../../../Icon"
+import { Text } from "../../../Text"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./MenuCategory.module.css"
 import type { MenuCategoryProps } from "./MenuCategory.types"
 
-export const MenuCategory: FC<MenuCategoryProps> = ({ category, children, isFolder, isOpen: isIncomingOpen }) => {
-	const [isOpen, setOpen] = useState<boolean>(!!isIncomingOpen)
-	const onToggle = (): void => setOpen(!isOpen)
+export const MenuCategory: FC<MenuCategoryProps> = ({
+	category,
+	children,
+	isFolder,
+	isOpen: controlledIsOpen,
+	isInitiallyClosed,
+}) => {
+	const [localIsOpen, setLocalIsOpen] = useState<boolean>(!isInitiallyClosed)
+
+	const isControlled: boolean = controlledIsOpen !== undefined
+	const isOpen: boolean = isControlled ? !!controlledIsOpen : localIsOpen
+
+	const onToggle = (): void => {
+		if (!isControlled) {
+			setLocalIsOpen((prev) => !prev)
+		}
+	}
 
 	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
 		[styles.menuCategoryFolder]: category,
@@ -26,10 +42,6 @@ export const MenuCategory: FC<MenuCategoryProps> = ({ category, children, isFold
 
 	const showHeader: boolean = Boolean(category || isFolder)
 
-	useEffect(() => {
-		setOpen(!!isIncomingOpen)
-	}, [isIncomingOpen])
-
 	return (
 		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
 			{showHeader && (

package/components/Menu/components/MenuFilter/MenuFilter.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { MenuFilterProps } from "./MenuFilter.types"
 
 export const meta: HeliosAttributeMeta<MenuFilterProps> = {

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

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

package/components/Menu/components/MenuItem/MenuItem.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { MenuItemProps } from "./MenuItem.types"
 
 export const meta: HeliosAttributeMeta<MenuItemProps> = {

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

@@ -1,7 +1,11 @@
 "use client"
 
 import { FC } from "react"
-import { Flex, Pill, Icon, Text, useLayoutContext } from "../../../.."
+import { Flex } from "../../../Flex"
+import { Pill } from "../../../Pill"
+import { Icon } from "../../../Icon"
+import { Text } from "../../../Text"
+import { useLayoutContext } from "../../../../hooks/useLayoutContext"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./MenuItem.module.css"
 import type { MenuItemProps } from "./MenuItem.types"

package/components/Menu/components/MenuItem/MenuItem.types.ts

@@ -1,4 +1,5 @@
-import type { HeliosColorType, HeliosIconType } from "../../../.."
+import type { HeliosColorType } from "../../../../types/colors"
+import type { HeliosIconType } from "../../../../types/icons"
 
 export interface MenuItemProps {
 	icon?: HeliosIconType

package/components/Overlay/Overlay.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { OverlayBaseProps } from "./Overlay.types"
 
 export const meta: HeliosAttributeMeta<OverlayBaseProps> = {

package/components/Pie/Pie.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { PieProps } from "./Pie.types"
 
 export const meta: HeliosAttributeMeta<PieProps> = {

package/components/Pie/Pie.types.ts

@@ -1,4 +1,4 @@
-import type { HeliosColorType } from "../.."
+import type { HeliosColorType } from "../../types/colors"
 
 export interface PieItem {
 	name?: string

package/components/Pill/Pill.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { PillProps } from "./Pill.types"
 
 export const meta: HeliosAttributeMeta<PillProps> = {

package/components/Pill/Pill.tsx

@@ -1,8 +1,10 @@
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { getColorClasses } from "../../utils/colors"
-import { Flex, Text, Icon } from "../.."
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import { Icon } from "../Icon"
 import styles from "./Pill.module.css"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 import type { PillProps } from "./Pill.types"
 
 const PILL_ICON_SIZE: Record<string, number> = {
@@ -11,43 +13,45 @@ const PILL_ICON_SIZE: Record<string, number> = {
 	normal: 24,
 }
 
-export const Pill: FC<PillProps> = ({
-	appearance = "light",
-	color = "gray",
-	className,
-	icon,
-	isLabelHidden,
-	isMono,
-	isRounded,
-	label,
-	onClick,
-	size = "normal",
-}) => {
-	const pillColorClasses: Array<string> = getColorClasses(color, appearance)
-	const pillClasses = getClasses(styles.pill, "non-selectable break-word", ...pillColorClasses, className, {
-		[styles.pillRounded]: isRounded,
-		[`radius-md`]: !isRounded,
+export const Pill: FC<PillProps> = memo(
+	({
+		appearance = "light",
+		color = "gray",
+		className,
+		icon,
+		isLabelHidden,
+		isMono,
+		isRounded,
+		label,
+		onClick,
+		size = "normal",
+	}) => {
+		const pillColorClasses: Array<string> = getColorClasses(color, appearance)
+		const pillClasses = getClasses(styles.pill, "non-selectable break-word", ...pillColorClasses, className, {
+			[styles.pillRounded]: isRounded,
+			[`radius-md`]: !isRounded,
 
-		[styles.pillLight]: appearance === "light",
+			[styles.pillLight]: appearance === "light",
 
-		[styles.pillNormal]: !size || size === "normal",
-		[styles.pillSmall]: size === "small",
-		[styles.pillTiny]: size === "tiny",
+			[styles.pillNormal]: !size || size === "normal",
+			[styles.pillSmall]: size === "small",
+			[styles.pillTiny]: size === "tiny",
 
-		[styles.pillIconOnly]: !!icon && isLabelHidden,
-	})
+			[styles.pillIconOnly]: !!icon && isLabelHidden,
+		})
 
-	const isSmall: boolean = size !== "normal"
-	const pillTextSize = isSmall ? "tiny" : "small"
+		const isSmall: boolean = size !== "normal"
+		const pillTextSize = isSmall ? "tiny" : "small"
 
-	return (
-		<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
-			{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
-			{!isLabelHidden && (
-				<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
-					{label}
-				</Text>
-			)}
-		</Flex>
-	)
-}
+		return (
+			<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
+				{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
+				{!isLabelHidden && (
+					<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
+						{label}
+					</Text>
+				)}
+			</Flex>
+		)
+	},
+)

package/components/Pill/Pill.types.ts

@@ -1,5 +1,7 @@
 import type { MouseEventHandler } from "react"
-import type { HeliosIconType, HeliosSizeType, HeliosColorType, HeliosAppearanceType } from "../.."
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosSizeType } from "../../types/scale"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
 
 export interface PillProps {
 	appearance?: HeliosAppearanceType

package/components/Placeholder/Placeholder.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { PlaceholderBaseProps } from "./Placeholder.types"
 
 export const meta: HeliosAttributeMeta<PlaceholderBaseProps> = {

package/components/Placeholder/Placeholder.tsx

@@ -1,4 +1,5 @@
-import { Flex, Text } from "../.."
+import { Flex } from "../Flex"
+import { Text } from "../Text"
 import styles from "./Placeholder.module.css"
 import type { PlaceholderProps } from "./Placeholder.types"
 import type { FC } from "react"

package/components/Progress/Progress.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { ProgressProps } from "./Progress.types"
 
 export const meta: HeliosAttributeMeta<ProgressProps> = {

package/components/Progress/Progress.types.ts

@@ -1,4 +1,4 @@
-import type { HeliosColorType } from "../.."
+import type { HeliosColorType } from "../../types/colors"
 
 export interface ProgressProps {
 	isSmall?: boolean

package/components/Radio/Radio.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { BaseRadioProps } from "./Radio.types"
 
 export const meta: HeliosAttributeMeta<BaseRadioProps> = {

package/components/Radio/Radio.tsx

@@ -3,7 +3,8 @@
 import { useId } from "react"
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { getColorClasses } from "../../utils/colors"
-import { Flex, Text } from "../.."
+import { Flex } from "../Flex"
+import { Text } from "../Text"
 import styles from "./Radio.module.css"
 import type { FC } from "react"
 import type { RadioProps } from "./Radio.types"

package/components/Segments/Segments.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SegmentsBaseProps } from "./Segments.types"
 
 export const meta: HeliosAttributeMeta<SegmentsBaseProps> = {

package/components/Segments/Segments.tsx

@@ -11,7 +11,7 @@ import {
 	cloneElement,
 	type ReactElement,
 } from "react"
-import { Flex } from "../.."
+import { Flex } from "../Flex"
 import styles from "./Segments.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { SegmentButton } from "./components/SegmentButton"

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

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
 export const meta: HeliosAttributeMeta<SegmentButtonProps> = {

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

@@ -1,8 +1,8 @@
 import styles from "./SegmentButton.module.css"
 import { forwardRef } from "react"
 import { getClasses } from "@heliosgraphics/utils"
-import { Icon } from "../../../.."
-import type { HeliosIconType } from "../../../.."
+import { Icon } from "../../../Icon"
+import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
 export const SegmentButton = forwardRef<HTMLButtonElement, SegmentButtonProps>(

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

@@ -1,4 +1,4 @@
-import type { HeliosIconType } from "../../../.."
+import type { HeliosIconType } from "../../../../types/icons"
 
 export interface SegmentButtonProps {
 	icon?: HeliosIconType

package/components/Select/Select.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SelectProps } from "./Select.types"
 
 export const meta: HeliosAttributeMeta<SelectProps> = {

package/components/Select/Select.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { Flex, Icon } from "../.."
+import { Flex } from "../Flex"
+import { Icon } from "../Icon"
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { useId, type FC } from "react"
 import { InputLabel } from "../shared/InputLabel"

package/components/Separator/Separator.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SeparatorProps } from "./Separator.types"
 
 export const SHARED_SEPARATOR_META: Partial<HeliosAttributeMeta<SeparatorProps>> = {

package/components/Separator/Separator.tsx

@@ -3,32 +3,27 @@ import { VerticalSeparator } from "./components/VerticalSeparator"
 import styles from "./Separator.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import type { SeparatorProps } from "./Separator.types"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 
-export const Separator: FC<SeparatorProps> = ({
-	className,
-	emphasis = "primary",
-	isVertical,
-	height,
-	lineStyle = "solid",
-	width,
-}) => {
-	const separatorClasses: string = getClasses(className, {
-		[styles.separatorPrimary]: emphasis === "primary",
-		[styles.separatorSecondary]: emphasis === "secondary",
-		[styles.separatorTertiary]: emphasis === "tertiary",
-	})
+export const Separator: FC<SeparatorProps> = memo(
+	({ className, emphasis = "primary", isVertical, height, lineStyle = "solid", width }) => {
+		const separatorClasses: string = getClasses(className, {
+			[styles.separatorPrimary]: emphasis === "primary",
+			[styles.separatorSecondary]: emphasis === "secondary",
+			[styles.separatorTertiary]: emphasis === "tertiary",
+		})
 
-	const separatorProps: SeparatorProps = {
-		className: separatorClasses,
-		emphasis,
-		...(isVertical !== undefined && { isVertical }),
-		...(height !== undefined && { height }),
-		lineStyle,
-		...(width !== undefined && { width }),
-	}
+		const separatorProps: SeparatorProps = {
+			className: separatorClasses,
+			emphasis,
+			...(isVertical !== undefined && { isVertical }),
+			...(height !== undefined && { height }),
+			lineStyle,
+			...(width !== undefined && { width }),
+		}
 
-	if (isVertical) return <VerticalSeparator {...separatorProps} />
+		if (isVertical) return <VerticalSeparator {...separatorProps} />
 
-	return <HorizontalSeparator {...separatorProps} />
-}
+		return <HorizontalSeparator {...separatorProps} />
+	},
+)

package/components/Separator/Separator.types.ts

@@ -1,4 +1,4 @@
-import type { HeliosEmphasisType } from "../.."
+import type { HeliosEmphasisType } from "../../types/intentions"
 
 export interface SeparatorProps {
 	className?: string

package/components/Separator/components/HRMarkup/HRMarkup.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { HRMarkupProps } from "./HRMarkup.types"
 import { SHARED_SEPARATOR_META } from "../../Separator.meta"
 

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { HorizontalSeparatorProps } from "./HorizontalSeparator.types"
 
 export const meta: HeliosAttributeMeta<HorizontalSeparatorProps> = {

package/components/Separator/components/VerticalSeparator/VerticalSeparator.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { VerticalSeparatorProps } from "./VerticalSeparator.types"
 
 export const meta: HeliosAttributeMeta<VerticalSeparatorProps> = {

package/components/Setup/Setup.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SetupProps } from "./Setup.types"
 
 export const meta: HeliosAttributeMeta<SetupProps> = {

package/components/Shimmer/Shimmer.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { ShimmerProps } from "./Shimmer.types"
 
 export const meta: HeliosAttributeMeta<ShimmerProps> = {

package/components/Slider/Slider.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SliderProps } from "./Slider.types"
 
 export const meta: HeliosAttributeMeta<SliderProps> = {

package/components/Spacer/Spacer.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { SpacerProps } from "./Spacer.types"
 
 export const meta: HeliosAttributeMeta<SpacerProps> = {

package/components/Spacer/Spacer.tsx

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

package/components/Table/Table.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TableBaseProps } from "./Table.types"
 
 export const meta: HeliosAttributeMeta<TableBaseProps> = {

package/components/Tabs/Tabs.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TabsProps } from "./Tabs.types"
 
 export const meta: HeliosAttributeMeta<TabsProps> = {

package/components/Tabs/Tabs.tsx

@@ -3,7 +3,7 @@
 import { useState, type FC } from "react"
 import { TabsProps } from "./Tabs.types"
 import styles from "./Tabs.module.css"
-import { Text } from "../.."
+import { Text } from "../Text"
 
 export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
 	const [active, setActive] = useState(activeNumber || 0)

package/components/Text/Text.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TextBaseProps } from "./Text.types"
 
 export const SHARED_TEXT_META: Partial<HeliosAttributeMeta<TextBaseProps>> = {

package/components/Text/Text.tsx

@@ -4,12 +4,12 @@ import { getTypographyUtility } from "./Text.utils"
 import { P } from "./components/P"
 import { Small } from "./components/Small"
 import { Tiny } from "./components/Tiny"
-import { type FC } from "react"
+import { memo, type FC } from "react"
 import styles from "./Text.module.css"
 import type { TextProps } from "./Text.types"
 import { Micro } from "./components/Micro"
 
-export const Text: FC<TextProps> = (props) => {
+export const Text: FC<TextProps> = memo((props) => {
 	const textClasses: string = getClasses(props.className, styles.text, {
 		[styles.textPrimary]: props.emphasis === "primary",
 		[styles.textSecondary]: props.emphasis === "secondary",
@@ -51,4 +51,4 @@ export const Text: FC<TextProps> = (props) => {
 		default:
 			return <Div {...baseTextProps} />
 	}
-}
+})

package/components/Text/Text.types.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "react"
-import type { HeliosEmphasisType } from "../.."
+import type { HeliosEmphasisType } from "../../types/intentions"
 
 export interface TextBaseProps {
 	emphasis?: HeliosEmphasisType

package/components/Text/components/Div/Div.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { DivProps } from "./Div.types"
 import { SHARED_TEXT_META } from "../../Text.meta"
 

package/components/Text/components/Micro/Micro.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { MicroProps } from "./Micro.types"
 import { SHARED_TEXT_META } from "../../Text.meta"
 

package/components/Text/components/P/P.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { PProps } from "./P.types"
 import { SHARED_TEXT_META } from "../../Text.meta"
 

package/components/Text/components/Small/Small.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { SmallProps } from "./Small.types"
 import { SHARED_TEXT_META } from "../../Text.meta"
 

package/components/Text/components/Tiny/Tiny.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { TinyProps } from "./Tiny.types"
 import { SHARED_TEXT_META } from "../../Text.meta"
 

package/components/Textarea/Textarea.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TextareaProps } from "./Textarea.types"
 
 export const meta: HeliosAttributeMeta<TextareaProps> = {

package/components/Textarea/Textarea.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { getClasses } from "@heliosgraphics/utils/classnames"
-import { Text } from "../.."
+import { Text } from "../Text"
 import { useId, useRef, useEffect } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Textarea.module.css"

package/components/Tile/Tile.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TileProps } from "./Tile.types"
 
 export const meta: HeliosAttributeMeta<TileProps> = {

package/components/Tile/Tile.tsx

@@ -1,11 +1,13 @@
 "use client"
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { getColorClasses } from "../../utils/colors"
-import { Icon, Text, Flex } from "../.."
+import { Icon } from "../Icon"
+import { Text } from "../Text"
+import { Flex } from "../Flex"
 import styles from "./Tile.module.css"
 import { type FC } from "react"
 import type { TileProps } from "./Tile.types"
-import type { HeliosColorType } from "../.."
+import type { HeliosColorType } from "../../types/colors"
 
 export const Tile: FC<TileProps> = ({
 	size,