@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { FormError } from '@/Components/FormElements/Error/FormError';
+import { FormError } from '../Error/FormError';
 import { useCallback, useRef } from 'react';
-import { useComposedRef } from '@/Components/Hooks/useComposedRef';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
-import { withMemo } from '@/helper/withMemo';
+import { useComposedRef } from '../../Hooks/useComposedRef';
+import { useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Textarea/textarea.module.scss';
+import styles from './textarea.module.scss';
 import type { CSSProperties, ChangeEvent, ForwardedRef, KeyboardEvent, TextareaHTMLAttributes } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { OptionalListener } from '../../Hooks/useListener';
+import type { Override } from '../../../TypeHelpers';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
 export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<

package/src/Components/FullScreen/FullScreen.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
-import { withMemo } from '@/helper/withMemo';
+import { useWindow } from '../../WindowContext/WindowContext';
+import { withMemo } from '../../helper/withMemo';
 import type { ComponentPropsWithoutRef } from 'react';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { Override } from '../../TypeHelpers';
+import type { RbmComponentProps } from '../RbmComponentProps';
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export type FullScreenProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<

package/src/Components/Hooks/useBreakpoint.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
+import { useWindow } from '../../WindowContext/WindowContext';
 
 export const BreakpointNames = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 

package/src/Components/Hooks/useDelayed.ts

@@ -13,7 +13,7 @@ export function useDelayed<Args extends any[]>(
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const realCB = useCallback(callback, dependencies);
-    const func = useCallback(
+    return useCallback(
         (...newArgs: Args) => {
             argsRef.current = newArgs;
 
@@ -25,13 +25,16 @@ export function useDelayed<Args extends any[]>(
 
                 if (argsRef.current !== undefined) {
                     realCB(...argsRef.current);
+                    argsRef.current = undefined;
                 }
             };
 
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
             }
-            timeoutRef.current = setTimeout(triggerFunc, delay);
+            timeoutRef.current = setTimeout(() => {
+                triggerFunc();
+            }, delay);
 
             if (maxDelay && maxDelayTimeout.current === undefined) {
                 maxDelayTimeout.current = setTimeout(() => {
@@ -41,6 +44,4 @@ export function useDelayed<Args extends any[]>(
         },
         [delay, maxDelay, realCB],
     );
-
-    return func;
 }

package/src/Components/Hooks/useDelayedState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { useDelayed } from '@/Components/Hooks/useDelayed';
+import { useDelayed } from './useDelayed';
 
 export function useDelayedState<T>(initialState: T | (() => T), delay = 100, maxDelay: number | undefined = undefined) {
     const [immediateState, setImmediateState] = useState(initialState);

package/src/Components/Hooks/useKeyListener.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
+import { useWindow } from '../../WindowContext/WindowContext';
 
 function isFormElement(element: EventTarget | null) {
     return (

package/src/Components/Hooks/useMousePosition.ts

@@ -1,4 +1,4 @@
-import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
+import { useClientLayoutEffect } from './useClientLayoutEffect';
 import { useRef } from 'react';
 
 export function useMousePosition() {

package/src/Components/Hooks/useWindowDimensions.ts

@@ -1,5 +1,5 @@
 import { useEffect, useReducer } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
+import { useWindow } from '../../WindowContext/WindowContext';
 
 export function useWindowDimensions() {
     const [, redraw] = useReducer((x) => x + 1, 0);

package/src/Components/Icon/{Icon.tsx → BaseIcon.tsx}

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Icon/icon.module.scss';
+import styles from './icon.module.scss';
 import type { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { Override } from '../../TypeHelpers';
+import type { RbmComponentProps } from '../RbmComponentProps';
+import type { Ref } from 'react';
 
 export type IconSource = IconProp | string | IconDefinition;
 
@@ -18,17 +19,18 @@ export type IconProps = RbmComponentProps<
             noMargin?: boolean;
             icon: IconSource;
             alt?: string;
+            ref?: Ref<HTMLImageElement | null>;
         }
     >
 >;
 
-export const Icon = withMemo(function Icon({
+export const BaseIcon = withMemo(function BaseIcon({
     icon,
     alt,
     className,
     noMargin = true,
     style,
-    title,
+    ref,
     ...props
 }: IconProps) {
     // Variables
@@ -55,7 +57,7 @@ export const Icon = withMemo(function Icon({
                 alt={alt}
                 className={classNames(styles.imgIcon, className, { [styles.margin]: !noMargin })}
                 style={style}
-                title={title}
+                ref={ref}
             />
         );
     }
@@ -65,7 +67,7 @@ export const Icon = withMemo(function Icon({
             icon={icon as IconProp}
             className={classNames(className, { [styles.margin]: !noMargin })}
             style={style}
-            title={title}
+            ref={ref as Ref<SVGSVGElement>}
         />
     );
 });

package/src/Components/Icon/DoubleIcon.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { DoubleIcon } from '@/Components/Icon/DoubleIcon';
+import { DoubleIcon } from './DoubleIcon';
 import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 
 const meta = {

package/src/Components/Icon/DoubleIcon.tsx

@@ -1,9 +1,9 @@
-import { Icon } from '@/Components/Icon/Icon';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
-import { withMemo } from '@/helper/withMemo';
+import { BaseIcon } from './BaseIcon';
+import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
+import { withMemo } from '../../helper/withMemo';
 import React from 'react';
-import styles from '@/Components/Icon/icon.module.scss';
-import type { IconProps, IconSource } from '@/Components/Icon/Icon';
+import styles from './icon.module.scss';
+import type { IconProps, IconSource } from './BaseIcon';
 
 export type DoubleIconProps = IconProps & {
     secondIcon: IconSource;
@@ -31,9 +31,9 @@ export const DoubleIcon = withMemo(function DoubleIcon({
     // RenderFunctions
 
     return (
-        <InlineBlock className={styles.doubleIconContainer}>
-            <Icon {...otherProps} color={color} />
-            <Icon icon={secondIcon} size="xs" className={styles.secondIcon} color={secondIconColor ?? color} />
-        </InlineBlock>
+        <BaseInlineBlock className={styles.doubleIconContainer}>
+            <BaseIcon {...otherProps} color={color} />
+            <BaseIcon icon={secondIcon} size="xs" className={styles.secondIcon} color={secondIconColor ?? color} />
+        </BaseInlineBlock>
     );
 });

package/src/Components/Icon/Icon.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '@/Components/Icon/Icon';
+import { BaseIcon } from './BaseIcon';
 import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 
 const meta = {
-    component: Icon,
+    component: BaseIcon,
     argTypes: {
         icon: {
             options: ['house', 'user'],
@@ -14,7 +14,7 @@ const meta = {
             },
         },
     },
-} satisfies Meta<typeof Icon>;
+} satisfies Meta<typeof BaseIcon>;
 
 export default meta;
 

package/src/Components/Icon/Icon.ts

@@ -0,0 +1,4 @@
+import { BaseIcon } from './BaseIcon';
+import { withTitle } from '../Title/withTitle';
+
+export const Icon = withTitle(BaseIcon);

package/src/Components/Image/Image.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Image } from '@/Components/Image/Image';
+import { Image } from './Image';
 
 const meta = {
     component: Image,

package/src/Components/Image/Image.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Image/image.module.scss';
+import styles from './image.module.scss';
 import type { CSSProperties } from 'react';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
+import type { Override } from '../../TypeHelpers';
+import type { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 
 export type ImageProps = RbmComponentProps<
     Override<

package/src/Components/InViewport/InViewport.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/InViewport/inViewport.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './inViewport.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type InViewportProps = RbmComponentProps<{
     threshold?: number;

package/src/Components/Layout/{Block.tsx → BaseBlock.tsx}

@@ -1,22 +1,21 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
-import { withMemo } from '@/helper/withMemo';
+import { ViewWithoutListeners } from './ViewWithoutListeners';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/layout.module.scss';
-import type { ComponentRef, ForwardedRef } from 'react';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
-
+import styles from './layout.module.scss';
+import type { ComponentRef, Ref } from 'react';
+import type { RbmComponentProps } from '../RbmComponentProps';
+import type { ViewWithoutListenersProps } from './ViewWithoutListeners';
 import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from '../../helper/withMemo';
 
 export type BlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
-        ref?: ForwardedRef<ComponentRef<AsType>>;
+        ref?: Ref<ComponentRef<AsType>>;
     }
 >;
 
-export const Block = withMemo(function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>({
+export const BaseBlock = withMemo(function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>({
     children,
     as = 'div' as AsType,
     className,

package/src/Components/Layout/{InlineBlock.tsx → BaseInlineBlock.tsx}

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
-import { withMemo } from '@/helper/withMemo';
+import { ViewWithoutListeners } from './ViewWithoutListeners';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/layout.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+import styles from './layout.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
+import type { ViewWithoutListenersProps } from './ViewWithoutListeners';
 
 import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from '../../helper/withMemo';
 
 export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
@@ -16,7 +16,7 @@ export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmCompon
     }
 >;
 
-export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>({
+export const BaseInlineBlock = withMemo(function BaseInlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>({
     children,
     as = 'span' as AsType,
     className,

package/src/Components/Layout/Block.ts

@@ -0,0 +1,4 @@
+import { BaseBlock } from './BaseBlock';
+import { withTitle } from '../Title/withTitle';
+
+export const Block = withTitle(BaseBlock);

package/src/Components/Layout/Container.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/container.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './container.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export const CONTAINER_CLASSES = {
     sm: styles['container-sm'],

package/src/Components/Layout/Flex.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
-import { withMemo } from '@/helper/withMemo';
+import { ViewWithoutListeners } from './ViewWithoutListeners';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/layout.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+import styles from './layout.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
+import type { ViewWithoutListenersProps } from './ViewWithoutListeners';
 
 import IntrinsicElements = JSX.IntrinsicElements;
 
@@ -13,6 +13,12 @@ export type FlexProps<AsType extends keyof IntrinsicElements> = RbmComponentProp
     ViewWithoutListenersProps<AsType> & {
         horizontal?: boolean;
         grow?: boolean;
+        unaligned?: boolean;
+        fillWidth?: boolean;
+        fillHeight?: boolean;
+        fill?: boolean;
+        // TODO gap as enum?
+        gap?: number;
     }
 >;
 
@@ -23,6 +29,12 @@ export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicEle
     horizontal = false,
     ref,
     grow = false,
+    unaligned = false,
+    fill = false,
+    fillWidth = fill,
+    fillHeight = fill,
+    gap,
+    style,
     ...props
 }: FlexProps<AsType>) {
     // Variables
@@ -45,7 +57,11 @@ export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicEle
                 [styles.horizontal]: horizontal,
                 [styles.grow]: grow,
                 [styles.weight1]: grow,
+                [styles.unaligned]: unaligned,
+                [styles.fillWidth]: fillWidth,
+                [styles.fillHeight]: fillHeight,
             })}
+            style={{ gap, ...style }}
             as={as as AsType}
             ref={ref}
             {...(props as ViewWithoutListenersProps<AsType>)}

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '../BaseBlock';
 import { useMemo } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/Grid/grid.module.scss';
+import styles from './grid.module.scss';
 import type { ForwardedRef } from 'react';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
@@ -49,13 +49,13 @@ export const Grid = withMemo(function Grid({
     // Render Functions
 
     return (
-        <Block
+        <BaseBlock
             ref={ref}
             style={appliedStyle}
             className={classNames(styles.grid, className, { [styles.useContainerWidth]: useContainerWidth })}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}
-        </Block>
+        </BaseBlock>
     );
 });

package/src/Components/Layout/Grid/GridItem.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
-import { withMemo } from '@/helper/withMemo';
+import { BaseInlineBlock } from '../BaseInlineBlock';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/Grid/grid.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './grid.module.scss';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
 export type GridItemProps = RbmComponentProps<{
     size: number;
@@ -151,13 +151,13 @@ function GridItem({
 
     // Render Functions
     return (
-        <InlineBlock
+        <BaseInlineBlock
             style={style}
             className={classNames(...classes.map((name) => styles[name]), styles.item, className)}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}
-        </InlineBlock>
+        </BaseInlineBlock>
     );
 }
 

package/src/Components/Layout/Grow.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/layout.module.scss';
+import styles from './layout.module.scss';
 import type { ForwardedRef } from 'react';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type GrowProps = RbmComponentProps<{
     center?: boolean;

package/src/Components/Layout/Inline.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
-import { withMemo } from '@/helper/withMemo';
+import { ViewWithoutListeners } from './ViewWithoutListeners';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Layout/layout.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+import styles from './layout.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
+import type { ViewWithoutListenersProps } from './ViewWithoutListeners';
 
 import IntrinsicElements = JSX.IntrinsicElements;
 

package/src/Components/Layout/InlineBlock.ts

@@ -0,0 +1,4 @@
+import { BaseInlineBlock } from './BaseInlineBlock';
+import { withTitle } from '../Title/withTitle';
+
+export const InlineBlock = withTitle(BaseInlineBlock);

package/src/Components/Layout/View.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { withMemo } from '@/helper/withMemo';
-import type { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
-import type { Override } from '@/TypeHelpers';
+import { withMemo } from '../../helper/withMemo';
+import type { ComponentRef, PropsWithChildren, Ref } from 'react';
+import type { Override } from '../../TypeHelpers';
 
 import IntrinsicElements = JSX.IntrinsicElements;
 
@@ -12,7 +12,7 @@ export type ViewProps<AsType extends keyof IntrinsicElements> = PropsWithChildre
         {
             as?: AsType;
             children?: React.ReactNode;
-            ref?: ForwardedRef<ComponentRef<AsType>>;
+            ref?: Ref<ComponentRef<AsType>>;
         }
     >
 >;

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { View } from '@/Components/Layout/View';
-import { withMemo } from '@/helper/withMemo';
+import { View } from './View';
+import { withMemo } from '../../helper/withMemo';
 import type { DOMAttributes, ForwardedRef } from 'react';
-import type { ViewProps } from '@/Components/Layout/View';
+import type { ViewProps } from './View';
 
 import IntrinsicElements = JSX.IntrinsicElements;
 

package/src/Components/Layout/layout.module.scss

@@ -7,6 +7,19 @@
   &.horizontal {
     flex-direction: row;
   }
+
+  &.unaligned {
+    align-items: unset;
+    justify-content: unset;
+  }
+
+  &.fillWidth {
+    width: 100%;
+  }
+
+  &.fillHeight {
+    height: 100%;
+  }
 }
 
 .grow {

package/src/Components/LoadingArea/LoadingArea.stories.tsx

@@ -1,22 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Block } from '@/Components/Layout/Block';
-import { LoadingArea } from '@/Components/LoadingArea/LoadingArea';
-import { Text } from '@/Components/Text/Text';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { LoadingArea } from './LoadingArea';
+import { Text } from '../Text/Text';
 import React from 'react';
 
 const meta = {
     component: LoadingArea,
     render: (args) => (
         <LoadingArea {...args}>
-            <Block
+            <BaseBlock
                 style={{
                     height: '200px',
                     background: 'gray',
                 }}
             >
                 <Text>Content goes here Error within Story. Normally it would only cover the content and not more</Text>
-            </Block>
+            </BaseBlock>
         </LoadingArea>
     ),
 } satisfies Meta<typeof LoadingArea>;

package/src/Components/LoadingArea/LoadingArea.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { LoadingCircle } from '@/Components/LoadingCircle/LoadingCircle';
-import { withMemo } from '@/helper/withMemo';
-import baseStyles from '@/scss/baseClasses.module.scss';
+import { LoadingCircle } from '../LoadingCircle/LoadingCircle';
+import { withMemo } from '../../helper/withMemo';
+import baseStyles from '../../scss/baseClasses.module.scss';
 import classNames from 'classnames';
-import styles from '@/Components/LoadingArea/loadingArea.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './loadingArea.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type LoadingAreaProps = RbmComponentProps<{
     loading: boolean;

package/src/Components/LoadingCircle/LoadingCircle.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { LoadingCircle } from '@/Components/LoadingCircle/LoadingCircle';
-import { Size } from '@/Size';
+import { LoadingCircle } from './LoadingCircle';
+import { Size } from '../../Size';
 import React from 'react';
 
 const meta = {