react-drupal-webform - npm Package Compare versions

Comparing version 1.0.1-alpha to 1.0.2-alpha

dist/components/form/fields/checkboxes.d.ts

+import { TFieldWebformObj } from '../../../lib/types/components/field';
+export declare const renderCheckboxes: (props: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;

dist/components/form/fields/checkboxes.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Checkboxes from './fields-elements/checkboxes';
+export const renderCheckboxes = (props) => {
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
+    if (!field?.['#options'])
+        return null;
+    const CustomCheckboxes = components?.fieldById?.[fieldKey] ?? components?.checkboxes;
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, wrapperElement: "fieldset", classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomCheckboxes ? (_jsx(CustomCheckboxes, { ...props })) : (_jsx(Checkboxes, { ...props })) }, fieldKey));
+};

dist/components/form/fields/fields-elements/checkbox.d.ts

+import React from 'react';
+import { CheckboxProps } from '../../../../lib/types/components/checkboxe';
+declare const _default: React.MemoExoticComponent<(props: CheckboxProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/checkbox.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const Checkbox = (props) => {
+    const { fieldKey, field, innerProps, className, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, } = props;
+    const { control } = useFormContext();
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const title = field?.['#title'];
+    const checkboxClassNames = getClassNames({
+        name: 'checkbox',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'checkbox',
+    });
+    const handleChange = (e) => {
+        fieldController.onChange(e.target.checked);
+        if (onChangeProp) {
+            onChangeProp(e);
+        }
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        if (onBlurProp) {
+            onBlurProp(e);
+        }
+    };
+    const handleFocus = (e) => {
+        if (onFocusProp) {
+            onFocusProp(e);
+        }
+    };
+    return (_jsx("input", { id: fieldKey, ref: innerRef, name: fieldController.name, type: "checkbox", value: title, checked: Boolean(fieldController.value), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, required: field?.['#required'], className: checkboxClassNames, "aria-describedby": ariaDescribedBy, ...dataAttributes, ...innerProps }));
+};
+export default React.memo(Checkbox);

dist/components/form/fields/fields-elements/checkboxes.d.ts

+import React from 'react';
+import { CheckboxesProps } from '../../../../lib/types/components/checkboxes';
+declare const _default: React.MemoExoticComponent<({ fieldKey, field, className, innerProps, itemProps, inputProps, labelProps, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }: CheckboxesProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/checkboxes.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import styles from '../field.module.scss';
+import { useController, useFormContext } from 'react-hook-form';
+import { handleChangeOptionsCheckboxes } from '../../../../lib/functions/webform_fields_functions/webform_fields_functions';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const Checkboxes = ({ fieldKey, field, className, innerProps, itemProps, inputProps, labelProps, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }) => {
+    const { control } = useFormContext();
+    if (!field?.['#options'])
+        return null;
+    const optionsObj = Object.entries(field['#options']);
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const wrapperClassNames = getClassNames({
+        name: 'checkboxesWrapper',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.checkboxes),
+    });
+    const itemClassNames = getClassNames({
+        name: 'checkboxesItem',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.checkbox,
+    });
+    const inputClassNames = getClassNames({
+        name: 'checkboxesInput',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.field,
+    });
+    const labelClassNames = getClassNames({
+        name: 'checkboxesLabel',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.labelCheckbox,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'Checkboxes',
+    });
+    const handleChange = (option, checked) => {
+        const nextValue = Array.isArray(fieldController.value)
+            ? [...fieldController.value]
+            : [];
+        if (checked && !nextValue.includes(option)) {
+            nextValue.push(option);
+        }
+        else if (!checked) {
+            const index = nextValue.indexOf(option);
+            if (index > -1)
+                nextValue.splice(index, 1);
+        }
+        handleChangeOptionsCheckboxes(option, checked, fieldController);
+        onChangeProp?.(nextValue);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    return (_jsx("div", { className: wrapperClassNames, ref: innerRef, role: "group", ...dataAttributes, ...innerProps, children: optionsObj.map(([optionKey, optionValue], i) => {
+            const checked = Array.isArray(fieldController.value)
+                ? fieldController.value.includes(optionKey)
+                : false;
+            const id = `checkboxes-${optionKey.trim()}-${i}`;
+            return (_jsxs("div", { className: itemClassNames, ...itemProps, children: [_jsx("input", { id: id, className: inputClassNames, name: fieldController.name, type: "checkbox", value: optionKey, checked: checked, "aria-describedby": ariaDescribedBy, required: i === 0 ? field?.['#required'] : undefined, onChange: (e) => {
+                            handleChange(e.target.value, e.target.checked);
+                        }, onBlur: handleBlur, onFocus: handleFocus, ...inputProps }), _jsx("label", { htmlFor: id, className: labelClassNames, ...labelProps, children: optionValue })] }, optionKey));
+        }) }));
+};
+export default React.memo(Checkboxes);

dist/components/form/fields/fields-elements/hidden.d.ts

+import React from 'react';
+import { HiddenProps } from '../../../../lib/types/components/hidden';
+declare const _default: React.MemoExoticComponent<({ fieldKey, innerProps, className, innerRef }: HiddenProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/hidden.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import cn from 'classnames';
+const Hidden = ({ fieldKey, innerProps, className, innerRef }) => {
+    const { control } = useFormContext();
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    return (_jsx("input", { type: "hidden", ref: innerRef, id: fieldKey, name: fieldController.name, className: cn(className), value: fieldController.value ?? '', onChange: (e) => fieldController.onChange(e.target.value), ...innerProps }));
+};
+export default React.memo(Hidden);

dist/components/form/fields/fields-elements/input.d.ts

+import React from 'react';
+import { InputProps } from '../../../../lib/types/components/input';
+declare const _default: React.MemoExoticComponent<(props: InputProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/input.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import { useController, useFormContext } from 'react-hook-form';
+import styles from '../field.module.scss';
+import { getAriaDescribedBy, getClassNames, getDataAttributes, getTextLikeInputAttributes, } from '../../../../lib/functions/utils_functions';
+const Input = (props) => {
+    const { fieldKey, field, classNamePrefix, className, innerProps, unstyled, validationEngine, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, } = props;
+    const { control } = useFormContext();
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const getFieldType = (() => {
+        switch (field?.['#type']) {
+            case 'textfield':
+                return 'text';
+            case 'date':
+                return 'date';
+            case 'number':
+                return 'number';
+            case 'email':
+                return 'email';
+            case 'tel':
+                return 'tel';
+            default:
+                return 'text';
+        }
+    })();
+    const inputClassNames = getClassNames({
+        name: 'input',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.input),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'Input',
+    });
+    const ariaDescribedBy = getAriaDescribedBy({ fieldKey, field });
+    const inputFieldAttributes = getTextLikeInputAttributes(field, getFieldType);
+    const applyWebformNativeValidation = (e, field) => {
+        const input = e.currentTarget;
+        input.setCustomValidity('');
+        if (input.validity.valid) {
+            return;
+        }
+        if (input.validity.patternMismatch && field?.['#pattern_error']) {
+            input.setCustomValidity(field['#pattern_error']);
+        }
+        else if (input.validity.valueMissing && field?.['#required_error']) {
+            input.setCustomValidity(field['#required_error']);
+        }
+    };
+    const resetWebformNativeValidation = (input) => {
+        if (validationEngine !== 'html')
+            return;
+        input.setCustomValidity('');
+    };
+    const handleChange = (e) => {
+        if (validationEngine === 'html') {
+            resetWebformNativeValidation(e.currentTarget);
+        }
+        fieldController.onChange(e);
+        onChangeProp?.(e);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    const handleInvalid = (e) => {
+        if (validationEngine !== 'html')
+            return;
+        applyWebformNativeValidation(e, field);
+    };
+    return (_jsx("input", { id: fieldKey, ref: innerRef, className: inputClassNames, name: fieldController.name, type: getFieldType, value: fieldController.value ?? '', readOnly: field?.['#readonly'], "aria-describedby": ariaDescribedBy, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onInvalid: handleInvalid, ...inputFieldAttributes, ...dataAttributes, ...innerProps }));
+};
+export default React.memo(Input);

dist/components/form/fields/fields-elements/managedFile.d.ts

+import React from 'react';
+import { ManagedFileProps } from '../../../../lib/types/components/managedFile';
+declare const _default: React.MemoExoticComponent<({ fieldKey, field, className, innerProps, components, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }: ManagedFileProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/managedFile.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useController, useFormContext } from 'react-hook-form';
+import styles from '../field.module.scss';
+import { handleFileChange } from '../../../../lib/functions/webform_fields_functions/webform_fields_functions';
+import ManagedFilePreview from '../fields-sub-components/managedFilePreview/managedFilePreview';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const ManagedFile = ({ fieldKey, field, className, innerProps, components, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }) => {
+    const { control } = useFormContext();
+    const inputRef = useRef(null);
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const PreviewComponent = components?.managedFilePreview ?? ManagedFilePreview;
+    const fileExtensions = field?.['#file_extensions']
+        ?.trim()
+        .split(' ')
+        .map((ext) => `.${ext}`)
+        .join(', ');
+    const value = fieldController.value ?? {};
+    const isFileWithBase64 = (obj) => obj &&
+        typeof obj === 'object' &&
+        'base64' in obj &&
+        typeof obj.base64 === 'string';
+    const handleRemove = () => {
+        fieldController.onChange({});
+    };
+    if (isFileWithBase64(value)) {
+        return (_jsx(PreviewComponent, { unstyled: unstyled, components: components, field: field, fieldKey: fieldKey, classNamePrefix: classNamePrefix, value: value, handleRemove: handleRemove }));
+    }
+    const inputClassNames = getClassNames({
+        name: 'managedFile',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.field, styles.input),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'managedFile',
+    });
+    const handleChange = (e) => {
+        handleFileChange(e, fieldController, inputRef);
+        onChangeProp?.(e);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    return (_jsx("input", { id: fieldKey, ref: (el) => {
+            inputRef.current = el;
+            innerRef?.(el);
+        }, type: "file", name: fieldController.name, accept: fileExtensions, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, className: inputClassNames, "aria-describedby": ariaDescribedBy, ...dataAttributes, ...innerProps }));
+};
+export default React.memo(ManagedFile);

dist/components/form/fields/fields-elements/radios.d.ts

+import React from 'react';
+import { RadiosProps } from '../../../../lib/types/components/radios';
+declare const _default: React.MemoExoticComponent<({ fieldKey, field, className, innerProps, itemProps, inputProps, labelProps, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }: RadiosProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/radios.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import styles from '../field.module.scss';
+import { useController, useFormContext } from 'react-hook-form';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const Radios = ({ fieldKey, field, className, innerProps, itemProps, inputProps, labelProps, ariaDescribedBy, classNamePrefix, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, }) => {
+    const { control } = useFormContext();
+    if (!field?.['#options'])
+        return null;
+    const optionsObj = Object.entries(field['#options']);
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const radiosWrapperClassNames = getClassNames({
+        name: 'radiosWrapper',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.radiosGroupWrapper),
+    });
+    const radiosItemClassNames = getClassNames({
+        name: 'radiosItem',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.radiosItemWrapper,
+    });
+    const radiosInputClassNames = getClassNames({
+        name: 'radiosInput',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+    });
+    const radiosLabelClassNames = getClassNames({
+        name: 'radiosLabel',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.radioLabel,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'Radios',
+    });
+    const handleChange = (value) => (e) => {
+        fieldController.onChange(value);
+        onChangeProp?.(e);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    return (_jsx("div", { className: radiosWrapperClassNames, role: "radiogroup", ref: innerRef, ...dataAttributes, ...innerProps, children: optionsObj.map(([optionKey, optionValue], i) => {
+            const checked = fieldController.value === optionKey;
+            const id = `radios-${optionKey.trim()}-${i}`;
+            return (_jsxs("div", { className: radiosItemClassNames, ...itemProps, children: [_jsx("input", { id: id, className: radiosInputClassNames, name: fieldController.name, type: "radio", value: optionKey, checked: checked, "aria-describedby": ariaDescribedBy, required: field?.['#required'], onChange: handleChange(optionKey), onBlur: handleBlur, onFocus: handleFocus, ...inputProps }), _jsx("label", { htmlFor: id, className: radiosLabelClassNames, ...labelProps, children: optionValue })] }, optionKey));
+        }) }));
+};
+export default React.memo(Radios);

dist/components/form/fields/fields-elements/select.d.ts

+import React from 'react';
+import { SelectProps } from '../../../../lib/types/components/select';
+declare const _default: React.MemoExoticComponent<(props: SelectProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/select.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import { useController, useFormContext } from 'react-hook-form';
+import styles from '../field.module.scss';
+import { handleChangeOptions } from '../../../../lib/functions/webform_fields_functions/webform_fields_functions';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const Select = (props) => {
+    const { fieldKey, field, innerProps, className, classNamePrefix, ariaDescribedBy, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, } = props;
+    const { control } = useFormContext();
+    if (!field?.['#options'])
+        return null;
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const optionsObj = Object.entries(field['#options']);
+    const options = field['#sort_options']
+        ? [...optionsObj].sort(([, labelA], [, labelB]) => String(labelA).localeCompare(String(labelB), undefined, {
+            sensitivity: 'base',
+        }))
+        : optionsObj;
+    const selectClassNames = getClassNames({
+        name: 'select',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.select),
+    });
+    const optionClassNames = getClassNames({
+        name: 'selectOption',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'select',
+    });
+    const handleChange = (e) => {
+        const value = e.target.value;
+        handleChangeOptions(value, fieldController);
+        onChangeProp?.(e);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    return (_jsxs("select", { id: fieldKey, ref: innerRef, name: fieldController.name, required: field?.['#required'], className: selectClassNames, value: fieldController.value ?? '', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, "aria-describedby": ariaDescribedBy, ...dataAttributes, ...innerProps, children: [_jsx("option", { className: optionClassNames, value: '', children: field?.['#empty_option'] ?? '-- Select an option --' }), options.map(([optionKey, optionValue]) => (_jsx("option", { className: optionClassNames, value: optionKey, children: optionValue }, optionKey)))] }));
+};
+export default React.memo(Select);

dist/components/form/fields/fields-elements/textarea.d.ts

+import React from 'react';
+import { TextAreaProps } from '../../../../lib/types/components/textarea';
+declare const _default: React.MemoExoticComponent<(props: TextAreaProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/form/fields/fields-elements/textarea.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import { useController, useFormContext } from 'react-hook-form';
+import styles from '../field.module.scss';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const Textarea = (props) => {
+    const { fieldKey, field, className, innerProps, classNamePrefix, ariaDescribedBy, unstyled, innerRef, onChange: onChangeProp, onBlur: onBlurProp, onFocus: onFocusProp, } = props;
+    const { control } = useFormContext();
+    const { field: fieldController } = useController({
+        name: fieldKey,
+        control,
+    });
+    const textareaClassNames = getClassNames({
+        name: 'textarea',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.field, styles.textarea),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'Textarea',
+    });
+    const handleChange = (e) => {
+        fieldController.onChange(e);
+        onChangeProp?.(e);
+    };
+    const handleBlur = (e) => {
+        fieldController.onBlur();
+        onBlurProp?.(e);
+    };
+    const handleFocus = (e) => {
+        onFocusProp?.(e);
+    };
+    return (_jsx("textarea", { id: fieldKey, ref: innerRef, name: fieldController.name, minLength: field?.['#minlength'], maxLength: field?.['#maxlength'], rows: field?.['#rows'] ?? 10, placeholder: field?.['#placeholder'], required: field?.['#required'], value: fieldController.value ?? '', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, className: textareaClassNames, readOnly: field?.['#readonly'], "aria-describedby": ariaDescribedBy, ...dataAttributes, ...innerProps }));
+};
+export default React.memo(Textarea);

dist/components/fo...elds-sub-components/fieldContainer.d.ts

+import React from 'react';
+import { FieldContainerProps } from '../../../../lib/types/components/fieldContainer';
+declare const _default: React.MemoExoticComponent<(props: FieldContainerProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/fo...fields-sub-components/fieldContainer.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import styles from './fieldContainer.module.scss';
+import WrapperField from './wrapper-sub-components/wrapperField';
+import WrapperDescription from './wrapper-sub-components/wrapperDescription';
+import WrapperMore from './wrapper-sub-components/wrapperMore';
+import WrapperManagedFileInfo from './wrapper-sub-components/wrapperManagedFileInfo';
+import Title from './title/title';
+import { useController, useFormContext } from 'react-hook-form';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+const FieldContainer = (props) => {
+    const { children, field, isLabel = true, components, fieldKey, wrapperElement = 'div', innerProps, className, classNamePrefix, innerRef, unstyled, } = props;
+    const TitleComponent = components?.title ?? Title;
+    const WrapperElement = wrapperElement ?? 'div';
+    const labelWrapperElement = field?.['#type'] === 'checkboxes' || field?.['#type'] === 'radios'
+        ? 'legend'
+        : 'label';
+    const { control } = useFormContext();
+    const { fieldState } = useController({
+        name: fieldKey,
+        control,
+    });
+    const stateError = fieldState?.error;
+    const dataAttributes = getDataAttributes({
+        type: field['#type'],
+        component: 'fieldContainer',
+    });
+    const isRequired = Boolean(field?.['#required']);
+    const hasError = Boolean(stateError);
+    const componentClassNames = getClassNames({
+        name: 'fieldContainer',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        modifiers: {
+            required: isRequired,
+            'has-error': hasError,
+        },
+        classNameComponent: className,
+        baseCn: cn(styles.fieldWrapper, {
+            [styles.fieldWrapperCheckbox]: field?.['#type'] === 'checkbox',
+        }),
+    });
+    return (_jsxs(WrapperElement, { className: componentClassNames, ref: innerRef, ...dataAttributes, ...innerProps, children: [isLabel && field?.['#title'] && (_jsx(TitleComponent, { wrapperElement: labelWrapperElement, components: components, classNamePrefix: classNamePrefix, field: field, fieldKey: fieldKey, unstyled: unstyled })), _jsx(WrapperField, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: children }), (field?.['#description'] || field?.['#file_placeholder']) && (_jsx(WrapperDescription, { field: field, fieldKey: fieldKey, classNamePrefix: classNamePrefix, components: components, unstyled: unstyled })), field['#type'] === 'managed_file' && (_jsx(WrapperManagedFileInfo, { fieldKey: fieldKey, field: field, components: components, classNamePrefix: classNamePrefix, unstyled: unstyled })), field?.['#more'] && field?.['#more_title'] && (_jsx(WrapperMore, { field: field, fieldKey: fieldKey, classNamePrefix: classNamePrefix, components: components, unstyled: unstyled }))] }));
+};
+export default React.memo(FieldContainer);

dist/components/fo...b-components/fieldContainer.module.scss

+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  border: none;
+}
+
+.fieldWrapperCheckbox {
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.prefixSuffixContainer {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  .fieldContainer {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: 0;
+    flex: 1;
+  }
+}
+
+

dist/components/fo...ields-sub-components/layout/layout.d.ts

+import React from 'react';
+import { LayoutProps } from '../../../../../lib/types/components/layout';
+declare const _default: React.MemoExoticComponent<(props: LayoutProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/fo.../fields-sub-components/layout/layout.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import styles from './layout.module.scss';
+import LayoutTitle from '../layoutTitle/layoutTitle';
+import LayoutList from '../layoutList/layoutList';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const Layout = (props) => {
+    const { children, fieldKey, className, innerProps, classNamePrefix, components, field, unstyled, innerRef, } = props;
+    const LayoutTitleComponent = components?.layoutTitle ?? LayoutTitle;
+    const LayoutListComponent = components?.layoutList ?? LayoutList;
+    const layoutClassNames = getClassNames({
+        name: 'layout',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.layout),
+    });
+    const dataAttributes = getDataAttributes({
+        type: field?.['#type'],
+        component: 'Layout',
+    });
+    const Wrapper = field?.['#type'] === 'details'
+        ? 'details'
+        : field?.['#type'] === 'fieldset'
+            ? 'fieldset'
+            : field?.['#type'] === 'webform_section'
+                ? 'section'
+                : 'div';
+    return (_jsxs(Wrapper, { ref: innerRef, className: layoutClassNames, ...dataAttributes, ...innerProps, children: [_jsx(LayoutTitleComponent, { ...props }), _jsx(LayoutListComponent, { ...props, children: children })] }, fieldKey));
+};
+export default React.memo(Layout);

dist/components/fo...ub-components/layout/layout.module.scss

+.layout[data-type='details'], .layout[data-type='fieldset'] {
+  border-radius: .5rem;
+  border: 1px solid #d4d4d8;
+}
+
+.layoutList {
+  display: flex;
+  gap: 1.5rem;
+  flex-direction: column;
+}
+
+.layout[data-type='details'] .layoutList,
+.layout[data-type='fieldset'] .layoutList
+{
+  padding: .875rem
+}
+
+.layout[data-type='webform_flexbox'] .layoutList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.layoutTitle {
+  font-size: 1rem;
+}
+
+.layout[data-type='fieldset'] .layoutTitle {
+  margin-left: .375rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  border-radius: .5rem;
+}
+
+.layout[data-type='container'] .layoutTitle,
+.layout[data-type='webform_section'] .layoutTitle,
+.layout[data-type='webform_flexbox'] .layoutTitle
+{
+  display: inline-block;
+  margin-bottom: 1rem;
+}
+
+.layout[data-type='details'] .layoutTitle {
+  padding: .875rem;
+  cursor: pointer;
+  border-radius: .5rem;
+  &:hover, &:focus-visible {
+    background: #F7F7F7;
+  }
+  &:focus, &:focus-visible {
+    box-shadow: 0 0 0 1px var(--border-form-element),0 0 0 4px var(--input-focus)
+  }
+}
+
+.layout[data-type='details'][open] .layoutTitle {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

dist/components/fo...b-components/layoutList/layoutList.d.ts

+import { LayoutListProps } from '../../../../../lib/types/components/layoutList';
+declare const LayoutList: (props: LayoutListProps) => import("react/jsx-runtime").JSX.Element;
+export default LayoutList;

dist/components/fo...sub-components/layoutList/layoutList.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from '../layout/layout.module.scss';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const LayoutList = (props) => {
+    const { children, className, innerProps, classNamePrefix, unstyled, innerRef, } = props;
+    if (!children)
+        return null;
+    const layoutListClassNames = getClassNames({
+        name: 'layoutList',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.layoutList),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'layoutList',
+    });
+    return (_jsx("div", { ref: innerRef, className: layoutListClassNames, ...dataAttributes, ...innerProps, children: children }));
+};
+export default LayoutList;

dist/components/fo...components/layoutTitle/layoutTitle.d.ts

+import { LayoutTitleProps } from '../../../../../lib/types/components/layoutTitle';
+declare const LayoutTitle: (props: LayoutTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default LayoutTitle;

dist/components/fo...b-components/layoutTitle/layoutTitle.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from '../layout/layout.module.scss';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const LayoutTitle = (props) => {
+    const { field, innerProps, className, classNamePrefix, unstyled, innerRef } = props;
+    if (!field?.['#title'])
+        return null;
+    const layoutTitleClassNames = getClassNames({
+        name: 'layoutTitle',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.layoutTitle),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'layoutTitle',
+    });
+    if (field?.['#type'] === 'fieldset') {
+        return (_jsx("legend", { ref: innerRef, className: layoutTitleClassNames, ...innerProps, ...dataAttributes, children: field['#title'] }));
+    }
+    if (field['#type'] === 'details') {
+        return (_jsx("summary", { ref: innerRef, className: layoutTitleClassNames, ...innerProps, ...dataAttributes, children: field['#title'] }));
+    }
+    return (_jsx("span", { ref: innerRef, className: layoutTitleClassNames, ...innerProps, ...dataAttributes, children: field['#title'] }));
+};
+export default LayoutTitle;

dist/components/fo.../fields-sub-components/title/title.d.ts

+import React from 'react';
+import { TitleProps } from '../../../../../lib/types/components/title';
+declare const _default: React.MemoExoticComponent<(props: TitleProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/fo...ds/fields-sub-components/title/title.js

+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
+import styles from './title.module.scss';
+import Help from '../help/help';
+import { getClassNames } from '../../../../../lib/functions/utils_functions';
+import { getDataAttributes } from '../../../../../lib/functions/utils_functions';
+const Title = (props) => {
+    const { field, components, className, fieldKey, innerProps, wrapperElement, classNamePrefix, unstyled, innerRef, } = props;
+    const title = field?.['#title'];
+    const isRequired = Boolean(field?.['#required']);
+    const showHelp = Boolean(field?.['#help']?.length) || Boolean(field?.['#help_title']?.length);
+    const CustomHelp = components?.help ?? Help;
+    const isInvisible = field?.['#title_display'] === 'invisible';
+    const titleClassNames = getClassNames({
+        name: 'title',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        modifiers: {
+            invisible: isInvisible,
+        },
+        classNameComponent: className,
+        baseCn: cn(styles.title, {
+            [styles.isRequired]: isRequired,
+            [styles.visuallyHidden]: isInvisible,
+        }),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'title',
+    });
+    if (wrapperElement === 'label') {
+        return (_jsxs("label", { ref: innerRef, htmlFor: fieldKey, className: titleClassNames, ...dataAttributes, ...innerProps, children: [title, showHelp && (_jsx(CustomHelp, { fieldKey: fieldKey, field: field, components: components, classNamePrefix: classNamePrefix, unstyled: unstyled }))] }));
+    }
+    return (_jsxs("legend", { ref: innerRef, className: titleClassNames, ...dataAttributes, ...innerProps, children: [title, showHelp && (_jsx(CustomHelp, { fieldKey: fieldKey, field: field, components: components, classNamePrefix: classNamePrefix, unstyled: unstyled }))] }));
+};
+export default React.memo(Title);

dist/components/fo...-sub-components/title/title.module.scss

+.title {
+    font-size: var(--font-size-s);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-title);
+}
+
+legend.title {
+  margin-bottom: .5rem
+}
+
+.isRequired {
+  &::after {
+    content: "*";
+    color: var(--danger);
+    line-height: 1;
+    margin-inline: .15em;
+    vertical-align: text-top;
+    background: none;
+  }
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+input[type='checkbox'] + .title {
+  font-weight: 400;
+  margin-block-end: 0;
+}

dist/components/fo...functions/validateUnsupportedField.d.ts

+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateUnsupportedField: (props: FieldValidateProps) => void;

dist/components/fo...e-functions/validateUnsupportedField.js

+import { mixed } from 'yup';
+import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+export const validateUnsupportedField = (props) => {
+    const { yupObject, defaultValues, key, rhfCustomValidators, field } = props;
+    const type = field?.['#type'];
+    const defaultSchema = mixed();
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
+    yupObject[key] = customSchema;
+    defaultValues[key] = '';
+};

dist/components/form/fields/unsupportedField.d.ts

+import { TFieldWebformObj } from '../../../lib/types/components/field';
+declare const renderDefault: (props: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;
+export default renderDefault;

dist/components/form/fields/unsupportedField.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+const renderDefault = (props) => {
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
+    const CustomField = components?.unsupportedField;
+    if (!CustomField) {
+        return null;
+    }
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: _jsx(CustomField, { ...props }) }, fieldKey));
+};
+export default renderDefault;

dist/components/form/form.d.ts

+import { FormProps } from '../../lib/types/components/form';
+declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
+export default Form;

dist/components/form/form.js

+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import cn from 'classnames';
+import styles from './form.module.scss';
+import { getClassNames } from '../../lib/functions/utils_functions';
+import { useFormContext } from 'react-hook-form';
+const Form = (props) => {
+    const { children, onSubmit, className, innerProps, classNamePrefix, unstyled, validationEngine, } = props;
+    const isHtmlNative = validationEngine === 'html';
+    const { formState } = useFormContext();
+    const { errors, submitCount } = formState;
+    const formClassName = getClassNames({
+        name: 'form',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.form),
+    });
+    const openDetailsParents = (element) => {
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent instanceof HTMLDetailsElement) {
+                parent.open = true;
+            }
+            parent = parent.parentElement;
+        }
+    };
+    const handleInvalidCapture = (e) => {
+        if (!isHtmlNative)
+            return;
+        const target = e.target;
+        if (!target)
+            return;
+        openDetailsParents(target);
+    };
+    useEffect(() => {
+        if (!submitCount)
+            return;
+        if (!errors || Object.keys(errors).length === 0)
+            return;
+        const firstInvalid = document.querySelector('[aria-invalid="true"], input:invalid, textarea:invalid, select:invalid');
+        if (!firstInvalid)
+            return;
+        openDetailsParents(firstInvalid);
+        firstInvalid.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+        });
+        firstInvalid.focus({ preventScroll: true });
+    }, [errors, submitCount]);
+    return (_jsx("form", { className: formClassName, onSubmit: onSubmit, noValidate: !isHtmlNative, onInvalidCapture: handleInvalidCapture, ...innerProps, children: children }));
+};
+export default Form;

dist/components/form/form.module.scss

+.form {
+  display: flex;
+  gap: 1.5rem;
+  flex-direction: column;
+}

dist/lib/types/components/action.d.ts

+import { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface ActionProps extends TFieldWebformObj {
+    className?: string;
+    innerProps?: JSX.IntrinsicElements['button'];
+}

dist/lib/types/components/action.js

+export {};

dist/lib/types/components/button.d.ts

+import { jsx } from '@emotion/react';
+import { DrupalElementCommonProps } from '../form';
+export interface ButtonProps extends DrupalElementCommonProps {
+    innerProps?: jsx.JSX.IntrinsicElements['button'];
+    className?: string;
+    title: string;
+    fillType?: 'fill' | 'border';
+    size?: 'default' | 'small';
+    innerRef?: (instance: HTMLButtonElement | null) => void;
+}

dist/lib/types/components/button.js

+export {};

dist/lib/types/components/checkboxe.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface CheckboxProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['input'];
+    className?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    innerRef?: (instance: HTMLInputElement | null) => void;
+}

dist/lib/types/components/checkboxe.js

+export {};

dist/lib/types/components/checkboxes.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface CheckboxesProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['div'];
+    className?: string;
+    inputProps?: JSX.IntrinsicElements['input'];
+    labelProps?: JSX.IntrinsicElements['label'];
+    itemProps?: JSX.IntrinsicElements['div'];
+    onChange?: (_value: string[]) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/checkboxes.js

+export {};

dist/lib/types/components/description.d.ts

+import { jsx } from '@emotion/react';
+import { DrupalElementCommonProps } from '../form';
+export interface DescriptionProps extends DrupalElementCommonProps {
+    innerProps?: jsx.JSX.IntrinsicElements['div'];
+    className?: string;
+    innerRef?: (instance: HTMLElement | null) => void;
+}

dist/lib/types/components/description.js

+export {};

dist/lib/types/components/errorMessage.d.ts

+import { ReactNode } from 'react';
+import { DrupalElementCommonProps } from '../form';
+export interface ErrorMessageProps extends DrupalElementCommonProps {
+    className?: string;
+    children?: ReactNode;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/errorMessage.js

+export {};

dist/lib/types/components/field.d.ts

+import { DrupalElementCommonProps } from '../form';
+export type TDrupal_FieldType = 'checkbox' | 'checkboxes' | 'entity_checkboxes' | 'term_checkboxes' | 'date' | 'email' | 'webform_markup' | 'webform_actions' | 'textarea' | 'textfield' | 'radios' | 'radios_entity' | 'number' | 'tel' | 'select' | 'entity_select' | 'term_select' | 'managed_file' | 'hidden' | 'fieldset' | 'webform_flexbox' | 'webform_section' | 'container' | 'details';
+export type TDrupalLayoutFieldType = 'container' | 'webform_flexbox' | 'webform_section' | 'details' | 'fieldset';
+export type TDrupalNonValueFieldType = TDrupalLayoutFieldType | 'webform_actions' | 'webform_markup';
+export type TDrupalValueFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType>;
+export type TElementSource = {
+    '#type': TDrupal_FieldType;
+    '#title': string;
+    '#required'?: boolean;
+    '#placeholder'?: string;
+    '#options'?: any;
+    '#options_display'?: string;
+    '#max_filesize'?: number;
+    '#min'?: number;
+    '#max'?: number;
+    '#default_value'?: string;
+    '#description_display'?: string;
+    '#description'?: string;
+    '#file_extensions'?: string;
+    '#file_placeholder'?: string;
+    '#help'?: string;
+    '#help_title'?: string;
+    '#markup'?: string;
+    '#minlength'?: number;
+    '#maxlength'?: number;
+    '#more_title'?: string;
+    '#more'?: string;
+    '#required_error'?: string;
+    '#rows'?: number;
+    '#field_prefix'?: string;
+    '#field_suffix'?: string;
+    '#submit__label'?: string;
+    '#size'?: number;
+    '#pattern'?: string;
+    '#pattern_error'?: string;
+    '#states': {
+        visible: Record<string, Record<string, string>>;
+    };
+    '#attributes'?: {
+        class?: string[];
+    };
+    '#wrapper_attributes'?: {
+        class?: string[];
+    };
+    '#empty_option'?: string;
+    '#empty_value'?: string;
+    '#sort_options'?: boolean;
+    '#title_display'?: string;
+    '#readonly'?: boolean;
+    '#date_date_min'?: string;
+    '#date_date_max'?: string;
+};
+export type TFieldWebformObj = DrupalElementCommonProps & {
+    index: number;
+    submitButtonRef?: any;
+    isMultiStep?: boolean;
+    ariaDescribedBy?: string;
+};

dist/lib/types/components/field.js

+export {};

dist/lib/types/components/fieldContainer.d.ts

+import { JSX, ReactElement } from 'react';
+import { DrupalElementCommonProps } from '../form';
+export interface FieldContainerProps extends DrupalElementCommonProps {
+    children: ReactElement;
+    isLabel?: boolean;
+    className?: string;
+    wrapperElement?: 'div' | 'fieldset';
+    innerProps?: JSX.IntrinsicElements['div'] | JSX.IntrinsicElements['fieldset'];
+    innerRef?: (instance: HTMLElement | null) => void;
+}

dist/lib/types/components/fieldContainer.js

+export {};

dist/lib/types/components/fieldRenderer.d.ts

+import { TFieldWebformObj } from './field';
+import { LayoutProps } from './layout';
+import { FieldWebformObjCustomProps } from './fieldWebformObjCustom';
+export type TFieldRendererProps = TFieldWebformObj | FieldWebformObjCustomProps | LayoutProps;

dist/lib/types/components/fieldRenderer.js

+export {};

dist/lib/types/components/fieldWebformObjCustom.d.ts

+import { ReactNode } from 'react';
+import { TFieldWebformObj } from './field';
+export type FieldWebformObjCustomProps = Omit<TFieldWebformObj, 'key'> & {
+    fieldKey: string;
+    children?: ReactNode;
+    key?: string;
+};

dist/lib/types/components/fieldWebformObjCustom.js

+export {};

dist/lib/types/components/filePreview.d.ts

+import { jsx } from '@emotion/react';
+import { DrupalElementCommonProps, TFileWithBase64 } from '../form';
+export interface ManagedFilePreviewProps extends DrupalElementCommonProps {
+    innerProps?: jsx.JSX.IntrinsicElements['div'];
+    className?: string;
+    value: TFileWithBase64 | {};
+    handleRemove: Function;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/filePreview.js

+export {};

dist/lib/types/components/form.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface FormProps extends TFieldWebformObj {
+    children?: React.ReactNode;
+    className?: string;
+    onSubmit: React.FormEventHandler<HTMLFormElement>;
+    innerProps?: JSX.IntrinsicElements['form'];
+    validationEngine?: 'rhf' | 'html';
+    disableActionButtonWhenInvalid?: boolean;
+}

dist/lib/types/components/form.js

+export {};

dist/lib/types/components/formDefault.d.ts

+import { TWebform, TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../form';
+type TMultiStepExtra = {
+    step: number;
+    lastStep: number;
+    isConditionalMultiStep: boolean;
+};
+export interface IFormDefaultWebformProps extends Omit<TWebform, 'elementsSource' | 'valueFormat' | 'defaultFieldValues' | 'classNames'> {
+    multiStepExtra?: TMultiStepExtra;
+    elementsSource: Record<string, any>;
+    defaultFieldValues: Required<TWebformDefaultFieldValues>;
+    rhfDefaultFieldStateMessages: TWebformNormalizedStateMessages;
+    components?: any;
+    includeInactiveFieldsInSubmit?: boolean;
+}
+export {};

dist/lib/types/components/formDefault.js

+export {};

dist/lib/types/components/formFieldRendered.d.ts

+import { TElementSource } from './field';
+export interface IFieldRendererWebformProps {
+    index: number;
+    fieldKey: string;
+    field: TElementSource;
+    components?: any;
+    classNamePrefix: string | undefined | null;
+    isMultiStep: boolean;
+    watchedValues?: Record<string, any>;
+    unstyled: boolean;
+    disableActionButtonWhenInvalid: boolean;
+    validationEngine: 'rhf' | 'html';
+}

dist/lib/types/components/formFieldRendered.js

+export {};

dist/lib/types/components/formMappingField.d.ts

+import { ReactElement } from 'react';
+import { FieldValidateProps } from './validate';
+import { TFieldWebformObj } from './field';
+type TElementFunction = (_props: TFieldWebformObj) => ReactElement | null;
+type TValidatorFunction = (_props: FieldValidateProps) => void;
+export interface IFormMappingField {
+    [key: string]: {
+        element: TElementFunction | null;
+        validator: TValidatorFunction | null;
+    };
+}
+export {};

dist/lib/types/components/formMappingField.js

+export {};

dist/lib/types/components/formMultiStep.d.ts

+import { TWebform, TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../form';
+export type TFormMultiStepProps = Omit<TWebform, 'elementsSource' | 'valueFormat' | 'defaultFieldValues' | 'classNames'> & {
+    elementsSource: Record<string, any>;
+    defaultFieldValues: Required<TWebformDefaultFieldValues>;
+    rhfDefaultFieldStateMessages: TWebformNormalizedStateMessages;
+    components?: any;
+};

dist/lib/types/components/formMultiStep.js

+export {};

dist/lib/types/components/hidden.d.ts

+import { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface HiddenProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['input'];
+    className?: string;
+    innerRef?: (instance: HTMLInputElement | null) => void;
+}

dist/lib/types/components/hidden.js

+export {};

dist/lib/types/components/index.d.ts

+export type * from './action';
+export type * from './button';
+export type * from './checkboxe';
+export type * from './checkboxes';
+export type * from './description';
+export type * from './errorMessage';
+export type * from './field';
+export type * from './fieldContainer';
+export type * from './fieldRenderer';
+export type * from './fieldWebformObjCustom';
+export type * from './filePreview';
+export type * from './form';
+export type * from './formDefault';
+export type * from './formFieldRendered';
+export type * from './formMappingField';
+export type * from './formMultiStep';
+export type * from './help';
+export type * from './hidden';
+export type * from './input';
+export type * from './layout';
+export type * from './layoutList';
+export type * from './layoutTitle';
+export type * from './loader';
+export type * from './managedFile';
+export type * from './managedFileInfo';
+export type * from './markup';
+export type * from './more';
+export type * from './multiStepActions';
+export type * from './multiStepStepper';
+export type * from './radios';
+export type * from './required';
+export type * from './select';
+export type * from './textarea';
+export type * from './title';
+export type * from './unsupportedField';
+export type * from './validate';
+export type * from './wrapperDescription';
+export type * from './wrapperField';
+export type * from './wrapperManagedFileInfo';
+export type * from './wrapperMore';
+export type * from './wysiwyg';

dist/lib/types/components/index.js

+export {};

dist/lib/types/components/input.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface InputProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['input'];
+    className?: string;
+    onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    innerRef?: (instance: HTMLInputElement | null) => void;
+}

dist/lib/types/components/input.js

+export {};

dist/lib/types/components/layout.d.ts

+import { TFieldWebformObj } from './field';
+import React from 'react';
+export interface LayoutProps extends TFieldWebformObj {
+    children: React.ReactNode;
+    className?: string;
+    innerProps?: React.HTMLAttributes<HTMLElement>;
+    innerRef?: (instance: HTMLElement | null) => void;
+}

dist/lib/types/components/layout.js

+export {};

dist/lib/types/components/layoutList.d.ts

+import { TFieldWebformObj } from './field';
+import React, { JSX } from 'react';
+export interface LayoutListProps extends TFieldWebformObj {
+    children: React.ReactNode;
+    className?: string;
+    innerProps?: JSX.IntrinsicElements['div'];
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/layoutList.js

+export {};

dist/lib/types/components/layoutTitle.d.ts

+import { TFieldWebformObj } from './field';
+import React from 'react';
+export interface LayoutTitleProps extends TFieldWebformObj {
+    className?: string;
+    innerProps?: React.HTMLAttributes<HTMLElement>;
+    innerRef?: (instance: HTMLElement | null) => void;
+}

dist/lib/types/components/layoutTitle.js

+export {};

dist/lib/types/components/loader.d.ts

+import { jsx } from '@emotion/react';
+import { DrupalElementCommonNoFieldProps } from '../form';
+export interface LoaderProps extends DrupalElementCommonNoFieldProps {
+    innerProps?: jsx.JSX.IntrinsicElements['span'];
+    className?: string;
+    innerRef?: (instance: HTMLSpanElement | null) => void;
+}

dist/lib/types/components/loader.js

+export {};

dist/lib/types/components/managedFile.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface ManagedFileProps extends TFieldWebformObj {
+    className?: string;
+    innerProps?: JSX.IntrinsicElements['input'];
+    onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    innerRef?: (instance: HTMLInputElement | null) => void;
+}

dist/lib/types/components/managedFile.js

+export {};

dist/lib/types/components/managedFileInfo.d.ts

+import { jsx } from '@emotion/react';
+import { DrupalElementCommonProps } from '../form';
+export interface ManagedFileInfoProps extends DrupalElementCommonProps {
+    innerProps?: jsx.JSX.IntrinsicElements['div'];
+    className?: string;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/managedFileInfo.js

+export {};

dist/lib/types/components/markup.d.ts

+import { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface MarkupProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['div'];
+    className?: string;
+}

dist/lib/types/components/markup.js

+export {};

dist/lib/types/components/more.d.ts

+import { jsx } from '@emotion/react';
+import { WysiwygProps } from './wysiwyg';
+import { DrupalElementCommonProps } from '../form';
+export interface MoreProps extends DrupalElementCommonProps {
+    innerPropsContainer?: jsx.JSX.IntrinsicElements['div'];
+    innerPropsButton?: jsx.JSX.IntrinsicElements['button'];
+    innerPropsWysiwyg?: WysiwygProps;
+    className?: string;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/more.js

+export {};

dist/lib/types/components/multiStepActions.d.ts

+import { DrupalElementCommonNoFieldProps } from '../form';
+export interface MultiStepActionsProps extends DrupalElementCommonNoFieldProps {
+    previousButtonLabel?: string;
+    nextButtonLabel?: string;
+    className?: string;
+    disableActionButtonWhenInvalid: boolean;
+}

dist/lib/types/components/multiStepActions.js

+export {};

dist/lib/types/components/multiStepStepper.d.ts

+import { JSX } from 'react';
+import { TWebformCustomComponents } from '../form';
+import { jsx } from '@emotion/react';
+export interface MultiStepStepperProps {
+    components: TWebformCustomComponents;
+    multiStepTitleAs?: keyof JSX.IntrinsicElements;
+    currentStepObj: Record<string, any>;
+    elementsSource: Record<string, any>;
+    classNamePrefix: string | undefined | null;
+    innerProps?: jsx.JSX.IntrinsicElements['div'];
+    className?: string;
+    unstyled: boolean;
+}

dist/lib/types/components/multiStepStepper.js

+export {};

dist/lib/types/components/radios.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface RadiosProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['div'];
+    itemProps?: JSX.IntrinsicElements['div'];
+    inputProps?: JSX.IntrinsicElements['input'];
+    labelProps?: JSX.IntrinsicElements['label'];
+    className?: string;
+    onChange?: (_event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLInputElement>) => void;
+    innerRef?: (instance: HTMLDivElement | null) => void;
+}

dist/lib/types/components/radios.js

+export {};

dist/lib/types/components/required.d.ts

+import { jsx } from '@emotion/react';
+export interface IRequiredWebformProps {
+    innerProps?: jsx.JSX.IntrinsicElements['span'];
+}

dist/lib/types/components/required.js

+export {};

dist/lib/types/components/select.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface SelectProps extends TFieldWebformObj {
+    innerProps?: JSX.IntrinsicElements['select'];
+    className?: string;
+    onChange?: (_event: React.ChangeEvent<HTMLSelectElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLSelectElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLSelectElement>) => void;
+    innerRef?: (instance: HTMLSelectElement | null) => void;
+}

dist/lib/types/components/select.js

+export {};

dist/lib/types/components/textarea.d.ts

+import React, { JSX } from 'react';
+import { TFieldWebformObj } from './field';
+export interface TextAreaProps extends TFieldWebformObj {
+    className?: string;
+    innerProps?: JSX.IntrinsicElements['textarea'];
+    onChange?: (_event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (_event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (_event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    innerRef?: (instance: HTMLTextAreaElement | null) => void;
+}

dist/lib/types/components/textarea.js

+export {};

dist/lib/types/components/title.d.ts

+import React, { JSX } from 'react';
+import { DrupalElementCommonProps } from '../form';
+type BaseLabelProps = DrupalElementCommonProps & {
+    className?: string;
+    children?: React.ReactNode;
+};
+export type TitleProps = (BaseLabelProps & {
+    wrapperElement: 'label';
+    innerProps?: JSX.IntrinsicElements['label'];
+    innerRef?: (instance: HTMLLabelElement | null) => void;
+}) | (BaseLabelProps & {
+    wrapperElement: 'legend';
+    innerProps?: JSX.IntrinsicElements['legend'];
+    innerRef?: (instance: HTMLLegendElement | null) => void;
+});
+export {};

dist/lib/types/components/title.js

+export {};

dist/lib/types/components/unsupportedField.d.ts

+import { TFieldWebformObj } from './field';
+export interface UnsupportedFieldProps extends TFieldWebformObj {
+}

dist/lib/types/components/unsupportedField.js

+export {};

dist/lib/types/components/validate.d.ts

+import { TWebformCustomValidators, TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../form';
+import { TElementSource } from './field';
+export interface FieldValidateProps {
+    yupObject: Record<string, any>;
+    defaultValues: Record<string, any>;
+    key: string;
+    field: TElementSource;
+    required: boolean;
+    options?: string[];
+    defaultFieldValues: Required<TWebformDefaultFieldValues>;
+    rhfDefaultFieldStateMessages: TWebformNormalizedStateMessages;
+    rhfCustomValidators?: TWebformCustomValidators;
+    requiredMessage: string;
+    errorMessage: string;
+    minLengthMessage: string;
+    maxLengthMessage: string;
+    watchedValues?: Record<string, any>;
+}

dist/lib/types/components/validate.js

+export {};

dist/lib/types/components/wrapperDescription.d.ts

+import { FieldContainerProps } from './fieldContainer';
+export type WrapperDescriptionProps = Omit<FieldContainerProps, 'wrapperElement' | 'classNameFieldName' | 'isLabel' | 'stateError' | 'children'>;

dist/lib/types/components/wrapperDescription.js

+export {};

dist/lib/types/components/wrapperField.d.ts

+import { FieldContainerProps } from './fieldContainer';
+export type WrapperFieldProps = Omit<FieldContainerProps, 'wrapperElement' | 'classNameFieldName' | 'innerPropsLabel'>;

dist/lib/types/components/wrapperField.js

+export {};

dist/lib/types/components/wrapperManagedFileInfo.d.ts

+import { FieldContainerProps } from './fieldContainer';
+export type WrapperManagedFileInfoProps = Omit<FieldContainerProps, 'wrapperElement' | 'stateError' | 'classNameFieldName' | 'isLabel' | 'children' | 'className' | 'innerPropsLabel'>;

dist/lib/types/components/wrapperManagedFileInfo.js

+export {};

dist/lib/types/components/wrapperMore.d.ts

+import { FieldContainerProps } from './fieldContainer';
+export type WrapperMoreProps = Omit<FieldContainerProps, 'wrapperElement' | 'stateError' | 'classNameFieldName' | 'isLabel' | 'children' | 'innerPropsLabel'>;

dist/lib/types/components/wrapperMore.js

+export {};

dist/lib/types/form.d.ts

+import { AnySchema } from 'yup';
+import React from 'react';
+import { TitleProps } from './components/title';
+import { TDrupal_FieldType, TDrupalNonValueFieldType, TDrupalValueFieldType, TElementSource, TFieldWebformObj } from './components/field';
+import { FieldContainerProps } from './components/fieldContainer';
+import { ErrorMessageProps } from './components/errorMessage';
+import { WysiwygProps } from './components/wysiwyg';
+import { HelpProps } from './components/help';
+import { DescriptionProps } from './components/description';
+import { ManagedFileInfoProps } from './components/managedFileInfo';
+import { MoreProps } from './components/more';
+import { ManagedFilePreviewProps } from './components/filePreview';
+import { MultiStepActionsProps } from './components/multiStepActions';
+import { MultiStepStepperProps } from './components/multiStepStepper';
+import { FieldValidateProps } from './components/validate';
+import { LayoutProps } from './components/layout';
+import { TFieldRendererProps } from './components/fieldRenderer';
+import { CheckboxProps } from './components/checkboxe';
+import { RadiosProps } from './components/radios';
+import { SelectProps } from './components/select';
+import { CheckboxesProps } from './components/checkboxes';
+import { TextAreaProps } from './components/textarea';
+import { HiddenProps } from './components/hidden';
+import { ActionProps } from './components/action';
+import { ManagedFileProps } from './components/managedFile';
+import { InputProps } from './components/input';
+import { FormProps } from './components/form';
+import { LayoutTitleProps } from './components/layoutTitle';
+import { LayoutListProps } from './components/layoutList';
+import { UnsupportedFieldProps } from './components/unsupportedField';
+export type TFileWithBase64 = {
+    name: string;
+    size: number;
+    type: string;
+    lastModified: number;
+    lastModifiedDate: number;
+    base64: string;
+};
+export type TDefaultValue = string | number | boolean | Record<string, any>;
+export type TWebformDefaultFieldValues = {
+    [K in TDrupalValueFieldType]?: TDefaultValue;
+};
+export type TWrapperCategory = 'textInput' | 'selectionInput' | 'booleanInput';
+export type TWebformMessageResolver = (props: TElementSource) => string;
+export type TWebformMessageStateValue = string | TWebformMessageResolver;
+export type TWebformErrorMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType>;
+export type TWebformRequiredMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType>;
+export type TWebformLengthMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType | 'select' | 'managed_file'>;
+export type TWebformResolvedStateMessages = {
+    general: {
+        errorMessage: string;
+        requiredMessage: string;
+        minLengthMessage: string;
+        maxLengthMessage: string;
+    };
+    fields: {
+        errorMessages: {
+            [K in TWebformErrorMessageFieldType]: string;
+        };
+        requiredMessages: {
+            [K in TWebformRequiredMessageFieldType]: string;
+        };
+        minLengthMessage: {
+            [K in TWebformLengthMessageFieldType]: string;
+        };
+        maxLengthMessage: {
+            [K in TWebformLengthMessageFieldType]: string;
+        };
+    };
+};
+export type TWebformStateMessages = {
+    general?: {
+        errorMessage?: TWebformMessageStateValue;
+        requiredMessage?: TWebformMessageStateValue;
+        minLengthMessage?: TWebformMessageStateValue;
+        maxLengthMessage?: TWebformMessageStateValue;
+    };
+    fields?: {
+        errorMessages?: Partial<Record<TWebformErrorMessageFieldType, TWebformMessageStateValue>>;
+        requiredMessages?: Partial<Record<TWebformRequiredMessageFieldType, TWebformMessageStateValue>>;
+        minLengthMessages?: Partial<Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>>;
+        maxLengthMessages?: Partial<Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>>;
+    };
+};
+export type TWebformNormalizedStateMessages = {
+    general: {
+        errorMessage: TWebformMessageStateValue;
+        requiredMessage: TWebformMessageStateValue;
+        minLengthMessage: TWebformMessageStateValue;
+        maxLengthMessage: TWebformMessageStateValue;
+    };
+    fields: {
+        errorMessages: Record<TWebformErrorMessageFieldType, TWebformMessageStateValue>;
+        requiredMessages: Record<TWebformRequiredMessageFieldType, TWebformMessageStateValue>;
+        minLengthMessages: Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>;
+        maxLengthMessages: Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>;
+    };
+};
+export type TWebformCustomComponents = {
+    action?: React.ComponentType<ActionProps>;
+    title?: React.ComponentType<TitleProps>;
+    fieldContainer?: React.ComponentType<FieldContainerProps>;
+    errorFieldMessage?: React.ComponentType<ErrorMessageProps>;
+    input?: React.ComponentType<InputProps>;
+    managedFile?: React.ComponentType<ManagedFileProps>;
+    managedFilePreview?: React.ComponentType<ManagedFilePreviewProps>;
+    select?: React.ComponentType<SelectProps>;
+    checkboxes?: React.ComponentType<CheckboxesProps>;
+    radios?: React.ComponentType<RadiosProps>;
+    textarea?: React.ComponentType<TextAreaProps>;
+    checkbox?: React.ComponentType<CheckboxProps>;
+    hidden?: React.ComponentType<HiddenProps>;
+    wysiwyg?: React.ComponentType<WysiwygProps>;
+    help?: React.ComponentType<HelpProps>;
+    description?: React.ComponentType<DescriptionProps>;
+    managedFileInfo?: React.ComponentType<ManagedFileInfoProps>;
+    more?: React.ComponentType<MoreProps>;
+    multiStepActions?: React.ComponentType<MultiStepActionsProps>;
+    multiStepStepper?: React.ComponentType<MultiStepStepperProps>;
+    layout?: React.ComponentType<LayoutProps>;
+    layoutTitle?: React.ComponentType<LayoutTitleProps>;
+    layoutList?: React.ComponentType<LayoutListProps>;
+    markup?: React.ComponentType<TFieldWebformObj>;
+    fieldById?: Record<string, React.ComponentType<TFieldRendererProps>>;
+    form?: React.ComponentType<FormProps>;
+    confirmationView?: React.ComponentType<any>;
+    unsupportedField?: React.ComponentType<UnsupportedFieldProps>;
+};
+export type TWebformValidatorFactory = (ctx: FieldValidateProps) => AnySchema | null | undefined;
+export type TWebformCustomValidators = {
+    byType?: Partial<Record<Exclude<TDrupal_FieldType | (string & {}), TDrupalNonValueFieldType>, TWebformValidatorFactory>>;
+    byId?: Partial<Record<string, TWebformValidatorFactory>>;
+};
+export type TValidationMode = 'onSubmit' | 'onBlur' | 'onChange' | 'onTouched' | 'all' | undefined;
+export type TWebform = {
+    elementsSource: Record<string, any>;
+    components?: TWebformCustomComponents;
+    rhfValidationMode?: TValidationMode;
+    validationEngine?: 'rhf' | 'html';
+    rhfCustomValidators?: TWebformCustomValidators;
+    classNamePrefix?: string | undefined;
+    rhfDefaultFieldStateMessages?: TWebformStateMessages;
+    onSubmit: (_data: Record<string, any>) => void | Promise<any>;
+    includeInactiveFieldsInSubmit?: boolean;
+    unstyled?: boolean;
+    disableActionButtonWhenInvalid?: boolean;
+};
+export type DrupalElementCommonProps = {
+    field: TElementSource;
+    classNamePrefix: string | undefined | null;
+    components: TWebformCustomComponents;
+    fieldKey: string;
+    unstyled: boolean;
+    disableActionButtonWhenInvalid?: boolean;
+    validationEngine?: 'rhf' | 'html';
+};
+export type DrupalElementCommonNoFieldProps = {
+    classNamePrefix: string | undefined | null;
+    components: TWebformCustomComponents;
+    unstyled: boolean;
+    field?: TElementSource;
+    fieldKey?: string;
+};

dist/lib/types/form.js

+export {};

dist/lib/types/index.d.ts

+export type * from './components';
+export type * from './form';

dist/lib/types/index.js

+export {};

src/components/for...b-components/fieldContainer.module.scss

+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  border: none;
+}
+
+.fieldWrapperCheckbox {
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.prefixSuffixContainer {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  .fieldContainer {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    min-width: 0;
+    flex: 1;
+  }
+}
+
+

src/components/for...ub-components/layout/layout.module.scss

+.layout[data-type='details'], .layout[data-type='fieldset'] {
+  border-radius: .5rem;
+  border: 1px solid #d4d4d8;
+}
+
+.layoutList {
+  display: flex;
+  gap: 1.5rem;
+  flex-direction: column;
+}
+
+.layout[data-type='details'] .layoutList,
+.layout[data-type='fieldset'] .layoutList
+{
+  padding: .875rem
+}
+
+.layout[data-type='webform_flexbox'] .layoutList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.layoutTitle {
+  font-size: 1rem;
+}
+
+.layout[data-type='fieldset'] .layoutTitle {
+  margin-left: .375rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  border-radius: .5rem;
+}
+
+.layout[data-type='container'] .layoutTitle,
+.layout[data-type='webform_section'] .layoutTitle,
+.layout[data-type='webform_flexbox'] .layoutTitle
+{
+  display: inline-block;
+  margin-bottom: 1rem;
+}
+
+.layout[data-type='details'] .layoutTitle {
+  padding: .875rem;
+  cursor: pointer;
+  border-radius: .5rem;
+  &:hover, &:focus-visible {
+    background: #F7F7F7;
+  }
+  &:focus, &:focus-visible {
+    box-shadow: 0 0 0 1px var(--border-form-element),0 0 0 4px var(--input-focus)
+  }
+}
+
+.layout[data-type='details'][open] .layoutTitle {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

src/components/for...-sub-components/title/title.module.scss

+.title {
+    font-size: var(--font-size-s);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-title);
+}
+
+legend.title {
+  margin-bottom: .5rem
+}
+
+.isRequired {
+  &::after {
+    content: "*";
+    color: var(--danger);
+    line-height: 1;
+    margin-inline: .15em;
+    vertical-align: text-top;
+    background: none;
+  }
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+input[type='checkbox'] + .title {
+  font-weight: 400;
+  margin-block-end: 0;
+}

src/components/form/form.module.scss

+.form {
+  display: flex;
+  gap: 1.5rem;
+  flex-direction: column;
+}

dist/components/form/fields/action.d.ts

 import { TFieldWebformObj } from '../../../lib/types/components/field';
-export declare const renderAction: ({ field, fieldKey, submitButtonRef, }: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;
+import { ActionProps } from '../../../lib/types/components/action';
+export declare const Action: ({ field, innerProps, className, classNamePrefix, unstyled, components, fieldKey, disableActionButtonWhenInvalid, }: ActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const renderAction: (props: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;

dist/components/form/fields/action.js

@@ -7,6 +7,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormContext } from 'react-hook-form';
-export const renderAction = ({ field, fieldKey, submitButtonRef, }) => {
+import { getClassNames } from '../../../lib/functions/utils_functions';
+export const Action = ({ field, innerProps, className, classNamePrefix, unstyled, components, fieldKey, disableActionButtonWhenInvalid, }) => {
     const { formState } = useFormContext();
     const { isSubmitting, isValid } = formState;
-    return (_jsx(React.Fragment, { children: _jsxs("button", { className: cn(styles.button, ...(field?.['#attributes']?.class ?? [])), type: "submit", ref: submitButtonRef, disabled: !isValid || isSubmitting, children: [isSubmitting && _jsx(Loader, {}), field?.['#submit__label'] ?? 'Submit'] }) }, fieldKey));
+    const isDisabled = disableActionButtonWhenInvalid && !isValid;
+    const actionClassNames = getClassNames({
+        name: 'action',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.button, ...(field?.['#attributes']?.class ?? [])),
+    });
+    const scrollToFirstInvalidField = () => {
+        const firstInvalid = document.querySelector('input:invalid, select:invalid, textarea:invalid');
+        if (firstInvalid) {
+            firstInvalid.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+            firstInvalid.focus({ preventScroll: true });
+        }
+    };
+    const handleClick = () => {
+        if (!isValid) {
+            scrollToFirstInvalidField();
+        }
+    };
+    return (_jsxs("button", { type: "submit", className: actionClassNames, disabled: isDisabled, onClick: handleClick, ...innerProps, children: [isSubmitting && (_jsx(Loader, { components: components, field: field, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled })), field?.['#submit__label'] ?? 'Submit'] }));
 };
+export const renderAction = (props) => {
+    const { fieldKey, components } = props;
+    const CustomAction = components?.fieldById?.[fieldKey] ?? components?.action;
+    if (CustomAction) {
+        return _jsx(CustomAction, { ...props });
+    }
+    return (_jsx(React.Fragment, { children: _jsx(Action, { ...props }) }, fieldKey));
+};

dist/components/form/fields/checkbox.js

@@ -1,17 +0,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useController, useFormContext } from 'react-hook-form';
-import Wrapper from './fields-sub-components/wrapper';
-import cn from 'classnames';
-import styles from './field.module.scss';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Checkbox from './fields-elements/checkbox';
+import Title from './fields-sub-components/title/title';
+import styles from '../fields/field.module.scss';
 export const renderCheckbox = (props) => {
-    const { onBlur, fieldKey, field, classNames, components } = props;
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
+    const CustomCheckbox = components?.fieldById?.[fieldKey] ?? components?.checkbox;
+    const CustomLabel = components?.title ?? Title;
     const title = field?.['#title'];
-    const isRequired = Boolean(field?.['#required']);
-    const { control } = useFormContext();
-    const CustomCheckbox = components?.fieldById?.[fieldKey] ?? components?.checkbox;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldCheckboxes", stateError: fieldState?.error, isLabel: false, components: components, fieldKey: fieldKey, children: CustomCheckbox ? (_jsx(CustomCheckbox, { ...props })) : (_jsxs("div", { className: cn(classNames.fields.checkbox?.itemWrapper, styles.checkbox), children: [_jsx("input", { id: fieldKey, className: cn(classNames.fields.checkbox.input), name: fieldController.name, type: "checkbox", value: title, checked: Boolean(fieldController.value), onChange: (e) => fieldController.onChange(e.target.checked), onBlur: onBlur }), title && (_jsx("label", { htmlFor: fieldKey, className: cn(classNames.fields.checkbox.label, styles.checkboxLabel, {
-                        [styles.isRequired]: isRequired,
-                    }), children: title }))] })) }, fieldKey));
+    return (_jsx(FieldContainerComponent, { field: field, isLabel: false, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomCheckbox ? (_jsx(CustomCheckbox, { ...props })) : (_jsxs(_Fragment, { children: [_jsx(Checkbox, { ...props }), title && (_jsx(CustomLabel, { classNamePrefix: classNamePrefix, wrapperElement: "label", fieldKey: fieldKey, components: components, field: field, className: styles.checkboxLabel, unstyled: unstyled }))] })) }, fieldKey));
 };

dist/components/form/fields/field.module.scss

@@ -20,5 +20,17 @@ .input, .select  {
 
+.input[type='date'] {
+  font-family: inherit
+}
+
+.input[readonly] {
+  background: lightgray;
+}
+
+.select {
+  padding-right: .5rem;
+}
+
 .textarea {
   padding: 1rem;
-  font-family: inherit !important;
+  font-family: inherit;
   font-size: var(--font-size-s);
@@ -79,4 +91,9 @@ border: 1px solid var(--input-border-color);
   font-size: var(--font-size-s);
-  .labelCheckbox {
-    cursor: pointer;
+}
+.checkboxLabel {
+  cursor: pointer;
+  font-weight: 400;
+  margin-bottom: 0;
+  &:hover {
+    font-weight: 700;
   }
@@ -105,2 +122,8 @@ }
 
+.fieldWrapperCheckbox {
+  display: flex;
+  flex-direction: row;
+  gap: .5rem
+}
+
 .checkboxLabel {
@@ -107,0 +130,0 @@ cursor: pointer;

dist/components/fo...-special-components/fieldObjCustom.d.ts

@@ -1,3 +0,3 @@
-import { TFieldWebformObjCustom } from '../../../../lib/types/components/fieldWebformObjCustom';
-declare const FieldObjCustom: (props: TFieldWebformObjCustom) => import("react/jsx-runtime").JSX.Element;
+import { FieldWebformObjCustomProps } from '../../../../lib/types/components/fieldWebformObjCustom';
+declare const FieldObjCustom: (props: FieldWebformObjCustomProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldObjCustom;

dist/components/fo...special-components/wysiwyg/wysiwyg.d.ts

 import React from 'react';
-import { IWysiwygProps } from '../../../../../lib/types/components/wysiwyg';
-declare const _default: React.MemoExoticComponent<({ processed, as: Element, className, }: IWysiwygProps) => import("react/jsx-runtime").JSX.Element>;
+import { WysiwygProps } from '../../../../../lib/types/components/wysiwyg';
+declare const _default: React.MemoExoticComponent<({ processed, as: Element, className, classNamePrefix, innerProps, unstyled, innerRef, }: WysiwygProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...s-special-components/wysiwyg/wysiwyg.js

@@ -6,4 +6,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './wysiwyg.module.scss';
-const Wysiwyg = ({ processed, as: Element = 'div', className, }) => {
-    return (_jsx(Element, { className: cn(className, styles.wysiwyg), dangerouslySetInnerHTML: {
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const Wysiwyg = ({ processed, as: Element = 'div', className, classNamePrefix, innerProps, unstyled, innerRef, }) => {
+    const wysiwygClassNames = getClassNames({
+        name: 'wysiwyg',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.wysiwyg),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'wysiwyg',
+    });
+    return (_jsx(Element, { ref: innerRef, className: wysiwygClassNames, dangerouslySetInnerHTML: {
             __html: DOMPurify.sanitize(processed, {
@@ -13,4 +24,4 @@ ADD_TAGS: ['iframe'],
             }),
-        } }));
+        }, ...dataAttributes, ...innerProps }));
 };
 export default React.memo(Wysiwyg);

dist/components/fo...-components/wysiwyg/wysiwyg.module.scss

@@ -11,2 +11,2 @@ .wysiwyg {
   }
-}
+}

dist/components/fo...b-components/buttons/button/button.d.ts

@@ -1,3 +0,3 @@
-import { IButtonWebformProps } from "../../../../../../lib/types/components/button";
-declare const Button: ({ title, innerProps, fillType, size, }: IButtonWebformProps) => import("react/jsx-runtime").JSX.Element;
+import { ButtonProps } from '../../../../../../lib/types/components/button';
+declare const Button: ({ title, innerProps, fillType, size, className, classNamePrefix, unstyled, innerRef, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

dist/components/fo...sub-components/buttons/button/button.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './button.module.scss';
 import cn from 'classnames';
-const Button = ({ title, innerProps, fillType = 'fill', size = 'default', }) => {
-    const { className, ...restInnerProps } = innerProps ?? {};
-    return (_jsx("button", { className: cn(className, styles.button, styles[fillType], styles[size]), type: 'button', ...restInnerProps, children: title }));
+import { getClassNames } from '../../../../../../lib/functions/utils_functions';
+const Button = ({ title, innerProps, fillType = 'fill', size = 'default', className, classNamePrefix, unstyled, innerRef, }) => {
+    const { ...restInnerProps } = innerProps ?? {};
+    const buttonClassNames = getClassNames({
+        name: 'button',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.button, styles[fillType], styles[size]),
+    });
+    return (_jsx("button", { ref: innerRef, className: buttonClassNames, type: 'button', ...restInnerProps, children: title }));
 };
 export default Button;

dist/components/fo...components/description/description.d.ts

 import 'tippy.js/dist/tippy.css';
-import { IDescriptionWebformProps } from '../../../../../lib/types/components/description';
-declare const Description: ({ innerProps, components, processed, }: IDescriptionWebformProps) => import("react/jsx-runtime").JSX.Element;
+import { DescriptionProps } from '../../../../../lib/types/components/description';
+declare const Description: ({ innerProps, components, field, fieldKey, className, classNamePrefix, unstyled, innerRef, }: DescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export default Description;

dist/components/fo...b-components/description/description.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import 'tippy.js/dist/tippy.css';
 import Wysiwyg from '../../fields-special-components/wysiwyg/wysiwyg';
-const Description = ({ innerProps, components, processed, }) => {
+import cn from 'classnames';
+import styles from './description.module.scss';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const Description = ({ innerProps, components, field, fieldKey, className, classNamePrefix, unstyled, innerRef, }) => {
     const CustomWysiwyg = components.wysiwyg ?? Wysiwyg;
-    const { className, ...restInnerProps } = innerProps ?? {};
-    return (_jsx(CustomWysiwyg, { className: className, processed: processed, as: 'div', source: 'description', ...restInnerProps }));
+    const descriptionClassNames = getClassNames({
+        name: 'description',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.descriptionWysiwyg),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'description',
+    });
+    const mergedInnerProps = {
+        id: innerProps?.id ?? `description-${fieldKey}`,
+        ...innerProps,
+    };
+    return (_jsx(CustomWysiwyg, { innerRef: innerRef, components: components, field: field, fieldKey: fieldKey, className: descriptionClassNames, classNamePrefix: classNamePrefix, processed: (field?.['#description'] ?? field?.['#file_placeholder']) || '', as: 'div', source: 'description', innerProps: {
+            ...dataAttributes,
+            ...mergedInnerProps,
+        }, unstyled: unstyled }));
 };
 export default Description;

dist/components/fo...rrorFieldMessage/errorFieldMessage.d.ts

@@ -1,3 +0,3 @@
-import { IErrorMessageWebformProps } from "../../../../../lib/types/components/errorMessage";
-declare const ErrorFieldMessage: ({ message, children, className, }: IErrorMessageWebformProps) => import("react/jsx-runtime").JSX.Element;
+import { ErrorMessageProps } from '../../../../../lib/types/components/errorMessage';
+declare const ErrorFieldMessage: ({ children, className, fieldKey, classNamePrefix, unstyled, innerRef, }: ErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default ErrorFieldMessage;

dist/components/fo.../errorFieldMessage/errorFieldMessage.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './errorFieldMessage.module.scss';
 import cn from 'classnames';
-const ErrorFieldMessage = ({ message, children, className, }) => {
-    return (_jsxs("div", { className: cn(styles.errorFieldMessage, className), children: [message && _jsx("span", { children: message }), children] }));
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+import { useController, useFormContext } from 'react-hook-form';
+const ErrorFieldMessage = ({ children, className, fieldKey, classNamePrefix, unstyled, innerRef, }) => {
+    const wrapperClassNames = getClassNames({
+        name: 'errorFieldMessage',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.errorFieldMessage),
+    });
+    const messageClassNames = getClassNames({
+        name: 'errorFieldMessageText',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'errorFieldMessage',
+    });
+    const { control } = useFormContext();
+    const { fieldState } = useController({
+        name: fieldKey,
+        control,
+    });
+    const rawMessage = fieldState?.error?.message;
+    const message = typeof rawMessage === 'string' &&
+        rawMessage.trim() !== '' &&
+        rawMessage !== '0'
+        ? rawMessage
+        : null;
+    if (!message) {
+        return null;
+    }
+    return (_jsxs("div", { ref: innerRef, className: wrapperClassNames, ...dataAttributes, children: [message && _jsx("span", { className: messageClassNames, children: message }), children] }));
 };
 export default ErrorFieldMessage;

dist/components/fo...ds/fields-sub-components/help/help.d.ts

 import 'tippy.js/dist/tippy.css';
-import { IHelpProps } from '../../../../../lib/types/components/help';
-declare const Help: ({ innerProps, components, helps }: IHelpProps) => import("react/jsx-runtime").JSX.Element;
+import { HelpProps } from '../../../../../lib/types/components/help';
+declare const Help: ({ innerProps, components, field, className, classNamePrefix, unstyled, fieldKey, innerRef, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
 export default Help;

dist/components/fo...elds/fields-sub-components/help/help.js

@@ -9,6 +9,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Wysiwyg from '../../fields-special-components/wysiwyg/wysiwyg';
-const Help = ({ innerProps, components, helps }) => {
-    const { className, ...restInnerProps } = innerProps ?? {};
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const Help = ({ innerProps, components, field, className, classNamePrefix, unstyled, fieldKey, innerRef, }) => {
     const buttonRef = useRef(null);
     const CustomWysiwyg = components.wysiwyg ?? Wysiwyg;
+    const helps = {
+        help: field?.['#help'],
+        processed_help_title: field?.['#help_title'],
+    };
     useEffect(() => {
@@ -25,3 +29,3 @@ if (!buttonRef.current)
     `;
-        root.render(_jsx(CustomWysiwyg, { source: 'help', processed: html }));
+        root.render(_jsx(CustomWysiwyg, { field: field, fieldKey: fieldKey, components: components, classNamePrefix: classNamePrefix, source: 'help', processed: html, unstyled: unstyled }));
         tippy(buttonRef.current, {
@@ -34,4 +38,17 @@ content: tooltipContainer,
     }, [helps]);
-    return (_jsx("button", { className: cn(styles.help, className), ref: buttonRef, type: "button", ...restInnerProps, children: "?" }));
+    const buttonClassNames = getClassNames({
+        name: 'help',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.help),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'help',
+    });
+    return (_jsx("button", { className: buttonClassNames, ref: (el) => {
+            buttonRef.current = el;
+            innerRef?.(el);
+        }, type: "button", ...dataAttributes, ...innerProps, children: "?" }));
 };
 export default Help;

dist/components/fo...ields-sub-components/loader/loader.d.ts

@@ -1,3 +0,3 @@
-import { ILaoderWebformProps } from "../../../../../lib/types/components/loader";
-declare const Loader: (props: ILaoderWebformProps) => import("react/jsx-runtime").JSX.Element;
+import { LoaderProps } from '../../../../../lib/types/components/loader';
+declare const Loader: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Loader;

dist/components/fo.../fields-sub-components/loader/loader.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './loader.module.scss';
 import cn from 'classnames';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
 const Loader = (props) => {
-    const { innerProps } = props;
-    return _jsx("span", { className: cn(styles.loader, innerProps?.className) });
+    const { innerProps, className, classNamePrefix, unstyled, innerRef } = props;
+    const loaderClassNames = getClassNames({
+        name: 'loader',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.loader),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'loader',
+    });
+    return (_jsx("span", { ref: innerRef, className: loaderClassNames, ...dataAttributes, ...innerProps }));
 };
 export default Loader;

dist/components/fo...ts/managedFileInfo/managedFileInfo.d.ts

@@ -1,3 +0,4 @@
-import { IManagedFileInfoProps } from "../../../../../lib/types/components/managedFileInfo";
-declare const ManagedFileInfo: ({ field, innerProps }: IManagedFileInfoProps) => import("react/jsx-runtime").JSX.Element;
-export default ManagedFileInfo;
+import React from 'react';
+import { ManagedFileInfoProps } from '../../../../../lib/types/components/managedFileInfo';
+declare const _default: React.MemoExoticComponent<({ field, innerProps, className, classNamePrefix, unstyled, innerRef, }: ManagedFileInfoProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/fo...ents/managedFileInfo/managedFileInfo.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
 import styles from './managedFileInfo.module.scss';
-import cn from 'classnames';
-const ManagedFileInfo = ({ field, innerProps }) => {
-    return (_jsxs("div", { className: cn(styles.managedFileInfo, innerProps?.className), children: [_jsx("span", { className: styles.label, children: "One file limit" }), field?.['#max_filesize'] && (_jsxs("span", { className: styles.label, children: [field['#max_filesize'], " MB limit"] })), field?.['#file_extensions'] && (_jsxs("span", { className: styles.label, children: ["Allowed types: ", field['#file_extensions']] }))] }));
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+const ManagedFileInfo = ({ field, innerProps, className, classNamePrefix, unstyled, innerRef, }) => {
+    const wrapperClassNames = getClassNames({
+        name: 'managedFileInfo',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.managedFileInfo),
+    });
+    const labelClassNames = getClassNames({
+        name: 'managedFileLabel',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.label),
+    });
+    const maxSizeClassNames = getClassNames({
+        name: 'managedFileInfoMaxSize',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.label),
+    });
+    const fileExtensionClassname = getClassNames({
+        name: 'managedFileFileExtension',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.label),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'managedFileInfo',
+        type: 'managed_file',
+    });
+    return (_jsxs("div", { ref: innerRef, className: wrapperClassNames, ...dataAttributes, ...innerProps, children: [_jsx("span", { className: labelClassNames, children: "One file limit" }), _jsxs("span", { className: maxSizeClassNames, children: [field?.['#max_filesize'] ?? 100, " MB limit"] }), _jsxs("span", { className: fileExtensionClassname, children: ["Allowed types:", ' ', field?.['#file_extensions'] && field['#file_extensions'].length > 0
+                        ? field['#file_extensions']
+                        : 'gif, jpg, jpeg, bmp, eps, tif, pict, psd, txt, rtf, html, odf, pdf, doc, docx, ppt, pptx, xls, xlsx, xml, avi, mov, mp3, mp4, ogg, wav, bz2, dmg, gz, jar, rar, sit, svg, tar, zip.'] })] }));
 };
-export default ManagedFileInfo;
+export default React.memo(ManagedFileInfo);

dist/components/fo...gedFileInfo/managedFileInfo.module.scss

 .managedFileInfo {
+  color: var(--color-text-light);
   font-size: var(--font-size-xs);
@@ -3,0 +4,0 @@ .label {

dist/components/fo...agedFilePreview/managedFilePreview.d.ts

@@ -1,3 +0,4 @@
-import { IManagedFilePreviewWebformProps } from "../../../../../lib/types/components/filePreview";
-declare const ManagedFilePreview: ({ innerProps, value, handleRemove, }: IManagedFilePreviewWebformProps) => import("react/jsx-runtime").JSX.Element;
-export default ManagedFilePreview;
+import React from 'react';
+import { ManagedFilePreviewProps } from '../../../../../lib/types/components/filePreview';
+declare const _default: React.MemoExoticComponent<({ innerProps, value, handleRemove, className, classNamePrefix, field, fieldKey, unstyled, components, innerRef, }: ManagedFilePreviewProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

dist/components/fo...anagedFilePreview/managedFilePreview.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cn from 'classnames';
 import styles from './managedFilePreview.module.scss';
-import { base64ToBlob } from "../../../../../lib/functions/webform_fields_functions/webform_fields_file_functions";
-import cn from 'classnames';
-import Button from "../buttons/button/button";
-const ManagedFilePreview = ({ innerProps, value, handleRemove, }) => {
-    const { className, ...restInnerProps } = innerProps ?? {};
+import { base64ToBlob } from '../../../../../lib/functions/webform_fields_functions/webform_fields_file_functions';
+import { getClassNames, getDataAttributes, } from '../../../../../lib/functions/utils_functions';
+import Button from '../buttons/button/button';
+const ManagedFilePreview = ({ innerProps, value, handleRemove, className, classNamePrefix, field, fieldKey, unstyled, components, innerRef, }) => {
     const fileValue = value;
     const blob = base64ToBlob(fileValue.base64, fileValue.type);
-    return (_jsxs("div", { className: cn(styles.filePreview, className), ...restInnerProps, children: [_jsxs("div", { className: styles.fileInfo, children: [_jsx("span", { className: styles.fileName, children: _jsx("a", { className: styles.link, href: URL.createObjectURL(blob), target: "_blank", rel: "noopener noreferrer", children: fileValue?.name }) }), _jsxs("span", { className: styles.fileSize, children: ["(", (fileValue?.size / 1024).toFixed(2), " KB)"] })] }), _jsx(Button, { fillType: 'border', size: 'small', title: 'Remove', innerProps: { onClick: () => handleRemove() } })] }));
+    const wrapperClassNames = getClassNames({
+        name: 'managedFilePreview',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.filePreview),
+    });
+    const fileInfoClassNames = getClassNames({
+        name: 'managedFilePreviewInfo',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.fileInfo,
+    });
+    const fileNameClassNames = getClassNames({
+        name: 'managedFilePreviewName',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.fileName,
+    });
+    const fileLinkClassNames = getClassNames({
+        name: 'managedFilePreviewLink',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.link,
+    });
+    const fileSizeClassNames = getClassNames({
+        name: 'managedFilePreviewSize',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.fileSize,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'managedFilePreview',
+    });
+    return (_jsxs("div", { ref: innerRef, className: wrapperClassNames, ...dataAttributes, ...innerProps, children: [_jsxs("div", { className: fileInfoClassNames, children: [_jsx("span", { className: fileNameClassNames, children: _jsx("a", { className: fileLinkClassNames, href: URL.createObjectURL(blob), target: "_blank", rel: "noopener noreferrer", children: fileValue?.name }) }), _jsxs("span", { className: fileSizeClassNames, children: ["(", (fileValue?.size / 1024).toFixed(2), " KB)"] })] }), _jsx(Button, { fieldKey: fieldKey, components: components, unstyled: unstyled, field: field, classNamePrefix: classNamePrefix, fillType: "border", size: "small", title: "Remove", innerProps: { onClick: () => handleRemove() } })] }));
 };
-export default ManagedFilePreview;
+export default React.memo(ManagedFilePreview);

dist/components/fo...ds/fields-sub-components/more/more.d.ts

 import React from 'react';
-import { IMoreProps } from '../../../../../lib/types/components/more';
-declare const _default: React.MemoExoticComponent<({ innerPropsContainer, innerPropsButton, innerPropsWysiwyg, moreTitle, components, }: IMoreProps) => import("react/jsx-runtime").JSX.Element>;
+import { MoreProps } from '../../../../../lib/types/components/more';
+declare const _default: React.MemoExoticComponent<({ innerPropsContainer, innerPropsButton, innerPropsWysiwyg, components, className, classNamePrefix, field, unstyled, innerRef, }: MoreProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...elds/fields-sub-components/more/more.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
+import cn from 'classnames';
 import styles from './more.module.scss';
 import Wysiwyg from '../../fields-special-components/wysiwyg/wysiwyg';
-import cn from 'classnames';
-const More = ({ innerPropsContainer, innerPropsButton, innerPropsWysiwyg, moreTitle, components, }) => {
+import { getClassNames } from '../../../../../lib/functions/utils_functions';
+import { getDataAttributes } from '../../../../../lib/functions/utils_functions';
+const More = ({ innerPropsContainer, innerPropsButton, innerPropsWysiwyg, components, className, classNamePrefix, field, unstyled, innerRef, }) => {
     const CustomWysiwyg = components.wysiwyg ?? Wysiwyg;
@@ -11,9 +13,36 @@ const { className: containerClassName, ...containerProps } = innerPropsContainer ?? {};
     const [open, setOpen] = useState(false);
-    const handleClick = () => {
-        setOpen((prev) => !prev);
-    };
-    return (_jsxs("div", { className: cn(styles.more, containerClassName), ...containerProps, children: [_jsx("button", { type: "button", className: cn(styles.button, buttonClassName, {
-                    [styles.opened]: open,
-                }), onClick: handleClick, ...buttonProps, children: moreTitle }), open && innerPropsWysiwyg?.processed && (_jsx(CustomWysiwyg, { as: 'div', ...innerPropsWysiwyg }))] }));
+    const containerClassNames = getClassNames({
+        name: 'more',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(styles.more, containerClassName),
+    });
+    const buttonClassNames = getClassNames({
+        name: 'moreButton',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.button, buttonClassName, {
+            [styles.opened]: open,
+        }),
+    });
+    const buttonLabelClassNames = getClassNames({
+        name: 'moreButtonLabel',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.buttonLabel),
+    });
+    const wysiwygClassNames = getClassNames({
+        name: 'moreContent',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.moreWysiwyg),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'more',
+    });
+    const moreTitle = field?.['#more_title'];
+    const moreText = field?.['#more'];
+    return (_jsxs("div", { ref: innerRef, className: containerClassNames, ...dataAttributes, ...containerProps, children: [_jsx("button", { type: "button", className: buttonClassNames, onClick: () => setOpen((prev) => !prev), "aria-expanded": open, ...buttonProps, children: _jsx("span", { className: buttonLabelClassNames, children: moreTitle ?? 'More' }) }), open && moreText && moreText.length > 0 && (_jsx(CustomWysiwyg, { as: "div", className: wysiwygClassNames, classNamePrefix: classNamePrefix, processed: moreText, source: 'more', ...innerPropsWysiwyg }))] }));
 };
 export default React.memo(More);

dist/components/fo...ds-sub-components/more/more.module.scss

@@ -5,6 +5,12 @@ .more {
     border: none;
+    color: var(--primary-color);
+    .buttonLabel {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+    }
     &::before {
       content: "► ";
-      font-size: 0.8em;
+      font-size: 0.8rem;
       cursor: pointer;
+      color: var(--color-text);
     }
@@ -14,2 +20,3 @@ &.opened {
         content: "▼ ";
+        color: var(--color-text);
       }
@@ -20,1 +27,5 @@ }
 
+.moreWysiwyg {
+  color: var(--color-text-light);
+  font-size: var(--font-size-xs);
+}

dist/components/fo...-sub-components/wrapperDescription.d.ts

 import React from 'react';
-import { TWrapperDescriptionWebformProps } from '../../../../../lib/types/components/wrapperDescription';
-declare const _default: React.MemoExoticComponent<({ components, classNames, field, }: TWrapperDescriptionWebformProps) => import("react/jsx-runtime").JSX.Element>;
+import { WrapperDescriptionProps } from '../../../../../lib/types/components/wrapperDescription';
+declare const _default: React.MemoExoticComponent<({ components, field, fieldKey, classNamePrefix, unstyled, }: WrapperDescriptionProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...er-sub-components/wrapperDescription.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import styles from '../wrapper.module.scss';
-import cn from 'classnames';
 import Description from '../description/description';
-const WrapperDescription = ({ components, classNames, field, }) => {
+const WrapperDescription = ({ components, field, fieldKey, classNamePrefix, unstyled, }) => {
     const CustomDescription = components?.description ?? Description;
-    return (_jsx(CustomDescription, { components: components, innerProps: {
-            className: cn(classNames.general.fieldDescription, styles.wysiwyg, classNames.general.fieldWysiwyg),
-        }, processed: (field?.['#description'] ?? field?.['#file_placeholder']) || '' }));
+    return (_jsx(CustomDescription, { unstyled: unstyled, components: components, field: field, classNamePrefix: classNamePrefix, fieldKey: fieldKey }));
 };
 export default React.memo(WrapperDescription);

dist/components/fo...rapper-sub-components/wrapperField.d.ts

 import React from 'react';
-import { TWrapperFieldWebformProps } from "../../../../../lib/types/components/wrapperField";
-declare const _default: React.MemoExoticComponent<({ components, classNames, field, children, stateError, }: TWrapperFieldWebformProps) => import("react/jsx-runtime").JSX.Element>;
+import { WrapperFieldProps } from '../../../../../lib/types/components/wrapperField';
+declare const _default: React.MemoExoticComponent<({ components, field, children, fieldKey, classNamePrefix, unstyled, }: WrapperFieldProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo.../wrapper-sub-components/wrapperField.js

 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import styles from "../wrapper.module.scss";
-import ErrorFieldMessage from "../errorFieldMessage/errorFieldMessage";
-const WrapperField = ({ components, classNames, field, children, stateError, }) => {
-    const CustomErrorFieldMessage = components?.errorFieldMessage ?? ErrorFieldMessage;
-    return (_jsx(_Fragment, { children: field?.['#field_prefix'] || field?.['#field_suffix'] ? (_jsxs("div", { className: styles.prefixSuffixContainer, children: [field?.['#field_prefix'] && _jsx("span", { children: field['#field_prefix'] }), _jsxs("div", { className: styles.fieldContainer, children: [children, typeof stateError?.message === 'string' &&
-                            stateError.message.length > 0 && (_jsx(CustomErrorFieldMessage, { className: classNames.states?.fieldErrorMessage, message: stateError.message }))] }), field?.['#field_suffix'] && _jsx("span", { children: field['#field_suffix'] })] })) : (_jsxs(_Fragment, { children: [children, typeof stateError?.message === 'string' &&
-                    stateError.message.length > 0 && (_jsx(CustomErrorFieldMessage, { className: classNames.states?.fieldErrorMessage, message: stateError.message }))] })) }));
+import styles from '../fieldContainer.module.scss';
+import ErrorFieldMessage from '../errorFieldMessage/errorFieldMessage';
+const WrapperField = ({ components, field, children, fieldKey, classNamePrefix, unstyled, }) => {
+    const ErrorFieldMessageComponent = components?.errorFieldMessage ?? ErrorFieldMessage;
+    return (_jsx(_Fragment, { children: field?.['#field_prefix'] || field?.['#field_suffix'] ? (_jsxs("div", { className: styles.prefixSuffixContainer, children: [field?.['#field_prefix'] && _jsx("span", { children: field['#field_prefix'] }), _jsxs("div", { className: styles.fieldContainer, children: [children, _jsx(ErrorFieldMessageComponent, { classNamePrefix: classNamePrefix, field: field, fieldKey: fieldKey, components: components, unstyled: unstyled })] }), field?.['#field_suffix'] && _jsx("span", { children: field['#field_suffix'] })] })) : (_jsxs(_Fragment, { children: [children, _jsx(ErrorFieldMessageComponent, { classNamePrefix: classNamePrefix, field: field, fieldKey: fieldKey, components: components, unstyled: unstyled })] })) }));
 };
 export default React.memo(WrapperField);

dist/components/fo...-components/wrapperManagedFileInfo.d.ts

 import React from 'react';
-import { TWrapperManagedFileInfoWebformProps } from "../../../../../lib/types/components/WrapperManagedFileInfo";
-declare const _default: React.MemoExoticComponent<({ field, components, }: TWrapperManagedFileInfoWebformProps) => import("react/jsx-runtime").JSX.Element>;
+import { WrapperManagedFileInfoProps } from '../../../../../lib/types';
+declare const _default: React.MemoExoticComponent<({ field, components, fieldKey, classNamePrefix, unstyled, }: WrapperManagedFileInfoProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...ub-components/wrapperManagedFileInfo.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import ManagedFileInfo from "../managedFileInfo/managedFileInfo";
-const WrapperManagedFileInfo = ({ field, components, }) => {
+import ManagedFileInfo from '../managedFileInfo/managedFileInfo';
+const WrapperManagedFileInfo = ({ field, components, fieldKey, classNamePrefix, unstyled, }) => {
     const CustomManagedFileInfo = components?.managedFileInfo ?? ManagedFileInfo;
-    return _jsx(CustomManagedFileInfo, { field: field });
+    return (_jsx(CustomManagedFileInfo, { components: components, field: field, classNamePrefix: classNamePrefix, fieldKey: fieldKey, unstyled: unstyled }));
 };
 export default React.memo(WrapperManagedFileInfo);

dist/components/fo...wrapper-sub-components/wrapperMore.d.ts

 import React from 'react';
-import { TWrapperMoreWebformProps } from '../../../../../lib/types/components/wrapperMore';
-declare const _default: React.MemoExoticComponent<({ components, classNames, fieldMore, fieldMoreTitle, }: TWrapperMoreWebformProps) => import("react/jsx-runtime").JSX.Element>;
+import { WrapperMoreProps } from '../../../../../lib/types/components/wrapperMore';
+declare const _default: React.MemoExoticComponent<({ components, classNamePrefix, field, fieldKey, unstyled, }: WrapperMoreProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...s/wrapper-sub-components/wrapperMore.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'classnames';
-import styles from '../wrapper.module.scss';
 import More from '../more/more';
-const WrapperMore = ({ components, classNames, fieldMore, fieldMoreTitle, }) => {
+const WrapperMore = ({ components, classNamePrefix, field, fieldKey, unstyled, }) => {
     const CustomMore = components?.more ?? More;
-    return (_jsx(CustomMore, { innerPropsContainer: {
-            className: classNames.general.fieldMore,
-        }, innerPropsWysiwyg: {
-            className: cn(styles.wysiwyg, classNames.general.fieldWysiwyg),
-            processed: fieldMore,
-            source: 'more',
-        }, moreTitle: fieldMoreTitle, components: components }));
+    return (_jsx(CustomMore, { field: field, fieldKey: fieldKey, classNamePrefix: classNamePrefix, components: components, unstyled: unstyled }));
 };
 export default React.memo(WrapperMore);

dist/components/fo...alidate-functions/validateCheckbox.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateCheckbox: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateCheckbox: (props: FieldValidateProps) => void;

dist/components/fo...-validate-functions/validateCheckbox.js

 import { boolean } from 'yup';
 import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateCheckbox = (props) => {
-    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, customValidators, } = props;
+    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, rhfCustomValidators, } = props;
     const type = field?.['#type'];
-    const baseSchema = resolveCustomValidator(customValidators, key, type, props) ?? boolean();
+    const baseSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ?? boolean();
     if (required) {
@@ -13,6 +13,3 @@ yupObject[key] = baseSchema.test('is-checked', requiredMessage, (value) => value === true);
     }
-    defaultValues[key] =
-        typeof field?.['#default_value'] !== 'undefined'
-            ? Boolean(field['#default_value'])
-            : false;
+    defaultValues[key] = defaultFieldValues.checkbox;
 };

dist/components/fo...idate-functions/validateCheckboxes.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateCheckboxes: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateCheckboxes: (props: FieldValidateProps) => void;

dist/components/fo...alidate-functions/validateCheckboxes.js

 import { array, string } from 'yup';
 import { resolveCustomValidator } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateCheckboxes = (props) => {
-    const { yupObject, defaultValues, key, field, required, requiredMessage, customValidators, } = props;
+    const { yupObject, defaultValues, key, field, required, requiredMessage, rhfCustomValidators, defaultFieldValues, } = props;
     const type = field?.['#type'];
@@ -13,4 +13,4 @@ const options = field['#options'];
         schema = schema.min(1, requiredMessage);
-    defaultValues[key] = [];
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? schema;
+    defaultValues[key] = defaultFieldValues.checkboxes;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ?? schema;
     yupObject[key] = required
@@ -17,0 +17,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...ds-validate-functions/validateDate.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from "../../../../lib/types/components/validate";
-export declare const validateDate: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateDate: (props: FieldValidateProps) => void;

dist/components/fo...elds-validate-functions/validateDate.js

 import { date } from 'yup';
-import { resolveCustomValidator, } from "../../../../lib/functions/webform_validation_functions/webform_validation_functions";
+import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateDate = (props) => {
-    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, errorMessage, customValidators, field, } = props;
+    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, errorMessage, rhfCustomValidators, field, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.date;
+        return;
+    }
     const type = field?.['#type'];
@@ -14,3 +18,4 @@ const defaultSchema = date()
         .typeError(errorMessage);
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -17,0 +22,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...s-validate-functions/validateEmail.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateEmail: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateEmail: (props: FieldValidateProps) => void;

dist/components/fo...lds-validate-functions/validateEmail.js

 import { string } from 'yup';
 import { applyMinMaxLength, resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+import { applyPatternIfApplicable } from '../../../../lib/functions/utils_functions';
 export const validateEmail = (props) => {
-    const { yupObject, defaultValues, key, required, defaultFieldValues, errorMessage, requiredMessage, customValidators, minLengthMessage, maxLengthMessage, field, } = props;
+    const { yupObject, defaultValues, key, required, defaultFieldValues, errorMessage, requiredMessage, rhfCustomValidators, minLengthMessage, maxLengthMessage, field, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.email;
+        return;
+    }
     const type = field?.['#type'];
-    const emailWithTLDRegex = /^[^\s@]+@[^\s@]{2,}\.[^\s@]{2,}$/;
-    let defaultSchema = string()
-        .test('valid-email-format', 'invalid email', (v) => !v || emailWithTLDRegex.test(v))
-        .email(errorMessage);
+    let defaultSchema = string();
+    if (!field?.['#pattern']) {
+        const emailWithTLDRegex = /^[^\s@]+@[^\s@]{2,}\.[^\s@]{2,}$/;
+        defaultSchema = defaultSchema
+            .test('valid-email-format', errorMessage, (v) => !v || emailWithTLDRegex.test(v))
+            .email(errorMessage);
+    }
     defaultSchema = applyMinMaxLength(defaultSchema, field, minLengthMessage, maxLengthMessage);
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    defaultSchema = applyPatternIfApplicable({
+        schema: defaultSchema,
+        field,
+        fallbackMessage: errorMessage,
+    });
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -13,0 +27,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...-validate-functions/validateHidden.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateHidden: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateHidden: (props: FieldValidateProps) => void;

dist/components/fo...ds-validate-functions/validateHidden.js

 import { mixed } from 'yup';
 import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateHidden = (props) => {
-    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, customValidators, field, } = props;
+    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, rhfCustomValidators, field, } = props;
     const type = field?.['#type'];
     const defaultSchema = mixed();
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -9,0 +10,0 @@ ? customSchema.required(requiredMessage ?? 'This field is required')

dist/components/fo...-validate-functions/validateLayout.d.ts

@@ -1,4 +0,4 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateLayout: (props: TFieldValidate & {
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateLayout: (props: FieldValidateProps & {
     watchedValues?: Record<string, any>;
 }) => void;

dist/components/fo...ds-validate-functions/validateLayout.js

@@ -6,3 +6,3 @@ import { formatMessage } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateLayout = (props) => {
-    const { yupObject, defaultValues, field, defaultFieldValues, defaultFieldStateMessages, customValidators, watchedValues = {}, minLengthMessage, maxLengthMessage, } = props;
+    const { yupObject, defaultValues, field, defaultFieldValues, rhfDefaultFieldStateMessages, rhfCustomValidators, watchedValues = {}, minLengthMessage, maxLengthMessage, } = props;
     const childFields = Object.fromEntries(Object.entries(field).filter(([k]) => !k.startsWith('#')));
@@ -14,4 +14,4 @@ const childVisibleKeys = Object.keys(childFields).filter((childKey) => shouldFieldBeVisible(childKey, childFields, watchedValues));
         const required = childField?.['#required'];
-        const requiredMessage = formatMessage(getRequiredMessage(defaultFieldStateMessages, type) ?? '', childField?.['#title']);
-        const errorMessage = formatMessage(getErrorMessage(defaultFieldStateMessages, type) ?? '', childField?.['#title']);
+        const requiredMessage = formatMessage(getRequiredMessage(rhfDefaultFieldStateMessages, type) ?? '', childField?.['#title']);
+        const errorMessage = formatMessage(getErrorMessage(rhfDefaultFieldStateMessages, type) ?? '', childField?.['#title']);
         FormMappingFields[type ?? 'default']?.validator?.({
@@ -24,5 +24,5 @@ yupObject,
             defaultFieldValues,
-            defaultFieldStateMessages,
+            rhfDefaultFieldStateMessages,
             requiredMessage,
-            customValidators,
+            rhfCustomValidators,
             errorMessage,
@@ -29,0 +29,0 @@ watchedValues,

dist/components/fo...date-functions/validateManagedFile.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from "../../../../lib/types/components/validate";
-export declare const validateManagedFile: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateManagedFile: (props: FieldValidateProps) => void;

dist/components/fo...lidate-functions/validateManagedFile.js

 import { mixed } from 'yup';
-import { resolveCustomValidator, } from "../../../../lib/functions/webform_validation_functions/webform_validation_functions";
+import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateManagedFile = (props) => {
-    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, customValidators, } = props;
+    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, rhfCustomValidators, } = props;
     const type = field?.['#type'];
@@ -20,3 +20,4 @@ const defaultSchema = mixed()
     });
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -23,0 +24,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...-validate-functions/validateNumber.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from "../../../../lib/types/components/validate";
-export declare const validateNumber: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateNumber: (props: FieldValidateProps) => void;

dist/components/fo...ds-validate-functions/validateNumber.js

 import { string } from 'yup';
-import { resolveCustomValidator, } from "../../../../lib/functions/webform_validation_functions/webform_validation_functions";
+import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+import { applyPatternIfApplicable } from '../../../../lib/functions/utils_functions';
 export const validateNumber = (props) => {
-    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, customValidators, } = props;
+    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, rhfCustomValidators, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.number;
+        return;
+    }
     const type = field?.['#type'];
-    const defaultSchema = string();
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    let defaultSchema = string();
+    defaultSchema = applyPatternIfApplicable({
+        schema: defaultSchema,
+        field,
+    });
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -9,0 +19,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...-validate-functions/validateRadios.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateRadio: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateRadio: (props: FieldValidateProps) => void;

dist/components/fo...ds-validate-functions/validateRadios.js

 import { string } from 'yup';
 import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateRadio = (props) => {
-    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, customValidators, } = props;
+    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, rhfCustomValidators, } = props;
     const type = field?.['#type'];
@@ -9,3 +9,4 @@ const options = field['#options'];
     const defaultSchema = string().oneOf(required ? optionKeys : ['', ...optionKeys], requiredMessage);
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -12,0 +13,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...-validate-functions/validateSelect.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateSelect: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateSelect: (props: FieldValidateProps) => void;

dist/components/fo...ds-validate-functions/validateSelect.js

 import { string } from 'yup';
 import { resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
 export const validateSelect = (props) => {
-    const { yupObject, defaultValues, key, field, required, requiredMessage, customValidators, defaultFieldValues, } = props;
+    const { yupObject, defaultValues, key, field, required, requiredMessage, rhfCustomValidators, defaultFieldValues, } = props;
     const type = field?.['#type'];
@@ -12,3 +12,4 @@ const options = field['#options'];
     defaultValues[key] = field?.['#default_value'] ?? defaultFieldValues.select;
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -15,0 +16,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...lds-validate-functions/validateTel.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateTel: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateTel: (props: FieldValidateProps) => void;

dist/components/fo...ields-validate-functions/validateTel.js

 import { string } from 'yup';
 import { applyMinMaxLength, resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+import { applyPatternIfApplicable } from '../../../../lib/functions/utils_functions';
 export const validateTel = (props) => {
-    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, errorMessage, customValidators, minLengthMessage, maxLengthMessage, } = props;
+    const { yupObject, defaultValues, key, field, required, defaultFieldValues, requiredMessage, errorMessage, rhfCustomValidators, minLengthMessage, maxLengthMessage, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.tel;
+        return;
+    }
     const type = field?.['#type'];
-    let defaultSchema = string().matches(/^[0-9]+$/, {
-        message: errorMessage,
-        excludeEmptyString: true,
+    let defaultSchema = string();
+    if (!field?.['#pattern']) {
+        defaultSchema = defaultSchema.matches(/^[0-9]+$/, {
+            message: errorMessage,
+            excludeEmptyString: true,
+        });
+    }
+    defaultSchema = applyMinMaxLength(defaultSchema, field, minLengthMessage, maxLengthMessage);
+    defaultSchema = applyPatternIfApplicable({
+        schema: defaultSchema,
+        field,
+        fallbackMessage: errorMessage,
     });
-    defaultSchema = applyMinMaxLength(defaultSchema, field, minLengthMessage, maxLengthMessage);
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -13,0 +27,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...alidate-functions/validateTextArea.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateTextArea: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateTextArea: (props: FieldValidateProps) => void;

dist/components/fo...-validate-functions/validateTextArea.js

 import { string } from 'yup';
 import { resolveCustomValidator, formatMessage, getRequiredMessage, applyMinMaxLength, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+import { applyPatternIfApplicable } from '../../../../lib/functions/utils_functions';
 export const validateTextArea = (props) => {
-    const { yupObject, defaultValues, key, required, defaultFieldValues, defaultFieldStateMessages, field, customValidators, minLengthMessage, maxLengthMessage, } = props;
+    const { yupObject, defaultValues, key, required, defaultFieldValues, rhfDefaultFieldStateMessages, field, rhfCustomValidators, minLengthMessage, maxLengthMessage, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.textarea;
+        return;
+    }
     const type = field?.['#type'];
-    const requiredMessage = formatMessage(getRequiredMessage(defaultFieldStateMessages, 'textarea') ?? '', field?.['#title']);
+    const requiredMessage = formatMessage(getRequiredMessage(rhfDefaultFieldStateMessages, 'textarea') ?? '', field?.['#title']);
     let defaultSchema = string();
     defaultSchema = applyMinMaxLength(defaultSchema, field, minLengthMessage, maxLengthMessage);
-    const customSchema = resolveCustomValidator(customValidators, key, type, props) ?? defaultSchema;
+    defaultSchema = applyPatternIfApplicable({
+        schema: defaultSchema,
+        field,
+    });
+    const customSchema = resolveCustomValidator(rhfCustomValidators, key, type, props) ??
+        defaultSchema;
     yupObject[key] = required
@@ -11,0 +21,0 @@ ? customSchema.required(requiredMessage)

dist/components/fo...lidate-functions/validateTextfield.d.ts

@@ -1,2 +0,2 @@
-import { TFieldValidate } from '../../../../lib/types/components/validate';
-export declare const validateTextField: (props: TFieldValidate) => void;
+import { FieldValidateProps } from '../../../../lib/types/components/validate';
+export declare const validateTextField: (props: FieldValidateProps) => void;

dist/components/fo...validate-functions/validateTextfield.js

 import { string } from 'yup';
 import { applyMinMaxLength, resolveCustomValidator, } from '../../../../lib/functions/webform_validation_functions/webform_validation_functions';
+import { applyPatternIfApplicable } from '../../../../lib/functions/utils_functions';
 export const validateTextField = (props) => {
-    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, field, customValidators, minLengthMessage, maxLengthMessage, } = props;
+    const { yupObject, defaultValues, key, required, defaultFieldValues, requiredMessage, field, rhfCustomValidators, minLengthMessage, maxLengthMessage, } = props;
+    if (field?.['#readonly']) {
+        defaultValues[key] = defaultFieldValues.textfield;
+        return;
+    }
     const type = field?.['#type'];
     let baseSchema = string();
     baseSchema = applyMinMaxLength(baseSchema, field, minLengthMessage, maxLengthMessage);
+    baseSchema = applyPatternIfApplicable({
+        schema: baseSchema,
+        field,
+    });
     if (required) {
@@ -12,4 +21,4 @@ baseSchema = baseSchema.required(requiredMessage);
     yupObject[key] =
-        resolveCustomValidator(customValidators, key, type, props) ?? baseSchema;
+        resolveCustomValidator(rhfCustomValidators, key, type, props) ?? baseSchema;
     defaultValues[key] = defaultFieldValues.textfield;
 };

dist/components/form/fields/hidden.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { useController, useFormContext } from 'react-hook-form';
+import Hidden from './fields-elements/hidden';
 export const renderHidden = (props) => {
     const { fieldKey, components } = props;
-    const { control } = useFormContext();
-    const { field: fieldController } = useController({
-        name: fieldKey,
-        control,
-    });
     const CustomHidden = components?.fieldById?.[fieldKey] ?? components?.hidden;
@@ -14,3 +9,3 @@ if (CustomHidden) {
     }
-    return (_jsx("input", { type: "hidden", id: fieldKey, name: fieldController.name, value: fieldController.value ?? '', onChange: (e) => fieldController.onChange?.(e) }));
+    return _jsx(Hidden, { ...props });
 };

dist/components/form/fields/input.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'classnames';
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import Wrapper from './fields-sub-components/wrapper';
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Input from './fields-elements/input';
 const renderInput = (props) => {
-    const { fieldKey, field, components, classNames, onBlur } = props;
-    const { control } = useFormContext();
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
     const CustomInput = components?.fieldById?.[fieldKey] ?? components?.input;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    const getFieldType = (() => {
-        switch (field?.['#type']) {
-            case 'textfield':
-                return 'text';
-            case 'date':
-                return 'date';
-            case 'number':
-                return 'number';
-            case 'email':
-                return 'email';
-            case 'tel':
-                return 'tel';
-            default:
-                return 'text';
-        }
-    })();
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldInput", stateError: fieldState?.error, components: components, fieldKey: fieldKey, children: CustomInput ? (_jsx(CustomInput, { ...props })) : (_jsx("input", { id: fieldKey, className: cn(classNames.fields.textInputs.base, classNames.fields.textInputs.types[field?.['#type']], styles.input, styles[field?.['#type']], { [styles.error]: fieldState?.error }), name: fieldController.name, minLength: field?.['#minlength'], maxLength: field?.['#maxlength'], placeholder: field?.['#placeholder'], type: getFieldType, onChange: (e) => fieldController.onChange(e), value: fieldController.value ?? '', onBlur: onBlur, required: field?.['#required'] })) }, fieldKey));
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomInput ? _jsx(CustomInput, { ...props }) : _jsx(Input, { ...props }) }, fieldKey));
 };
 export default renderInput;

dist/components/form/fields/layout.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import FormFieldRendered from '../formDefault/formFieldRendered';
-import LayoutWrapper from './fields-sub-components/layoutWrapper/layoutWrapper';
+import Layout from './fields-sub-components/layout/layout';
 import { shouldFieldBeVisible } from '../../../lib/functions/webform_fields_functions/webform_fields_conditional_functions';
 const renderLayout = (props) => {
-    const { fieldKey, field, classNames, components, watchedValues } = props;
-    const childKeys = Object.keys(field).filter((k) => !k.startsWith('#'));
-    const { fieldKey: _omitKey, ...restProps } = props;
-    return (_createElement(LayoutWrapper, { ...restProps, fieldKey: fieldKey, key: fieldKey }, childKeys.map((childKey, i) => {
+    const { fieldKey, field, components, watchedValues, classNamePrefix, unstyled, validationEngine = 'html', disableActionButtonWhenInvalid = false, } = props;
+    const LayoutComponent = components?.layout ?? Layout;
+    const childKeys = Object.keys(field).filter((key) => !key.startsWith('#'));
+    const values = watchedValues ?? {};
+    return (_createElement(LayoutComponent, { ...props, fieldKey: fieldKey, key: fieldKey }, childKeys.map((childKey, index) => {
         const child = field[childKey];
-        const isVisible = shouldFieldBeVisible(childKey, field, watchedValues ?? {});
-        if (!isVisible)
+        if (!shouldFieldBeVisible(childKey, field, values))
             return null;
-        return (_jsx(FormFieldRendered, { fieldKey: childKey, index: i, field: child, components: components, classNames: classNames, isMultiStep: false, watchedValues: watchedValues }, childKey));
+        return (_jsx(FormFieldRendered, { fieldKey: childKey, index: index, field: child, classNamePrefix: classNamePrefix, components: components, isMultiStep: false, watchedValues: watchedValues, unstyled: unstyled, validationEngine: validationEngine, disableActionButtonWhenInvalid: disableActionButtonWhenInvalid }, childKey));
     })));
 };
 export default renderLayout;

dist/components/form/fields/managedFile.js

@@ -1,35 +0,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import cn from 'classnames';
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import Wrapper from './fields-sub-components/wrapper';
-import { useRef } from 'react';
-import { handleFileChange } from '../../../lib/functions/webform_fields_functions/webform_fields_functions';
-import ManagedFilePreview from './fields-sub-components/managedFilePreview/managedFilePreview';
+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+import ManagedFile from './fields-elements/managedFile';
 const renderManagedFile = (props) => {
-    const { fieldKey, field, components, classNames, onBlur } = props;
-    const { control } = useFormContext();
-    const inputRef = useRef(null);
-    // Custom file input (via fieldById ou custom global)
-    const CustomInputFile = components?.fieldById?.[fieldKey] ?? components?.managedFile;
-    const CustomManagedFilePreview = components?.managedFilePreview ?? ManagedFilePreview;
-    // RHF controller (unique)
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    // Gestion des extensions
-    const fileExtensions = field?.['#file_extensions']
-        ?.trim()
-        .split(' ')
-        .map((ext) => `.${ext}`)
-        .join(', ');
-    const value = fieldController.value ?? {};
-    const handleRemove = () => {
-        fieldController.onChange({});
-    };
-    const isFileWithBase64 = (obj) => obj &&
-        typeof obj === 'object' &&
-        'base64' in obj &&
-        typeof obj.base64 === 'string';
-    return (_jsx(Wrapper, { field: field, classNames: classNames, components: components, classNameFieldName: "fieldInput", fieldKey: fieldKey, children: CustomInputFile ? (_jsx(CustomInputFile, { ...props })) : (_jsx(_Fragment, { children: isFileWithBase64(value) ? (_jsx(CustomManagedFilePreview, { value: value, handleRemove: handleRemove })) : (_jsx("input", { id: fieldKey, ref: inputRef, className: cn(classNames.fields.managedFile.input, styles.field, styles.input, styles[field?.['#type']], { [styles.error]: fieldState?.error }), name: fieldController.name, minLength: field?.['#minlength'], maxLength: field?.['#maxlength'], placeholder: field?.['#placeholder'], type: "file", accept: fileExtensions, onChange: (e) => handleFileChange(e, fieldController, inputRef), onBlur: onBlur })) })) }, fieldKey));
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
+    const CustomManagedFile = components?.fieldById?.[fieldKey] ?? components?.managedFile ?? ManagedFile;
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: _jsx(CustomManagedFile, { ...props }) }, fieldKey));
 };
 export default renderManagedFile;

dist/components/form/fields/markup.d.ts

 import { TFieldWebformObj } from '../../../lib/types/components/field';
+import { MarkupProps } from '../../../lib/types/components/markup';
+declare const Markup: (props: MarkupProps) => import("react/jsx-runtime").JSX.Element;
 export declare const renderMarkup: (props: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;
+export default Markup;

dist/components/form/fields/markup.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import Wysiwyg from './fields-special-components/wysiwyg/wysiwyg';
+import { getClassNames, getDataAttributes, } from '../../../lib/functions/utils_functions';
+const Markup = (props) => {
+    const { field, fieldKey, components, className, classNamePrefix, innerProps, unstyled, } = props;
+    const markup = field?.['#markup'];
+    if (!markup?.length)
+        return null;
+    const WysiwygComponent = components?.wysiwyg ?? Wysiwyg;
+    const markupClassNames = getClassNames({
+        name: 'markup',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        classNameComponent: className,
+        baseCn: cn(...(field?.['#attributes']?.class ?? [])),
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'markup',
+    });
+    return (_jsx("div", { className: markupClassNames, ...innerProps, ...dataAttributes, children: _jsx(WysiwygComponent, { classNamePrefix: classNamePrefix, processed: markup, fieldKey: fieldKey, field: field, components: components, unstyled: unstyled, source: "markup" }) }));
+};
 export const renderMarkup = (props) => {
-    const { field, fieldKey, classNames, components } = props;
-    if (!field?.['#markup']?.length) {
+    const { fieldKey, field, components } = props;
+    if (!field?.['#markup']?.length)
         return null;
-    }
-    const CustomMarkup = components?.fieldById?.[fieldKey] ?? components?.markup;
-    if (CustomMarkup) {
-        return _jsx(CustomMarkup, { ...props });
-    }
-    const CustomWysiwyg = components?.wysiwyg;
-    if (CustomWysiwyg) {
-        return (_jsx(CustomWysiwyg, { processed: field['#markup'], source: "markup", className: cn(...(field?.['#attributes']?.class ?? []), classNames.fields.markup.base) }));
-    }
-    return (_jsx(Wysiwyg, { processed: field['#markup'], source: "markup", className: cn(...(field?.['#attributes']?.class ?? []), classNames.fields.markup.base) }));
+    const MarkupComponent = components?.fieldById?.[fieldKey] ?? components?.markup ?? Markup;
+    return _jsx(MarkupComponent, { ...props });
 };
+export default Markup;

dist/components/form/fields/radios.js

@@ -1,21 +0,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import { handleChangeOptions } from '../../../lib/functions/webform_fields_functions/webform_fields_functions';
-import Wrapper from './fields-sub-components/wrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Radios from './fields-elements/radios';
 export const renderRadio = (props) => {
-    const { onBlur, fieldKey, field, classNames, components } = props;
-    const { control } = useFormContext();
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
     if (!field?.['#options'])
         return null;
-    const optionsObj = Object.entries(field['#options']);
     const CustomRadio = components?.fieldById?.[fieldKey] ?? components?.radios;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldRadio", components: components, stateError: fieldState?.error, fieldKey: fieldKey, wrapperElement: "fieldset", innerPropsLabelComponent: { wrapperElement: 'legend' }, children: CustomRadio ? (_jsx(CustomRadio, { ...props })) : (_jsx("div", { className: cn(classNames.fields.radios?.groupWrapper, styles.radiosGroupWrapper), children: optionsObj.map(([optionKey, optionValue]) => {
-                const checked = fieldController.value === optionKey;
-                const inputId = `${fieldKey}-${optionKey.trim()}`;
-                return (_jsxs("div", { className: cn(classNames.fields.radios?.itemWrapper, styles.radiosItemWrapper), children: [_jsx("input", { className: classNames.fields.radios?.input, name: fieldController.name, id: inputId, type: "radio", checked: checked, value: optionKey, onChange: (e) => handleChangeOptions(e.target.value, fieldController), onBlur: onBlur }), _jsx("label", { htmlFor: inputId, className: cn(classNames.fields.radios?.label, styles.radioLabel), children: optionValue })] }, optionKey));
-            }) })) }, fieldKey));
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, wrapperElement: "fieldset", classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomRadio ? _jsx(CustomRadio, { ...props }) : _jsx(Radios, { ...props }) }, fieldKey));
 };

dist/components/form/fields/select.js

@@ -1,17 +0,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import { handleChangeOptions } from '../../../lib/functions/webform_fields_functions/webform_fields_functions';
-import cn from 'classnames';
-import Wrapper from './fields-sub-components/wrapper';
+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Select from './fields-elements/select';
 export const renderSelect = (props) => {
-    const { fieldKey, field, components, classNames, onBlur } = props;
-    const { control } = useFormContext();
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
     if (!field?.['#options'])
         return null;
-    const optionsObj = Object.entries(field['#options']);
     const CustomSelect = components?.fieldById?.[fieldKey] ?? components?.select;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldSelect", components: components, stateError: fieldState?.error, fieldKey: fieldKey, children: CustomSelect ? (_jsx(CustomSelect, { ...props })) : (_jsxs("select", { id: fieldKey, name: fieldController.name, required: field?.['#required'], className: cn(classNames.fields.select?.select, styles.field, styles[field?.['#type']], { [styles.error]: fieldState?.error }), value: fieldController.value ?? '', onChange: (e) => handleChangeOptions(e.target.value, fieldController), children: [_jsx("option", { className: classNames.fields.select.option, value: "", children: field?.['#placeholder'] ?? '-- Select an option --' }), optionsObj.map(([optionKey, optionValue]) => (_jsx("option", { className: classNames.fields.select.option, value: optionKey, children: optionValue }, optionKey)))] })) }, fieldKey));
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomSelect ? _jsx(CustomSelect, { ...props }) : _jsx(Select, { ...props }) }, fieldKey));
 };

dist/components/form/fields/textarea.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'classnames';
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import Wrapper from './fields-sub-components/wrapper';
+import FieldContainer from './fields-sub-components/fieldContainer';
+import Textarea from './fields-elements/textarea';
 export const renderTextArea = (props) => {
-    const { onBlur, fieldKey, field, classNames, components } = props;
-    const { control } = useFormContext();
+    const { fieldKey, field, components, classNamePrefix, unstyled } = props;
+    const FieldContainerComponent = components?.fieldContainer ?? FieldContainer;
     const CustomTextArea = components?.fieldById?.[fieldKey] ?? components?.textarea;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldTextarea", components: components, stateError: fieldState?.error, fieldKey: fieldKey, children: CustomTextArea ? (
-        // ✅ On passe tout le controller
-        _jsx(CustomTextArea, { ...props })) : (_jsx("textarea", { id: fieldKey, name: fieldController.name, minLength: field?.['#minlength'], maxLength: field?.['#maxlength'], rows: field?.['#rows'] ?? 10, placeholder: field?.['#placeholder'], required: field?.['#required'], value: fieldController.value ?? '', onChange: (e) => fieldController.onChange(e.target.value), onBlur: onBlur, className: cn(classNames.fields.textInputs.types.textarea, classNames.fields.textInputs.base, styles.field, styles.textarea, { [styles.error]: fieldState?.error }) })) }, fieldKey));
+    return (_jsx(FieldContainerComponent, { field: field, components: components, fieldKey: fieldKey, classNamePrefix: classNamePrefix, unstyled: unstyled, children: CustomTextArea ? _jsx(CustomTextArea, { ...props }) : _jsx(Textarea, { ...props }) }, fieldKey));
 };

dist/components/form/formDefault/formDefault.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './formDefault.module.scss';
 import React, { useEffect, useMemo, useCallback } from 'react';
@@ -9,8 +8,6 @@ import { useForm, useWatch, FormProvider } from 'react-hook-form';
 import { getDummyDefaultFormDefault } from '../../../lib/functions/webform_validation_functions/webform_validation_functions';
-import ConfirmationView from '../../special-display/confirmationView';
+import Form from '../form';
 const FormDefault = (props) => {
-    const { elementsSource, multiStepExtra, defaultFieldValues, yup: yupObj, defaultFieldStateMessages, components, classNames, includeInactiveFieldsInSubmit, onSubmit, customValidators, isSubmitted, showConfirmation, } = props;
-    const { yupUseFormProps } = yupObj || {};
+    const { elementsSource, multiStepExtra, defaultFieldValues, rhfDefaultFieldStateMessages, components, includeInactiveFieldsInSubmit, onSubmit, rhfCustomValidators, classNamePrefix, unstyled = false, rhfValidationMode = 'all', validationEngine = 'html', disableActionButtonWhenInvalid = false, } = props;
     const isMultiStep = Boolean(multiStepExtra);
-    const shouldShowConfirmation = Boolean(isSubmitted && showConfirmation);
     const dependentFields = useMemo(() => getDependentFields(elementsSource), [elementsSource]);
@@ -20,7 +17,6 @@ const dependentFieldNames = useMemo(() => dependentFields.map((dep) => dep.name), [dependentFields]);
     const methods = useForm({
-        ...yupUseFormProps,
-        mode: 'all',
+        mode: rhfValidationMode,
         criteriaMode: 'all',
         defaultValues: dummyDefaultValues,
-        shouldUnregister: false,
+        shouldUnregister: true,
     });
@@ -43,4 +39,4 @@ const { control, reset, getValues, handleSubmit } = methods;
             defaultFieldValues,
-            defaultFieldStateMessages,
-            customValidators,
+            rhfDefaultFieldStateMessages,
+            rhfCustomValidators,
             watchedValues,
@@ -52,4 +48,4 @@ });
         defaultFieldValues,
-        defaultFieldStateMessages,
-        customValidators,
+        rhfDefaultFieldStateMessages,
+        rhfCustomValidators,
         watchedValues,
@@ -61,3 +57,5 @@ ]);
     }, [defaultValues, validationSchema, reset, getValues]);
-    control._options.resolver = resolver;
+    if (validationEngine !== 'html') {
+        control._options.resolver = resolver;
+    }
     const handleFormSubmit = useCallback(async (data) => {
@@ -78,8 +76,7 @@ if (!onSubmit)
         const isLayout = isLayoutType(type);
-        return (_jsx(FormFieldRendered, { fieldKey: key, index: index, field: field, components: components, classNames: classNames, isMultiStep: isMultiStep, ...(isLayout ? { watchedValues } : {}) }, key));
+        return (_jsx(FormFieldRendered, { fieldKey: key, index: index, field: field, components: components, isMultiStep: isMultiStep, classNamePrefix: classNamePrefix, unstyled: unstyled, validationEngine: validationEngine, disableActionButtonWhenInvalid: disableActionButtonWhenInvalid, ...(isLayout ? { watchedValues } : {}) }, key));
     });
-    const CustomForm = components?.form;
-    const ConfirmationComponent = components?.confirmationView ?? ConfirmationView;
-    return (_jsx(FormProvider, { ...methods, children: shouldShowConfirmation ? (_jsx(ConfirmationComponent, {})) : CustomForm ? (_jsx(CustomForm, { ...props, onSubmit: handleSubmit(handleFormSubmit), children: formContent })) : (_jsx("form", { className: styles.formDefault, onSubmit: handleSubmit(handleFormSubmit), children: formContent })) }));
+    const FormComponent = components?.form ?? Form;
+    return (_jsx(FormProvider, { ...methods, children: _jsx(FormComponent, { validationEngine: validationEngine, onSubmit: handleSubmit(handleFormSubmit), disableActionButtonWhenInvalid: disableActionButtonWhenInvalid, children: formContent }) }));
 };
 export default React.memo(FormDefault);

dist/components/form/formDefault/formFieldRendered.d.ts

 import React from 'react';
 import { IFieldRendererWebformProps } from '../../../lib/types/components/formFieldRendered';
-declare const _default: React.MemoExoticComponent<({ index, fieldKey, field, components, classNames, isMultiStep, watchedValues, }: IFieldRendererWebformProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>;
+declare const _default: React.MemoExoticComponent<({ index, fieldKey, field, components, isMultiStep, watchedValues, classNamePrefix, unstyled, disableActionButtonWhenInvalid, validationEngine, }: IFieldRendererWebformProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>;
 export default _default;

dist/components/form/formDefault/formFieldRendered.js

 import React from 'react';
 import FormMappingFields from '../formMappingFields/formMappingFields';
-const FormFieldRendered = ({ index, fieldKey, field, components, classNames, isMultiStep, watchedValues, }) => {
-    const type = field['#type'] ?? 'default';
+import { getAriaDescribedBy } from '../../../lib/functions/utils_functions';
+const FormFieldRendered = ({ index, fieldKey, field, components, isMultiStep, watchedValues, classNamePrefix, unstyled, disableActionButtonWhenInvalid, validationEngine, }) => {
+    const rawType = field['#type'];
+    const type = rawType in FormMappingFields ? rawType : 'default';
     const elementRenderer = FormMappingFields[type]?.element;
@@ -15,2 +17,3 @@ if (!elementRenderer)
     ].includes(type);
+    const ariaDescribedBy = getAriaDescribedBy({ fieldKey, field });
     return elementRenderer({
@@ -22,3 +25,7 @@ index,
         components,
-        classNames,
+        ariaDescribedBy,
+        classNamePrefix,
+        unstyled,
+        disableActionButtonWhenInvalid,
+        validationEngine,
         ...(isLayout ? { watchedValues } : {}),
@@ -25,0 +32,0 @@ });

dist/components/form/formMappingFields/formMappingFields.js

 import { renderAction } from '../fields/action';
 import { renderRadio } from '../fields/radios';
-import { renderCheckboxes } from '../fields/chexkboxes';
+import { renderCheckboxes } from '../fields/checkboxes';
 import { renderSelect } from '../fields/select';
@@ -25,2 +25,4 @@ import { renderMarkup } from '../fields/markup';
 import { validateLayout } from '../fields/fields-validate-functions/validateLayout';
+import renderUnsupportedField from '../fields/unsupportedField';
+import { validateUnsupportedField } from '../fields/fields-validate-functions/validateUnsupportedField';
 const FormMappingFields = {
@@ -39,2 +41,6 @@ textfield: {
     },
+    radios_entity: {
+        element: renderRadio,
+        validator: validateRadio,
+    },
     webform_actions: {
@@ -52,2 +58,10 @@ element: renderAction,
     },
+    entity_checkboxes: {
+        element: renderCheckboxes,
+        validator: validateCheckboxes,
+    },
+    term_checkboxes: {
+        element: renderCheckboxes,
+        validator: validateCheckboxes,
+    },
     number: {
@@ -65,2 +79,10 @@ element: renderInput,
     },
+    entity_select: {
+        element: renderSelect,
+        validator: validateSelect,
+    },
+    term_select: {
+        element: renderSelect,
+        validator: validateSelect,
+    },
     email: {
@@ -107,6 +129,6 @@ element: renderInput,
     default: {
-        element: null,
-        validator: null,
+        element: renderUnsupportedField,
+        validator: validateUnsupportedField,
     },
 };
 export default FormMappingFields;

dist/components/form/formMultiStep/formMultiStep.js

 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './formMultiStep.module.scss';
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
@@ -8,3 +7,3 @@ import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { generateFormSchemaAndDefaults, getDependentFields, shouldFieldBeVisible, } from '../../../lib/functions/webform_fields_functions/webform_fields_conditional_functions';
-import MultiStepActions from './multiStepActions/multiStepActions';
+import { RenderMultiStepActions } from './multiStepActions/multiStepActions';
 import MultiStepStepper from './multiStepStepper/multiStepStepper';
@@ -14,16 +13,15 @@ import { getAllFieldNames, getDummyDefaultMultiStep, getAllDefaultValuesFromAllSteps, } from '../../../lib/functions/webform_multistep_functions/webform_multistep_functions';
 import { MultiStepProvider } from './multiStepContext';
-import ConfirmationView from '../../special-display/confirmationView';
+import Form from '../form';
 const FormMultiStep = (props) => {
-    const { elementsSource, defaultFieldValues, yup: yupObj, defaultFieldStateMessages, components, classNames, onSubmit, includeInactiveFieldsInSubmit, customValidators, isSubmitted, showConfirmation, } = props;
+    const { elementsSource, defaultFieldValues, rhfDefaultFieldStateMessages, components, onSubmit, includeInactiveFieldsInSubmit, rhfCustomValidators, classNamePrefix, unstyled = false, rhfValidationMode = 'all', validationEngine = 'html', disableActionButtonWhenInvalid = false, } = props;
     const totalSteps = Object.keys(elementsSource).length;
-    const shouldShowConfirmation = Boolean(isSubmitted && showConfirmation);
+    const isHtmlNative = validationEngine === 'html';
     const stepKeys = useMemo(() => Object.keys(elementsSource), [elementsSource]);
     const allFieldNames = useMemo(() => getAllFieldNames(elementsSource), [elementsSource]);
     const dummyDefaultValues = useMemo(() => getDummyDefaultMultiStep(elementsSource, defaultFieldValues), [elementsSource]);
-    const { yupUseFormProps } = yupObj || {};
     const methods = useForm({
-        ...yupUseFormProps,
-        mode: 'all',
+        mode: rhfValidationMode,
         criteriaMode: 'all',
         defaultValues: dummyDefaultValues,
+        shouldUnregister: true,
     });
@@ -70,4 +68,4 @@ const { handleSubmit, control, reset, getValues } = methods;
         defaultFieldValues,
-        defaultFieldStateMessages,
-    }), [elementsSource, defaultFieldValues, defaultFieldStateMessages]);
+        rhfDefaultFieldStateMessages,
+    }), [elementsSource, defaultFieldValues, rhfDefaultFieldStateMessages]);
     const { defaultValues, validationSchema } = useMemo(() => {
@@ -78,4 +76,4 @@ return generateFormSchemaAndDefaults({
             defaultFieldValues,
-            defaultFieldStateMessages,
-            customValidators,
+            rhfDefaultFieldStateMessages,
+            rhfCustomValidators,
             watchedValues: watchedStepValuesGlobal,
@@ -87,8 +85,10 @@ });
         defaultFieldValues,
-        defaultFieldStateMessages,
-        customValidators,
+        rhfDefaultFieldStateMessages,
+        rhfCustomValidators,
         watchedStepValuesGlobal,
     ]);
     const resolver = useYupValidationResolver(validationSchema);
-    control._options.resolver = resolver;
+    if (!isHtmlNative) {
+        control._options.resolver = resolver;
+    }
     useEffect(() => {
@@ -135,8 +135,7 @@ reset({ ...defaultValues, ...getValues() }, { keepValues: true });
                 ].includes(type);
-                return (_jsx(FormFieldRendered, { fieldKey: key, index: index, field: field, components: components, classNames: classNames, isMultiStep: true, ...(isLayout ? { watchedValues: watchedStepValuesGlobal } : {}) }, key));
-            }), _jsx(MultiStepActions, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel, components: components, classNames: classNames })] }));
-    const CustomForm = components?.form;
-    const ConfirmationComponent = components?.confirmationView ?? ConfirmationView;
-    return (_jsx(FormProvider, { ...methods, children: _jsx(MultiStepProvider, { elementsSource: elementsSource, stepIndex: stepIndex, setStepIndex: setStepIndex, totalSteps: totalSteps, totalVisibleSteps: visibleStepKeys.length, allWatchedSteps: allWatchedSteps, currentStepKey: currentStepKey, setAllWatchedSteps: setAllWatchedSteps, watchedStepValues: watchedStepValues, children: shouldShowConfirmation ? (_jsx(ConfirmationComponent, {})) : (_jsxs(_Fragment, { children: [_jsx(MultiStepStepper, { components: components, currentStepObj: currentStepObj, elementsSource: elementsSource, classNames: classNames }), CustomForm ? (_jsx(CustomForm, { ...props, onSubmit: handleSubmit(onFormSubmit), children: formContent })) : (_jsx("form", { className: styles.formMultiStep, onSubmit: handleSubmit(onFormSubmit), children: formContent }))] })) }) }));
+                return (_jsx(FormFieldRendered, { fieldKey: key, index: index, field: field, components: components, classNamePrefix: classNamePrefix, isMultiStep: true, unstyled: unstyled, validationEngine: validationEngine, disableActionButtonWhenInvalid: disableActionButtonWhenInvalid, ...(isLayout ? { watchedValues: watchedStepValuesGlobal } : {}) }, key));
+            }), _jsx(RenderMultiStepActions, { previousButtonLabel: previousButtonLabel, nextButtonLabel: nextButtonLabel, components: components, classNamePrefix: classNamePrefix, unstyled: unstyled, disableActionButtonWhenInvalid: disableActionButtonWhenInvalid })] }));
+    const FormComponent = components?.form ?? Form;
+    return (_jsx(FormProvider, { ...methods, children: _jsxs(MultiStepProvider, { elementsSource: elementsSource, stepIndex: stepIndex, setStepIndex: setStepIndex, totalSteps: totalSteps, totalVisibleSteps: visibleStepKeys.length, allWatchedSteps: allWatchedSteps, currentStepKey: currentStepKey, setAllWatchedSteps: setAllWatchedSteps, watchedStepValues: watchedStepValues, children: [_jsx(MultiStepStepper, { components: components, currentStepObj: currentStepObj, classNamePrefix: classNamePrefix, elementsSource: elementsSource, unstyled: unstyled }), _jsx(FormComponent, { validationEngine: validationEngine, onSubmit: handleSubmit(onFormSubmit), disableActionButtonWhenInvalid: disableActionButtonWhenInvalid, children: formContent })] }) }));
 };
 export default React.memo(FormMultiStep);

dist/components/fo.../multiStepActions/multiStepActions.d.ts

 import React from 'react';
-import { IMultiStepActionsProps } from '../../../../lib/types/components/multiStepActions';
-declare const _default: React.MemoExoticComponent<(props: IMultiStepActionsProps) => import("react/jsx-runtime").JSX.Element>;
+import { MultiStepActionsProps } from '../../../../lib/types/components/multiStepActions';
+export declare const MultiStepActions: ({ previousButtonLabel, nextButtonLabel, components, className, classNamePrefix, unstyled, disableActionButtonWhenInvalid, }: MultiStepActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderMultiStepActions: (props: MultiStepActionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<({ previousButtonLabel, nextButtonLabel, components, className, classNamePrefix, unstyled, disableActionButtonWhenInvalid, }: MultiStepActionsProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...ep/multiStepActions/multiStepActions.js

@@ -9,12 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMultiStepContext } from '../multiStepContext';
-const MultiStepActions = (props) => {
-    const { previousButtonLabel, nextButtonLabel, components, classNames } = props;
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
+export const MultiStepActions = ({ previousButtonLabel, nextButtonLabel, components, className, classNamePrefix, unstyled, disableActionButtonWhenInvalid, }) => {
     const { formState, trigger } = useFormContext();
     const { stepIndex, totalVisibleSteps, goNext, goPrev } = useMultiStepContext();
     const { isSubmitting, isValid: isStepValid } = formState;
-    const CustomMultiStepActions = components?.multiStepActions;
-    if (CustomMultiStepActions) {
-        return _jsx(CustomMultiStepActions, { ...props });
-    }
     const isLastStep = stepIndex === totalVisibleSteps - 1;
+    const isNextDisabled = isSubmitting || (disableActionButtonWhenInvalid && !isStepValid);
     const handlePrev = () => {
@@ -33,10 +30,43 @@ goPrev();
     };
-    return (_jsxs("div", { className: cn(styles.multiStepActions, classNames.multiStep.actionsContainer), children: [stepIndex > 0 && (_jsx("button", { className: cn(stylesField.button, styles.button, classNames.multiStep.actionsButtons, classNames.multiStep.actionsButtonPrev), type: "button", onClick: handlePrev, children: previousButtonLabel && previousButtonLabel.length > 0
-                    ? previousButtonLabel
-                    : 'Prev' })), _jsxs("button", { className: cn(stylesField.button, styles.button, classNames.multiStep.actionsButtons, classNames.multiStep.actionsButtonsNext), disabled: !isStepValid || isSubmitting, type: isLastStep ? 'submit' : 'button', onClick: handleNext, children: [isSubmitting && _jsx(Loader, {}), isLastStep
+    const wrapperClassNames = getClassNames({
+        name: 'multiStepActions',
+        prefix: classNamePrefix,
+        unstyled,
+        baseCn: cn(styles.multiStepActions, className),
+    });
+    const buttonBaseClassNames = getClassNames({
+        name: 'multiStepActionButton',
+        prefix: classNamePrefix,
+        unstyled,
+        baseCn: cn(stylesField.button, styles.button),
+    });
+    const prevButtonClassNames = getClassNames({
+        name: 'multiStepActionPrev',
+        prefix: classNamePrefix,
+        unstyled,
+        baseCn: buttonBaseClassNames,
+    });
+    const nextButtonClassNames = getClassNames({
+        name: 'multiStepActionNext',
+        prefix: classNamePrefix,
+        unstyled,
+        baseCn: buttonBaseClassNames,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'multiStepActions',
+    });
+    return (_jsxs("div", { className: wrapperClassNames, ...dataAttributes, children: [stepIndex > 0 && (_jsx("button", { type: "button", className: prevButtonClassNames, onClick: handlePrev, children: previousButtonLabel?.length ? previousButtonLabel : 'Prev' })), _jsxs("button", { type: isLastStep ? 'submit' : 'button', className: nextButtonClassNames, disabled: isNextDisabled, onClick: handleNext, children: [isSubmitting && (_jsx(Loader, { components: components, classNamePrefix: classNamePrefix, unstyled: unstyled })), isLastStep
                         ? 'Submit'
-                        : nextButtonLabel && nextButtonLabel.length > 0
+                        : nextButtonLabel?.length
                             ? nextButtonLabel
                             : 'Next'] })] }));
 };
+export const RenderMultiStepActions = (props) => {
+    const { components } = props;
+    const CustomMultiStepActions = components?.multiStepActions;
+    if (CustomMultiStepActions) {
+        return _jsx(CustomMultiStepActions, { ...props });
+    }
+    return _jsx(MultiStepActions, { ...props });
+};
 export default React.memo(MultiStepActions);

dist/components/fo.../multiStepStepper/multiStepStepper.d.ts

 import React from 'react';
-import { IMultiStepStepperProps } from '../../../../lib/types/components/multiStepStepper';
-declare const _default: React.MemoExoticComponent<(props: IMultiStepStepperProps) => import("react/jsx-runtime").JSX.Element>;
+import { MultiStepStepperProps } from '../../../../lib/types/components/multiStepStepper';
+declare const _default: React.MemoExoticComponent<(props: MultiStepStepperProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

dist/components/fo...ep/multiStepStepper/multiStepStepper.js

@@ -6,4 +6,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMultiStepContext } from '../multiStepContext';
+import { getClassNames, getDataAttributes, } from '../../../../lib/functions/utils_functions';
 const MultiStepStepper = (props) => {
-    const { multiStepTitleAs = 'span', currentStepObj, components, classNames, } = props;
+    const { multiStepTitleAs = 'span', currentStepObj, components, className, classNamePrefix, unstyled, } = props;
     const { stepIndex, totalVisibleSteps } = useMultiStepContext();
@@ -28,4 +29,43 @@ const CustomMultiStepStepper = components?.multiStepStepper;
     }
-    return (_jsxs("div", { className: cn(styles.multiStepStepper, classNames.multiStep.stepperContainer), children: [_jsxs("div", { className: cn(styles.headerStepperContainer, classNames.multiStep?.stepperHeader), children: [title && title.length > 0 && (_jsx(TagTitle, { className: cn(styles.title, classNames.multiStep.stepperTitle), children: title })), _jsxs("span", { className: cn(styles.multiStepStepperCounter, classNames.multiStep.stepperCounter), children: [stepIndex + 1, "/", totalVisibleSteps] })] }), _jsx("div", { className: cn(styles.progressBarContainer, classNames.multiStep.stepperProgressBarContainer), children: _jsx("div", { className: cn(styles.progressBar, classNames.multiStep.stepperProgressBar), style: { width: `${percent}%` } }) })] }));
+    const wrapperClassNames = getClassNames({
+        name: 'multiStepStepper',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: cn(styles.multiStepStepper, className),
+    });
+    const headerClassNames = getClassNames({
+        name: 'multiStepStepperHeader',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.headerStepperContainer,
+    });
+    const titleClassNames = getClassNames({
+        name: 'multiStepStepperTitle',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.title,
+    });
+    const counterClassNames = getClassNames({
+        name: 'multiStepStepperCounter',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.multiStepStepperCounter,
+    });
+    const progressContainerClassNames = getClassNames({
+        name: 'multiStepStepperProgressContainer',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.progressBarContainer,
+    });
+    const progressBarClassNames = getClassNames({
+        name: 'multiStepStepperProgress',
+        prefix: classNamePrefix,
+        unstyled: unstyled,
+        baseCn: styles.progressBar,
+    });
+    const dataAttributes = getDataAttributes({
+        component: 'multiStepStepper',
+    });
+    return (_jsxs("div", { className: wrapperClassNames, ...dataAttributes, children: [_jsxs("div", { className: headerClassNames, children: [title && _jsx(TagTitle, { className: titleClassNames, children: title }), _jsxs("span", { className: counterClassNames, children: [stepIndex + 1, "/", totalVisibleSteps] })] }), _jsx("div", { className: progressContainerClassNames, children: _jsx("div", { className: progressBarClassNames, style: { width: `${percent}%` } }) })] }));
 };
 export default React.memo(MultiStepStepper);

dist/components/webform.d.ts

@@ -1,3 +0,3 @@
-import { TWebform } from '../lib/types/form.d';
-declare const Webform: ({ elementsSource, defaultFieldValues, classNames, defaultFieldStateMessages, components, onSubmit, includeInactiveFieldsInSubmit, customValidators, isSubmitted, showConfirmation, }: TWebform) => import("react/jsx-runtime").JSX.Element;
+import { TWebform } from '../lib/types/form';
+declare const Webform: ({ elementsSource, rhfDefaultFieldStateMessages, components, onSubmit, includeInactiveFieldsInSubmit, rhfCustomValidators, classNamePrefix, unstyled, rhfValidationMode, validationEngine, disableActionButtonWhenInvalid, }: TWebform) => import("react/jsx-runtime").JSX.Element;
 export default Webform;

dist/components/webform.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { getWebformProperties } from '../lib/functions/webform_functions';
 import FormDefault from './form/formDefault/formDefault';
-import { defaultValuesClassnames, defaultValuesFieldStateMessages, defaultValuesObj, } from '../lib/const/const.form';
-import { mergeObjects } from '../lib/functions/utils_functions';
+import { defaultValuesFieldStateMessages, defaultValuesObj, } from '../lib/const/const.form';
 import { useMemo } from 'react';
 import FormMultiStep from './form/formMultiStep/formMultiStep';
 import { normalizeStateMessages } from '../lib/functions/webform-states-message-functions/webform-state-messages-functions';
-const Webform = ({ elementsSource, defaultFieldValues = {}, classNames = {}, defaultFieldStateMessages = {}, components = {}, onSubmit, includeInactiveFieldsInSubmit = true, customValidators, isSubmitted, showConfirmation = true, }) => {
-    const yupUseFormProps = {
-        mode: 'onChange',
-        reValidateMode: 'onBlur',
-    };
+const Webform = ({ elementsSource, rhfDefaultFieldStateMessages = {}, components = {}, onSubmit, includeInactiveFieldsInSubmit = true, rhfCustomValidators, classNamePrefix, unstyled = false, rhfValidationMode = 'all', validationEngine = 'html', disableActionButtonWhenInvalid, }) => {
     const mergedDefaultFieldValues = useMemo(() => ({
-        ...defaultFieldValues,
+        ...{},
         ...defaultValuesObj,
-    }), [defaultFieldValues]);
+    }), []);
     const mergedDefaultValuesStateMessages = useMemo(() => {
-        return normalizeStateMessages(defaultFieldStateMessages, defaultValuesFieldStateMessages);
-    }, [defaultFieldStateMessages]);
-    const mergedClassNames = useMemo(() => mergeObjects(defaultValuesClassnames, classNames), [classNames]);
+        return normalizeStateMessages(rhfDefaultFieldStateMessages, defaultValuesFieldStateMessages);
+    }, [rhfDefaultFieldStateMessages]);
     const { isMultiStep, elementsSources } = getWebformProperties(elementsSource);
     const FormComponent = isMultiStep ? FormMultiStep : FormDefault;
     const formProps = {
-        yup: { yupUseFormProps },
         elementsSource: elementsSources,
         defaultFieldValues: mergedDefaultFieldValues,
-        defaultFieldStateMessages: mergedDefaultValuesStateMessages,
-        classNames: mergedClassNames,
+        rhfDefaultFieldStateMessages: mergedDefaultValuesStateMessages,
         components,
         onSubmit,
         includeInactiveFieldsInSubmit,
-        customValidators,
-        isSubmitted,
-        showConfirmation,
+        rhfCustomValidators,
+        classNamePrefix,
+        unstyled,
+        rhfValidationMode,
+        validationEngine,
+        disableActionButtonWhenInvalid,
     };
@@ -37,0 +32,0 @@ return elementsSource ? _jsx(FormComponent, { ...formProps }) : null;

dist/index.d.ts

@@ -1,1 +0,37 @@
-export { default as Webform } from "./components/webform";
+export { default as Webform } from './components/webform';
+export { components } from './lib/const/const.form';
+export type { ActionProps } from './lib/types/components/action';
+export type { ButtonProps } from './lib/types/components/button';
+export type { CheckboxProps } from './lib/types/components/checkboxe';
+export type { CheckboxesProps } from './lib/types/components/checkboxes';
+export type { DescriptionProps } from './lib/types/components/description';
+export type { ErrorMessageProps } from './lib/types/components/errorMessage';
+export type { FieldContainerProps } from './lib/types/components/fieldContainer';
+export type { TFieldRendererProps } from './lib/types/components/fieldRenderer';
+export type { FieldWebformObjCustomProps } from './lib/types/components/fieldWebformObjCustom';
+export type { ManagedFilePreviewProps } from './lib/types/components/filePreview';
+export type { FormProps } from './lib/types/components/form';
+export type { HelpProps } from './lib/types/components/help';
+export type { HiddenProps } from './lib/types/components/hidden';
+export type { InputProps } from './lib/types/components/input';
+export type { LayoutProps } from './lib/types/components/layout';
+export type { LayoutListProps } from './lib/types/components/layoutList';
+export type { LayoutTitleProps } from './lib/types/components/layoutTitle';
+export type { LoaderProps } from './lib/types/components/loader';
+export type { ManagedFileProps } from './lib/types/components/managedFile';
+export type { ManagedFileInfoProps } from './lib/types/components/managedFileInfo';
+export type { MarkupProps } from './lib/types/components/markup';
+export type { MoreProps } from './lib/types/components/more';
+export type { MultiStepActionsProps } from './lib/types/components/multiStepActions';
+export type { MultiStepStepperProps } from './lib/types/components/multiStepStepper';
+export type { RadiosProps } from './lib/types/components/radios';
+export type { SelectProps } from './lib/types/components/select';
+export type { TextAreaProps } from './lib/types/components/textarea';
+export type { TitleProps } from './lib/types/components/title';
+export type { UnsupportedFieldProps } from './lib/types/components/unsupportedField';
+export type { FieldValidateProps } from './lib/types/components/validate';
+export type { WrapperDescriptionProps } from './lib/types/components/wrapperDescription';
+export type { WrapperFieldProps } from './lib/types/components/wrapperField';
+export type { WrapperManagedFileInfoProps } from './lib/types/components/wrapperManagedFileInfo';
+export type { WrapperMoreProps } from './lib/types/components/wrapperMore';
+export type { WysiwygProps } from './lib/types/components/wysiwyg';

dist/index.js

@@ -1,1 +0,2 @@
-export { default as Webform } from "./components/webform";
+export { default as Webform } from './components/webform';
+export { components } from './lib/const/const.form';

dist/lib/const/const.form.d.ts

@@ -1,18 +0,48 @@
-import { TWebformDefaultFieldValues, TWebformResolvedStateMessages } from '../types/form.d';
-import { TDeepRequiredClassNames } from '../types/deepRequired';
+import { TWebformDefaultFieldValues, TWebformResolvedStateMessages } from '../types/form';
+import { InputProps } from '../types/components/input';
+import { WysiwygProps } from '../types/components/wysiwyg';
+import { TitleProps } from '../types/components/title';
+import { CheckboxProps } from '../types/components/checkboxe';
+import { CheckboxesProps } from '../types/components/checkboxes';
+import { HiddenProps } from '../types/components/hidden';
+import { ManagedFileProps } from '../types/components/managedFile';
+import { RadiosProps } from '../types/components/radios';
+import { SelectProps } from '../types/components/select';
+import { TextAreaProps } from '../types/components/textarea';
+import { FieldContainerProps } from '../types/components/fieldContainer';
+import { ActionProps } from '../types/components/action';
+import { HelpProps } from '../types/components/help';
+import { MoreProps } from '../types/components/more';
+import { DescriptionProps } from '../types/components/description';
+import { FormProps } from '../types/components/form';
+import { MarkupProps } from '../types/components/markup';
+import { LayoutProps } from '../types/components/layout';
+import { LayoutTitleProps } from '../types/components/layoutTitle';
+import { LayoutListProps } from '../types/components/layoutList';
+import { MultiStepActionsProps } from '../types/components/multiStepActions';
 export declare const defaultValuesObj: Required<TWebformDefaultFieldValues>;
 export declare const defaultValuesFieldStateMessages: TWebformResolvedStateMessages;
-/**
- * export type TDrupalNonValueFieldType =
- *   | 'webform_markup'
- *   | 'webform_actions'
- *   | 'container'
- *   | 'webform_flexbox'
- *   | 'webform_section'
- *   | 'details'
- *   | 'fieldset'
- */
-export declare const defaultValuesClassnames: TDeepRequiredClassNames;
+export declare const FIELD_TYPE_TO_GROUP: Record<string, string>;
 export declare const components: {
-    Wysiwyg: import("react").MemoExoticComponent<({ processed, as: Element, className, }: import("../types/components/wysiwyg").IWysiwygProps) => import("react/jsx-runtime").JSX.Element>;
+    Input: <P extends InputProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Wysiwyg: <P extends WysiwygProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Title: <P extends TitleProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Checkbox: <P extends CheckboxProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Checkboxes: <P extends CheckboxesProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Hidden: <P extends HiddenProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    ManagedFile: <P extends ManagedFileProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Radios: <P extends RadiosProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Select: <P extends SelectProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    TextArea: <P extends TextAreaProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    FieldContainer: <P extends FieldContainerProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Action: <P extends ActionProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Help: <P extends HelpProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    More: <P extends MoreProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Form: <P extends FormProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Markup: <P extends MarkupProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Layout: <P extends LayoutProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    LauyoutTitle: <P extends LayoutTitleProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    LayoutList: <P extends LayoutListProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    Description: <P extends DescriptionProps>(props: P) => import("react/jsx-runtime").JSX.Element;
+    MultiStepActions: <P extends MultiStepActionsProps>(props: P) => import("react/jsx-runtime").JSX.Element;
 };

dist/lib/const/const.form.js

@@ -0,2 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import Wysiwyg from '../../components/form/fields/fields-special-components/wysiwyg/wysiwyg';
+import Input from '../../components/form/fields/fields-elements/input';
+import Title from '../../components/form/fields/fields-sub-components/title/title';
+import Checkbox from '../../components/form/fields/fields-elements/checkbox';
+import Checkboxes from '../../components/form/fields/fields-elements/checkboxes';
+import Hidden from '../../components/form/fields/fields-elements/hidden';
+import ManagedFile from '../../components/form/fields/fields-elements/managedFile';
+import Radios from '../../components/form/fields/fields-elements/radios';
+import Select from '../../components/form/fields/fields-elements/select';
+import Textarea from '../../components/form/fields/fields-elements/textarea';
+import FieldContainer from '../../components/form/fields/fields-sub-components/fieldContainer';
+import { Action } from '../../components/form/fields/action';
+import Help from '../../components/form/fields/fields-sub-components/help/help';
+import More from '../../components/form/fields/fields-sub-components/more/more';
+import Description from '../../components/form/fields/fields-sub-components/description/description';
+import Form from '../../components/form/form';
+import Markup from '../../components/form/fields/markup';
+import Layout from '../../components/form/fields/fields-sub-components/layout/layout';
+import LayoutTitle from '../../components/form/fields/fields-sub-components/layoutTitle/layoutTitle';
+import LayoutList from '../../components/form/fields/fields-sub-components/layoutList/layoutList';
+import MultiStepActions from '../../components/form/formMultiStep/multiStepActions/multiStepActions';
 export const defaultValuesObj = {
@@ -15,2 +36,7 @@ textfield: '',
     hidden: '',
+    term_checkboxes: [],
+    term_select: '',
+    entity_select: '',
+    entity_checkboxes: [],
+    radios_entity: '',
 };
@@ -38,2 +64,7 @@ export const defaultValuesFieldStateMessages = {
             select: '',
+            entity_checkboxes: '',
+            term_checkboxes: '',
+            radios_entity: '',
+            entity_select: '',
+            term_select: '',
         },
@@ -53,2 +84,7 @@ requiredMessages: {
             hidden: '',
+            entity_checkboxes: '',
+            term_checkboxes: '',
+            radios_entity: '',
+            entity_select: '',
+            term_select: '',
         },
@@ -66,2 +102,7 @@ minLengthMessage: {
             hidden: '',
+            entity_checkboxes: '',
+            term_checkboxes: '',
+            radios_entity: '',
+            entity_select: '',
+            term_select: '',
         },
@@ -79,118 +120,52 @@ maxLengthMessage: {
             hidden: '',
+            entity_checkboxes: '',
+            term_checkboxes: '',
+            radios_entity: '',
+            entity_select: '',
+            term_select: '',
         },
     },
 };
-/**
- * export type TDrupalNonValueFieldType =
- *   | 'webform_markup'
- *   | 'webform_actions'
- *   | 'container'
- *   | 'webform_flexbox'
- *   | 'webform_section'
- *   | 'details'
- *   | 'fieldset'
- */
-export const defaultValuesClassnames = {
-    wrappers: {
-        base: '',
-        byCategory: {
-            textInput: '',
-            selectionInput: '',
-            booleanInput: '',
-        },
-        byFieldType: {
-            checkbox: '',
-            checkboxes: '',
-            date: '',
-            email: '',
-            webform_markup: '',
-            textarea: '',
-            textfield: '',
-            radios: '',
-            number: '',
-            tel: '',
-            select: '',
-            managed_file: '',
-            webform_actions: '',
-            container: '',
-            fieldset: '',
-            hidden: '',
-            details: '',
-            webform_section: '',
-            webform_flexbox: '',
-        },
-    },
-    general: {
-        fieldForm: '',
-        fieldLabel: '',
-        fieldDescription: '',
-        fieldManagedFileInfo: '',
-        fieldMore: '',
-        fieldHelp: '',
-        fieldWysiwyg: '',
-    },
-    states: {
-        fieldError: '',
-        fieldErrorMessage: '',
-    },
-    fields: {
-        textInputs: {
-            base: '',
-            types: {
-                text: '',
-                email: '',
-                number: '',
-                tel: '',
-                textarea: '',
-                textfield: '',
-            },
-        },
-        checkboxes: {
-            groupWrapper: '',
-            itemWrapper: '',
-            input: '',
-            label: '',
-        },
-        checkbox: {
-            itemWrapper: '',
-            input: '',
-            label: '',
-        },
-        radios: {
-            groupWrapper: '',
-            itemWrapper: '',
-            input: '',
-            label: '',
-        },
-        select: {
-            select: '',
-            option: '',
-        },
-        managedFile: {
-            input: '',
-        },
-        markup: {
-            base: '',
-        },
-        layout: {
-            wrapper: '',
-            title: '',
-            inner: '',
-        },
-    },
-    multiStep: {
-        stepperContainer: '',
-        stepperHeader: '',
-        stepperTitle: '',
-        stepperCounter: '',
-        stepperProgressBarContainer: '',
-        stepperProgressBar: '',
-        actionsContainer: '',
-        actionsButtons: '',
-        actionsButtonPrev: '',
-        actionsButtonsNext: '',
-    },
+export const FIELD_TYPE_TO_GROUP = {
+    textfield: 'input',
+    email: 'input',
+    number: 'input',
+    tel: 'input',
+    date: 'input',
+    textarea: 'textarea',
+    select: 'select',
+    radios: 'radio',
+    checkbox: 'checkbox',
+    checkboxes: 'checkbox',
+    managed_file: 'file',
+    webform_section: 'layout',
+    webform_flexbox: 'layout',
+    fieldset: 'layout',
+    container: 'layout',
+    details: 'layout',
+    webform_actions: 'action',
+    webform_markup: 'markup',
 };
 export const components = {
-    Wysiwyg: Wysiwyg,
+    Input: (props) => _jsx(Input, { ...props }),
+    Wysiwyg: (props) => _jsx(Wysiwyg, { ...props }),
+    Title: (props) => _jsx(Title, { ...props }),
+    Checkbox: (props) => _jsx(Checkbox, { ...props }),
+    Checkboxes: (props) => (_jsx(Checkboxes, { ...props })),
+    Hidden: (props) => _jsx(Hidden, { ...props }),
+    ManagedFile: (props) => (_jsx(ManagedFile, { ...props })),
+    Radios: (props) => _jsx(Radios, { ...props }),
+    Select: (props) => _jsx(Select, { ...props }),
+    TextArea: (props) => _jsx(Textarea, { ...props }),
+    FieldContainer: (props) => (_jsx(FieldContainer, { ...props })),
+    Action: (props) => _jsx(Action, { ...props }),
+    Help: (props) => _jsx(Help, { ...props }),
+    More: (props) => _jsx(More, { ...props }),
+    Form: (props) => _jsx(Form, { ...props }),
+    Markup: (props) => _jsx(Markup, { ...props }),
+    Layout: (props) => _jsx(Layout, { ...props }),
+    LauyoutTitle: (props) => (_jsx(LayoutTitle, { ...props })),
+    LayoutList: (props) => (_jsx(LayoutList, { ...props })),
+    Description: (props) => (_jsx(Description, { ...props })),
+    MultiStepActions: (props) => (_jsx(MultiStepActions, { ...props })),
 };

dist/lib/functions/utils_functions.d.ts

@@ -0,4 +1,33 @@
+import cn from 'classnames';
+import { HTMLInputTypeAttribute } from 'react';
+import { TElementSource } from '../types/components/field';
+import { StringSchema } from 'yup';
 declare const mergeObjects: (defaultObj: Record<string, any>, newObj: Record<string, any>) => Record<string, any>;
 declare const deepMergeDefaults: <T extends object>(defaults: T, overrides: Partial<T>) => T;
 export { mergeObjects, deepMergeDefaults };
-export declare const toStringMessage: (value: any) => string;
+export declare const getDataAttributes: ({ type, component, }: {
+    type?: string;
+    component?: string;
+}) => {
+    'data-component'?: string;
+    'data-group-type'?: string;
+    'data-type'?: string;
+};
+export declare const getClassNames: ({ name, prefix, unstyled, classNameComponent, baseCn, modifiers, }: {
+    name: string;
+    prefix: string | null | undefined;
+    unstyled: boolean;
+    classNameComponent?: string;
+    baseCn?: cn.Argument;
+    modifiers?: Record<string, boolean>;
+}) => string;
+export declare const getAriaDescribedBy: ({ fieldKey, field, }: {
+    fieldKey: string;
+    field?: Record<string, any>;
+}) => string | undefined;
+export declare const getTextLikeInputAttributes: (field: TElementSource, type: HTMLInputTypeAttribute) => Record<string, any>;
+export declare const applyPatternIfApplicable: ({ schema, field, fallbackMessage, }: {
+    schema: StringSchema;
+    field?: TElementSource;
+    fallbackMessage?: string;
+}) => StringSchema;

dist/lib/functions/utils_functions.js

@@ -0,1 +1,3 @@
+import { FIELD_TYPE_TO_GROUP } from '../const/const.form';
+import cn from 'classnames';
 const mergeObjects = (defaultObj, newObj) => {
@@ -30,6 +32,91 @@ if (!defaultObj || !newObj)
 export { mergeObjects, deepMergeDefaults };
-export const toStringMessage = (value) => {
-    if (typeof value === 'function')
-        return '';
-    return value ?? '';
+export const getDataAttributes = ({ type, component, }) => {
+    const groupType = type ? FIELD_TYPE_TO_GROUP[type] : undefined;
+    return {
+        ...(type ? { 'data-type': type } : {}),
+        ...(groupType ? { 'data-group-type': groupType } : {}),
+        ...(component ? { 'data-component': component } : {}),
+    };
 };
+export const getClassNames = ({ name, prefix, unstyled, classNameComponent, baseCn, modifiers, }) => {
+    const baseName = prefix ? `${prefix}-webform-${name}` : `webform-${name}`;
+    const modifierClasses = modifiers
+        ? Object.fromEntries(Object.entries(modifiers).map(([key, value]) => [
+            `${baseName}--${key}`,
+            value,
+        ]))
+        : undefined;
+    return cn(baseName, modifierClasses, unstyled ? undefined : baseCn, classNameComponent);
+};
+export const getAriaDescribedBy = ({ fieldKey, field, }) => {
+    const hasDescription = Boolean(field?.['#description']) || Boolean(field?.['#file_placeholder']);
+    return hasDescription ? `description-${fieldKey}` : undefined;
+};
+export const getTextLikeInputAttributes = (field, type) => {
+    const normalizeHtmlDate = (value) => {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+            return value;
+        }
+        const match = value.match(/^(\d{2})[\/-](\d{2})[\/-](\d{4})$/);
+        if (match) {
+            const [, day, month, year] = match;
+            return `${year}-${month}-${day}`;
+        }
+        return value;
+    };
+    const attrs = {};
+    if (field['#placeholder']) {
+        attrs.placeholder = field['#placeholder'];
+    }
+    if (field['#required']) {
+        attrs.required = true;
+    }
+    if (['text', 'email', 'tel', 'password'].includes(type)) {
+        if (field['#minlength'] != null) {
+            attrs.minLength = field['#minlength'];
+        }
+        if (field['#maxlength'] != null) {
+            attrs.maxLength = field['#maxlength'];
+        }
+        if (field['#size'] != null) {
+            attrs.size = field['#size'];
+        }
+    }
+    if (field['#pattern'] && ['text', 'tel', 'password'].includes(type)) {
+        attrs.pattern = field['#pattern'];
+    }
+    if (type === 'number') {
+        if (field['#min'] != null) {
+            attrs.min = field['#min'];
+        }
+        if (field['#max'] != null) {
+            attrs.max = field['#max'];
+        }
+    }
+    if (type === 'date') {
+        if (field?.['#date_date_min'] != null) {
+            attrs.min = normalizeHtmlDate(field['#date_date_min']);
+        }
+        if (field?.['#date_date_max'] != null) {
+            attrs.max = normalizeHtmlDate(field['#date_date_max']);
+        }
+    }
+    return attrs;
+};
+export const applyPatternIfApplicable = ({ schema, field, fallbackMessage, }) => {
+    const pattern = field?.['#pattern'];
+    if (!pattern)
+        return schema;
+    const errorMessage = field?.['#pattern_error'] || fallbackMessage;
+    try {
+        const regex = new RegExp(pattern);
+        return schema.test('pattern', errorMessage, (value) => {
+            if (!value)
+                return true;
+            return regex.test(value);
+        });
+    }
+    catch {
+        return schema;
+    }
+};

dist/lib/functions...bform_fields_conditional_functions.d.ts

@@ -1,2 +0,2 @@
-import { TWebformCustomValidators, TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../../types/form.d';
+import { TWebformCustomValidators, TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../../types/form';
 import * as yup from 'yup';
@@ -15,8 +15,8 @@ export declare const checkVisibilityCondition: (watched: any, expectedValue: any, mode?: "is" | "isNot") => boolean;
 export declare function getDependentFields(elementsSource: Record<string, any>): TDependentField[];
-export declare const generateFormSchemaAndDefaults: ({ elementsSource, visibleElementsKeys, defaultFieldValues, defaultFieldStateMessages, customValidators, watchedValues, }: {
+export declare const generateFormSchemaAndDefaults: ({ elementsSource, visibleElementsKeys, defaultFieldValues, rhfDefaultFieldStateMessages, rhfCustomValidators, watchedValues, }: {
     elementsSource: Record<string, any>;
     visibleElementsKeys: string[];
     defaultFieldValues: Required<TWebformDefaultFieldValues>;
-    defaultFieldStateMessages: TWebformNormalizedStateMessages;
-    customValidators?: TWebformCustomValidators;
+    rhfDefaultFieldStateMessages: TWebformNormalizedStateMessages;
+    rhfCustomValidators?: TWebformCustomValidators;
     watchedValues?: Record<string, any>;
@@ -23,0 +23,0 @@ }) => {

dist/lib/functions...webform_fields_conditional_functions.js

@@ -105,3 +105,3 @@ import FormMappingFields from '../../../components/form/formMappingFields/formMappingFields';
 }
-export const generateFormSchemaAndDefaults = ({ elementsSource, visibleElementsKeys, defaultFieldValues, defaultFieldStateMessages, customValidators, watchedValues = {}, }) => {
+export const generateFormSchemaAndDefaults = ({ elementsSource, visibleElementsKeys, defaultFieldValues, rhfDefaultFieldStateMessages, rhfCustomValidators, watchedValues = {}, }) => {
     const defaults = {};
@@ -111,3 +111,4 @@ const yupObjLocal = {};
     realVisibleFields.forEach(({ key, field }) => {
-        const type = field?.['#type'];
+        const rawType = field?.['#type'];
+        const type = rawType in FormMappingFields ? rawType : 'default';
         const required = Boolean(field?.['#required']);
@@ -121,4 +122,4 @@ const fieldValidateProps = {
             defaultFieldValues,
-            defaultFieldStateMessages,
-            customValidators,
+            rhfDefaultFieldStateMessages,
+            rhfCustomValidators,
             requiredMessage: '',
@@ -125,0 +126,0 @@ errorMessage: '',

dist/lib/functions...functions/webform_fields_functions.d.ts

@@ -1,21 +0,6 @@
-import { TWrapperCategory } from '../../types/form.d';
 import { ControllerRenderProps } from 'react-hook-form';
 import React from 'react';
-import { TDrupal_FieldType } from '../../types/components/field';
 declare const handleChangeOptions: (selectedKey: string, fieldController: ControllerRenderProps<any, string>) => void;
 declare const handleChangeOptionsCheckboxes: (selectedKey: string, checked: boolean, fieldController: any) => void;
 declare const handleFileChange: (event: React.ChangeEvent<HTMLInputElement>, fieldController: ControllerRenderProps<any, string>, inputRef: React.RefObject<HTMLInputElement | null>) => Promise<void>;
-declare const getWrapperCategory: (type: TDrupal_FieldType) => TWrapperCategory | undefined;
-export declare const getRadioChecked: ({ radioFormat, optionKey, optionValue, fieldControllerValue, }: {
-    radioFormat: string;
-    optionKey: string;
-    optionValue: string;
-    fieldControllerValue: any;
-}) => boolean;
-export declare const getCheckboxChecked: ({ checkboxesFormat, optionKey, optionValue, fieldControllerValue, }: {
-    checkboxesFormat: string;
-    optionKey: string;
-    optionValue: string;
-    fieldControllerValue: any;
-}) => boolean;
-export { handleChangeOptions, handleFileChange, handleChangeOptionsCheckboxes, getWrapperCategory, };
+export { handleChangeOptions, handleFileChange, handleChangeOptionsCheckboxes };

dist/lib/functions...s_functions/webform_fields_functions.js

@@ -38,44 +38,2 @@ import { fileToBase64 } from './webform_fields_file_functions';
 };
-const getWrapperCategory = (type) => {
-    if (['textfield', 'textarea', 'email', 'number', 'tel'].includes(type))
-        return 'textInput';
-    if (['select', 'radios'].includes(type))
-        return 'selectionInput';
-    if (['checkbox', 'checkboxes'].includes(type))
-        return 'booleanInput';
-    return undefined;
-};
-export const getRadioChecked = ({ radioFormat, optionKey, optionValue, fieldControllerValue, }) => {
-    if (radioFormat === 'booleanMap') {
-        return Boolean(fieldControllerValue?.[optionKey]);
-    }
-    if (radioFormat === 'key') {
-        return fieldControllerValue === optionKey;
-    }
-    if (radioFormat === 'value') {
-        return fieldControllerValue === optionValue;
-    }
-    if (radioFormat === 'keyValue') {
-        return fieldControllerValue?.key === optionKey;
-    }
-    return false;
-};
-export const getCheckboxChecked = ({ checkboxesFormat, optionKey, optionValue, fieldControllerValue, }) => {
-    if (checkboxesFormat === 'booleanMap') {
-        return Boolean(fieldControllerValue?.[optionKey]);
-    }
-    if (checkboxesFormat === 'key') {
-        return (Array.isArray(fieldControllerValue) &&
-            fieldControllerValue.includes(optionKey));
-    }
-    if (checkboxesFormat === 'value') {
-        return (Array.isArray(fieldControllerValue) &&
-            fieldControllerValue.includes(optionValue));
-    }
-    if (checkboxesFormat === 'keyValue') {
-        return (Array.isArray(fieldControllerValue) &&
-            fieldControllerValue.some((entry) => Object.keys(entry)[0] === optionKey));
-    }
-    return false;
-};
-export { handleChangeOptions, handleFileChange, handleChangeOptionsCheckboxes, getWrapperCategory, };
+export { handleChangeOptions, handleFileChange, handleChangeOptionsCheckboxes };

dist/lib/functions/webform_functions.js

@@ -1,2 +0,2 @@
-import { isMultiStep } from "./webform_multistep_functions/webform_multistep_functions";
+import { isMultiStep } from './webform_multistep_functions/webform_multistep_functions';
 const getWebformProperties = (elements) => {
@@ -3,0 +3,0 @@ const formIsMultiStep = isMultiStep(elements);

dist/lib/functions...ctions/webform_multistep_functions.d.ts

 import { TKeyValue } from '../webform_functions';
-import { TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../../types/form.d';
+import { TWebformDefaultFieldValues, TWebformNormalizedStateMessages } from '../../types/form';
 declare const isMultiStep: (elementsSource: TKeyValue<any>) => boolean;
 export declare const getAllFieldNames: (elementsSource: Record<string, any>) => string[];
 export declare const getDummyDefaultMultiStep: (elementsSource: Record<string, any>, defaultFieldValues: Partial<TWebformDefaultFieldValues>) => Record<string, any>;
-export declare const getAllDefaultValuesFromAllSteps: ({ elementsSource, defaultFieldValues, defaultFieldStateMessages, }: {
+export declare const getAllDefaultValuesFromAllSteps: ({ elementsSource, defaultFieldValues, rhfDefaultFieldStateMessages, }: {
     elementsSource: Record<string, any>;
     defaultFieldValues: Required<TWebformDefaultFieldValues>;
-    defaultFieldStateMessages: TWebformNormalizedStateMessages;
+    rhfDefaultFieldStateMessages: TWebformNormalizedStateMessages;
 }) => Record<string, any>;
 export { isMultiStep };

dist/lib/functions...unctions/webform_multistep_functions.js

@@ -42,3 +42,3 @@ import { generateFormSchemaAndDefaults } from '../webform_fields_functions/webform_fields_conditional_functions';
 };
-export const getAllDefaultValuesFromAllSteps = ({ elementsSource, defaultFieldValues, defaultFieldStateMessages, }) => {
+export const getAllDefaultValuesFromAllSteps = ({ elementsSource, defaultFieldValues, rhfDefaultFieldStateMessages, }) => {
     let allDefaultValues = {};
@@ -53,3 +53,3 @@ Object.entries(elementsSource).forEach(([_, stepObj]) => {
             defaultFieldValues,
-            defaultFieldStateMessages,
+            rhfDefaultFieldStateMessages,
         });
@@ -56,0 +56,0 @@ allDefaultValues = { ...allDefaultValues, ...defaultValues };

dist/lib/functions...tions/webform_validation_functions.d.ts

@@ -1,13 +0,13 @@
-import { TWebformCustomValidators, TWebformStateMessages } from '../../types/form.d';
+import { TWebformCustomValidators, TWebformStateMessages } from '../../types/form';
 import { DeepRequired } from 'react-hook-form';
 import { TDrupal_FieldType, TElementSource } from '../../types/components/field';
 import { AnySchema, StringSchema } from 'yup';
-import { TFieldValidate } from '../../types/components/validate';
-export declare const getRequiredMessage: (defaultFieldStateMessages: DeepRequired<TWebformStateMessages>, stateFieldName: TDrupal_FieldType) => any;
-export declare const getErrorMessage: (defaultFieldStateMessages: DeepRequired<TWebformStateMessages>, stateFieldName: TDrupal_FieldType) => any;
+import { FieldValidateProps } from '../../types/components/validate';
+export declare const getRequiredMessage: (rhfDefaultFieldStateMessages: DeepRequired<TWebformStateMessages>, stateFieldName: TDrupal_FieldType) => any;
+export declare const getErrorMessage: (rhfDefaultFieldStateMessages: DeepRequired<TWebformStateMessages>, stateFieldName: TDrupal_FieldType) => any;
 export declare const formatMessage: (template: string, fieldName: string) => string;
 export type TDrupal_FieldType_Validate = Exclude<TDrupal_FieldType, 'webform_markup' | 'webform_actions'>;
-export declare const resolveCustomValidator: <S extends AnySchema>(customValidators: TWebformCustomValidators | undefined, key: string, type: TDrupal_FieldType_Validate | undefined, args: TFieldValidate) => S | null;
+export declare const resolveCustomValidator: <S extends AnySchema>(rhfCustomValidators: TWebformCustomValidators | undefined, key: string, type: TDrupal_FieldType_Validate | undefined, args: FieldValidateProps) => S | null;
 export declare const extractValueFields: (elementsSource: Record<string, any>, acc?: Record<string, any>) => Record<string, any>;
 export declare const getDummyDefaultFormDefault: (elementsSource: Record<string, any>, defaultFieldValues: Record<string, any>) => Record<string, any>;
 export declare const applyMinMaxLength: (schema: StringSchema<string | undefined>, field: TElementSource, minLengthMessage: string, maxLengthMessage: string) => StringSchema<string | undefined>;

dist/lib/functions...nctions/webform_validation_functions.js

@@ -1,13 +0,12 @@
-export const getRequiredMessage = (defaultFieldStateMessages, stateFieldName) => {
-    if (defaultFieldStateMessages.fields['requiredMessages'][stateFieldName]?.length > 0) {
-        return defaultFieldStateMessages.fields['requiredMessages'][stateFieldName];
+export const getRequiredMessage = (rhfDefaultFieldStateMessages, stateFieldName) => {
+    if (rhfDefaultFieldStateMessages.fields['requiredMessages'][stateFieldName]?.length > 0) {
+        return rhfDefaultFieldStateMessages.fields['requiredMessages'][stateFieldName];
     }
-    return defaultFieldStateMessages.general.requiredMessage;
+    return rhfDefaultFieldStateMessages.general.requiredMessage;
 };
-export const getErrorMessage = (defaultFieldStateMessages, stateFieldName) => {
-    if (defaultFieldStateMessages.fields['errorMessages'][stateFieldName]
-        ?.length > 0) {
-        return defaultFieldStateMessages.fields['errorMessages'][stateFieldName];
+export const getErrorMessage = (rhfDefaultFieldStateMessages, stateFieldName) => {
+    if (rhfDefaultFieldStateMessages.fields['errorMessages'][stateFieldName]?.length > 0) {
+        return rhfDefaultFieldStateMessages.fields['errorMessages'][stateFieldName];
     }
-    return defaultFieldStateMessages.general.errorMessage;
+    return rhfDefaultFieldStateMessages.general.errorMessage;
 };
@@ -17,11 +16,11 @@ export const formatMessage = (template, fieldName) => {
 };
-export const resolveCustomValidator = (customValidators, key, type, args) => {
-    if (!customValidators)
+export const resolveCustomValidator = (rhfCustomValidators, key, type, args) => {
+    if (!rhfCustomValidators)
         return null;
-    const byId = customValidators.byId?.[key];
+    const byId = rhfCustomValidators.byId?.[key];
     if (byId) {
         return byId(args);
     }
-    if (type && customValidators.byType?.[type]) {
-        return customValidators.byType[type](args);
+    if (type && rhfCustomValidators.byType?.[type]) {
+        return rhfCustomValidators.byType[type](args);
     }
@@ -28,0 +27,0 @@ return null;

dist/lib/functions...up_functions/webform_yup_functions.d.ts

@@ -1,4 +0,4 @@
-import { TFieldValidate } from '../../types/components/validate';
+import { FieldValidateProps } from '../../types/components/validate';
 import { TDrupal_FieldType } from '../../types/components/field';
-import { TWebformErrorMessageFieldType, TWebformLengthMessageFieldType } from '../../types/form.d';
+import { TWebformErrorMessageFieldType, TWebformLengthMessageFieldType } from '../../types/form';
 export declare const useYupValidationResolver: (validationSchema: any) => (data: any) => Promise<{
@@ -19,2 +19,2 @@ values: any;
 export declare const isLengthMessageFieldType: (type: unknown) => type is TWebformLengthMessageFieldType;
-export declare const resolveFieldMessages: (props: TFieldValidate) => TResolvedFieldMessages;
+export declare const resolveFieldMessages: (props: FieldValidateProps) => TResolvedFieldMessages;

dist/lib/functions..._yup_functions/webform_yup_functions.js

@@ -27,3 +27,5 @@ export const useYupValidationResolver = (validationSchema) => async (data) => {
         type !== 'webform_actions' &&
-        type !== 'fieldset');
+        type !== 'fieldset' &&
+        type !== 'webform_section' &&
+        type !== 'webform_flexbox');
 };
@@ -39,3 +41,3 @@ export const isLengthMessageFieldType = (type) => {
 export const resolveFieldMessages = (props) => {
-    const { field, defaultFieldStateMessages } = props;
+    const { field, rhfDefaultFieldStateMessages } = props;
     const type = field?.['#type'];
@@ -45,6 +47,6 @@ const fieldName = field?.['#title'] ?? '';
     const maxLength = typeof field?.['#maxlength'] === 'number' ? String(field['#maxlength']) : '';
-    const resolve = (v) => {
-        if (!v)
+    const resolve = (value) => {
+        if (value == null)
             return '';
-        return typeof v === 'function' ? v(field) : v;
+        return typeof value === 'function' ? value(field) : value;
     };
@@ -55,4 +57,4 @@ const replaceTokens = (msg) => msg
         .replace('{maxLength}', maxLength);
-    const general = defaultFieldStateMessages.general;
-    const fields = defaultFieldStateMessages.fields;
+    const general = rhfDefaultFieldStateMessages.general;
+    const fields = rhfDefaultFieldStateMessages.fields;
     const required = isErrorMessageFieldType(type)
@@ -70,4 +72,7 @@ ? resolve(fields.requiredMessages[type])
         : '';
+    const requiredResolved = field?.['#required_error'] && field['#required_error'].length > 0
+        ? field['#required_error']
+        : replaceTokens(required || resolve(general.requiredMessage));
     return {
-        required: replaceTokens(required || resolve(general.requiredMessage)),
+        required: requiredResolved,
         error: replaceTokens(error || resolve(general.errorMessage)),
@@ -74,0 +79,0 @@ minLength: replaceTokens(minLen || resolve(general.minLengthMessage)),

dist/lib/functions...s/webform-state-messages-functions.d.ts

@@ -1,2 +0,2 @@
-import { TWebformNormalizedStateMessages, TWebformResolvedStateMessages, TWebformStateMessages } from '../../types/form.d';
+import { TWebformNormalizedStateMessages, TWebformResolvedStateMessages, TWebformStateMessages } from '../../types/form';
 export declare const normalizeStateMessages: (messages: Partial<TWebformStateMessages>, defaults: TWebformResolvedStateMessages) => TWebformNormalizedStateMessages;

dist/lib/types/components/help.d.ts

 import { jsx } from '@emotion/react';
-import { TWebformCustomComponents } from '../form.d';
-export interface IHelpProps {
+import { DrupalElementCommonProps } from '../form';
+export interface HelpProps extends DrupalElementCommonProps {
     innerProps?: jsx.JSX.IntrinsicElements['button'];
-    components: TWebformCustomComponents;
-    helps?: {
-        help?: string;
-        processed_help_title?: string;
-    };
+    className?: string;
+    innerRef?: (instance: HTMLButtonElement | null) => void;
 }

dist/lib/types/components/wysiwyg.d.ts

 import React from 'react';
+import { jsx } from '@emotion/react';
+import { DrupalElementCommonProps } from '../form';
 export type TWysiwygSource = 'help' | 'more' | 'description' | 'markup';
-export interface IWysiwygProps {
+export interface WysiwygProps extends DrupalElementCommonProps {
     as?: React.ElementType;
@@ -8,2 +10,4 @@ className?: string;
     processed: string;
+    innerProps?: jsx.JSX.IntrinsicElements['div'];
+    innerRef?: (instance: HTMLElement | null) => void;
 }

package.json

 {
   "name": "react-drupal-webform",
-  "version": "1.0.1-alpha",
+  "version": "1.0.2-alpha",
   "description": "React components using webform Drupal data",
@@ -17,2 +17,8 @@ "scripts": {
   "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "module": "dist/index.js",
@@ -24,3 +30,4 @@ "types": "dist/index.d.ts",
   "dependencies": {
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "react-drupal-webform": "./packages/react-drupal-webform/react-drupal-webform-v1.0.1-alpha.tgz"
   },
@@ -27,0 +34,0 @@ "peerDependencies": {

README.md

@@ -12,3 +12,3 @@ <h1 style="color:#1f3a8a;">React Drupal Webform components (Alpha Version)</h1>
 
-Validation for the form is powered by Yup.
+Validation for the form is can be with HTML nativer or powered by react-hook-form (and yup).
 You can also extend, override, or inject your own custom validation rules.
@@ -95,9 +95,9 @@
   - Min Length / Max length : ✅
-  - Size : ❌
+  - Size : ✅
   - Placeholder : ✅
   - Autocomplete : ❌
   - Input Mask : ❌
-  - Input hiding : ❌
-  - Disabled : ❌
-  - Readonly : ❌
+  - Input hiding : ✅
+  - Disabled : ✅
+  - Readonly : ✅
   - Prepopulate : ❌
@@ -107,5 +107,5 @@
   - Required : ✅
-  - Required message : ❌
+  - Required message : ✅
   - Unique : ❌
-  - Pattern : ❌
+  - Pattern : ✅
   - Counter : ❌
@@ -143,3 +143,3 @@
 
-There is some few CSS differences, the react-webform library uses Yup and RHF (React Hook Form), so the error-handling system is not native to HTML5.
+There is some few CSS differences, the react-webform library can provide Yup and RHF (React Hook Form), so the error-handling system can be native to HTML5 or not (validationEngine props).
 
@@ -175,12 +175,15 @@ <h3 style="color:#1f3a8a;">Use of React Hook Component</h3>
 
-- `elementsSource` - the elements from de webform (need to be an Javascript object, so parse the YAML from Drupal before )
-- `classNames` - Javascript object to apply classnames to wrappes, states, ect...
-- `components` - Javascript object to list all components
-- `isSubmitted` - Check if the form is submitted or not, for show the confirmation page. 
-- `onSubmit` - An async function that is called after submitting the form.
-- `showConfirmation` - Show (or not) the confirmation page when isSubmitted is true.
-- `includeInactiveFieldsInSubmit` - Includes conditionally hidden fields in the submission result (except hidden inputs).
-- `defaultFieldStateMessages` - Default messages for field errors, required fields, etc.
-- `customValidators` - custom yup Validator
+- `elementsSource` – (Required) The webform elements definition. This must be a JavaScript object, so the YAML coming from Drupal must be parsed beforehand.
+- `onSubmit` – (Required) A function called when the form is submitted. Can return a promise for async handling.
+- `components` – A JavaScript object used to override or extend the default form components.
+- `validationEngine` – Defines which validation engine to use. Possible values are `rhf` (React Hook Form) or `html` (HTML native validation). By default it's HTML (Drupal behavior)
+- `rhfValidationMode` – (RHF only) Defines when validation is triggered (`onSubmit`, `onBlur`, `onChange`, `all`). By default it's `all`
+- `rhfCustomValidators` – (RHF only) Custom Yup validators that can extend or override the default validation rules.
+- `rhfDefaultFieldStateMessages` – (RHF only) Default messages used for field states such as errors, required fields, or validation feedback.
+- `classNamePrefix` – A prefix applied to all generated CSS class names of the webform elements. Without a prefix, base class names are not rendered by default.
+- `includeInactiveFieldsInSubmit` – When enabled, conditionally hidden fields are included in the submitted data (except native hidden inputs).
+- `unstyled` – When enabled, disables all default styling and generated class names. So you can style from scratch. 
+- `disableActionButtonWhenInvalid` – When enabled, action buttons (submit or next) are automatically disabled when the form is invalid.
 
+
 <h3 style="color:#1f3a8a;">Props – components</h3>
@@ -190,6 +193,6 @@
 
-- `label` – Renders the label of each field.
-- `wrapper` – Container wrapping a field and its label.
+- `title` – Renders the title (label) of each field.
+- `fieldContainer` – Container wrapping a field and its related elements (label, description, errors).
 - `errorFieldMessage` – Displays validation and error messages for a field.
-- `confirmationView` – Display of the confirmationView (after the submit).
+- `confirmationView` – Display of the confirmation view (after the submit).
 - `input` – Renders standard input fields (textfield, email, number, tel).
@@ -203,3 +206,3 @@ - `managedFile` – Renders a managed file input field.
 - `textarea` – Renders a textarea field.
-- `wysiwyg` – Renders for all wysiwyg (for exemple on help / Description / more).
+- `wysiwyg` – Renders all wysiwyg content (for example: help / description / more / markup).
 - `help` – Renders the help block associated with a field.
@@ -214,11 +217,5 @@ - `description` – Renders the description text of a field.
 - `markup` – Renders static markup elements (HTML/text content).
-- `fieldById` – Allows overriding the renderer for a specific field using its ID.
 
 
-Warning :
 
-When building (for exemple) a custom Input component (e.g. a field with an action),
-className props are not automatically forwarded. They must be explicitly passed down (or not, if you do not want).
-Additionally, to properly integrate user input into the form, the component must be connected to React Hook Form (RHF).
-
 Exemple :
@@ -236,6 +233,5 @@
     const correctElementsSource = await getWebform()
-    const [isSubmitted, setIsSubmitted] = useState(false)
 
     const handleSubmit = async (formData: Record<any, string>) => {
-        setIsSubmitted(true)
+        console.log(formData)
     }
@@ -245,5 +241,2 @@
       input: CustomInput,
-      fieldById: {
-        firstname: CustomFirstNameInput,
-      },
     }
@@ -255,3 +248,2 @@
             onSubmit={handleSubmit}
-            isSubmitted={isSubmitted}
             components={customComponents}
@@ -263,47 +255,52 @@ />
 
-And here the exemple of the CustomInput (using RHF) :
+Here is an example of a custom Input component.
+You can import the components constant from the package (which contains the default components) and reuse it while passing your own props:
 ```js
-import React, { HTMLInputTypeAttribute } from 'react'
-import { TFieldWebformObjCustom } from 'react-drupal-webform/src/lib/types/components/fieldWebformObjCustom'
+import React, { useRef } from 'react'
+import styles from './customInput.module.scss'
 import { useController, useFormContext } from 'react-hook-form'
 import cn from 'classnames'
-import styles from './custom.module.scss'
+import { components } from '../../../../packages/react-drupal-webform/src/lib/const/const.form'
+import { InputProps } from '../../../../packages/react-drupal-webform/src/lib/types/components/input'
 
-const CustomInput = (props: TFieldWebformObjCustom) => {
-  const { fieldKey, field } = props
+const CustomInput = (props: InputProps) => {
+  const { field, fieldKey } = props
 
   const { control } = useFormContext()
-  const controller = useController<any>({ name: fieldKey, control })
-  const { field: fieldController, fieldState } = controller
 
-  const getFieldType: HTMLInputTypeAttribute = (() => {
-    switch (field?.['#type']) {
-      case 'textfield':
-        return 'text'
-      case 'date':
-        return 'date'
-      case 'number':
-        return 'number'
-      case 'email':
-        return 'email'
-      case 'tel':
-        return 'tel'
-      default:
-        return 'text'
-    }
-  })()
+  const {
+    field: fieldController,
+    fieldState: { error },
+  } = useController<any>({
+    name: fieldKey,
+    control,
+  })
 
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleClear = () => {
+    fieldController.onChange('')
+    inputRef.current?.focus()
+  }
+
   return (
-    <input
-      id={fieldKey}
-      className={cn(styles.customInputs, { [styles.error]: fieldState?.error })}
-      name={fieldController.name}
-      minLength={field?.['#minlength']}
-      maxLength={field?.['#maxlength']}
-      placeholder={field?.['#placeholder']}
-      type={getFieldType}
-      onChange={(e) => fieldController.onChange(e)}
-      value={fieldController.value ?? ''}
-      required={field?.['#required']}
-    />
+    <div
+       className={cn(styles.inputCustomContainer, {
+           [styles.error]: error,
+       })}
+    >
+      <components.Input
+        {...props}
+        className={styles.inputCustom}
+        innerRef={(el) => {
+            inputRef.current = el
+        }}
+      />
+      <button 
+        className={styles.clearButton}
+        type="button"
+        aria-label={`clear the field "${field?.['#title']}"`}
+        onClick={handleClear}
+      />
+    </div>
   )
@@ -315,72 +312,11 @@ }
 
-<h3 style="color:#1f3a8a;">Props – classNames</h3>
+<h3 style="color:#1f3a8a;">Props – classNamesPrefix</h3>
 
-The classNames are only available for default css class and scss module class. 
-It may not work with tailwind, styled components, MUI, ect...
+The classNamePrefix prop allows you to apply a prefix to all generated CSS class names of the webform elements.
+When a prefix is provided, it is automatically prepended to every internal “base” (empty) class name used by the webform.
+Without a classNamePrefix, these base classnames are not rendered by default, meaning no automatic classes are applied unless explicitly defined.
+This behavior does not apply to wysiwyg content, which always keeps its own classes and is not affected by classNamePrefix.
 
-`TYPE` - TWebformClassNames
+`TYPE` - string
 
-
-- `wrappers` – Class names applied to field wrapper containers.
-  - `base` – Base wrapper class applied to all fields.
-  - `byCategory` – Wrapper classes based on field category.
-    - `textInput` – Wrapper class for text-based inputs.
-    - `selectionInput` – Wrapper class for selection inputs (select, radios, checkboxes).
-    - `booleanInput` – Wrapper class for boolean inputs (checkbox).
-  - `byFieldType` – Wrapper classes mapped to specific Drupal field types.
-
-- `general` – Class names for extra field elements.
-  - `fieldLabel` – Class applied to field labels.
-  - `fieldDescription` – Class applied to field descriptions.
-  - `fieldManagedFileInfo` – Class applied to managed file information blocks.
-  - `fieldMore` – Class applied to “more information” blocks.
-  - `fieldHelp` – Class applied to help blocks.
-  - `fieldWysiwyg` – Class applied to WYSIWYG content.
-
-- `states` – Class names reflecting field states.
-  - `fieldError` – Class applied to fields in an error state.
-  - `fieldErrorMessage` – Class applied to validation error messages.
-
-- `fields` – Class names applied to specific field types.
-  - `textInputs` – Class names for text-based inputs.
-    - `base` – Base class applied to all text inputs.
-    - `types` – Classes mapped to specific input types (`text`, `email`, `number`, `tel`, `textarea`, `textfield`).
-  - `checkboxes` – Class names for checkbox groups.
-    - `groupWrapper` – Wrapper class for the checkbox group.
-    - `itemWrapper` – Wrapper class for a single checkbox item.
-    - `input` – Class applied to the checkbox input element.
-    - `label` – Class applied to the checkbox label.
-  - `checkbox` – Class names for a single checkbox field.
-    - `itemWrapper` – Wrapper class for the checkbox item.
-    - `input` – Class applied to the checkbox input element.
-    - `label` – Class applied to the checkbox label.
-  - `radios` – Class names for radio button groups.
-    - `groupWrapper` – Wrapper class for the radio group.
-    - `itemWrapper` – Wrapper class for a single radio item.
-    - `input` – Class applied to the radio input element.
-    - `label` – Class applied to the radio label.
-  - `select` – Class names for select fields.
-    - `select` – Class applied to the select element.
-    - `option` – Class applied to select options.
-  - `managedFile` – Class names for managed file fields.
-    - `input` – Class applied to the file input element.
-  - `markup` – Class names for markup-only elements.
-    - `base` – Base class applied to markup content.
-  - `layout` – Class names for layout components.
-    - `wrapper` – Wrapper class for the layout container.
-    - `title` – Class applied to the layout title.
-    - `inner` – Class applied to the layout inner content.
-
-- `multiStep` – Class names for multi-step form components.
-  - `stepperContainer` – Wrapper class for the stepper component.
-  - `stepperHeader` – Class applied to the stepper header.
-  - `stepperTitle` – Class applied to the stepper title.
-  - `stepperCounter` – Class applied to the step counter.
-  - `stepperProgressBarContainer` – Wrapper class for the progress bar container.
-  - `stepperProgressBar` – Class applied to the progress bar itself.
-  - `actionsContainer` – Wrapper class for step navigation actions.
-  - `actionsButtons` – Wrapper class for action buttons.
-  - `actionsButtonPrev` – Class applied to the “previous” button.
-  - `actionsButtonsNext` – Class applied to the “next” button.
-
 Example : 
@@ -397,25 +333,12 @@
     const elementsSource = YAML.parse(webformData.elementsSource)
-    const [isSubmitted, setIsSubmitted] = useState(false)
 
     const handleSubmit = async (formData: Record<any, string>) => {
-        setIsSubmitted(true)
+        console.log(formData)
     }
     
-    const customClassNames = {
-      general: {
-        fieldDescription: styles.fieldDescription
-      },
-      fields: {
-        checkboxes: {
-          label: styles.labelCheckboxes
-        }
-      }
-    }
-    
     return (
         <Webform 
             elementsSource={elementsSource}
-            isSubmitted={isSubmitted}
             onSubmit={handleSubmit}
-            classNames={customClassNames}
+            classNamePrefix={'prefix'}
         />
@@ -426,4 +349,44 @@ );
 
-<h3 style="color:#1f3a8a;">Props – defaultFieldStateMessages</h3>
+Here is an example of the class names generated on a fieldContainer, with the prefix used in the previous example (with unstyled: true):
+```
+<div
+  class="prefix-webform-fieldContainer"
+  data-type="email"
+  data-group-type="input"
+  data-component="fieldContainer"
+>
+  <label
+    for="type_a_test_email"
+    class="prefix-webform-title"
+    data-component="title"
+  >
+    Type a test email
+  </label>
 
+  <input
+    id="type_a_test_email"
+    class="prefix-webform-input"
+    type="email"
+    name="type_a_test_email"
+    value=""
+    aria-describedby="description-type_a_test_email"
+    placeholder='For exemple "[e-mail]"'
+    minlength="4"
+    maxlength="20"
+    data-component="Input"
+  />
+
+  <div
+    id="description-type_a_test_email"
+    class="prefix-webform-wysiwyg prefix-webform-description"
+    data-component="description"
+  >
+    <p>This field have a placeholder.</p>
+  </div>
+</div>
+
+```
+
+<h3 style="color:#1f3a8a;">Props – rhfDefaultFieldStateMessages</h3>
+
 `TYPE` - TWebformStateMessages
@@ -444,2 +407,3 @@
 
+Example :
 
@@ -454,6 +418,5 @@ ```js
   const elementsSource = YAML.parse(webformData.elementsSource)
-  const [isSubmitted, setIsSubmitted] = useState(false)
 
   const handleSubmit = async (formData: Record<any, string>) => {
-        setIsSubmitted(true)
+        console.log(formData)
     }
@@ -464,3 +427,3 @@
         requiredMessages: {
-          textfield: 'Field "{fieldName}" is required. (custom message)',
+          textfield: (props) => `Field "${props.field["#title"]}" is required. (custom message)`,
         },
@@ -473,5 +436,4 @@ }
             elementsSource={elementsSource}
-            isSubmitted={isSubmitted}
             onSubmit={handleSubmit}
-            defaultFieldStateMessages={defaultFieldsStateMessages}
+            rhfDefaultFieldStateMessages={defaultFieldsStateMessages}
         />
@@ -482,37 +444,27 @@ );
 
-Example :
+<h3 style="color:#1f3a8a;">Props – rhfValidationMode</h3>
 
-```js
-import React, {useState} from 'react';
-import Webform from 'react-drupal-webform';
-import { getWebform } from './api'
+`TYPE` - 'all' | 'onChange' | 'onBlur' | 'onTouch' | 'onSubmit' | 'all'
 
-export default async function App() {
-    const webformData = await getWebform()
-    const elementsSource = YAML.parse(webformData.elementsSource)
-    const [isSubmitted, setIsSubmitted] = useState(false)
-  
-    const handleSubmit = async (formData: Record<any, string>) => {
-        setIsSubmitted(true)
-    }
-    
-    const defaultFieldsStateMessages = {
-      fields: {
-        requiredMessages: {
-          textfield: 'Field "{fieldName}" is required. (custom message)',
-        },
-      }
-    };
-    
-    return (
-        <Webform 
-            elementsSource={elementsSource}
-            isSubmitted={isSubmitted}
-            onSubmit={handleSubmit}
-            defaultFieldStateMessages={defaultFieldsStateMessages}
-        />
-    );
-}
-```
+  `DEFAULT` - 'all'
 
+The rhfValidationMode prop defines when validation is triggered in React Hook Form, and defaults to 'all'.
+
+
+<h3 style="color:#1f3a8a;">Props – validationEngine</h3>
+
+`TYPE` - 'rhf' | 'html'
+
+`DEFAULT` - 'html'
+
+Defines which validation system is used, and by default it follows the native HTML validation behavior as implemented in Drupal.
+
+<h3 style="color:#1f3a8a;">Props – unstyled</h3>
+
+`TYPE` - boolean
+
+`DEFAULT` - false
+
+The unstyled prop disables all default, built-in form classes, allowing you to start styling the form completely from scratch.
+
 <h3 style="color:#1f3a8a;">Props – includeInactiveFieldsInSubmit</h3>
@@ -522,6 +474,9 @@
 
+`DEFAULT` - false
+
+
 Include fields that inactive (not input hidden !) on the final submit payload.
 
 
-<h3 style="color:#1f3a8a;">Props – customValidators</h3>
+<h3 style="color:#1f3a8a;">Props – rhfCustomValidators</h3>
 
@@ -545,7 +500,6 @@ `TYPE` - TWebformCustomValidators
     const elementsSource = YAML.parse(webformData.elementsSource)
-    const [isSubmitted, setIsSubmitted] = useState(false)
   
 
     const handleSubmit = async (formData: Record<any, string>) => {
-        setIsSubmitted(true)
+        console.log(formData)
     }
@@ -567,3 +521,2 @@
             elementsSource={elementsSource}
-            isSubmitted={isSubmitted}
             onSubmit={handleSubmit}
@@ -570,0 +523,0 @@ customValidators={customValidator}

src/components/form/fields/field.module.scss

@@ -20,5 +20,17 @@ .input, .select  {
 
+.input[type='date'] {
+  font-family: inherit
+}
+
+.input[readonly] {
+  background: lightgray;
+}
+
+.select {
+  padding-right: .5rem;
+}
+
 .textarea {
   padding: 1rem;
-  font-family: inherit !important;
+  font-family: inherit;
   font-size: var(--font-size-s);
@@ -79,4 +91,9 @@ border: 1px solid var(--input-border-color);
   font-size: var(--font-size-s);
-  .labelCheckbox {
-    cursor: pointer;
+}
+.checkboxLabel {
+  cursor: pointer;
+  font-weight: 400;
+  margin-bottom: 0;
+  &:hover {
+    font-weight: 700;
   }
@@ -105,2 +122,8 @@ }
 
+.fieldWrapperCheckbox {
+  display: flex;
+  flex-direction: row;
+  gap: .5rem
+}
+
 .checkboxLabel {
@@ -107,0 +130,0 @@ cursor: pointer;

src/components/for...-components/wysiwyg/wysiwyg.module.scss

@@ -11,2 +11,2 @@ .wysiwyg {
   }
-}
+}

src/components/for...gedFileInfo/managedFileInfo.module.scss

 .managedFileInfo {
+  color: var(--color-text-light);
   font-size: var(--font-size-xs);
@@ -3,0 +4,0 @@ .label {

src/components/for...ds-sub-components/more/more.module.scss

@@ -5,6 +5,12 @@ .more {
     border: none;
+    color: var(--primary-color);
+    .buttonLabel {
+      text-decoration-line: underline;
+      text-decoration-style: dotted;
+    }
     &::before {
       content: "► ";
-      font-size: 0.8em;
+      font-size: 0.8rem;
       cursor: pointer;
+      color: var(--color-text);
     }
@@ -14,2 +20,3 @@ &.opened {
         content: "▼ ";
+        color: var(--color-text);
       }
@@ -20,1 +27,5 @@ }
 
+.moreWysiwyg {
+  color: var(--color-text-light);
+  font-size: var(--font-size-xs);
+}

dist/components/form/fields/chexkboxes.d.ts

-import { TFieldWebformObj } from '../../../lib/types/components/field';
-export declare const renderCheckboxes: (props: TFieldWebformObj) => import("react/jsx-runtime").JSX.Element;

dist/components/form/fields/chexkboxes.js

-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import styles from './field.module.scss';
-import { useController, useFormContext } from 'react-hook-form';
-import { handleChangeOptionsCheckboxes } from '../../../lib/functions/webform_fields_functions/webform_fields_functions';
-import Wrapper from './fields-sub-components/wrapper';
-export const renderCheckboxes = (props) => {
-    const { fieldKey, field, components, classNames, onBlur } = props;
-    const { control } = useFormContext();
-    if (!field?.['#options'])
-        return null;
-    const optionsObj = Object.entries(field['#options']);
-    const CustomCheckboxes = components?.fieldById?.[fieldKey] ?? components?.checkboxes;
-    const controller = useController({ name: fieldKey, control });
-    const { field: fieldController, fieldState } = controller;
-    return (_jsx(Wrapper, { field: field, classNames: classNames, classNameFieldName: "fieldCheckboxes", stateError: fieldState?.error, components: components, fieldKey: fieldKey, wrapperElement: "fieldset", innerPropsLabelComponent: { wrapperElement: 'legend' }, children: CustomCheckboxes ? (_jsx(CustomCheckboxes, { ...props })) : (_jsx("div", { className: cn(classNames.fields.checkboxes?.groupWrapper, styles.checkboxes), children: optionsObj.map(([optionKey, optionValue], i) => {
-                const checked = Array.isArray(fieldController.value)
-                    ? fieldController.value.includes(optionKey)
-                    : false;
-                const correctOptionKey = optionKey.trim();
-                return (_jsxs("div", { className: cn(classNames.fields.checkboxes?.itemWrapper, styles.checkbox), children: [_jsx("input", { id: `checkboxes-${correctOptionKey}-${i}`, className: cn(classNames.fields.checkboxes?.input, styles.field), name: fieldController.name, type: "checkbox", value: optionKey, checked: checked, onChange: (e) => handleChangeOptionsCheckboxes(e.target.value, e.target.checked, fieldController), onBlur: onBlur }), _jsx("label", { htmlFor: `checkboxes-${correctOptionKey}-${i}`, className: cn(classNames.fields.checkboxes?.label, styles.labelCheckbox), children: optionValue })] }, optionKey));
-            }) })) }, fieldKey));
-};

dist/components/fo...cial-components/fieldWysiwygCustom.d.ts

-import { ReactNode } from 'react';
-import { IWysiwygProps } from "../../../../lib/types/components/wysiwyg";
-type TFieldWysiwygCustom = IWysiwygProps & {
-    children: ReactNode;
-};
-declare const FieldWysiwygCustom: (props: TFieldWysiwygCustom) => import("react/jsx-runtime").JSX.Element;
-export type { TFieldWysiwygCustom };
-export default FieldWysiwygCustom;

dist/components/fo...pecial-components/fieldWysiwygCustom.js

-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-const FieldWysiwygCustom = (props) => {
-    return _jsx(_Fragment, { children: props.children });
-};
-export default FieldWysiwygCustom;

dist/components/fo.../fields-sub-components/label/label.d.ts

-import { ILabelWebformProps } from '../../../../../lib/types/components/label';
-declare const Label: ({ field, innerProps, innerPropsHelpComponent, custom_component_help, wrapperElement, }: ILabelWebformProps) => import("react/jsx-runtime").JSX.Element;
-export default Label;

dist/components/fo...ds/fields-sub-components/label/label.js

-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Help from '../help/help';
-import cn from 'classnames';
-import styles from './label.module.scss';
-const Label = ({ field, innerProps, innerPropsHelpComponent, custom_component_help, wrapperElement, }) => {
-    const CustomHelp = custom_component_help ?? Help;
-    const Element = wrapperElement ?? 'label';
-    const filteredInnerProps = Object.fromEntries(Object.entries(innerProps ?? {}).filter(([_, value]) => value !== '' && value !== undefined));
-    const { className, ...restInnerProps } = filteredInnerProps ?? {};
-    const isRequired = field?.['#required'];
-    const title = field?.['#title'];
-    return (_jsxs(Element, { className: cn(styles.label, className, {
-            [styles.isRequired]: isRequired,
-        }), ...restInnerProps, children: [title, ((innerPropsHelpComponent.helps?.help?.length ?? 0) > 0 ||
-                (innerPropsHelpComponent.helps?.processed_help_title?.length ?? 0) >
-                    0) && _jsx(CustomHelp, { ...innerPropsHelpComponent })] }));
-};
-export default Label;

dist/components/fo...-sub-components/label/label.module.scss

-.label {
-    font-size: var(--font-size-s);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-title);
-    margin-block-end: .5rem;
-    &.isRequired {
-      &::after {
-        content: "*";
-        color: var(--danger);
-        line-height: 1;
-        margin-inline: .15em;
-        vertical-align: text-top;
-        background: none;
-      }
-    }
-}

dist/components/fo...onents/layoutWrapper/layoutWrapper.d.ts

-import React from 'react';
-import { ILayoutWrapperProps } from '../../../../../lib/types/components/layoutWrapper';
-declare const _default: React.MemoExoticComponent<(props: ILayoutWrapperProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

dist/components/fo...mponents/layoutWrapper/layoutWrapper.js

-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import cn from 'classnames';
-import styles from './layoutWrapper.module.scss';
-const LayoutWrapper = (props) => {
-    const { field, classNames, components, children, fieldKey } = props;
-    const CustomLayout = components?.fieldById?.[fieldKey] ?? components?.layout;
-    if (CustomLayout) {
-        return _jsx(CustomLayout, { ...props, children: children });
-    }
-    return (_jsxs("div", { className: cn(styles.layoutWrapper, classNames.fields.layout.wrapper), children: [field['#title'] && (_jsx("div", { className: cn(styles.layoutTitle, classNames.fields.layout.title), children: field['#title'] })), _jsx("div", { className: cn(styles.layoutInner, classNames.fields.layout.inner), children: children })] }, fieldKey));
-};
-export default React.memo(LayoutWrapper);

dist/components/fo...layoutWrapper/layoutWrapper.module.scss

-.layoutInner {
-  display: flex;
-  gap: 1.5rem;
-  flex-direction: column;
-}
-
-.layoutTitle {
-  font-size: 1.75rem;
-  margin: 1rem 0 .75rem;
-}

dist/components/fo...rapper-sub-components/wrapperLabel.d.ts

-import React from 'react';
-import { TWrapperLabelWebformProps } from '../../../../../lib/types/components/wrapperLabel';
-declare const _default: React.MemoExoticComponent<({ components, innerPropsLabelComponent, classNames, field, fieldKey, }: TWrapperLabelWebformProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

dist/components/fo.../wrapper-sub-components/wrapperLabel.js

-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import Label from '../label/label';
-const WrapperLabel = ({ components, innerPropsLabelComponent, classNames, field, fieldKey, }) => {
-    const CustomLabel = components?.label ?? Label;
-    const props = innerPropsLabelComponent ?? {};
-    const { wrapperElement = 'label', innerProps } = props;
-    const { custom_component_help, innerPropsHelpComponent, ...rest } = props;
-    let computedInnerProps;
-    if (wrapperElement === 'label') {
-        computedInnerProps = {
-            ...(innerProps ?? {}),
-            className: innerProps?.className ?? classNames.general.fieldLabel,
-            htmlFor: innerProps?.htmlFor ?? fieldKey,
-        };
-        return (_jsx(CustomLabel, { ...rest, wrapperElement: "label", field: field, fieldKey: fieldKey, innerProps: computedInnerProps, custom_component_help: custom_component_help ?? components.help, innerPropsHelpComponent: innerPropsHelpComponent ?? {
-                innerProps: { className: classNames.general.fieldHelp },
-                helps: {
-                    help: field?.['#help'],
-                    processed_help_title: field?.['#help_title'],
-                },
-                components: components,
-            } }));
-    }
-    computedInnerProps = {
-        ...(innerProps ?? {}),
-        className: innerProps?.className ?? classNames.general.fieldLabel,
-    };
-    return (_jsx(CustomLabel, { ...rest, wrapperElement: "legend", fieldKey: fieldKey, innerProps: computedInnerProps, custom_component_help: custom_component_help ?? components.help, field: field, innerPropsHelpComponent: innerPropsHelpComponent ?? {
-            innerProps: { className: classNames.general.fieldHelp },
-            helps: {
-                help: field?.['#help'],
-                processed_help_title: field?.['#help_title'],
-            },
-            components: components,
-        } }));
-};
-export default React.memo(WrapperLabel);

dist/components/fo...elds/fields-sub-components/wrapper.d.ts

-import React from 'react';
-import { IWrapperWebformProps } from "../../../../lib/types/components/wrapper";
-declare const _default: React.MemoExoticComponent<(props: IWrapperWebformProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

dist/components/form/fields/fields-sub-components/wrapper.js

-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import cn from 'classnames';
-import styles from './wrapper.module.scss';
-import { getWrapperCategory } from "../../../../lib/functions/webform_fields_functions/webform_fields_functions";
-import WrapperLabel from "./wrapper-sub-components/wrapperLabel";
-import WrapperField from "./wrapper-sub-components/wrapperField";
-import WrapperDescription from "./wrapper-sub-components/wrapperDescription";
-import WrapperMore from "./wrapper-sub-components/wrapperMore";
-import WrapperManagedFileInfo from "./wrapper-sub-components/wrapperManagedFileInfo";
-const Wrapper = (props) => {
-    const { children, field, classNames, isLabel = true, stateError, components, fieldKey, innerPropsLabelComponent, wrapperElement = 'div', } = props;
-    const CustomWrapper = components?.wrapper;
-    if (CustomWrapper) {
-        return _jsx(CustomWrapper, { ...props, children: children });
-    }
-    const wrapperCategory = getWrapperCategory(field['#type']);
-    const WrapperElement = wrapperElement;
-    return (_jsxs(WrapperElement, { className: cn(...(field?.['#attributes']?.class ?? []), classNames.wrappers?.byFieldType?.[field['#type']], wrapperCategory
-            ? classNames.wrappers?.byCategory?.[wrapperCategory]
-            : undefined, classNames.wrappers?.base, {
-            [classNames.states.fieldError ?? '']: Boolean(stateError),
-        }, styles.fieldWrapper), children: [isLabel && field?.['#title'] && (_jsx(WrapperLabel, { components: components, field: field, classNames: classNames, fieldKey: fieldKey, innerPropsLabelComponent: innerPropsLabelComponent })), _jsx(WrapperField, { field: field, classNames: classNames, components: components, stateError: stateError, children: children }), (field?.['#description'] || field?.['#file_placeholder']) && (_jsx(WrapperDescription, { field: field, classNames: classNames, components: components })), field['#type'] === 'managed_file' && (_jsx(WrapperManagedFileInfo, { field: field, components: components })), field?.['#more'] && field?.['#more_title'] && (_jsx(WrapperMore, { fieldMore: field['#more'], fieldMoreTitle: field['#more_title'], classNames: classNames, components: components }))] }));
-};
-export default React.memo(Wrapper);

dist/components/fo...elds-sub-components/wrapper.module.scss

-.fieldWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-  border: none;
-}
-
-.prefixSuffixContainer {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-  .fieldContainer {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-    min-width: 0;
-    flex: 1;
-  }
-}
-
-.wysiwyg {
-  color: var(--color-text-light);
-  font-size: var(--font-size-xs);
-}
-

dist/lib/types/component-list.d.ts

-import { ComponentType } from 'react';
-import { TFieldWebformObj } from './components/field';
-import { IWysiwygProps } from './components/wysiwyg';
-import { IErrorMessageWebformProps } from './components/errorMessage';
-export type TWebformComponents = {
-    Action: ComponentType<TFieldWebformObj>;
-    Checkbox: ComponentType<TFieldWebformObj>;
-    Checkboxes: ComponentType<TFieldWebformObj>;
-    Hidden: ComponentType<TFieldWebformObj>;
-    Input: ComponentType<TFieldWebformObj>;
-    Layout: ComponentType<TFieldWebformObj>;
-    ManagedFile: ComponentType<TFieldWebformObj>;
-    Markup: ComponentType<TFieldWebformObj>;
-    Radios: ComponentType<TFieldWebformObj>;
-    Select: ComponentType<TFieldWebformObj>;
-    Textarea: ComponentType<TFieldWebformObj>;
-    Wysiwyg: ComponentType<IWysiwygProps>;
-    ErrorFieldMessage: ComponentType<IErrorMessageWebformProps>;
-};

dist/lib/types/component-list.js

-export {};

dist/lib/types/form.d.d.ts

-import { AnySchema } from 'yup';
-import React from 'react';
-import { ILabelWebformProps } from './components/label';
-import { TDrupal_FieldType, TDrupalNonValueFieldType, TDrupalValueFieldType, TElementSource, TFieldWebformObj } from './components/field';
-import { IWrapperWebformProps } from './components/wrapper';
-import { IErrorMessageWebformProps } from './components/errorMessage';
-import { TFieldWebformObjCustom } from './components/fieldWebformObjCustom';
-import { IWysiwygProps } from './components/wysiwyg';
-import { IHelpProps } from './components/help';
-import { IDescriptionWebformProps } from './components/description';
-import { IManagedFileInfoProps } from './components/managedFileInfo';
-import { IMoreProps } from './components/more';
-import { IManagedFilePreviewWebformProps } from './components/filePreview';
-import { IMultiStepActionsProps } from './components/multiStepActions';
-import { IMultiStepStepperProps } from './components/multiStepStepper';
-import { TFieldValidate } from './components/validate';
-import { ILayoutWrapperProps } from './components/layoutWrapper';
-import { TFieldRendererProps } from './components/fieldRenderer';
-import { IFormDefaultWebformProps } from './components/formDefault';
-import { TFormMultiStepProps } from './components/formMultiStep';
-export type TFileWithBase64 = {
-    name: string;
-    size: number;
-    type: string;
-    lastModified: number;
-    lastModifiedDate: number;
-    base64: string;
-};
-export type TFormatFieldMulti = 'key' | 'value' | 'keyValue' | 'booleanMap';
-export type TDefaultValue = string | number | boolean | Record<string, any>;
-export type TWebformDefaultFieldValues = {
-    [K in TDrupalValueFieldType]?: TDefaultValue;
-};
-export type TWrapperCategory = 'textInput' | 'selectionInput' | 'booleanInput';
-export type TWebformClassNameFields = {
-    fieldInput?: string;
-    fieldSelect?: string;
-    fieldCheckboxes?: string;
-    fieldRadio?: string;
-    fieldTextarea?: string;
-};
-export type TWebformClassNames = {
-    wrappers?: {
-        base?: string;
-        byCategory?: {
-            textInput?: string;
-            selectionInput?: string;
-            booleanInput?: string;
-        };
-        byFieldType?: Partial<Record<TDrupal_FieldType, string>>;
-    };
-    general?: {
-        fieldForm?: string;
-        fieldLabel?: string;
-        fieldDescription?: string;
-        fieldManagedFileInfo?: string;
-        fieldMore?: string;
-        fieldHelp?: string;
-        fieldWysiwyg?: string;
-    };
-    states?: {
-        fieldError?: string;
-        fieldErrorMessage?: string;
-    };
-    fields?: {
-        textInputs?: {
-            base?: string;
-            types?: Partial<Record<'text' | 'email' | 'number' | 'tel' | 'textarea' | 'textfield', string>>;
-        };
-        checkboxes?: {
-            groupWrapper?: string;
-            itemWrapper?: string;
-            input?: string;
-            label?: string;
-        };
-        checkbox?: {
-            itemWrapper?: string;
-            input?: string;
-            label?: string;
-        };
-        radios?: {
-            groupWrapper?: string;
-            itemWrapper?: string;
-            input?: string;
-            label?: string;
-        };
-        select?: {
-            select?: string;
-            option?: string;
-        };
-        managedFile?: {
-            input?: string;
-        };
-        markup?: {
-            base?: string;
-        };
-        layout?: {
-            wrapper?: string;
-            title?: string;
-            inner?: string;
-        };
-    };
-    multiStep?: {
-        stepperContainer?: string;
-        stepperHeader?: string;
-        stepperTitle?: string;
-        stepperCounter?: string;
-        stepperProgressBarContainer?: string;
-        stepperProgressBar?: string;
-        actionsContainer?: string;
-        actionsButtons?: string;
-        actionsButtonPrev?: string;
-        actionsButtonsNext?: string;
-    };
-};
-export type TWebformMessageResolver = (props: TElementSource) => string;
-export type TWebformMessageStateValue = string | TWebformMessageResolver;
-export type TWebformErrorMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType>;
-export type TWebformRequiredMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType>;
-export type TWebformLengthMessageFieldType = Exclude<TDrupal_FieldType, TDrupalNonValueFieldType | 'select' | 'managed_file'>;
-export type TWebformResolvedStateMessages = {
-    general: {
-        errorMessage: string;
-        requiredMessage: string;
-        minLengthMessage: string;
-        maxLengthMessage: string;
-    };
-    fields: {
-        errorMessages: {
-            [K in TWebformErrorMessageFieldType]: string;
-        };
-        requiredMessages: {
-            [K in TWebformRequiredMessageFieldType]: string;
-        };
-        minLengthMessage: {
-            [K in TWebformLengthMessageFieldType]: string;
-        };
-        maxLengthMessage: {
-            [K in TWebformLengthMessageFieldType]: string;
-        };
-    };
-};
-export type TWebformStateMessages = {
-    general?: {
-        errorMessage?: TWebformMessageStateValue;
-        requiredMessage?: TWebformMessageStateValue;
-        minLengthMessage?: TWebformMessageStateValue;
-        maxLengthMessage?: TWebformMessageStateValue;
-    };
-    fields?: {
-        errorMessages?: Partial<Record<TWebformErrorMessageFieldType, TWebformMessageStateValue>>;
-        requiredMessages?: Partial<Record<TWebformRequiredMessageFieldType, TWebformMessageStateValue>>;
-        minLengthMessages?: Partial<Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>>;
-        maxLengthMessages?: Partial<Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>>;
-    };
-};
-export type TWebformNormalizedStateMessages = {
-    general: {
-        errorMessage: TWebformMessageStateValue;
-        requiredMessage: TWebformMessageStateValue;
-        minLengthMessage: TWebformMessageStateValue;
-        maxLengthMessage: TWebformMessageStateValue;
-    };
-    fields: {
-        errorMessages: Record<TWebformErrorMessageFieldType, TWebformMessageStateValue>;
-        requiredMessages: Record<TWebformRequiredMessageFieldType, TWebformMessageStateValue>;
-        minLengthMessages: Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>;
-        maxLengthMessages: Record<TWebformLengthMessageFieldType, TWebformMessageStateValue>;
-    };
-};
-export type TWebformCustomElementFormProps = (IFormDefaultWebformProps & {
-    children: React.ReactNode;
-    onSubmit: () => void;
-}) | (TFormMultiStepProps & {
-    children: React.ReactNode;
-    onSubmit: () => void;
-});
-export type TWebformCustomComponents = {
-    label?: React.ComponentType<ILabelWebformProps>;
-    wrapper?: React.ComponentType<IWrapperWebformProps>;
-    errorFieldMessage?: React.ComponentType<IErrorMessageWebformProps>;
-    input?: React.ComponentType<TFieldWebformObjCustom>;
-    managedFile?: React.ComponentType<TFieldWebformObjCustom>;
-    managedFilePreview?: React.ComponentType<IManagedFilePreviewWebformProps>;
-    select?: React.ComponentType<TFieldWebformObjCustom>;
-    checkboxes?: React.ComponentType<TFieldWebformObjCustom>;
-    radios?: React.ComponentType<TFieldWebformObjCustom>;
-    textarea?: React.ComponentType<TFieldWebformObjCustom>;
-    checkbox?: React.ComponentType<TFieldWebformObjCustom>;
-    hidden?: React.ComponentType<TFieldWebformObjCustom>;
-    wysiwyg?: React.ComponentType<IWysiwygProps>;
-    help?: React.ComponentType<IHelpProps>;
-    description?: React.ComponentType<IDescriptionWebformProps>;
-    managedFileInfo?: React.ComponentType<IManagedFileInfoProps>;
-    more?: React.ComponentType<IMoreProps>;
-    multiStepActions?: React.ComponentType<IMultiStepActionsProps>;
-    multiStepStepper?: React.ComponentType<IMultiStepStepperProps>;
-    layout?: React.ComponentType<ILayoutWrapperProps>;
-    markup?: React.ComponentType<TFieldWebformObj>;
-    fieldById?: Record<string, React.ComponentType<TFieldRendererProps>>;
-    form?: React.ComponentType<TWebformCustomElementFormProps>;
-    confirmationView?: React.ComponentType<any>;
-};
-export type TWebformValidatorFactory = (ctx: TFieldValidate) => AnySchema | null | undefined;
-export type TWebformCustomValidators = {
-    byType?: Partial<Record<Exclude<TDrupal_FieldType, 'webform_markup' | 'webform_actions'>, TWebformValidatorFactory>>;
-    byId?: Partial<Record<string, TWebformValidatorFactory>>;
-};
-export type TWebform = {
-    elementsSource: Record<string, any>;
-    components?: TWebformCustomComponents;
-    validators?: any;
-    defaultFieldValues?: TWebformDefaultFieldValues;
-    customValidators?: TWebformCustomValidators;
-    classNames?: TWebformClassNames;
-    defaultFieldStateMessages?: TWebformStateMessages;
-    onSubmit: (_data: Record<string, any>) => void | Promise<any>;
-    includeInactiveFieldsInSubmit?: boolean;
-    isSubmitted: boolean;
-    showConfirmation?: boolean;
-};

dist/lib/types/form.d.js

-export {};

src/components/for...-sub-components/label/label.module.scss

-.label {
-    font-size: var(--font-size-s);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-title);
-    margin-block-end: .5rem;
-    &.isRequired {
-      &::after {
-        content: "*";
-        color: var(--danger);
-        line-height: 1;
-        margin-inline: .15em;
-        vertical-align: text-top;
-        background: none;
-      }
-    }
-}

src/components/for...layoutWrapper/layoutWrapper.module.scss

-.layoutInner {
-  display: flex;
-  gap: 1.5rem;
-  flex-direction: column;
-}
-
-.layoutTitle {
-  font-size: 1.75rem;
-  margin: 1rem 0 .75rem;
-}

src/components/for...elds-sub-components/wrapper.module.scss

-.fieldWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: .5rem;
-  border: none;
-}
-
-.prefixSuffixContainer {
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-  .fieldContainer {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-    min-width: 0;
-    flex: 1;
-  }
-}
-
-.wysiwyg {
-  color: var(--color-text-light);
-  font-size: var(--font-size-xs);
-}
-

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

229109

37.38%

Number of package files

278

59.77%

Lines of code

4053

52.08%

Worsened metrics

Dependency count

7

16.67%

Number of lines in readme file

505

-8.51%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  react-drupal-webform@./packages/react-drupal-webform/react-drupal-webform-v1.0.1-alpha.tgz