@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { FormError } from '@/Components/FormElements/Error/FormError';
-import { Menu } from '@/Components/Menu/Menu';
+import { FormError } from '../Error/FormError';
+import { Menu } from '../../Menu/Menu';
 import { Sketch } from '@uiw/react-color';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
-import { useListener } from '@/Components/Hooks/useListener';
-import { useSharedSelectedColor } from '@/Components/FormElements/ColorInput/sharedSelectedColor';
-import { withMemo } from '@/helper/withMemo';
+import { useClientLayoutEffect } from '../../Hooks/useClientLayoutEffect';
+import { useListener } from '../../Hooks/useListener';
+import { useSharedSelectedColor } from './sharedSelectedColor';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/ColorInput/colorInput.module.scss';
+import styles from './colorInput.module.scss';
 import type { ColorResult } from '@uiw/react-color';
 import type { MouseEvent } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { OptionalListener } from '../../Hooks/useListener';
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;

package/src/Components/FormElements/Controller/ColorInputController.ts

@@ -1,4 +1,4 @@
-import { ColorInput } from '@/Components/FormElements/ColorInput/ColorInput';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { ColorInput } from '../ColorInput/ColorInput';
+import { withHookController } from './withHookController';
 
 export const ColorInputController = withHookController(ColorInput, 'onChangeColor');

package/src/Components/FormElements/Controller/FileInputController.tsx

@@ -1,10 +1,10 @@
-import { FileInput } from '@/Components/FormElements/Input/FileInput/FileInput';
+import { FileInput } from '../Input/FileInput/FileInput';
 import { useController, useFormContext, useFormState } from 'react-hook-form';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../../helper/withMemo';
 import React, { useCallback } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
-import type { FileInputProps } from '@/Components/FormElements/Input/FileInput/FileInput';
-import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
+import type { FileInputProps } from '../Input/FileInput/FileInput';
+import type { FileType } from '../Input/FileInput/FileType';
 
 type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
     FileInputProps<unknown>,

package/src/Components/FormElements/Controller/HookForm.tsx

@@ -1,8 +1,8 @@
-import { FormError } from '@/Components/FormElements/Error/FormError';
+import { FormError } from '../Error/FormError';
 import { FormProvider } from 'react-hook-form';
-import { LoadingArea } from '@/Components/LoadingArea/LoadingArea';
-import { SendFormContext } from '@/Components/FormElements/Controller/SendFormContext';
-import { withMemo } from '@/helper/withMemo';
+import { LoadingArea } from '../../LoadingArea/LoadingArea';
+import { SendFormContext } from './SendFormContext';
+import { withMemo } from '../../../helper/withMemo';
 import React, { useCallback, useEffect } from 'react';
 import type { Awaitable } from '@ainias42/js-helper';
 import type { FieldPath, FormProviderProps, Path } from 'react-hook-form';

package/src/Components/FormElements/Controller/InputController.ts

@@ -1,4 +1,4 @@
-import { Input } from '@/Components/FormElements/Input/Input';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { Input } from '../Input/Input';
+import { withHookController } from './withHookController';
 
 export const InputController = withHookController(Input, 'onChangeText');

package/src/Components/FormElements/Controller/MultipleFileInputController.ts

@@ -1,4 +1,4 @@
-import { MultipleFileInput } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { MultipleFileInput } from '../Input/FileInput/MultipleFileInput';
+import { withHookController } from './withHookController';
 
 export const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');

package/src/Components/FormElements/Controller/PasswordInputController.ts

@@ -1,4 +1,4 @@
-import { PasswordInput } from '@/Components/FormElements/Input/PasswordInput/PasswordInput';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { PasswordInput } from '../Input/PasswordInput/PasswordInput';
+import { withHookController } from './withHookController';
 
 export const PasswordInputController = withHookController(PasswordInput, 'onChangeText');

package/src/Components/FormElements/Controller/SelectController.ts

@@ -1,4 +1,4 @@
-import { Select } from '@/Components/FormElements/Select/Select';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { Select } from '../Select/Select';
+import { withHookController } from './withHookController';
 
 export const SelectController = withHookController(Select, 'onChangeValue');

package/src/Components/FormElements/Controller/SliderController.ts

@@ -1,4 +1,4 @@
-import { Slider } from '@/Components/FormElements/Slider/Slider';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { Slider } from '../Slider/Slider';
+import { withHookController } from './withHookController';
 
 export const SliderController = withHookController(Slider, 'onChangeValue');

package/src/Components/FormElements/Controller/SwitchController.ts

@@ -1,4 +1,4 @@
-import { Switch } from '@/Components/FormElements/Switch/Switch';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { Switch } from '../Switch/Switch';
+import { withHookController } from './withHookController';
 
 export const SwitchController = withHookController(Switch, 'onChangeChecked');

package/src/Components/FormElements/Controller/TextareaController.ts

@@ -1,4 +1,4 @@
-import { Textarea } from '@/Components/FormElements/Textarea/Textarea';
-import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+import { Textarea } from '../Textarea/Textarea';
+import { withHookController } from './withHookController';
 
 export const TextareaController = withHookController(Textarea, 'onChangeText');

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -1,6 +1,6 @@
-import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useController, useFormContext } from 'react-hook-form';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../../helper/withMemo';
 import React, { useCallback } from 'react';
 import type { ComponentProps, ComponentRef, ComponentType, ForwardedRef } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';

package/src/Components/FormElements/Error/FormError.stories.tsx

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

package/src/Components/FormElements/Error/FormError.tsx

@@ -1,9 +1,9 @@
-import { Block } from '@/Components/Layout/Block';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
-import { TEXT_SIZE, Text } from '@/Components/Text/Text';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../../Layout/BaseBlock';
+import { BaseInlineBlock } from '../../Layout/BaseInlineBlock';
+import { TEXT_SIZE, Text } from '../../Text/Text';
+import { withMemo } from '../../../helper/withMemo';
 import React from 'react';
-import styles from '@/Components/FormElements/Error/formError.module.scss';
+import styles from './formError.module.scss';
 
 export type FormErrorProps = { error?: string; inline?: boolean };
 
@@ -28,15 +28,15 @@ export const FormError = withMemo(function FormError({ error, inline }: FormErro
 
     if (inline) {
         return (
-            <InlineBlock className={styles.error}>
+            <BaseInlineBlock className={styles.error}>
                 <Text size={TEXT_SIZE.small}>{error}</Text>
-            </InlineBlock>
+            </BaseInlineBlock>
         );
     }
 
     return (
-        <Block className={styles.error}>
+        <BaseBlock className={styles.error}>
             <Text size={TEXT_SIZE.small}>{error}</Text>
-        </Block>
+        </BaseBlock>
     );
 });

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

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

package/src/Components/FormElements/Input/FileInput/FileInput.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { MultipleFileInput } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
+import { MultipleFileInput } from './MultipleFileInput';
 import { useCallback, useMemo } from 'react';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
-import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
-import type { Listener } from '@/Components/Hooks/useListener';
-import type { MultipleFileInputProps } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import { useListenerWithExtractedProps } from '../../../Hooks/useListener';
+import { withMemo } from '../../../../helper/withMemo';
+import type { FileType } from './FileType';
+import type { Listener } from '../../../Hooks/useListener';
+import type { MultipleFileInputProps } from './MultipleFileInput';
+import type { Override } from '../../../../TypeHelpers';
+import type { RbmComponentProps } from '../../../RbmComponentProps';
 
 export type FileInputProps<OnChangeFileData> = RbmComponentProps<
     Override<

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
-import { Clickable } from '@/Components/Clickable/Clickable';
-import { Flex } from '@/Components/Layout/Flex';
-import { FormError } from '@/Components/FormElements/Error/FormError';
-import { Grow } from '@/Components/Layout/Grow';
-import { Icon } from '@/Components/Icon/Icon';
-import { Image } from '@/Components/Image/Image';
-import { Inline } from '@/Components/Layout/Inline';
-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 { FormError } from '../../Error/FormError';
+import { Grow } from '../../../Layout/Grow';
+import { Image } from '../../../Image/Image';
+import { Inline } from '../../../Layout/Inline';
+import { Text } from '../../../Text/Text';
 import { faFile, faPlus, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useRef } 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/Input/FileInput/fileInput.module.scss';
+import styles from './fileInput.module.scss';
 import type { ChangeEventHandler, DragEvent, InputHTMLAttributes } from 'react';
-import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
-import type { Listener } from '@/Components/Hooks/useListener';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { FileType } from './FileType';
+import type { Listener } from '../../../Hooks/useListener';
+import type { Override } from '../../../../TypeHelpers';
+import type { RbmComponentProps } from '../../../RbmComponentProps';
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
     Override<
@@ -211,10 +211,10 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
         }
 
         return (
-            <Block className={styles.previewText}>
-                <Icon icon={faFile} className={styles.previewTextIcon} />
+            <BaseBlock className={styles.previewText}>
+                <BaseIcon icon={faFile} className={styles.previewTextIcon} />
                 <Text>{file.name}</Text>
-            </Block>
+            </BaseBlock>
         );
     };
 
@@ -256,7 +256,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                         onClick={removeFile}
                                         onClickData={index}
                                     >
-                                        <Icon icon={faTimesCircle} />
+                                        <BaseIcon icon={faTimesCircle} />
                                     </Clickable>
                                 )}
                             </Clickable>
@@ -275,7 +275,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                         onClick={clickOnFile}
                         __allowChildren="html"
                     >
-                        <Icon icon={faPlus} />
+                        <BaseIcon icon={faPlus} />
                         <input
                             {...props}
                             ref={inputRef}

package/src/Components/FormElements/Input/HiddenInput.stories.tsx

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

package/src/Components/FormElements/Input/HiddenInput.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Input } from '@/Components/FormElements/Input/Input';
-import { withMemo } from '@/helper/withMemo';
+import { Input } from './Input';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Input/input.module.scss';
-import type { InputProps } from '@/Components/FormElements/Input/Input';
+import styles from './input.module.scss';
+import type { InputProps } from './Input';
 
 export type HiddenInputProps<OnChangeType, OnBlurData, OnChangeEndData> = InputProps<
     OnChangeType,

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

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

package/src/Components/FormElements/Input/Input.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { FormError } from '@/Components/FormElements/Error/FormError';
+import { FormError } from '../Error/FormError';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useComposedRef } from '@/Components/Hooks/useComposedRef';
-import { useDebounced } from '@/Components/Hooks/useDebounced';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
-import { useSendFormContext } from '@/Components/FormElements/Controller/SendFormContext';
-import { withMemo } from '@/helper/withMemo';
+import { useComposedRef } from '../../Hooks/useComposedRef';
+import { useDebounced } from '../../Hooks/useDebounced';
+import { useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import { useSendFormContext } from '../Controller/SendFormContext';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Input/input.module.scss';
+import styles from './input.module.scss';
 import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, KeyboardEvent } 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 InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.stories.tsx

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

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx

@@ -1,16 +1,16 @@
-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 { Input } from '@/Components/FormElements/Input/Input';
+import { BaseIcon } from '../../../Icon/BaseIcon';
+import { Clickable } from '../../../Clickable/Clickable';
+import { Flex } from '../../../Layout/Flex';
+import { Grow } from '../../../Layout/Grow';
+import { Input } from '../Input';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../../../helper/withMemo';
 import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Input/PasswordInput/passwordInput.module.scss';
-import type { DistributiveOmit } from '@/helper/DistributiveOmit';
+import styles from './passwordInput.module.scss';
+import type { DistributiveOmit } from '../../../../helper/DistributiveOmit';
 import type { ForwardedRef } from 'react';
-import type { InputProps } from '@/Components/FormElements/Input/Input';
+import type { InputProps } from '../Input';
 
 export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
     InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
@@ -50,7 +50,7 @@ export const PasswordInput = withMemo(function PasswordInput<OnChangeData, OnBlu
                 <Input {...props} type={isVisible ? 'text' : 'password'} ref={ref} />
             </Grow>
             <Clickable onClick={toggleVisible} className={styles.showButton} interactable={false}>
-                <Icon icon={isVisible ? faEye : faEyeSlash} />
+                <BaseIcon icon={isVisible ? faEye : faEyeSlash} />
             </Clickable>
         </Flex>
     );

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

@@ -1,7 +1,7 @@
-import { SearchSelectInput } from '@/Components/FormElements/SearchSelectInput/SearchSelectInput';
+import { SearchSelectInput } from './SearchSelectInput';
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { SearchSelectInputProps } from '@/Components/FormElements/SearchSelectInput/SearchSelectInput';
+import type { SearchSelectInputProps } from './SearchSelectInput';
 
 const meta = {
     component: SearchSelectInput,

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { ArrayHelper } from '@ainias42/js-helper';
-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 { InlineBlock } from '@/Components/Layout/InlineBlock';
-import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { BaseBlock } from '../../Layout/BaseBlock';
+import { BaseInlineBlock } from '../../Layout/BaseInlineBlock';
+import { Clickable } from '../../Clickable/Clickable';
+import { Flex } from '../../Layout/Flex';
+import { Grow } from '../../Layout/Grow';
+import { TEXT_SIZE, Text } from '../../Text/Text';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useWindow } from '@/WindowContext/WindowContext';
-import { withMemo } from '@/helper/withMemo';
+import { useWindow } from '../../../WindowContext/WindowContext';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/SearchSelectInput/seachSelectInput.module.scss';
+import styles from './seachSelectInput.module.scss';
 import type { ChangeEventHandler, KeyboardEvent, ReactNode } from 'react';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-import type { SelectOption } from '@/Components/FormElements/Select/Select';
+import type { OptionalListener } from '../../Hooks/useListener';
+import type { RbmComponentProps } from '../../RbmComponentProps';
+import type { SelectOption } from '../Select/Select';
 
 export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
     {
@@ -159,9 +159,9 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
         }
 
         const element = renderSelectedOption?.(option) ?? (
-            <InlineBlock className={styles.tag}>
+            <BaseInlineBlock className={styles.tag}>
                 <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
-            </InlineBlock>
+            </BaseInlineBlock>
         );
 
         const onClickProps = allowDeselect ? { onClick: toggleOption, onClickData: value } : {};
@@ -175,9 +175,9 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
     const renderSelectableOption = (opt: SelectOption, index: number) => {
         const isActive = index === selectedIndex;
         const element = renderSelectableOptions?.(opt, isActive, index, selectedIndex) ?? (
-            <Block className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>
+            <BaseBlock className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>
                 <Text>{opt.label}</Text>
-            </Block>
+            </BaseBlock>
         );
 
         return (
@@ -192,7 +192,7 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
         <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
             {label ? <span className={styles.label}>{label}</span> : null}
             <Flex className={styles.inputContainer} horizontal={true}>
-                <InlineBlock>{values.map(renderOption)}</InlineBlock>
+                <BaseInlineBlock>{values.map(renderOption)}</BaseInlineBlock>
                 <Grow __allowChildren="html">
                     <input
                         ref={inputRef}
@@ -204,9 +204,9 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
                     />
                 </Grow>
             </Flex>
-            <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
+            <BaseInlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
                 {selectableOptions.map(renderSelectableOption)}
-            </InlineBlock>
+            </BaseInlineBlock>
         </label>
     );
 });

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

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

package/src/Components/FormElements/Select/Select.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { useCallback } from 'react';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { useListenerWithExtractedProps } from '../../Hooks/useListener';
 import type { ChangeEventHandler, SelectHTMLAttributes } from 'react';
-import type { Override } from '@/TypeHelpers';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { Override } from '../../../TypeHelpers';
+import type { RbmComponentProps } from '../../RbmComponentProps';
 
-import { FormError } from '@/Components/FormElements/Error/FormError';
-import { withMemo } from '@/helper/withMemo';
+import { FormError } from '../Error/FormError';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Select/select.module.scss';
-import type { OptionalListener } from '@/Components/Hooks/useListener';
+import styles from './select.module.scss';
+import type { OptionalListener } from '../../Hooks/useListener';
 
 export type SelectOption<ValueType = string> = {
     label: string;

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

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

package/src/Components/FormElements/Slider/Slider.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useCallback } from 'react';
-import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
-import { withMemo } from '@/helper/withMemo';
+import { useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/FormElements/Slider/slider.module.scss';
+import styles from './slider.module.scss';
 import type { ChangeEventHandler, InputHTMLAttributes, MutableRefObject } 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 SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = RbmComponentProps<
     Override<

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

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

package/src/Components/FormElements/Switch/Switch.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/Switch/switch.module.scss';
+import styles from './switch.module.scss';
 import type { ChangeEventHandler, InputHTMLAttributes, MouseEvent } 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 SwitchProps<OnChangeCheckedData> = RbmComponentProps<
     Override<

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

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