@ainias42/react-bootstrap-mobile 0.2.12 → 0.2.14

package/dist/src/Components/FormElements/Button/Button.d.ts

@@ -11,6 +11,7 @@ export type ButtonProps<ClickData> = RbmComponentProps<Override<HTMLAttributes<H
     disabled?: boolean;
     flavor?: Flavor;
     fullWidth?: boolean;
+    stopPropagation?: boolean;
     size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">;
 } & OptionalListener<'onClick', ClickData>>>;
-export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, ...props }: ButtonProps<ClickData>) => React.JSX.Element;
+export declare const Button: <ClickData>({ children, className, disabled, size, fullWidth, flavor, type, stopPropagation, ...props }: ButtonProps<ClickData>) => React.JSX.Element;

package/dist/src/Components/FormElements/ColorInput/ColorInput.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ColorResult } from '@uiw/react-color';
 import { OptionalListener } from '../../Hooks/useListener';
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -6,7 +7,6 @@ export type ColorInputProps<OnChangeData> = {
     label?: string;
     onChangeColor?: (newColor: string) => void;
     onOpen?: (currentColor: string) => void;
-    onChangeColorComplete?: (newColor: string) => void;
     onClose?: (newColor: string) => void;
     disableAlpha?: boolean;
     presetColors?: string[];
@@ -14,7 +14,7 @@ export type ColorInputProps<OnChangeData> = {
     disabled?: boolean;
     error?: string;
     className?: string;
-} & OptionalListener<'onChange', OnChangeData>;
-declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, className, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
+} & OptionalListener<'onChange', OnChangeData, ColorResult>;
+declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, className, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
 declare const ColorInputMemo: typeof ColorInput;
 export { ColorInputMemo as ColorInput };

package/dist/src/Components/FormElements/ColorInput/sharedSelectedColor.d.ts

@@ -1,4 +1,4 @@
-export declare function useSharedSelectedColor(key?: string, numberSavedColors?: number): {
+export declare function useSharedSelectedColor(key: string | undefined, predefinedColors?: string[], numberSavedColors?: number): {
     colors: string[];
     addColor: (newColor: string) => void;
 };

package/dist/src/Components/FormElements/Controller/useYupResolver.d.ts

@@ -0,0 +1,11 @@
+import { AnyObject, InferType, Maybe, ObjectSchema } from 'yup';
+export declare function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSchema: ObjectSchema<ObjectType>, translate: (key: string, args?: Record<string, string | number>) => string): (data: InferType<ObjectSchema<ObjectType>>) => Promise<{
+    values: ObjectType extends AnyObject ? import("yup").MakePartial<ObjectType> extends infer T ? T extends import("yup").MakePartial<ObjectType> ? T extends {} ? { [k in keyof T]: T[k]; } : T : never : never : ObjectType;
+    errors: {};
+} | {
+    values: {};
+    errors: Record<string, {
+        type: string;
+        message: string;
+    }>;
+}>;

package/dist/src/Components/FormElements/SearchSelectInput/SearchSelectInput.d.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
 import { SelectOption } from '../Select/Select';
+import { ReactNode } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<{
     label?: string;
     options: SelectOption[];
     onChangeValue?: (newValues: string[]) => void;
     values: string[];
+    renderSelectableOptions?: (option: SelectOption, isActive: boolean, index: number, activeIndex: number) => ReactNode;
+    renderSelectedOption?: (option: SelectOption) => ReactNode;
+    showSelectedOptions?: boolean;
+    closeOnSelect?: boolean;
+    enableSearch?: boolean;
+    allowDeselect?: boolean;
 } & OptionalListener<'onChange', OnChangeData>>;
-export declare const SearchSelectInput: <OnChangeData>({ label, options, values, onChangeValue, className, style, }: SearchSelectInputProps<OnChangeData>) => React.JSX.Element;
+export declare const SearchSelectInput: <OnChangeData>({ label, options, values, onChangeValue, className, renderSelectableOptions, renderSelectedOption, showSelectedOptions, closeOnSelect, enableSearch, allowDeselect, style, }: SearchSelectInputProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Slider/Slider.d.ts

@@ -5,5 +5,6 @@ import { Override } from '../../../TypeHelpers';
 import { OptionalListener } from '../../Hooks/useListener';
 export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, {
     value?: number;
+    stopPropagation?: boolean;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeValue', OnChangeValueData, number> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
-export declare const Slider: <OnChangeData, OnChangeValueData, OnChangeDoneData>({ className, style, ...props }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) => React.JSX.Element;
+export declare const Slider: <OnChangeData, OnChangeValueData, OnChangeDoneData>({ className, style, stopPropagation, ...props }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Switch/Switch.d.ts

@@ -10,5 +10,8 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<Override<InputH
     isLabelBeforeSwitch?: boolean;
     isDual?: boolean;
     error?: string;
+    classNameLabel?: string;
+    classNamePreLabel?: string;
+    stopPropagation?: boolean;
 } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>>>;
-export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, error, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;
+export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, stopPropagation, id, className, classNamePreLabel, classNameLabel, style, error, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;

package/dist/src/Components/SpoilerList/Spoiler/Spoiler.d.ts

@@ -7,10 +7,11 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<{
     title: ReactChild;
     initialOpen?: boolean;
     open?: boolean;
+    onlyTitleToggles?: boolean;
     noClosingAnimation?: boolean;
     openIcon?: IconSource | null;
     closeIcon?: IconSource | null;
 } & OptionalListener<'onClick', OnClickData>>;
-declare function Spoiler<OnClickData>({ title, children, initialOpen, noClosingAnimation, openIcon, closeIcon, className, style, open, ...listenerProps }: SpoilerProps<OnClickData>): React.JSX.Element;
+declare function Spoiler<OnClickData>({ title, children, initialOpen, noClosingAnimation, openIcon, closeIcon, className, onlyTitleToggles, style, open, ...listenerProps }: SpoilerProps<OnClickData>): React.JSX.Element;
 declare const SpoilerMemo: typeof Spoiler;
 export { SpoilerMemo as Spoiler };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -54,7 +54,6 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@types/react": ">=18.0.0",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-color": "^3.0.12",
     "@types/react-dom": ">=18.0.0",
     "@types/react-table": "^7.7.20",
     "@types/react-window": "^1.8.8",
@@ -95,12 +94,14 @@
   "dependencies": {
     "@ainias42/js-helper": ">=0.8.16",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "@uiw/react-color": "^2.5.5",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",
     "react-color": "^2.19.3",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
-    "react-window-infinite-loader": "^1.0.9"
+    "react-window-infinite-loader": "^1.0.9",
+    "yup": "^1.6.1"
   }
 }

package/src/Components/Clickable/Clickable.tsx

@@ -11,7 +11,7 @@ import {
     useEffect,
     MouseEvent,
     PointerEvent,
-    useRef, DragEventHandler
+    useRef
 } from 'react';
 import {withForwardRef} from '../../helper/withForwardRef';
 import {useComposedRef} from "../Hooks/useComposedRef";

package/src/Components/Dialog/ButtonDialog.tsx

@@ -4,12 +4,10 @@ import { withMemo } from '../../helper/withMemo';
 import { Block } from '../Layout/Block';
 import { Text, TEXT_SIZE } from '../Text/Text';
 import { Clickable } from '../Clickable/Clickable';
-
 import styles from './buttonDialog.scss';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import classNames from 'classnames';
 import { Flavor } from "../Flavor";
-import { Size } from "../../Size";
 
 export type ButtonDialogProps = RbmComponentProps<
     {

package/src/Components/Dialog/DialogBackground.tsx

@@ -40,7 +40,7 @@ export const DialogBackground = withMemo(function DialogBackground({
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
             {(!!title || !!onClose) && <Flex horizontal={true} className={styles.title}>{!!title &&
             <Grow><Heading >{title}</Heading></Grow>}{!!onClose &&
-            <Clickable onClick={onClose}><Icon size={"lg"} icon={faCircleXmark}/></Clickable>}</Flex>}
+            <Clickable onClick={onClose}><Icon size="lg" icon={faCircleXmark}/></Clickable>}</Flex>}
             {children}
         </Block>
     );

package/src/Components/Dialog/DialogContext.ts

@@ -14,7 +14,7 @@ export type ShowDialog = <
 
 const DialogContext = React.createContext<ShowDialog>(() => {
     console.error("DialogContext not initialized");
-    return Promise.reject("DialogContext not initialized")
+    return Promise.reject(new Error("DialogContext not initialized"));
 });
 export const DialogProvider = DialogContext.Provider;
 

package/src/Components/Dialog/dialogBackground.scss

@@ -5,6 +5,7 @@
   overflow: auto;
 
   .title {
+    gap: 16px;
     margin: 0 0 0.8rem;
   }
 }

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { Override } from '@ainias42/js-helper';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-
 import styles from './button.scss';
 import classNames from 'classnames';
 import { withMemo } from '../../../helper/withMemo';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, MouseEvent, useCallback } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ButtonType } from "./ButtonType";
 import { Flavor } from "../../Flavor";
@@ -17,6 +16,7 @@ export type ButtonProps<ClickData> = RbmComponentProps<
         disabled?: boolean;
         flavor?: Flavor
         fullWidth?: boolean;
+        stopPropagation?: boolean;
         size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">
     } & OptionalListener<'onClick', ClickData>>
 >;
@@ -29,10 +29,18 @@ export const Button = withMemo(function Button<ClickData>({
                                                               fullWidth = false,
                                                               flavor = Flavor.Accent,
                                                               type = ButtonType.Primary,
+    stopPropagation = true,
                                                               ...props
                                                           }: ButtonProps<ClickData>) {
     const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', ClickData>('onClick', props);
 
+    const realOnClick = useCallback((ev: MouseEvent) => {
+        if (stopPropagation) {
+            ev.stopPropagation();
+        }
+        onClick?.(ev);
+    }, [onClick, stopPropagation]);
+
     const classes = {
         [styles.primary]: type === ButtonType.Primary,
         [styles.secondary]: type === ButtonType.Secondary,
@@ -41,7 +49,7 @@ export const Button = withMemo(function Button<ClickData>({
     };
 
     return (
-        <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
+        <button {...otherProps} disabled={disabled} type="button" onClick={realOnClick}
                 className={classNames(styles.button, {[styles.fullWidth]: fullWidth}, classes, flavor, className)}>
             {children}
         </button>

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useRef, useState, MouseEvent } from 'react';
-import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
+import { useCallback, useRef, useState, MouseEvent, useMemo } from 'react';
+import { ColorResult, Sketch } from '@uiw/react-color';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 import { withMemo } from '../../../helper/withMemo';
 import styles from './colorInput.scss';
@@ -16,7 +16,6 @@ export type ColorInputProps<OnChangeData> = {
     label?: string;
     onChangeColor?: (newColor: string) => void;
     onOpen?: (currentColor: string) => void;
-    onChangeColorComplete?: (newColor: string) => void;
     onClose?: (newColor: string) => void;
     disableAlpha?: boolean;
     presetColors?: string[];
@@ -24,26 +23,13 @@ export type ColorInputProps<OnChangeData> = {
     disabled?: boolean
     error?: string;
     className?: string;
-} & OptionalListener<'onChange', OnChangeData>;
-
-function convertToHex(color: { r: number; g: number; b: number; a?: number }, disableAlpha?: boolean) {
-    let newColor = `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b
-        .toString(16)
-        .padStart(2, '0')}`;
-    if (color.a !== undefined && !disableAlpha) {
-        newColor += Math.round(color.a * 255)
-            .toString(16)
-            .padStart(2, '0');
-    }
-    return newColor;
-}
+} & OptionalListener<'onChange', OnChangeData, ColorResult>;
 
 function ColorInput<OnChangeData>({
                                       defaultValue,
                                       value,
                                       label,
                                       onChangeColor,
-                                      onChangeColorComplete,
                                       onOpen,
                                       onClose,
                                       disableAlpha,
@@ -65,34 +51,34 @@ function ColorInput<OnChangeData>({
     const [isOpen, setIsOpen] = useState(false);
     const [position, setPosition] = useState({x: 0, y: 0});
 
-    const {colors, addColor} = useSharedSelectedColor(sharedColorKey);
+    const {colors, addColor} = useSharedSelectedColor(sharedColorKey, presetColors);
     const realIsOpen = disabled !== true && isOpen;
 
-    const colVal: Color = value ?? color;
+    const colVal = useMemo(() => {
+        const newVal = value ?? color;
+        if (disableAlpha && newVal.length === 9) {
+            return newVal.substring(0, 7);
+        }
+        if (disableAlpha && newVal.length === 5) {
+            return newVal.substring(0,4);
+        }
+        return newVal;
+    }, [value, color, disableAlpha]);
+
     // Selectors
 
     // Callbacks
-    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
-    const onChange = useCallback<ColorChangeHandler>(
-        (newColor: ColorResult, e) => {
-            const hexColor = convertToHex(newColor.rgb, disableAlpha);
+    const onChangeWithData = useListener<'onChange', OnChangeData, ColorResult>('onChange', otherProps);
+    const onChange = useCallback(
+        (newColor: ColorResult) => {
+            const hexColor = newColor.hexa;
             setColor(hexColor);
             if (onChangeColor) {
                 onChangeColor(hexColor);
             }
-            onChangeWithData(e);
-        },
-        [disableAlpha, onChangeColor, onChangeWithData]
-    );
-    const onChangeComplete = useCallback(
-        (newColor: ColorResult) => {
-            const hexColor = convertToHex(newColor.rgb, disableAlpha);
-            setColor(hexColor);
-            if (onChangeColorComplete) {
-                onChangeColorComplete(hexColor);
-            }
+            onChangeWithData(newColor);
         },
-        [disableAlpha, onChangeColorComplete]
+        [onChangeColor, onChangeWithData]
     );
 
     const onMenuClose = useCallback(
@@ -141,10 +127,9 @@ function ColorInput<OnChangeData>({
         <>
         <span className={classNames(styles.colorInput, className)}>
             <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
-                        <SketchPicker
+                        <Sketch
                             color={colVal}
                             onChange={onChange}
-                            onChangeComplete={onChangeComplete}
                             disableAlpha={disableAlpha}
                             presetColors={presetColors ?? colors}
                         />

package/src/Components/FormElements/ColorInput/colorInput.scss

@@ -7,6 +7,22 @@
     height: 1rem;
     display: inline-block;
     border: 1px solid black;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+    }
+
   }
 
   .modalContainer {
@@ -31,3 +47,26 @@
     margin-right: 0.2rem;
   }
 }
+
+
+:global(.w-color-swatch) {
+  z-index: 0;
+
+  > div {
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+    }
+  }
+}

package/src/Components/FormElements/ColorInput/sharedSelectedColor.ts

@@ -1,9 +1,14 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Random } from '@ainias42/js-helper';
 
 const sharedSelectedColor: Record<string, { colors: string[]; updateFunctions: (() => void)[] }> = {};
 
-export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
+function localStorageKey (key: string) {
+    return `sharedSelectedColor-${key}`;
+};
+
+export function useSharedSelectedColor(key: string|undefined, predefinedColors: string[] = [], numberSavedColors = 16) {
+    const shouldSaveToLocalStorage = typeof window !== 'undefined' && window.localStorage !== undefined && !!key;
     const [, setVersion] = useState(1);
     const innerKey = useRef(Random.getStringRandom(12));
     const realKey = key ?? innerKey.current;
@@ -22,6 +27,10 @@ export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
 
     const addColor = useCallback(
         (newColor: string) => {
+            if (predefinedColors.includes(newColor)) {
+                return;
+            }
+
             sharedSelectedColor[realKey].colors = sharedSelectedColor[realKey].colors.filter(
                 (color) => color !== newColor
             );
@@ -29,12 +38,32 @@ export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
             if (sharedSelectedColor[realKey].colors.length > numberSavedColors) {
                 sharedSelectedColor[realKey].colors.splice(numberSavedColors, 1);
             }
+            if (shouldSaveToLocalStorage){
+                localStorage.setItem(localStorageKey(realKey), JSON.stringify(sharedSelectedColor[realKey].colors));
+            }
 
             // triggers rerender
             sharedSelectedColor[realKey].updateFunctions.forEach((u) => u());
         },
-        [numberSavedColors, realKey]
+        [numberSavedColors, predefinedColors, realKey, shouldSaveToLocalStorage]
     );
 
-    return { colors: sharedSelectedColor[realKey]?.colors, addColor };
+    useLayoutEffect(() => {
+        if (shouldSaveToLocalStorage){
+            const savedColors = localStorage.getItem(localStorageKey(realKey));
+            if (savedColors) {
+                sharedSelectedColor[realKey].colors = JSON.parse(savedColors);
+                setVersion((old) => old + 1);
+            }
+        }
+    }, [realKey, shouldSaveToLocalStorage]);
+
+    const realColors = useMemo(() => {
+        if (predefinedColors.length > 0) {
+            return [...predefinedColors, ...sharedSelectedColor[realKey].colors.filter(color => !predefinedColors.includes(color))].slice(0, numberSavedColors);
+        }
+        return sharedSelectedColor[realKey].colors;
+    }, [numberSavedColors, predefinedColors, realKey]);
+
+    return { colors: realColors, addColor };
 }

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

@@ -33,8 +33,8 @@ export const FileInputController = withMemo(function FileInputController<Values
     const setErrorMessage = useCallback((error: string) => {
         setError(name, {
             message: error,
-        })
-    }, []);
+        });
+    }, [name, setError]);
 
     return (
         <FileInput

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

@@ -35,7 +35,7 @@ export const HookForm = withMemo(function HookForm<TFieldValues extends FieldVal
 
     return <FormProvider {...methods}>
         <SendFormContext.Provider value={innerOnSend}>
-            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren={"all"}>
+            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren="all">
                 {children}
             </LoadingArea>
         </SendFormContext.Provider>

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

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { AnyObject, InferType, Maybe, ObjectSchema, ValidationError } from 'yup';
+
+// TODO set translate function from somewhere else
+export function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSchema: ObjectSchema<ObjectType>, translate: (key: string, args?: Record<string, string | number>) => string) {
+
+    return useCallback(
+        async (data: InferType<ObjectSchema<ObjectType>>) => {
+            try {
+                const values = await validationSchema.validate(data, {
+                    abortEarly: false,
+                });
+
+                return {
+                    values,
+                    errors: {},
+                };
+            } catch (errors) {
+                const reducedErrors = (errors.inner as ValidationError[]).reduce(
+                    (allErrors, currentError) => {
+                        if (currentError.path === undefined) {
+                            return allErrors;
+                        }
+
+                        let message = currentError.message as
+                            | string
+                            | {
+                            key: string;
+                            args?: Record<string, string | number>;
+                        };
+                        if (typeof message === 'object') {
+                            message = translate(message.key, message.args);
+                        } else {
+                            message = translate(message);
+                        }
+                        allErrors[currentError.path] = {
+                            type: currentError.type ?? 'validation',
+                            message,
+                        };
+                        return allErrors;
+                    },
+                    {} as Record<string, { type: string; message: string }>,
+                );
+
+                return {
+                    values: {},
+                    errors: reducedErrors,
+                };
+            }
+        },
+        [translate, validationSchema],
+    );
+}

package/src/Components/FormElements/FormError.tsx

@@ -25,5 +25,5 @@ export const FormError = withMemo(function FormError({error}: FormErrorProps) {
 		return null;
 	}
 
-	return <Block className={styles.error}><Text>{error}</Text></Block>
+	return <Block className={styles.error}><Text>{error}</Text></Block>;
 }, styles);

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

@@ -16,7 +16,6 @@ import { Image } from '../../../Image/Image';
 import { Clickable } from '../../../Clickable/Clickable';
 import { Inline } from '../../../Layout/Inline';
 import { FileType } from "./FileType";
-import { InlineBlock } from "../../../Layout/InlineBlock";
 import { FormError } from "../../FormError";