@musecat/uikit 0.1.2 → 0.2.0

package/packages/Components/ContextMenu/ContextMenu.options.tsx

@@ -6,12 +6,12 @@ import {
   memo,
   type ReactElement,
 } from "react";
-import styles from "@/packages/Components/ContextMenu/ContextMenu.module.scss";
-import type { ContentItem } from "@/packages/Components/ContextMenu/ContextMenu.types";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./ContextMenu.module.scss";
+import type { ContentItem } from "./ContextMenu.types";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export interface ContextMenuOptionProps {
   item: ContentItem;

package/packages/Components/ContextMenu/ContextMenu.tsx

@@ -9,19 +9,19 @@ import {
   useRef,
   useState,
 } from "react";
-import { Word } from "@/i18n/shared";
-import ContextMenuOption from "@/packages/Components/ContextMenu/ContextMenu.options";
+import { Word } from "../../../i18n/shared";
+import ContextMenuOption from "./ContextMenu.options";
 import type {
   ContentItem,
   ContextMenuProps,
-} from "@/packages/Components/ContextMenu/ContextMenu.types";
+} from "./ContextMenu.types";
 import {
   handleEndKey,
   handleHomeKey,
-} from "@/packages/Components/Select/Select.keyboard";
-import Text from "@/packages/Components/Text/Text";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import View from "@/packages/Frameworks/View/View";
+} from "../Select/Select.keyboard";
+import Text from "../Text/Text";
+import Dialog from "../../Frameworks/Dialog/Dialog";
+import View from "../../Frameworks/View/View";
 
 const clampScrollTop = (element: HTMLElement, nextScrollTop: number) => {
   const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);

package/packages/Components/ContextMenu/ContextMenu.types.ts

@@ -4,7 +4,7 @@ import type {
   ExitConfig,
   PopoverConfig,
   SheetConfig,
-} from "@/packages/Frameworks/Dialog/Dialog.types";
+} from "../../Frameworks/Dialog/Dialog.types";
 
 export interface ContentItem {
   type: "option";

package/packages/Components/ContributionGraph/ContributionGraph.tsx

@@ -13,12 +13,12 @@ import {
   useRef,
   useState,
 } from "react";
-import { Word } from "@/i18n/shared";
-import Box from "@/packages/Components/Box/Box";
-import styles from "@/packages/Components/ContributionGraph/ContributionGraph.module.scss";
-import type { ContributionGraphProps } from "@/packages/Components/ContributionGraph/ContributionGraph.types";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Box from "../Box/Box";
+import styles from "./ContributionGraph.module.scss";
+import type { ContributionGraphProps } from "./ContributionGraph.types";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 
 const DAY_LABEL_KEYS = [
   "sun",

package/packages/Components/ContributionGraph/ContributionGraph.types.ts

@@ -1,8 +1,8 @@
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface ContributionActivity {
   date: string | Date;

package/packages/Components/DatePicker/DatePicker.calendar.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
+import styles from "./DatePicker.module.scss";
 import {
   isDateDisabled,
   isSameDay,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
-import Icon from "@/packages/Components/Icon/Icon";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "./DatePicker.utils";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 function NavBtn({
   onClick,

package/packages/Components/DatePicker/DatePicker.core.tsx

@@ -9,8 +9,8 @@ import {
   useMemo,
   useRef,
 } from "react";
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
-import Text from "@/packages/Components/Text/Text";
+import styles from "./DatePicker.module.scss";
+import Text from "../Text/Text";
 
 type SingleSegment = "year" | "month" | "day";
 type RangeSegment =

package/packages/Components/DatePicker/DatePicker.tsx

@@ -7,24 +7,24 @@ import {
   useRef,
   useState,
 } from "react";
-import { normalizeLocale } from "@/i18n/shared";
-import { Calendar } from "@/packages/Components/DatePicker/DatePicker.calendar";
-import DatePickerCore from "@/packages/Components/DatePicker/DatePicker.core";
-import { useCalendar } from "@/packages/Components/DatePicker/hooks/useCalendar";
-import { useSelection } from "@/packages/Components/DatePicker/hooks/useSelection";
-import styles from "@/packages/Components/DatePicker/DatePicker.module.scss";
-import type { DatePickerProps } from "@/packages/Components/DatePicker/DatePicker.types";
+import { normalizeLocale } from "../../../i18n/shared";
+import { Calendar } from "./DatePicker.calendar";
+import DatePickerCore from "./DatePicker.core";
+import { useCalendar } from "./hooks/useCalendar";
+import { useSelection } from "./hooks/useSelection";
+import styles from "./DatePicker.module.scss";
+import type { DatePickerProps } from "./DatePicker.types";
 import {
   isBefore,
   parseDate,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
-import Icon from "@/packages/Components/Icon/Icon";
-import Label from "@/packages/Components/Label/Label";
-import Text from "@/packages/Components/Text/Text";
-import TimePickerCore from "@/packages/Components/TimePicker/TimePicker.core";
-import Dialog from "@/packages/Frameworks/Dialog/Dialog";
-import View from "@/packages/Frameworks/View/View";
+} from "./DatePicker.utils";
+import Icon from "../Icon/Icon";
+import Label from "../Label/Label";
+import Text from "../Text/Text";
+import TimePickerCore from "../TimePicker/TimePicker.core";
+import Dialog from "../../Frameworks/Dialog/Dialog";
+import View from "../../Frameworks/View/View";
 
 function isValidDate(y: number, m: number, d: number): boolean {
   if (y < 1000 || y > 9999) return false;

package/packages/Components/DatePicker/DatePicker.types.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from "@/packages/Components/Label/Label.types";
+import type { LabelProps } from "../Label/Label.types";
 
 export type DatePickerMode = "single" | "range";
 

package/packages/Components/DatePicker/hooks/useCalendar.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useMemo, useState } from "react";
-import { getCalendarDays } from "@/packages/Components/DatePicker/DatePicker.utils";
+import { getCalendarDays } from "../DatePicker.utils";
 
 interface UseCalendarOptions {
   initialYear: number;

package/packages/Components/DatePicker/hooks/useSelection.ts

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { DatePickerMode } from "@/packages/Components/DatePicker/DatePicker.types";
+import type { DatePickerMode } from "../DatePicker.types";
 import {
   formatDisplay,
   formatRangeDisplay,
@@ -9,7 +9,7 @@ import {
   isSameDay,
   parseDate,
   toYMD,
-} from "@/packages/Components/DatePicker/DatePicker.utils";
+} from "../DatePicker.utils";
 
 interface UseSelectionOptions {
   mode: DatePickerMode;

package/packages/Components/Divider/Divider.tsx

@@ -1,5 +1,5 @@
-import type { DividerProps } from "@/packages/Components/Divider/Divider.types";
-import { Size } from "@/packages/Frameworks/_shared/sizing";
+import type { DividerProps } from "./Divider.types";
+import { Size } from "../../Frameworks/_shared/sizing";
 
 export default function Divider({
   vertical = false,

package/packages/Components/Divider/Divider.types.ts

@@ -1,4 +1,4 @@
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
 
 export interface DividerProps {
   "data-color-mode"?: string;

package/packages/Components/Header/Header.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import styles from "@/packages/Components/Header/Header.module.scss";
-import type { HeaderProps } from "@/packages/Components/Header/Header.types";
-import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Header.module.scss";
+import type { HeaderProps } from "./Header.types";
+import EdgeEffect from "../../Frameworks/EdgeEffect/EdgeEffect";
+import View from "../../Frameworks/View/View";
 
 export default function Header({
   "data-color-mode": dataTheme,

package/packages/Components/Icon/Icon.group.tsx

@@ -1,12 +1,12 @@
 import { Children } from "react";
-import type { IconGroupProps } from "@/packages/Components/Icon/Icon.group.types";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { IconGroupProps } from "./Icon.group.types";
+import Icon from "./Icon";
+import type { IconProps } from "./Icon.types";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 const GROUP_PADDING = 2;
 const ICON_PADDING = 6;

package/packages/Components/Icon/Icon.group.types.ts

@@ -1,10 +1,10 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "./Icon.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface IconGroupProps extends BorderProps, RadiusProps {
   children?: React.ReactNode;

package/packages/Components/Icon/Icon.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
 import Image from "next/image";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import SVGData from "@/packages/Components/Icon/SVG/data";
-import Spinner from "@/packages/Components/Spinner/Spinner";
-import Text from "@/packages/Components/Text/Text";
+import type { IconProps } from "./Icon.types";
+import SVGData from "./SVG/data";
+import Spinner from "../Spinner/Spinner";
+import Text from "../Text/Text";
 import {
   normalizeBrandIconClass as _normalizeBrandIconClass,
   normalizeUIKitImageSrc as _normalizeUIKitImageSrc,
-} from "@/packages/Frameworks/_shared/normalize";
-import { Size, SizePX } from "@/packages/Frameworks/_shared/sizing";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/normalize";
+import { Size, SizePX } from "../../Frameworks/_shared/sizing";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 const normalizeUIKitImageSrc = _normalizeUIKitImageSrc;
 const normalizeBrandIconClass = _normalizeBrandIconClass;

package/packages/Components/Icon/Icon.types.ts

@@ -1,14 +1,14 @@
-import type { SpinnerProps } from "@/packages/Components/Spinner/Spinner.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { SpinnerProps } from "../Spinner/Spinner.types";
+import type { TextProps } from "../Text/Text.types";
+import type { TitleProps } from "../Title/Title.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemePaint,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 type SVGPathPaint = React.SVGProps<SVGPathElement>["fill"];
 type SVGPathStrokeWidth = React.SVGProps<SVGPathElement>["strokeWidth"];

package/packages/Components/Input/Input.tsx

@@ -2,11 +2,11 @@
 
 import clsx from "clsx";
 import { useId } from "react";
-import styles from "@/packages/Components/Input/Input.module.scss";
-import type { InputProps } from "@/packages/Components/Input/Input.types";
-import Label from "@/packages/Components/Label/Label";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./Input.module.scss";
+import type { InputProps } from "./Input.types";
+import Label from "../Label/Label";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 
 export default function Input({
   type,

package/packages/Components/Input/Input.types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { LabelSharedProps } from "@/packages/Components/Label/Label.types";
+import type { LabelSharedProps } from "../Label/Label.types";
 
 export interface InputProps
   extends Omit<

package/packages/Components/Label/Label.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
-import { Word } from "@/i18n/shared";
-import Icon from "@/packages/Components/Icon/Icon";
-import styles from "@/packages/Components/Label/Label.module.scss";
-import type { LabelProps } from "@/packages/Components/Label/Label.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Icon from "../Icon/Icon";
+import styles from "./Label.module.scss";
+import type { LabelProps } from "./Label.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export default function Label({
   children,

package/packages/Components/Label/Label.types.ts

@@ -1,8 +1,8 @@
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface LabelProps extends ThemeSystemProps, BorderProps, RadiusProps {
   "data-color-mode"?: string;

package/packages/Components/Layout/Layout.docs.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
 import Image from "next/image";
-import Icon from "@/packages/Components/Icon/Icon";
-import styles from "@/packages/Components/Layout/Layout.docs.module.scss";
-import type { DocsLayoutProps } from "@/packages/Components/Layout/Layout.docs.types";
-import Profile from "@/packages/Components/Profile/Profile";
-import Text from "@/packages/Components/Text/Text";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import styles from "./Layout.docs.module.scss";
+import type { DocsLayoutProps } from "./Layout.docs.types";
+import Profile from "../Profile/Profile";
+import Text from "../Text/Text";
+import View from "../../Frameworks/View/View";
 export default function DocsLayout({
   children,
   image,

package/packages/Components/Layout/Layout.docs.types.ts

@@ -1,5 +1,5 @@
-import type { ProfileProps } from "@/packages/Components/Profile/Profile.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { ProfileProps } from "../Profile/Profile.types";
+import type { TextProps } from "../Text/Text.types";
 
 export interface DocsLayoutProps {
   children?: React.ReactNode;

package/packages/Components/Layout/Layout.tsx

@@ -1,21 +1,21 @@
 import clsx from "clsx";
 import Image from "next/image";
 import { Children, isValidElement } from "react";
-import styles from "@/packages/Components/Layout/Layout.module.scss";
+import styles from "./Layout.module.scss";
 import type {
   BackgroundImageValue,
   LayoutGridViewProps,
   LayoutProps,
   LayoutSectionProps,
-} from "@/packages/Components/Layout/Layout.types";
-import Title from "@/packages/Components/Title/Title";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import { normalizeUIKitImageSrc } from "@/packages/Frameworks/_shared/normalize";
+} from "./Layout.types";
+import Title from "../Title/Title";
+import type { TitleProps } from "../Title/Title.types";
+import { normalizeUIKitImageSrc } from "../../Frameworks/_shared/normalize";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
-import View from "@/packages/Frameworks/View/View";
+} from "../../Frameworks/_shared/sizing";
+import View from "../../Frameworks/View/View";
 
 function resolveBgMargin(
   margin: NonNullable<BackgroundImageValue["margin"]>,

package/packages/Components/Layout/Layout.types.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from "react";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { TitleProps } from "@/packages/Components/Title/Title.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+import type { TextProps } from "../Text/Text.types";
+import type { TitleProps } from "../Title/Title.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { ViewProps } from "../../Frameworks/View/View.types";
 
 type BackgroundMarginUnitValue = UIKitSizeValue;
 

package/packages/Components/Maps/OSM/MapOSM.tsx

@@ -2,10 +2,10 @@
 
 import clsx from "clsx";
 import maplibregl from "maplibre-gl";
-import styles from "@/packages/Components/Maps/OSM/MapOSM.module.scss";
-import { resolveSafeMapStyle } from "@/packages/Components/Maps/OSM/MapOSM.shared";
-import type { MapOSMProps } from "@/packages/Components/Maps/OSM/MapOSM.types";
-import View from "@/packages/Frameworks/View/View";
+import styles from "./MapOSM.module.scss";
+import { resolveSafeMapStyle } from "./MapOSM.shared";
+import type { MapOSMProps } from "./MapOSM.types";
+import View from "../../../Frameworks/View/View";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useCallback, useEffect, useRef } from "react";
 

package/packages/Components/Nav/Nav.tsx

@@ -5,14 +5,14 @@ import clsx from "clsx";
 import { useRouter } from "next/navigation";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import Icon from "@/packages/Components/Icon/Icon";
-import { useNavDrag } from "@/packages/Components/Nav/hooks/useNavDrag";
-import { useNavIndicator } from "@/packages/Components/Nav/hooks/useNavIndicator";
-import styles from "@/packages/Components/Nav/Nav.module.scss";
-import type { NavProps } from "@/packages/Components/Nav/Nav.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
-import View from "@/packages/Frameworks/View/View";
+import Icon from "../Icon/Icon";
+import { useNavDrag } from "./hooks/useNavDrag";
+import { useNavIndicator } from "./hooks/useNavIndicator";
+import styles from "./Nav.module.scss";
+import type { NavProps } from "./Nav.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
+import View from "../../Frameworks/View/View";
 
 export default function Nav({
   name,

package/packages/Components/Nav/Nav.types.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 
 export interface NavOption extends Omit<PressableProps, "title"> {
   checked?: boolean;

package/packages/Components/Nav/hooks/useNavDrag.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useRef } from "react";
-import type { NavProps } from "@/packages/Components/Nav/Nav.types";
+import type { NavProps } from "../Nav.types";
 
 const DRAG_SELECTION_TOUCH_ACTIVATION_DISTANCE = 10;
 const DRAG_SELECTION_TOUCH_HORIZONTAL_RATIO = 1.75;

package/packages/Components/Pagination/Pagination.tsx

@@ -2,13 +2,13 @@
 
 import { useTimeout } from "@musecat/functionkit";
 import { useEffect, useState } from "react";
-import { Word } from "@/i18n/shared";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { PaginationProps } from "@/packages/Components/Pagination/Pagination.types";
-import Text from "@/packages/Components/Text/Text";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import View from "@/packages/Frameworks/View/View";
+import { Word } from "../../../i18n/shared";
+import Icon from "../Icon/Icon";
+import type { IconProps } from "../Icon/Icon.types";
+import type { PaginationProps } from "./Pagination.types";
+import Text from "../Text/Text";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import View from "../../Frameworks/View/View";
 
 function clampPage(page: number, total: number) {
   return Math.min(total, Math.max(1, page));

package/packages/Components/Pagination/Pagination.types.ts

@@ -1,7 +1,7 @@
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface PaginationProps extends ThemeSystemProps, BorderProps {
   "data-color-mode"?: string;

package/packages/Components/Pill/Pill.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import Icon from "@/packages/Components/Icon/Icon";
-import type { PillProps } from "@/packages/Components/Pill/Pill.types";
-import Text from "@/packages/Components/Text/Text";
-import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import Icon from "../Icon/Icon";
+import type { PillProps } from "./Pill.types";
+import Text from "../Text/Text";
+import Pressable from "../../Frameworks/Pressable/Pressable";
 
 export function Pill({
   themePreset,

package/packages/Components/Pill/Pill.types.ts

@@ -1,12 +1,12 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { TextProps } from "@/packages/Components/Text/Text.types";
-import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
-import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
-import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { TextProps } from "../Text/Text.types";
+import type { UIKitSizeValue } from "../../Frameworks/_shared/sizing";
+import type { PressableProps } from "../../Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "../../Frameworks/Theme/Radius.types";
 import type {
   BorderProps,
   ThemeSystemProps,
-} from "@/packages/Frameworks/Theme/Theme.types";
+} from "../../Frameworks/Theme/Theme.types";
 
 export interface PillProps extends ThemeSystemProps, RadiusProps, BorderProps {
   "data-color-mode"?: string;

package/packages/Components/Profile/Profile.shared.ts

@@ -1,9 +1,9 @@
-import type { IconProps } from "@/packages/Components/Icon/Icon.types";
-import type { ProfileAvatarOptions } from "@/packages/Components/Profile/Profile.types";
+import type { IconProps } from "../Icon/Icon.types";
+import type { ProfileAvatarOptions } from "./Profile.types";
 import {
   Size,
   type UIKitSizeValue,
-} from "@/packages/Frameworks/_shared/sizing";
+} from "../../Frameworks/_shared/sizing";
 
 const resolveFallbackAvatarIconSize = (
   outerSize: UIKitSizeValue,