indec-it · maximilianoforlenza · Dec 26, 2025 · Dec 26, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Form builder",
   "main": "index.js",
   "private": false,

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -107,7 +107,7 @@ function Template(args) {
               <button
                 type="button"
                 onClick={submitForm}
-                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded hover:fb:bg-blue-700 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500"
+                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded fb:hover:bg-blue-700 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500"
               >
                 Click to validate form
               </button>

diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
@@ -19,7 +19,7 @@ function DatePicker({
   return (
     <div className="fb:flex fb:flex-col">
       <InputLabel label={label} form={form} field={field} warnings={warnings} disabled={disabled} />
-      <div className="fb:flex fb:flex-col sm:fb:flex-row fb:gap-2 sm:fb:gap-4">
+      <div className="fb:flex fb:flex-col fb:sm:flex-row fb:gap-2 fb:sm:gap-4">
         <DateTimePickerSelector
           type={dateType}
           label={isRange ? 'Fecha de inicio' : ''}

diff --git a/src/components/DatePicker/DatePicker.stories.js b/src/components/DatePicker/DatePicker.stories.js
@@ -28,7 +28,7 @@ function Template(args) {
               <button
                 type="button"
                 onClick={submitForm}
-                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded hover:fb:bg-blue-700 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500"
+                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded fb:hover:bg-blue-700 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500"
               >
                 Click to validate form
               </button>

diff --git a/src/components/DatePicker/DateTimePickerSelector/DatePickerSelector.js b/src/components/DatePicker/DateTimePickerSelector/DatePickerSelector.js
@@ -18,7 +18,7 @@ function DateTimePickerSelector({type, onChange, value, label, disabled, placeho
     locale,
     dateFormat: [dateTypes.DATE_WITH_HOUR, dateTypes.RANGE_WITH_HOUR].includes(type) ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy',
     className:
-      'fb:w-full fb:px-3 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:border-transparent disabled:fb:bg-gray-100 disabled:fb:cursor-not-allowed',
+      'fb:w-full fb:px-3 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:border-transparent fb:disabled:bg-gray-100 fb:disabled:cursor-not-allowed',
     wrapperClassName: 'fb:w-full',
     ...props
   };

diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
@@ -88,7 +88,7 @@ function FormBuilder({
                 name={section.name}
                 render={sectionHelpers =>
                   values?.[section.name]?.map((currentSection, index) => (
-                    <div key={currentSection.id} className="fb:mb-8">
+                    <div key={currentSection.id} id={`section-${currentSection.id}`} className="fb:mb-8">
                       <Header
                         components={components}
                         onView={() => handleShowSurvey(currentSection.id, true)}

diff --git a/src/components/FormBuilder/SectionHeader/ActionButtons/ActionButtons.js b/src/components/FormBuilder/SectionHeader/ActionButtons/ActionButtons.js
@@ -18,7 +18,7 @@ function ActionButtons({
         type="button"
         data-testid="read-only-button"
         onClick={onView}
-        className="fb:p-2 fb:rounded-full fb:text-yellow-600 hover:fb:bg-yellow-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-yellow-500 focus:fb:ring-offset-2"
+        className="fb:p-2 fb:rounded-full fb:text-yellow-600 fb:hover:bg-yellow-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-yellow-500 fb:focus:ring-offset-2"
         aria-label="View"
       >
         <EyeIcon />
@@ -32,7 +32,7 @@ function ActionButtons({
                   type="button"
                   data-testid="move-up-button"
                   onClick={onMoveUp}
-                  className="fb:p-2 fb:rounded-full fb:text-blue-600 hover:fb:bg-blue-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2"
+                  className="fb:p-2 fb:rounded-full fb:text-blue-600 fb:hover:bg-blue-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2"
                   aria-label="Move up"
                 >
                   <ArrowUpIcon />
@@ -43,7 +43,7 @@ function ActionButtons({
                   type="button"
                   data-testid="move-down-button"
                   onClick={onMoveDown}
-                  className="fb:p-2 fb:rounded-full fb:text-blue-600 hover:fb:bg-blue-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2"
+                  className="fb:p-2 fb:rounded-full fb:text-blue-600 fb:hover:bg-blue-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2"
                   aria-label="Move down"
                 >
                   <ArrowDownIcon />
@@ -56,7 +56,7 @@ function ActionButtons({
               type="button"
               data-testid="edit-button"
               onClick={onEdit}
-              className="fb:p-2 fb:rounded-full fb:text-blue-600 hover:fb:bg-blue-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2"
+              className="fb:p-2 fb:rounded-full fb:text-blue-600 fb:hover:bg-blue-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2"
               aria-label="Edit"
             >
               <EditIcon />
@@ -67,7 +67,7 @@ function ActionButtons({
               type="button"
               data-testid="delete-button"
               onClick={onDelete}
-              className="fb:p-2 fb:rounded-full fb:text-red-600 hover:fb:bg-red-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-red-500 focus:fb:ring-offset-2"
+              className="fb:p-2 fb:rounded-full fb:text-red-600 fb:hover:bg-red-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-red-500 fb:focus:ring-offset-2"
               aria-label="Delete"
             >
               <TrashIcon />

diff --git a/src/components/FormBuilder/useFormBuilder.js b/src/components/FormBuilder/useFormBuilder.js
@@ -19,6 +19,15 @@ const useFormBuilder = ({sections, initialValues, section}) => {
     setShowSurvey(sectionId);
     setReadOnlyMode(readOnly);
     setPosition(index);
+
+    if (!readOnly) {
+      setTimeout(() => {
+        const element = document.getElementById(`section-${sectionId}`);
+        if (element) {
+          element.scrollIntoView({behavior: 'smooth', block: 'start'});
+        }
+      }, 100);
+    }
   };
 
   const handleOpenModal = (modal, sectionId) => {
@@ -41,8 +50,16 @@ const useFormBuilder = ({sections, initialValues, section}) => {
     const newValues = values;
     const lastSection = getLastId(values[section.name]);
     const emptySection = buildQuestions(section)[section.name][0];
-    newValues[section.name].push({...emptySection, id: lastSection + 1});
+    const newId = lastSection + 1;
+    newValues[section.name].push({...emptySection, id: newId});
     setValues(newValues);
+
+    setTimeout(() => {
+      const element = document.getElementById(`section-${newId}`);
+      if (element) {
+        element.scrollIntoView({behavior: 'smooth', block: 'start'});
+      }
+    }, 100);
   };
 
   const transformedSection = useMemo(() => {

diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -25,14 +25,14 @@ function Modal({
       />
 
       <div className="fb:fixed fb:inset-0 fb:z-50 fb:overflow-y-auto">
-        <div className="fb:flex fb:min-h-full fb:items-center fb:justify-center fb:p-4 fb:text-center sm:fb:p-0">
-          <div className="fb:relative fb:transform fb:overflow-hidden fb:rounded-2xl fb:bg-white fb:px-6 fb:pb-6 fb:pt-8 fb:text-left fb:shadow-2xl fb:transition-all fb:duration-300 fb:ease-out fb:scale-100 fb:opacity-100 sm:fb:my-8 sm:fb:w-full sm:fb:max-w-lg sm:fb:p-8 fb:ring-1 fb:ring-gray-200">
+        <div className="fb:flex fb:min-h-full fb:items-center fb:justify-center fb:p-4 fb:text-center fb:sm:p-0">
+          <div className="fb:relative fb:transform fb:overflow-hidden fb:rounded-2xl fb:bg-white fb:px-6 fb:pb-6 fb:pt-8 fb:text-left fb:shadow-2xl fb:transition-all fb:duration-300 fb:ease-out fb:scale-100 fb:opacity-100 fb:sm:my-8 fb:sm:w-full fb:sm:max-w-lg fb:sm:p-8 fb:ring-1 fb:ring-gray-200">
             <div className="fb:absolute fb:right-0 fb:top-0 fb:pr-6 fb:pt-6">
               <button
                 type="button"
                 data-testid="close-button-icon"
                 onClick={onClose}
-                className="fb:rounded-full fb:bg-gray-100 fb:p-2 fb:text-gray-400 hover:fb:bg-gray-200 hover:fb:text-gray-600 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-colors fb:duration-200"
+                className="fb:rounded-full fb:bg-gray-100 fb:p-2 fb:text-gray-400 fb:hover:bg-gray-200 fb:hover:text-gray-600 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2 fb:transition-colors fb:duration-200"
               >
                 <span className="fb:sr-only">Close</span>
                 <CloseIcon />
@@ -43,12 +43,12 @@ function Modal({
               <div className="fb:text-gray-900">{children}</div>
             </div>
 
-            <div className="fb:mt-8 fb:flex fb:flex-col-reverse fb:gap-3 sm:fb:flex-row sm:fb:justify-end">
+            <div className="fb:mt-8 fb:flex fb:flex-col-reverse fb:gap-3 fb:sm:flex-row fb:sm:justify-end">
               <button
                 type="button"
                 data-testid="close-button"
                 onClick={onClose}
-                className="fb:inline-flex fb:justify-center fb:rounded-xl fb:border fb:border-gray-300 fb:bg-white fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-gray-700 fb:shadow-sm hover:fb:bg-gray-50 hover:fb:border-gray-400 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-all fb:duration-200 sm:fb:w-auto"
+                className="fb:inline-flex fb:justify-center fb:rounded-xl fb:border fb:border-gray-300 fb:bg-white fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-gray-700 fb:shadow-sm fb:hover:bg-gray-50 fb:hover:border-gray-400 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2 fb:transition-all fb:duration-200 fb:sm:w-auto"
               >
                 {cancelButtonLabel}
               </button>
@@ -57,7 +57,7 @@ function Modal({
                   type="button"
                   data-testid="accept-button"
                   onClick={() => onAccept(modal)}
-                  className="fb:inline-flex fb:justify-center fb:rounded-xl fb:bg-blue-600 fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-white fb:shadow-lg hover:fb:bg-blue-700 hover:fb:shadow-xl focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2 fb:transition-all fb:duration-200 fb:transform hover:fb:scale-105 sm:fb:w-auto"
+                  className="fb:inline-flex fb:justify-center fb:rounded-xl fb:bg-blue-600 fb:px-6 fb:py-3 fb:text-sm fb:font-medium fb:text-white fb:shadow-lg fb:hover:bg-blue-700 fb:hover:shadow-xl fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2 fb:transition-all fb:duration-200 fb:transform fb:hover:scale-105 fb:sm:w-auto"
                 >
                   {acceptButtonLabel}
                 </button>

diff --git a/src/components/NavigationButtons/NavigationButtons.js b/src/components/NavigationButtons/NavigationButtons.js
@@ -8,7 +8,7 @@ function NavigationButtons({onPrevious, disablePreviousButton = false, onAddNew,
         data-testid="back-button"
         onClick={onPrevious}
         disabled={disablePreviousButton}
-        className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md fb:text-gray-700 fb:bg-white hover:fb:bg-gray-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-offset-2 focus:fb:ring-blue-500 disabled:fb:opacity-50 disabled:fb:cursor-not-allowed"
+        className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md fb:text-gray-700 fb:bg-white fb:hover:bg-gray-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-offset-2 fb:focus:ring-blue-500 fb:disabled:opacity-50 fb:disabled:cursor-not-allowed"
       >
         <ArrowLeftIcon className="fb:w-5 fb:h-5 fb:mr-2" />
         Anterior
@@ -20,7 +20,7 @@ function NavigationButtons({onPrevious, disablePreviousButton = false, onAddNew,
               type="button"
               data-testid="add-new"
               onClick={onAddNew}
-              className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md fb:text-gray-700 fb:bg-white hover:fb:bg-gray-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-offset-2 focus:fb:ring-blue-500"
+              className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-gray-300 fb:rounded-md fb:text-gray-700 fb:bg-white fb:hover:bg-gray-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-offset-2 fb:focus:ring-blue-500"
             >
               <PlusIcon className="fb:w-5 fb:h-5 fb:mr-2" />
               Agregar nuevo
@@ -31,7 +31,7 @@ function NavigationButtons({onPrevious, disablePreviousButton = false, onAddNew,
               type="button"
               data-testid="interrupt-survey"
               onClick={onInterrupt}
-              className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-red-300 fb:rounded-md fb:text-red-700 fb:bg-white hover:fb:bg-red-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-offset-2 focus:fb:ring-red-500"
+              className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-red-300 fb:rounded-md fb:text-red-700 fb:bg-white fb:hover:bg-red-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-offset-2 fb:focus:ring-red-500"
             >
               <XIcon className="fb:w-5 fb:h-5 fb:mr-2" />
               Interrumpir encuesta
@@ -41,7 +41,7 @@ function NavigationButtons({onPrevious, disablePreviousButton = false, onAddNew,
       )}
       <button
         type="submit"
-        className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-transparent fb:rounded-md fb:text-white fb:bg-blue-600 hover:fb:bg-blue-700 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-offset-2 focus:fb:ring-blue-500"
+        className="fb:flex fb:items-center fb:justify-center fb:px-4 fb:py-2 fb:border fb:border-transparent fb:rounded-md fb:text-white fb:bg-blue-600 fb:hover:bg-blue-700 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-offset-2 fb:focus:ring-blue-500"
       >
         Siguiente
         <ArrowRightIcon className="fb:w-5 fb:h-5 fb:ml-2" />

diff --git a/src/components/QuestionBuilder/Wrapper.js b/src/components/QuestionBuilder/Wrapper.js
@@ -49,7 +49,7 @@ function Wrapper({
                         specifications: getSubQuestions(subQuestions)
                       })
                     }
-                    className="fb:p-2 fb:rounded-full fb:text-blue-600 hover:fb:bg-blue-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2"
+                    className="fb:p-2 fb:rounded-full fb:text-blue-600 fb:hover:bg-blue-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2"
                     aria-label="Add item"
                   >
                     <PlusCircleIcon />
@@ -59,7 +59,7 @@ function Wrapper({
                   <button
                     type="button"
                     onClick={() => helpers.remove(index)}
-                    className="fb:p-2 fb:rounded-full fb:text-red-600 hover:fb:bg-red-50 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-red-500 focus:fb:ring-offset-2"
+                    className="fb:p-2 fb:rounded-full fb:text-red-600 fb:hover:bg-red-50 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-red-500 fb:focus:ring-offset-2"
                     aria-label="Delete item"
                   >
                     <DeleteIcon />
@@ -76,7 +76,7 @@ function Wrapper({
   }
   if (subQuestions.length > 0 && options.length > 0 && !isMultiple) {
     Component = (
-      <div className="fb:flex fb:flex-col sm:fb:flex-row fb:gap-4">
+      <div className="fb:flex fb:flex-col fb:sm:flex-row fb:gap-4">
         {Component}
         <SubQuestions
           values={values}

diff --git a/src/components/Radio/MobileRadio/MobileRadio.js b/src/components/Radio/MobileRadio/MobileRadio.js
@@ -14,12 +14,12 @@ function MobileRadio({options, field, disabled = false, label, form, warnings =
             disabled={disabled}
             className={`fb:px-4 fb:py-2 fb:text-sm fb:font-medium fb:rounded-md fb:border fb:transition-colors fb:duration-200 ${
               option.value === field.value
-                ? 'fb:bg-blue-600 fb:text-white fb:border-blue-600 hover:fb:bg-blue-700'
-                : 'fb:bg-white fb:text-gray-700 fb:border-gray-300 hover:fb:bg-gray-50'
+                ? 'fb:bg-blue-600 fb:text-white fb:border-blue-600 fb:hover:bg-blue-700'
+                : 'fb:bg-white fb:text-gray-700 fb:border-gray-300 fb:hover:bg-gray-50'
             } ${
               disabled
                 ? 'fb:opacity-50 fb:cursor-not-allowed'
-                : 'fb:cursor-pointer focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500 focus:fb:ring-offset-2'
+                : 'fb:cursor-pointer fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500 fb:focus:ring-offset-2'
             }`}
             onClick={() => {
               form.setFieldValue(field.name, option.value === field.value ? '' : option.value);

diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -61,7 +61,7 @@ function Radio({options, field, disabled = false, label, form, warnings = {}}) {
               <button
                 type="button"
                 onClick={() => form.setFieldValue(field.name, '')}
-                className="fb:p-1 fb:text-red-600 hover:fb:text-red-800 hover:fb:bg-red-50 fb:rounded fb:transition-colors fb:duration-200"
+                className="fb:p-1 fb:text-red-600 fb:hover:text-red-800 fb:hover:bg-red-50 fb:rounded fb:transition-colors fb:duration-200"
                 data-testid={`clean-option-${index}`}
                 aria-label="Clear selection"
               >

diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
@@ -106,7 +106,7 @@ function Template(args) {
               <button
                 type="button"
                 onClick={submitForm}
-                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded hover:fb:bg-blue-700 focus:fb:outline-none focus:fb:ring-2 focus:fb:ring-blue-500"
+                className="fb:px-4 fb:py-2 fb:bg-blue-600 fb:text-white fb:rounded fb:hover:bg-blue-700 fb:focus:outline-none fb:focus:ring-2 fb:focus:ring-blue-500"
               >
                 Click to validate form
               </button>

diff --git a/src/components/RadioTable/RadioTable.js b/src/components/RadioTable/RadioTable.js
@@ -36,8 +36,8 @@ function RadioTable({options, label, form, field, disabled = false, warnings = {
       <InputLabel warnings={warnings} form={form} field={field} label={label} disabled={disabled} />
       {options.map(option => (
         <div key={option.id} className="fb:space-y-2">
-          <div className="fb:flex fb:flex-col sm:fb:flex-row sm:fb:space-x-4 fb:space-y-2 sm:fb:space-y-0">
-            <div className="fb:min-w-0 sm:fb:min-w-96 sm:fb:max-w-96 fb:overflow-hidden">
+          <div className="fb:flex fb:flex-col fb:sm:flex-row fb:sm:space-x-4 fb:space-y-2 fb:sm:space-y-0">
+            <div className="fb:min-w-0 fb:sm:min-w-96 fb:sm:max-w-96 fb:overflow-hidden">
               <p
                 className={`fb:text-sm fb:font-medium fb:whitespace-normal ${
                   disabled ? 'fb:opacity-50 fb:text-gray-400' : 'fb:text-gray-900'
@@ -92,7 +92,7 @@ function RadioTable({options, label, form, field, disabled = false, warnings = {
                 <button
                   type="button"
                   onClick={() => form.setFieldValue(`${field.name}.${option.name}`, undefined)}
-                  className="fb:p-1 fb:text-red-600 hover:fb:text-red-800 hover:fb:bg-red-50 fb:rounded fb:transition-colors fb:duration-200"
+                  className="fb:p-1 fb:text-red-600 fb:hover:text-red-800 fb:hover:bg-red-50 fb:rounded fb:transition-colors fb:duration-200"
                   data-testid={`clean-option-${option.id}`}
                   aria-label="Clear selection"
                 >