@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

package/src/Components/LoadingCircle/LoadingCircle.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Size } from '@/Size';
+import { Size } from '../../Size';
 import { useMemo } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/LoadingCircle/loadingCircle.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './loadingCircle.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type LoadingCircleProps = RbmComponentProps<{
     size?: Size;

package/src/Components/Menu/HoverMenu.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import * as MenuStories from '@/Components/Menu/Menu.stories';
-import { HoverMenu } from '@/Components/Menu/HoverMenu';
-import { Icon } from '@/Components/Icon/Icon';
+import * as MenuStories from './Menu.stories';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { HoverMenu } from './HoverMenu';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
-import type { ReactElement  } from 'react';
+import type { ReactElement } from 'react';
 
 const meta = {
     component: HoverMenu,
@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         openToSide: false,
-        children: <Icon icon={faCogs} />,
+        children: <BaseIcon icon={faCogs} />,
         items: MenuStories.Default.args?.children as ReactElement,
     },
 };

package/src/Components/Menu/HoverMenu.tsx

@@ -1,14 +1,15 @@
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Menu } from '@/Components/Menu/Menu';
-import { withMemo } from '@/helper/withMemo';
-import React, { useCallback, useRef, useState } from 'react';
+import { Clickable } from '../Clickable/Clickable';
+import { Menu } from './Menu';
+import { useHoverMenu } from './useHoverMenu';
+import { withMemo } from '../../helper/withMemo';
+import React, { useCallback, useRef } from 'react';
 import classNames from 'classnames';
-import styles from '@/Components/Menu/menu.module.scss';
+import styles from './menu.module.scss';
 import type {
     RbmChildWithoutString,
     RbmComponentProps,
     WithNoStringAndChildrenProps,
-} from '@/Components/RbmComponentProps';
+} from '../RbmComponentProps';
 
 export type HoverMenuProps = RbmComponentProps<
     {
@@ -33,37 +34,16 @@ export const HoverMenu = withMemo(function HoverMenu({
 
     // States/Variables/Selectors
     const hoverItemRef = useRef<HTMLDivElement>(null);
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState({ x: 0, y: 0 });
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const { isOpen, position, offset, open, close } = useHoverMenu({ ref: hoverItemRef, openToSide });
 
     // Dispatch
 
     // Callbacks
-    const recalculatePosition = useCallback(() => {
-        if (!hoverItemRef.current) {
-            return;
-        }
-        const { top, left, bottom, right, width, height } = hoverItemRef.current.getBoundingClientRect();
-        if (openToSide) {
-            setPosition({ x: right, y: top });
-            setOffset({ x: width, y: -height });
-        } else {
-            setPosition({ x: left, y: bottom });
-            setOffset({ x: -width, y: height });
-        }
-    }, [openToSide]);
 
-    const close = useCallback(() => {
-        setIsOpen(false);
+    const innerOnClose = useCallback(() => {
+        close();
         onClose?.();
-    }, [onClose]);
-
-    const open = useCallback(() => {
-        recalculatePosition();
-        setIsOpen(true);
-    }, [recalculatePosition]);
+    }, [onClose, close]);
 
     const onClickInner = useCallback(() => {
         if (onClick?.() !== false) {
@@ -80,7 +60,7 @@ export const HoverMenu = withMemo(function HoverMenu({
     return (
         <Clickable
             onMouseEnter={open}
-            onMouseLeave={close}
+            onMouseLeave={innerOnClose}
             useReactOnMouseLeave={true}
             onClick={onClickInner}
             className={classNames(styles.hoverMenu, { [styles.open]: isOpen }, className)}
@@ -93,7 +73,7 @@ export const HoverMenu = withMemo(function HoverMenu({
                 x={position.x}
                 y={position.y}
                 isOpen={true}
-                onClose={close}
+                onClose={innerOnClose}
                 offsetX={offset.x}
                 offsetY={offset.y}
                 className={classNames({ [styles.hidden]: !isOpen })}

package/src/Components/Menu/Menu.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Menu } from '@/Components/Menu/Menu';
-import { MenuDivider } from '@/Components/Menu/MenuDivider';
-import { MenuItem } from '@/Components/Menu/MenuItem';
-import { Submenu } from '@/Components/Menu/Submenu';
+import { Menu } from './Menu';
+import { MenuDivider } from './MenuDivider';
+import { MenuItem } from './MenuItem';
+import { Submenu } from './Submenu';
 import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 import React from 'react';
-import type { MenuProps } from '@/Components/Menu/Menu';
+import type { MenuProps } from './Menu';
 
 const meta = {
     component: Menu,

package/src/Components/Menu/Menu.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { MenuCloseContextProvider } from '@/Components/Menu/MenuCloseContext';
-import { MenuItem } from '@/Components/Menu/MenuItem';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { MenuCloseContextProvider } from './MenuCloseContext';
+import { MenuItem } from './MenuItem';
 import { createPortal } from 'react-dom';
-import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
+import { useClientLayoutEffect } from '../Hooks/useClientLayoutEffect';
 import { useEffect, useRef, useState } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
-import { withMemo } from '@/helper/withMemo';
-import { withRenderBrowserOnly } from '@/helper/withRenderBrowserOnly';
+import { useWindow } from '../../WindowContext/WindowContext';
+import { withMemo } from '../../helper/withMemo';
+import { withRenderBrowserOnly } from '../../helper/withRenderBrowserOnly';
 import classNames from 'classnames';
-import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './menu.module.scss';
+import type { IconSource } from '../Icon/BaseIcon';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type MenuItemType = {
     label: string;
@@ -140,7 +140,7 @@ export const Menu = withMemo(
             <>
                 {createPortal(
                     <MenuCloseContextProvider value={onClose}>
-                        <Block
+                        <BaseBlock
                             className={classNames(className, styles.menu)}
                             style={{ ...style, top: innerY, left: innerX }}
                             ref={menuRef}
@@ -171,7 +171,7 @@ export const Menu = withMemo(
                                 );
                             })}
                             {children}
-                        </Block>
+                        </BaseBlock>
                     </MenuCloseContextProvider>,
                     portalContainer,
                 )}

package/src/Components/Menu/MenuDivider.tsx

@@ -1,7 +1,7 @@
-import { Block } from '@/Components/Layout/Block';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { withMemo } from '../../helper/withMemo';
 import React from 'react';
-import styles from '@/Components/Menu/menu.module.scss';
+import styles from './menu.module.scss';
 
 export const MenuDivider = withMemo(function MenuDivider() {
     // Refs
@@ -18,5 +18,5 @@ export const MenuDivider = withMemo(function MenuDivider() {
 
     // RenderFunctions
 
-    return <Block className={styles.divider} />;
+    return <BaseBlock className={styles.divider} />;
 });

package/src/Components/Menu/MenuItem.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { MenuItem } from '@/Components/Menu/MenuItem';
+import { MenuItem } from './MenuItem';
 import { faCog, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 

package/src/Components/Menu/MenuItem.tsx

@@ -1,14 +1,14 @@
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Icon } from '@/Components/Icon/Icon';
-import { Text } from '@/Components/Text/Text';
-import { useMenuClose } from '@/Components/Menu/MenuCloseContext';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { Clickable } from '../Clickable/Clickable';
+import { Text } from '../Text/Text';
+import { useMenuClose } from './MenuCloseContext';
+import { withMemo } from '../../helper/withMemo';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
-import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
-import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
+import styles from './menu.module.scss';
+import type { IconSource } from '../Icon/BaseIcon';
+import type { RbmComponentProps, WithChildren } from '../RbmComponentProps';
 import type { ReactNode } from 'react';
 
 import Element = React.JSX.Element;
@@ -97,10 +97,10 @@ export const MenuItem = withMemo(function MenuItem<Item>({
             onMouseLeave={onMouseLeaveInner}
             __allowChildren="all"
         >
-            <Block className={classNames(styles.itemChildren)}>
-                {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+            <BaseBlock className={classNames(styles.itemChildren)}>
+                {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
                 {childElements}
-            </Block>
+            </BaseBlock>
         </Clickable>
     );
 }, 'text');

package/src/Components/Menu/Submenu.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { MenuItem } from '@/Components/Menu/MenuItem';
-import { Submenu } from '@/Components/Menu/Submenu';
+import { MenuItem } from './MenuItem';
+import { Submenu } from './Submenu';
 import { faBook, faCog, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 import React from 'react';
-import type { SubmenuProps } from '@/Components/Menu/Submenu';
+import type { SubmenuProps } from './Submenu';
 
 const meta = {
     component: Submenu,

package/src/Components/Menu/Submenu.tsx

@@ -1,18 +1,18 @@
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Flex } from '@/Components/Layout/Flex';
-import { Grow } from '@/Components/Layout/Grow';
-import { Icon } from '@/Components/Icon/Icon';
-import { MenuCloseContextProvider, useMenuClose } from '@/Components/Menu/MenuCloseContext';
-import { Text } from '@/Components/Text/Text';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { Clickable } from '../Clickable/Clickable';
+import { Flex } from '../Layout/Flex';
+import { Grow } from '../Layout/Grow';
+import { MenuCloseContextProvider, useMenuClose } from './MenuCloseContext';
+import { Text } from '../Text/Text';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { useWindow } from '@/WindowContext/WindowContext';
-import { withMemo } from '@/helper/withMemo';
+import { useWindow } from '../../WindowContext/WindowContext';
+import { withMemo } from '../../helper/withMemo';
 import React, { useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
-import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
-import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
+import styles from './menu.module.scss';
+import type { IconSource } from '../Icon/BaseIcon';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
 
 export type SubmenuProps = RbmComponentProps<
     {
@@ -100,15 +100,15 @@ export const Submenu = withMemo(function Submenu({
                 style={style}
             >
                 <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
-                    {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+                    {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
                     <Grow>
                         <Text>{label}</Text>
                     </Grow>
-                    <Icon icon={faChevronRight} />
+                    <BaseIcon icon={faChevronRight} />
                 </Flex>
-                <Block className={styles.container} __allowChildren="all" ref={containerRef}>
+                <BaseBlock className={styles.container} __allowChildren="all" ref={containerRef}>
                     {children}
-                </Block>
+                </BaseBlock>
             </Clickable>
         </MenuCloseContextProvider>
     );

package/src/Components/Menu/menu.module.scss

@@ -30,6 +30,7 @@
   padding-top: 1px;
   margin-top: 1px;
   border-top: 1px solid var(--menu-divider-color);
+  width: 100%;
 }
 
 .item {
@@ -80,7 +81,7 @@
     pointer-events: none;
   }
 
-  &.open:hover {
+  &.open {
     .menu {
       visibility: visible;
       pointer-events: initial;
@@ -113,7 +114,7 @@
     bottom: 3px;
   }
 
-  &.open:hover {
+  &.open {
     .container {
       visibility: visible;
       pointer-events: initial;

package/src/Components/Menu/useHoverMenu.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import type { RefObject } from 'react';
+
+export function useHoverMenu({ openToSide, ref }: { ref: RefObject<HTMLElement | null>; openToSide?: boolean }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+    // Dispatch
+
+    // Callbacks
+    const recalculatePosition = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { top, left, bottom, right, width, height } = ref.current.getBoundingClientRect();
+        if (openToSide) {
+            setPosition({ x: right, y: top });
+            setOffset({ x: width, y: -height });
+        } else {
+            setPosition({ x: left, y: bottom });
+            setOffset({ x: -width, y: height });
+        }
+    }, [openToSide, ref]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const open = useCallback(() => {
+        recalculatePosition();
+        setIsOpen(true);
+    }, [recalculatePosition]);
+
+    return { isOpen, position, open, close, offset };
+}

package/src/Components/Menu/useMenu.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import type { MenuProps } from '@/Components/Menu/Menu';
+import type { MenuProps } from './Menu';
 import type { MouseEvent } from 'react';
 
 export function useMenu() {

package/src/Components/RbmComponentProps.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 import type { JSX } from 'react/jsx-runtime';
-import type { Recursive } from '@/TypeHelpers';
+import type { Recursive } from '../TypeHelpers';
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =

package/src/Components/SizeCalculator/SizeCalculator.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
 import { useEffect, useRef } from 'react';
-import { withMemo } from '@/helper/withMemo';
-import type { WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
+import { withMemo } from '../../helper/withMemo';
+import type { WithNoStringAndChildrenProps } from '../RbmComponentProps';
 
 export type SizeCalculatorProps = {
     onSize: (width: number, height: number) => void;
@@ -34,9 +34,9 @@ function SizeCalculator({ onSize, children, absolute = false }: SizeCalculatorPr
     // Render Functions
 
     return (
-        <InlineBlock ref={ref} __allowChildren="all" style={{ position: absolute ? 'absolute' : 'static' }}>
+        <BaseInlineBlock ref={ref} __allowChildren="all" style={{ position: absolute ? 'absolute' : 'static' }}>
             {children}
-        </InlineBlock>
+        </BaseInlineBlock>
     );
 }
 

package/src/Components/SpoilerList/Spoiler/Spoiler.stories.tsx

@@ -1,4 +1,4 @@
-import { Spoiler } from '@/Components/SpoilerList/Spoiler/Spoiler';
+import { Spoiler } from './Spoiler';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Flex } from '@/Components/Layout/Flex';
-import { Grow } from '@/Components/Layout/Grow';
-import { Icon } from '@/Components/Icon/Icon';
-import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { BaseBlock } from '../../Layout/BaseBlock';
+import { BaseIcon } from '../../Icon/BaseIcon';
+import { Clickable } from '../../Clickable/Clickable';
+import { Flex } from '../../Layout/Flex';
+import { Grow } from '../../Layout/Grow';
+import { TEXT_SIZE, Text } from '../../Text/Text';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useListener } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { useListener } from '../../Hooks/useListener';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/SpoilerList/Spoiler/spoiler.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
+import styles from './spoiler.module.scss';
+import type { IconSource } from '../../Icon/BaseIcon';
 import type { MouseEvent, ReactNode } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
+import type { OptionalListener } from '../../Hooks/useListener';
+import type { RbmComponentProps, WithChildren } from '../../RbmComponentProps';
 
 export type SpoilerProps<OnClickData> = RbmComponentProps<
     {
@@ -59,7 +59,7 @@ export const Spoiler = withMemo(function Spoiler<OnClickData>({
     const onClickListener = useListener<'onClick', OnClickData, boolean>('onClick', listenerProps);
 
     const toggleOpen = useCallback(
-        (ev: MouseEvent) => {
+        (_: MouseEvent) => {
             if (open !== undefined) {
                 onClickListener?.(!open);
             } else {
@@ -100,14 +100,14 @@ export const Spoiler = withMemo(function Spoiler<OnClickData>({
             <Clickable onClick={toggleOpen}>
                 <Flex horizontal={true}>
                     <Grow __allowChildren="all">{titleComponent}</Grow>
-                    {icon ? <Icon icon={icon} className={styles.icon} /> : null}
+                    {icon ? <BaseIcon icon={icon} className={styles.icon} /> : null}
                 </Flex>
             </Clickable>
-            <Block className={styles.bodyContainer}>
-                <Block __allowChildren="all" className={styles.body}>
+            <BaseBlock className={styles.bodyContainer}>
+                <BaseBlock __allowChildren="all" className={styles.body}>
                     {children}
-                </Block>
-            </Block>
+                </BaseBlock>
+            </BaseBlock>
         </Clickable>
     );
 }, 'all');

package/src/Components/SpoilerList/SpoilerList.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Spoiler } from '@/Components/SpoilerList/Spoiler/Spoiler';
-import { useSpoilerGroup } from '@/Components/SpoilerList/useSpoilerGroup';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { Spoiler } from './Spoiler/Spoiler';
+import { useSpoilerGroup } from './useSpoilerGroup';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import type { ReactElement } from 'react';
 
 export type SpoilerItem<BodyData, TitleData = string> = {
@@ -48,12 +48,12 @@ export const SpoilerList = withMemo(function SpoilerList<BodyData, TitleData = s
 
     // Render Functions
     return (
-        <Block className={classNames(className)} style={style}>
+        <BaseBlock className={classNames(className)} style={style}>
             {data.map((item) => (
                 <Spoiler title={renderTitle(item)} {...propsGenerator(item.key)}>
                     {renderBody(item)}
                 </Spoiler>
             ))}
-        </Block>
+        </BaseBlock>
     );
 });

package/src/Components/TabBar/TabBar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { TabBar } from '@/Components/TabBar/TabBar';
+import { TabBar } from './TabBar';
 import { faCog, faHome, faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 

package/src/Components/TabBar/TabBar.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { Container } from '@/Components/Layout/Container';
-import { Icon } from '@/Components/Icon/Icon';
-import { Inline } from '@/Components/Layout/Inline';
-import { TabBarButton } from '@/Components/TabBar/TabBarButton';
-import { Text } from '@/Components/Text/Text';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { Container } from '../Layout/Container';
+import { Inline } from '../Layout/Inline';
+import { TabBarButton } from './TabBarButton';
+import { Text } from '../Text/Text';
 import { useCallback, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/TabBar/tabBar.module.scss';
+import styles from './tabBar.module.scss';
 import type { ComponentType } from 'react';
-import type { IconSource } from '@/Components/Icon/Icon';
-import type { ListenerWithData } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { IconSource } from '../Icon/BaseIcon';
+import type { ListenerWithData } from '../Hooks/useListener';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type TabBarComponentButtonType = {
     component: ComponentType<Record<string, any>>;
@@ -55,7 +55,7 @@ function getButtonComponents(buttons: TabBarButtonType[], activeTab: number, onS
         return (
             <TabBarButton key={key} active={isActive} onClickData={index} onClick={onSelect}>
                 <Inline>
-                    {button.icon ? <Icon icon={button.icon} className={styles.buttonIcon} /> : null}
+                    {button.icon ? <BaseIcon icon={button.icon} className={styles.buttonIcon} /> : null}
                     {button.title ? <Text className={styles.buttonTitle}>{button.title}</Text> : null}
                 </Inline>
             </TabBarButton>

package/src/Components/TabBar/TabBarButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { useListenerWithExtractedProps } from '../Hooks/useListener';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/TabBar/tabBar.module.scss';
-import type { Listener } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './tabBar.module.scss';
+import type { Listener } from '../Hooks/useListener';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type TabBarButtonProps = RbmComponentProps<
     {

package/src/Components/Table/Table.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSortBy, useTable } from 'react-table';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import type {
     Cell,
     HeaderGroup,
@@ -10,7 +10,7 @@ import type {
     TableOptions,
     UseSortByOptions,
 } from 'react-table';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../RbmComponentProps';
 import type { ReactNode } from 'react';
 
 export type ColumnCellData<DataType extends string | number | Record<string, unknown>> = {

package/src/Components/Text/Heading.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { TEXT_PRIO, TEXT_SIZE, Text } from '@/Components/Text/Text';
-import { withMemo } from '@/helper/withMemo';
+import { TEXT_PRIO, TEXT_SIZE, Text } from './Text';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Text/heading.module.scss';
-import type { EmptyProps } from '@/helper/EmptyProps';
-import type { RbmComponentProps, WithStringProps } from '@/Components/RbmComponentProps';
+import styles from './heading.module.scss';
+import type { EmptyProps } from '../../helper/EmptyProps';
+import type { RbmComponentProps, WithStringProps } from '../RbmComponentProps';
 
 export type HeadingProps = RbmComponentProps<EmptyProps, WithStringProps>;