@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

package/eslint.config.js

@@ -5,6 +5,7 @@ export default [
     ...defaultConfig,
     {
         rules: {
+            "no-relative-import-paths/no-relative-import-paths": "off",
             'import/no-extraneous-dependencies': [
                 'error',
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Mobile React Components",
   "publishConfig": {
     "access": "public"

package/src/Components/ActionSheet/ActionSheet.stories.tsx

@@ -1,10 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ActionSheet } from '@/Components/ActionSheet/ActionSheet';
+import { ActionSheet } from './ActionSheet';
 import { faCog, faHouse, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 import React, { useEffect, useRef } from 'react';
-import type { ActionSheetHandle } from '@/Components/ActionSheet/ActionSheet';
+import type { ActionSheetHandle } from './ActionSheet';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
     component: ActionSheet,

package/src/Components/ActionSheet/ActionSheet.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Container } from '@/Components/Layout/Container';
-import { Flex } from '@/Components/Layout/Flex';
-import { Icon } from '@/Components/Icon/Icon';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
-import { Text } from '@/Components/Text/Text';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
+import { Clickable } from '../Clickable/Clickable';
+import { Container } from '../Layout/Container';
+import { Flex } from '../Layout/Flex';
+import { Text } from '../Text/Text';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useImperativeHandle, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
-import baseStyles from '@/scss/baseClasses.module.scss';
+import { withMemo } from '../../helper/withMemo';
+import baseStyles from '../../scss/baseClasses.module.scss';
 import classNames from 'classnames';
-import styles from '@/Components/ActionSheet/actionSheet.module.scss';
+import styles from './actionSheet.module.scss';
 import type { ForwardedRef } from 'react';
-import type { IconSource } from '@/Components/Icon/Icon';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { IconSource } from '../Icon/BaseIcon';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type ActionSheetAction<ActionData> = {
     name: string;
@@ -89,7 +89,9 @@ export const ActionSheet = withMemo(function ActionSheet({
             onClick={onActionClick}
             onClickData={action}
         >
-            <InlineBlock className={styles.actionIcon}>{action.icon ? <Icon icon={action.icon} /> : null}</InlineBlock>
+            <BaseInlineBlock className={styles.actionIcon}>
+                {action.icon ? <BaseIcon icon={action.icon} /> : null}
+            </BaseInlineBlock>
             <Text className={styles.actionName}>{action.name}</Text>
         </Clickable>
     );
@@ -103,9 +105,9 @@ export const ActionSheet = withMemo(function ActionSheet({
             <Container fluid="xxl" className={baseStyles.fullHeight}>
                 <Flex className={styles.content}>
                     {title ? (
-                        <Block className={styles.title}>
+                        <BaseBlock className={styles.title}>
                             <Text>{title}</Text>
-                        </Block>
+                        </BaseBlock>
                     ) : null}
                     {actions.map(renderAction)}
                     <Clickable
@@ -113,9 +115,9 @@ export const ActionSheet = withMemo(function ActionSheet({
                         onClick={() => console.log('Cancel clicked')}
                         __allowChildren="all"
                     >
-                        <InlineBlock className={styles.actionIcon}>
-                            <Icon icon={faTimes} />
-                        </InlineBlock>
+                        <BaseInlineBlock className={styles.actionIcon}>
+                            <BaseIcon icon={faTimes} />
+                        </BaseInlineBlock>
                         {cancelText}
                     </Clickable>
                 </Flex>

package/src/Components/Card/Card.stories.tsx

@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Card } from '@/Components/Card/Card';
-import { Text } from '@/Components/Text/Text';
+import { Card } from './Card';
+import { Text } from '../Text/Text';
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
     component: Card,

package/src/Components/Card/Card.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/Card/card.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './card.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 import type { ReactElement } from 'react';
 
 export type CardProps = RbmComponentProps<{

package/src/Components/Clickable/Clickable.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import { useComposedRef } from '@/Components/Hooks/useComposedRef';
-import { useListener } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { useComposedRef } from '../Hooks/useComposedRef';
+import { useListener } from '../Hooks/useListener';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Clickable/clickable.module.scss';
+import styles from './clickable.module.scss';
 import type { ForwardedRef, MouseEvent, PointerEvent, MouseEvent as ReactMouseEvent } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { OptionalListener } from '../Hooks/useListener';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, PointerEvent>;

package/src/Components/Colors.stories.tsx

@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Block } from '@/Components/Layout/Block';
-import { Grid } from '@/Components/Layout/Grid/Grid';
-import { GridItem } from '@/Components/Layout/Grid/GridItem';
+import { BaseBlock } from './Layout/BaseBlock';
+import { Grid } from './Layout/Grid/Grid';
+import { GridItem } from './Layout/Grid/GridItem';
 import { ObjectHelper } from '@ainias42/js-helper';
-import { Text } from '@/Components/Text/Text';
+import { Text } from './Text/Text';
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {} satisfies Meta<typeof Text>;
 
@@ -40,7 +39,7 @@ export const Default: Story = {
         return (
             <div>
                 {ObjectHelper.entries(textColors).map(([category, colors]) => (
-                    <Block>
+                    <BaseBlock>
                         <Text emphasized={true}>Text - {category}</Text>
                         <Grid>
                             {colors.map((color) => (
@@ -49,15 +48,15 @@ export const Default: Story = {
                                 </GridItem>
                             ))}
                         </Grid>
-                    </Block>
+                    </BaseBlock>
                 ))}
                 {ObjectHelper.entries(backgroundColors).map(([category, colors]) => (
-                    <Block>
+                    <BaseBlock>
                         <Text emphasized={true}>Background - {category}</Text>
                         <Grid>
                             {colors.map((color) => (
                                 <GridItem size={2}>
-                                    <Block
+                                    <BaseBlock
                                         style={{
                                             backgroundColor: `var(--${color})`,
                                             padding: '0.5rem',
@@ -65,11 +64,11 @@ export const Default: Story = {
                                         }}
                                     >
                                         <Text>{color}</Text>
-                                    </Block>
+                                    </BaseBlock>
                                 </GridItem>
                             ))}
                         </Grid>
-                    </Block>
+                    </BaseBlock>
                 ))}
             </div>
         );

package/src/Components/Dialog/AlertDialog.stories.tsx

@@ -1,5 +1,5 @@
-import { AlertDialog } from '@/Components/Dialog/AlertDialog';
-import { Dialog } from '@/Components/Dialog/Dialog';
+import { AlertDialog } from './AlertDialog';
+import { Dialog } from './Dialog';
 import { fn } from 'storybook/test';
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';

package/src/Components/Dialog/AlertDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ButtonDialog } from '@/Components/Dialog/ButtonDialog';
+import { ButtonDialog } from './ButtonDialog';
 import { useMemo } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 
 export type AlertDialogProps = {
     title?: string;

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Flavor } from '@/Components/Flavor';
-import { TEXT_SIZE, Text } from '@/Components/Text/Text';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { Clickable } from '../Clickable/Clickable';
+import { Flavor } from '../Flavor';
+import { TEXT_SIZE, Text } from '../Text/Text';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Dialog/buttonDialog.module.scss';
-import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
+import styles from './buttonDialog.module.scss';
+import type { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import type { ReactElement } from 'react';
 
 export type ButtonDialogProps = RbmComponentProps<
@@ -37,27 +37,27 @@ function ButtonDialog({ title, message, buttons, style, className, extraContent
     // Render Functions
 
     return (
-        <Block className={classNames(styles.buttonDialog, className)} style={style}>
+        <BaseBlock className={classNames(styles.buttonDialog, className)} style={style}>
             {!!title && (
-                <Block>
+                <BaseBlock>
                     <Text size={TEXT_SIZE.large} className={styles.title}>
                         {title}
                     </Text>
-                </Block>
+                </BaseBlock>
             )}
-            <Block>
+            <BaseBlock>
                 <Text className={styles.message}>{message}</Text>
-            </Block>
+            </BaseBlock>
             {extraContent}
-            <Block className={styles.buttonContainer}>
+            <BaseBlock className={styles.buttonContainer}>
                 {buttons.map((b, i) => (
                     // eslint-disable-next-line react/no-array-index-key
                     <Clickable onClick={b.callback} className={classNames(styles.button)} key={i + b.text}>
                         <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.Accent)}>{b.text}</Text>
                     </Clickable>
                 ))}
-            </Block>
-        </Block>
+            </BaseBlock>
+        </BaseBlock>
     );
 }
 

package/src/Components/Dialog/ConfirmDialog.stories.tsx

@@ -1,9 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { ConfirmDialog } from '@/Components/Dialog/ConfirmDialog';
-import { Dialog } from '@/Components/Dialog/Dialog';
+import { ConfirmDialog } from './ConfirmDialog';
+import { Dialog } from './Dialog';
 import { fn } from 'storybook/test';
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {
     component: ConfirmDialog,

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ButtonDialog } from '@/Components/Dialog/ButtonDialog';
+import { ButtonDialog } from './ButtonDialog';
 import { useMemo } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 
 export type ConfirmDialogProps = {
     title?: string;

package/src/Components/Dialog/Dialog.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
+import { Clickable } from '../Clickable/Clickable';
 import { useCallback, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Dialog/dialog.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './dialog.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 import type { ReactElement } from 'react';
 
 export type DialogProps<ReturnData> = RbmComponentProps<
@@ -63,17 +63,17 @@ function Dialog<ReturnData>({
     }
 
     return (
-        <Block className={classNames(styles.dialogContainer, className)} __allowChildren="all" style={style}>
+        <BaseBlock className={classNames(styles.dialogContainer, className)} __allowChildren="all" style={style}>
             <Clickable onClick={onCurtainClick} className={styles.closeCurtain} interactable={closable} />
-            <InlineBlock __allowChildren="all" className={styles.dialog}>
+            <BaseInlineBlock __allowChildren="all" className={styles.dialog}>
                 {React.Children.map(children, (child) => {
                     if (React.isValidElement(child)) {
                         return React.cloneElement(child, { close });
                     }
                     return child;
                 })}
-            </InlineBlock>
-        </Block>
+            </BaseInlineBlock>
+        </BaseBlock>
     );
 }
 

package/src/Components/Dialog/DialogBackground.tsx

@@ -1,15 +1,15 @@
 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 { Heading } from '@/Components/Text/Heading';
-import { Icon } from '@/Components/Icon/Icon';
+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 { Heading } from '../Text/Heading';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Dialog/dialogBackground.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './dialogBackground.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type DialogBackgroundProps = RbmComponentProps<{ title?: string; onClose?: () => void }>;
 
@@ -37,7 +37,7 @@ export const DialogBackground = withMemo(function DialogBackground({
     // Render Functions
 
     return (
-        <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
+        <BaseBlock __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
             {(!!title || !!onClose) && (
                 <Flex horizontal={true} className={styles.title}>
                     {!!title && (
@@ -47,12 +47,12 @@ export const DialogBackground = withMemo(function DialogBackground({
                     )}
                     {!!onClose && (
                         <Clickable onClick={onClose}>
-                            <Icon size="lg" icon={faCircleXmark} />
+                            <BaseIcon size="lg" icon={faCircleXmark} />
                         </Clickable>
                     )}
                 </Flex>
             )}
             {children}
-        </Block>
+        </BaseBlock>
     );
 });

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Dialog } from '@/Components/Dialog/Dialog';
-import { DialogProvider } from '@/Components/Dialog/DialogContext';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { Dialog } from './Dialog';
+import { DialogProvider } from './DialogContext';
 import { PromiseWithHandlers } from '@ainias42/js-helper';
 import { useCallback, useImperativeHandle, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import type { ComponentType, ForwardedRef, PropsWithChildren } from 'react';
-import type { ShowDialog } from '@/Components/Dialog/DialogContext';
+import type { ShowDialog } from './DialogContext';
 
 export type DialogContainerProps = PropsWithChildren<{
     dialogClassName?: string;
@@ -80,7 +80,7 @@ export const DialogContainer = withMemo(function DialogContainer({
     return (
         <DialogProvider value={showDialog}>
             {children}
-            <Block className={dialogClassName}>
+            <BaseBlock className={dialogClassName}>
                 {dialogs.map((d) => {
                     const DialogComponent = d.component;
                     return (
@@ -89,7 +89,7 @@ export const DialogContainer = withMemo(function DialogContainer({
                         </Dialog>
                     );
                 })}
-            </Block>
+            </BaseBlock>
         </DialogProvider>
     );
 });

package/src/Components/Dialog/DialogContext.ts

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import type { ComponentType } from 'react';
-import type { EmptyProps } from '@/helper/EmptyProps';
+import type { EmptyProps } from '../../helper/EmptyProps';
 
 export type ShowDialog = <
     P = EmptyProps,

package/src/Components/Dialog/useAlertDialog.ts

@@ -1,6 +1,6 @@
-import { AlertDialog } from '@/Components/Dialog/AlertDialog';
+import { AlertDialog } from './AlertDialog';
 import { useCallback } from 'react';
-import { useDialog } from '@/Components/Dialog/DialogContext';
+import { useDialog } from './DialogContext';
 
 export function useAlertDialog() {
     const showDialog = useDialog();

package/src/Components/Dialog/useConfirmDialog.ts

@@ -1,6 +1,6 @@
-import { ConfirmDialog } from '@/Components/Dialog/ConfirmDialog';
+import { ConfirmDialog } from './ConfirmDialog';
 import { useCallback } from 'react';
-import { useDialog } from '@/Components/Dialog/DialogContext';
+import { useDialog } from './DialogContext';
 
 export function useConfirmDialog() {
     const showDialog = useDialog();

package/src/Components/DragAndDrop/DragItem.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Draggable } from '@hello-pangea/dnd';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import type { DraggableProps } from '@hello-pangea/dnd';
-import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
 
 export type DragItemProps = RbmComponentProps<Omit<DraggableProps, 'children'>, WithNoStringAndChildrenProps>;
 

package/src/Components/DragAndDrop/DropArea.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Droppable } from '@hello-pangea/dnd';
-import { useStrictEnabled } from '@/Components/DragAndDrop/useStrictEnabled';
-import { withMemo } from '@/helper/withMemo';
+import { useStrictEnabled } from './useStrictEnabled';
+import { withMemo } from '../../helper/withMemo';
 import type { DroppableProps } from '@hello-pangea/dnd';
-import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
 
 export type DropAreaProps = RbmComponentProps<Omit<DroppableProps, 'children'>, WithNoStringAndChildrenProps>;
 

package/src/Components/ErrorBoundary.tsx

@@ -1,6 +1,6 @@
-import { Block } from '@/Components/Layout/Block';
-import { Heading } from '@/Components/Text/Heading';
-import { Text } from '@/Components/Text/Text';
+import { BaseBlock } from './Layout/BaseBlock';
+import { Heading } from './Text/Heading';
+import { Text } from './Text/Text';
 import React, { Component } from 'react';
 import type { ReactNode } from 'react';
 
@@ -35,10 +35,10 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
             }
 
             return (
-                <Block>
+                <BaseBlock>
                     <Heading>{message}</Heading>
                     {!!stack && showStack && <Text style={{ whiteSpace: 'pre' }}>{stack}</Text>}
-                </Block>
+                </BaseBlock>
             );
         }
         return children;

package/src/Components/FormElements/Button/Button.stories.tsx

@@ -1,10 +1,10 @@
-import { Button } from '@/Components/FormElements/Button/Button';
-import { ButtonType } from '@/Components/FormElements/Button/ButtonType';
-import { Flavor } from '@/Components/Flavor';
-import { Size } from '@/Size';
-import { Text } from '@/Components/Text/Text';
+import { Button } from './Button';
+import { ButtonType } from './ButtonType';
+import { Flavor } from '../../Flavor';
+import { Size } from '../../../Size';
+import { Text } from '../../Text/Text';
 import React from 'react';
-import type { ButtonProps } from '@/Components/FormElements/Button/Button';
+import type { ButtonProps } from './Button';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta = {

package/src/Components/FormElements/Button/Button.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { ButtonType } from '@/Components/FormElements/Button/ButtonType';
-import { Flavor } from '@/Components/Flavor';
-import { Size } from '@/Size';
+import { ButtonType } from './ButtonType';
+import { Flavor } from '../../Flavor';
+import { Size } from '../../../Size';
 import { useCallback } from 'react';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { withTitle } from '../../Title/withTitle';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Button/button.module.scss';
+import styles from './button.module.scss';
 import type { HTMLAttributes, MouseEvent } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { OptionalListener } from '../../Hooks/useListener';
 import type { Override } from '@ainias42/js-helper';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
 export type ButtonProps<ClickData> = RbmComponentProps<
     Override<
@@ -26,7 +26,7 @@ export type ButtonProps<ClickData> = RbmComponentProps<
     >
 >;
 
-export const Button = withMemo(function Button<ClickData>({
+export const Button = withTitle(function Button<ClickData>({
     children,
     className,
     disabled,

package/src/Components/FormElements/CheckBox/Checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@/Components/FormElements/CheckBox/Checkbox';
+import { Checkbox } from './Checkbox';
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { FormError } from '@/Components/FormElements/Error/FormError';
+import { FormError } from '../Error/FormError';
 import { useCallback } 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/FormElements/CheckBox/checkbox.module.scss';
+import styles from './checkbox.module.scss';
 import type { ChangeEventHandler, InputHTMLAttributes } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { OptionalListener } from '../../Hooks/useListener';
 import type { Override } from '@ainias42/js-helper';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
 export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps<
     Override<

package/src/Components/FormElements/ColorInput/ColorInput.stories.tsx

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