try out aliases

.eslintrc.cjs

@@ -21,7 +21,8 @@ module.exports = {
   },
   plugins: [
     'react',
-    '@typescript-eslint'
+    '@typescript-eslint',
+    'no-relative-import-paths'
   ],
   overrides: [{
     files: ['*.test.*'],
@@ -36,6 +37,10 @@ module.exports = {
     'react/prop-types': [0],
     'linebreak-style': ['error', 'unix'],
     'quotes': ['error', 'single'],
-    'semi': ['error', 'always']
+    'semi': ['error', 'always'],
+    'no-relative-import-paths/no-relative-import-paths': [
+      'warn',
+      { 'allowSameFolder': true, 'prefix': '@', 'rootDir': 'src' }
+    ]
   }
 };

package.json

@@ -104,6 +104,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.4",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-storybook": "^0.8.0",
@@ -125,6 +126,7 @@
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-css-injected-by-js": "^3.5.0",
     "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-static-copy": "^1.0.4",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.4.0"

src/data/DateFormat/DateFormat.tsx

@@ -10,7 +10,7 @@ import { formatRelative, getInterval } from './relative';
 import { safeFormat } from './formatting';
 import { twMerge } from 'tailwind-merge';
 import { DateFormatTheme } from './DateFormatTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface DateFormatProps {
   /**

src/data/Ellipsis/Ellipsis.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState, useMemo } from 'react';
 import ellipsize from 'ellipsize';
 import { EllipsisTheme } from './EllipsisTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface EllipsisProps {
   /**

src/data/Pager/Pager.tsx

@@ -1,14 +1,14 @@
 import React, { FC, Fragment, ReactNode, useCallback } from 'react';
-import { Button } from '../../elements';
-import { Stack } from '../../layout';
-import { Text } from '../../typography';
-import { Pluralize } from '../Pluralize';
+import { Button } from '@/elements';
+import { Stack } from '@/layout';
+import { Text } from '@/typography';
+import { Pluralize } from '@/data/Pluralize';
 import EndArrow from './assets/arrow-end.svg?react';
 import NextArrow from './assets/arrow-next.svg?react';
 import PreviousArrow from './assets/arrow-previous.svg?react';
 import StartArrow from './assets/arrow-start.svg?react';
 import { FUZZY_RANGE, getItemsRange, getPageRange } from './utils';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 import { PagerTheme } from './PagerTheme';
 

src/data/Redact/Redact.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 import coverup from 'coverup';
 import { twMerge } from 'tailwind-merge';
 import { RedactTheme } from './RedactTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface RedactProps {
   /**

src/data/Sort/Sort.tsx

@@ -4,7 +4,7 @@ import { DownArrowIcon } from './DownArrowIcon';
 import { getNextDirection, SortDirection } from './utils';
 import { twMerge } from 'tailwind-merge';
 import { SortTheme } from './SortTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface SortProps extends PropsWithChildren {
   /**

src/elements/Arrow/Arrow.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ArrowTheme } from './ArrowTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 
 export interface ArrowProps {

src/elements/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import getInitials from 'name-initials';
 import { generateColor } from '@marko19907/string-to-color';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { AvatarTheme } from './AvatarTheme';
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {

src/elements/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,7 @@
 import React, { Children, forwardRef, Ref } from 'react';
-import { useInfinityList } from '../../data';
+import { useInfinityList } from '@/data';
 import { AvatarGroupTheme } from './AvatarGroupTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {

src/elements/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React, { FC, forwardRef, LegacyRef } from 'react';
 import { motion } from 'framer-motion';
 import { BadgeTheme } from './BadgeTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 
 export type BadgeColor = 'default' | 'primary' | 'secondary' | 'error';

src/elements/Button/Button.tsx

@@ -1,7 +1,7 @@
 import React, { FC, forwardRef, LegacyRef, useContext } from 'react';
 import { motion } from 'framer-motion';
 import { ButtonGroupContext } from './ButtonGroupContext';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 import { ButtonTheme } from './ButtonTheme';
 

src/elements/Chip/Chip.tsx

@@ -1,6 +1,6 @@
 import React, { FC, forwardRef, LegacyRef, ReactElement } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { ChipTheme } from './ChipTheme';
 
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {

src/elements/Chip/DeletableChip.tsx

@@ -1,10 +1,10 @@
 import React, { FC, forwardRef, ReactElement } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { Button } from '../Button';
+import { Button } from '@/elements/Button';
 import { Chip, ChipProps, ChipRef } from './Chip';
-import { CloseIcon } from '../../form';
+import { CloseIcon } from '@/form';
 import { ChipTheme } from './ChipTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface DeletableChipProps extends Omit<ChipProps, 'end'> {
   /**

src/elements/CommandPalette/CommandPalette.tsx

@@ -14,10 +14,10 @@ import {
   HotkeyIem,
   useFlattenedTree
 } from './useFlattenedTree';
-import { List, ListItem } from '../../layout/List';
-import { Card } from '../../layout/Card';
-import { MotionGroup } from '../../layout/Motion';
-import { useComponentTheme } from '../../utils';
+import { List, ListItem } from '@/layout/List';
+import { Card } from '@/layout/Card';
+import { MotionGroup } from '@/layout/Motion';
+import { useComponentTheme } from '@/utils';
 import { CommandPaletteTheme } from './CommandPaletteTheme';
 
 export interface CommandPaletteProps extends PropsWithChildren {

src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx

@@ -8,9 +8,9 @@ import React, {
   useRef
 } from 'react';
 import { SearchIcon } from './SearchIcon';
-import { HotkeyIem } from '../useFlattenedTree';
-import { CommandPaletteTheme } from '../CommandPaletteTheme';
-import { useComponentTheme } from '../../../utils';
+import { HotkeyIem } from '@/elements/CommandPalette/useFlattenedTree';
+import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
+import { useComponentTheme } from '@/utils';
 import keys, { Handler } from '@reaviz/ctrl-keys';
 
 export interface CommandPaletteInputProps {

src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
-import { ListItem, ListItemProps } from '../../../layout';
-import { MotionItem } from '../../../layout';
-import { Kbd } from '../../Kbd';
+import { ListItem, ListItemProps } from '@/layout';
+import { MotionItem } from '@/layout';
+import { Kbd } from '@/elements/Kbd';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../../utils';
-import { CommandPaletteTheme } from '../CommandPaletteTheme';
+import { useComponentTheme } from '@/utils';
+import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 
 export interface CommandPaletteItemProps extends Omit<ListItemProps, 'theme'> {
   hotkey?: string;

src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx

@@ -1,9 +1,9 @@
 import React, { PropsWithChildren, forwardRef } from 'react';
-import { List, ListHeader } from '../../../layout';
-import { MotionGroup, MotionItem } from '../../../layout';
+import { List, ListHeader } from '@/layout';
+import { MotionGroup, MotionItem } from '@/layout';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../../utils';
-import { CommandPaletteTheme } from '../CommandPaletteTheme';
+import { useComponentTheme } from '@/utils';
+import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 
 export interface CommandPaletteSectionProps extends PropsWithChildren {
   /**

src/elements/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, forwardRef, Ref } from 'react';
-import { Button, ButtonProps, ButtonRef } from '../Button';
+import { Button, ButtonProps, ButtonRef } from '@/elements/Button';
 
 export interface IconButtonProps
   extends Omit<ButtonProps, 'fullWidth' | 'startAdornment' | 'endAdornment'> {}

src/elements/Kbd/Kbd.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
-import { Chip, ChipProps } from '../Chip';
+import { Chip, ChipProps } from '@/elements/Chip';
 import { getHotkeyText } from './utils';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { KbdTheme } from './KbdTheme';
 import { twMerge } from 'tailwind-merge';
 

src/elements/Loader/DotsLoader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { motion } from 'framer-motion';
 import { DotsLoaderTheme } from './DotsLoaderTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { twMerge } from 'tailwind-merge';
 
 export interface DotsLoaderProps {

src/form/Calendar/Calendar.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Button } from '../../elements/Button';
+import { Button } from '@/elements/Button';
 import {
   add,
   addYears,
@@ -19,11 +19,11 @@ import {
 import { CalendarDays } from './CalendarDays';
 import { CalendarMonths } from './CalendarMonths';
 import { CalendarYears } from './CalendarYears';
-import { SmallHeading } from '../../typography';
+import { SmallHeading } from '@/typography';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { CalendarTheme } from './CalendarTheme';
-import { Divider } from '../../layout/Divider';
+import { Divider } from '@/layout/Divider';
 
 export type CalendarViewType = 'days' | 'months' | 'years';
 

src/form/Calendar/CalendarDays/CalendarDays.tsx

@@ -1,16 +1,16 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
-import { Button } from '../../../elements';
+import { Button } from '@/elements';
 import {
   daysOfWeek,
   getDayAttributes,
   getWeeks,
   isNextWeekEmpty,
   isPreviousWeekEmpty
-} from '../utils';
+} from '@/form/Calendar/utils';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useComponentTheme } from '../../../utils';
-import { CalendarTheme } from '../CalendarTheme';
+import { useComponentTheme } from '@/utils';
+import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
 export interface CalendarDaysProps {

src/form/Calendar/CalendarMonths/CalendarMonths.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
-import { Button } from '../../../elements';
-import { monthNames } from '../utils';
-import { useComponentTheme } from '../../../utils';
-import { CalendarTheme } from '../CalendarTheme';
+import { Button } from '@/elements';
+import { monthNames } from '@/form/Calendar/utils';
+import { useComponentTheme } from '@/utils';
+import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
 export interface CalendarMonthsProps {

src/form/Calendar/CalendarRange.tsx

@@ -8,13 +8,13 @@ import {
   format
 } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button } from '../../elements';
+import { Button } from '@/elements';
 import { CalendarProps } from './Calendar';
 import { CalendarDays } from './CalendarDays';
-import { SmallHeading } from '../../typography';
-import { Divider, Stack } from '../../layout';
+import { SmallHeading } from '@/typography';
+import { Divider, Stack } from '@/layout';
 import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 import { CalendarRangeTheme } from './CalendarRangeTheme';
 
 export interface CalendarRangeProps

src/form/Calendar/CalendarYears/CalendarYears.tsx

@@ -1,8 +1,8 @@
 import React, { FC, useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button } from '../../../elements';
-import { useComponentTheme } from '../../../utils';
-import { CalendarTheme } from '../CalendarTheme';
+import { Button } from '@/elements';
+import { useComponentTheme } from '@/utils';
+import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { twMerge } from 'tailwind-merge';
 
 export interface CalendarYearsProps {

src/form/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import React, { FC, forwardRef, LegacyRef } from 'react';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
 import { CheckboxTheme } from './CheckboxTheme';
-import { useComponentTheme } from '../../utils';
+import { useComponentTheme } from '@/utils';
 
 export interface CheckboxProps {
   /**