@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.5

package/package.json

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

package/src/Components/ActionSheet/ActionSheet.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 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 { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useImperativeHandle, useState } from 'react';
@@ -13,7 +13,7 @@ import baseStyles from '@/scss/baseClasses.module.scss';
 import classNames from 'classnames';
 import styles from '@/Components/ActionSheet/actionSheet.module.scss';
 import type { ForwardedRef } from 'react';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type ActionSheetAction<ActionData> = {
@@ -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/Colors.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Grid } from '@/Components/Layout/Grid/Grid';
 import { GridItem } from '@/Components/Layout/Grid/GridItem';
 import { ObjectHelper } from '@ainias42/js-helper';
@@ -40,7 +40,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 +49,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 +65,11 @@ export const Default: Story = {
                                         }}
                                     >
                                         <Text>{color}</Text>
-                                    </Block>
+                                    </BaseBlock>
                                 </GridItem>
                             ))}
                         </Grid>
-                    </Block>
+                    </BaseBlock>
                 ))}
             </div>
         );

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Clickable } from '@/Components/Clickable/Clickable';
 import { Flavor } from '@/Components/Flavor';
 import { TEXT_SIZE, Text } from '@/Components/Text/Text';
@@ -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/Dialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 import { Clickable } from '@/Components/Clickable/Clickable';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
 import { useCallback, useState } from 'react';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
@@ -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,10 +1,10 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 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 { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
@@ -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,5 +1,5 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Dialog } from '@/Components/Dialog/Dialog';
 import { DialogProvider } from '@/Components/Dialog/DialogContext';
 import { PromiseWithHandlers } from '@ainias42/js-helper';
@@ -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/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Heading } from '@/Components/Text/Heading';
 import { Text } from '@/Components/Text/Text';
 import React, { Component } 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.tsx

@@ -4,7 +4,7 @@ import { Flavor } from '@/Components/Flavor';
 import { Size } from '@/Size';
 import { useCallback } from 'react';
 import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { withTitle } from '@/Components/Title/withTitle';
 import classNames from 'classnames';
 import styles from '@/Components/FormElements/Button/button.module.scss';
 import type { HTMLAttributes, MouseEvent } from 'react';
@@ -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/Error/FormError.tsx

@@ -1,5 +1,5 @@
-import { Block } from '@/Components/Layout/Block';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 import { TEXT_SIZE, Text } from '@/Components/Text/Text';
 import { withMemo } from '@/helper/withMemo';
 import React from 'react';
@@ -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/Input/FileInput/MultipleFileInput.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 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';
@@ -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/PasswordInput/PasswordInput.tsx

@@ -1,7 +1,7 @@
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 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 { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { withMemo } from '@/helper/withMemo';
@@ -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.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { ArrayHelper } from '@ainias42/js-helper';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 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 { useCallback, useMemo, useRef, useState } from 'react';
 import { useWindow } from '@/WindowContext/WindowContext';
@@ -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/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/Icon/{Icon.tsx → BaseIcon.tsx}

@@ -8,6 +8,7 @@ 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 { 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.tsx

@@ -1,9 +1,9 @@
-import { Icon } from '@/Components/Icon/Icon';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
+import { BaseInlineBlock } from '@/Components/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 type { IconProps, IconSource } from '@/Components/Icon/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 '@/Components/Icon/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 '@/Components/Icon/BaseIcon';
+import { withTitle } from '@/Components/Title/withTitle';
+
+export const Icon = withTitle(BaseIcon);

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

@@ -1,14 +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 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 IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from '@/helper/withMemo';
 
 export type BlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
@@ -16,7 +15,7 @@ export type BlockProps<AsType extends keyof IntrinsicElements> = RbmComponentPro
     }
 >;
 
-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 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 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 '@/Components/Layout/BaseBlock';
+import { withTitle } from '@/Components/Title/withTitle';
+
+export const Block = withTitle(BaseBlock);