@akinon/akiform-builder 1.2.0 → 1.3.0

package/dist/esm/__tests__/akiform-builder.test.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useController } from '@akinon/akiform';
 import { akival } from '@akinon/akival';
@@ -19,13 +10,13 @@ describe('AkiformBuilder', () => {
     const mockOnSubmit = vi.fn();
     const mockOnReset = vi.fn();
     const mockOnValueChange = vi.fn();
-    const expandCollapsable = () => __awaiter(void 0, void 0, void 0, function* () {
+    const expandCollapsable = async () => {
         const user = userEvent.setup();
-        const expandIcons = (yield screen.findAllByRole('button')).filter(el => el.className.includes('akinon-collapse-expand-icon'));
+        const expandIcons = (await screen.findAllByRole('button')).filter(el => el.className.includes('akinon-collapse-expand-icon'));
         for (const expandIcon of expandIcons) {
-            yield user.click(expandIcon);
+            await user.click(expandIcon);
         }
-    });
+    };
     const defaultFields = [
         {
             key: 'name',
@@ -45,11 +36,11 @@ describe('AkiformBuilder', () => {
         vi.clearAllMocks();
     });
     describe('AkiformBuilder in uncontrolled mode', () => {
-        it('renders form fields correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders form fields correctly', async () => {
             const newDefaultFields = defaultFields.map((field, key) => (Object.assign(Object.assign({}, field), { help: `Description text ${key}`, labelDescription: `Label description text ${key}` })));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
-            }));
+            });
             for (const field of newDefaultFields) {
                 if (field.label) {
                     expect(screen.getByText(field.label)).toBeInTheDocument();
@@ -60,8 +51,8 @@ describe('AkiformBuilder', () => {
                 expect(screen.getByText(field.help)).toBeInTheDocument();
                 expect(screen.getByText(field.labelDescription)).toBeInTheDocument();
             }
-        }));
-        it('renders form fields correctly with row and column fields', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders form fields correctly with row and column fields', async () => {
             const newDefaultFields = [
                 {
                     type: 'row',
@@ -127,9 +118,9 @@ describe('AkiformBuilder', () => {
                     ]
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: newDefaultFields, onSubmit: mockOnSubmit }));
-            }));
+            });
             // Check fields
             expect(screen.getByLabelText('Test Field 1')).toBeInTheDocument();
             expect(screen.getByLabelText('Test Field 2')).toBeInTheDocument();
@@ -140,8 +131,8 @@ describe('AkiformBuilder', () => {
             // Check props
             expect(document.querySelector('.akinon-row-middle')).toBeInTheDocument();
             expect(document.querySelector('.akinon-col-24')).toBeInTheDocument();
-        }));
-        it('handles form with custom field and onChange', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with custom field and onChange', async () => {
             const CustomComponent = ({ field, control }) => {
                 const { field: controllerField } = useController({
                     name: field.key,
@@ -158,25 +149,25 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const onValueChangeMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit, onValueChange: onValueChangeMock }));
-            }));
+            });
             const customInput = screen.getByTestId('custom-input');
             expect(customInput).toBeInTheDocument();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
-                yield userEvent.type(customInput, 'test value');
-            }));
-            yield waitFor(() => {
+            await act(async () => {
+                await userEvent.type(customInput, 'test value');
+            });
+            await waitFor(() => {
                 expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
                     customField: 'test value'
                 }));
             });
-        }));
-        it('resets form when reset button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('resets form when reset button is clicked', async () => {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onReset: mockOnReset, showResetButton: true }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
@@ -184,82 +175,82 @@ describe('AkiformBuilder', () => {
                     target: { value: '30' }
                 });
                 fireEvent.click(screen.getByText('RESET'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(mockOnReset).toHaveBeenCalled();
                 expect(screen.getByLabelText('Name')).toHaveValue('');
                 expect(screen.getByLabelText('Age')).toHaveValue('');
             });
-        }));
-        it('exposes reset method through ref', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('exposes reset method through ref', async () => {
             const ref = React.createRef();
             const onResetMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit, onReset: onResetMock }));
-            }));
+            });
             // Fill in some values
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
-            }));
+            });
             // Call reset through ref
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
-            }));
+            });
             // Check if form is reset and onReset is called
             expect(screen.getByLabelText('Name')).toHaveValue('');
             expect(onResetMock).toHaveBeenCalled();
             // Test partial reset
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
                 fireEvent.change(screen.getByLabelText('Age'), {
                     target: { value: '30' }
                 });
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset({ name: 'Jane Doe' });
-            }));
+            });
             expect(screen.getByLabelText('Name')).toHaveValue('Jane Doe');
             expect(screen.getByLabelText('Age')).toHaveValue('30');
-        }));
-        it('calls onValueChange when form values change in uncontrolled mode', () => __awaiter(void 0, void 0, void 0, function* () {
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('calls onValueChange when form values change in uncontrolled mode', async () => {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({
                     name: 'John Doe'
                 }));
             });
-        }));
-        it('applies throttling in uncontrolled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('applies throttling in uncontrolled mode', async () => {
             vi.useFakeTimers();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
-            }));
+            });
             expect(mockOnValueChange).not.toHaveBeenCalled();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 vi.advanceTimersByTime(THROTTLE_DELAY);
-            }));
+            });
             expect(mockOnValueChange).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe' }));
             vi.useRealTimers();
-        }));
-        it('renders different field types correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders different field types correctly', async () => {
             const fields = [
                 {
                     key: 'name',
@@ -283,9 +274,9 @@ describe('AkiformBuilder', () => {
                 { key: 'birthdate', label: 'Birth Date', type: 'date' },
                 { key: 'bio', label: 'Biography', type: 'textarea' }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            }));
+            });
             expect(screen.getByPlaceholderText('Enter your name')).toHaveAttribute('type', 'text');
             expect(screen.getByText('Help text')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
@@ -294,8 +285,8 @@ describe('AkiformBuilder', () => {
             expect(screen.getByLabelText('Subscribe')).toHaveAttribute('type', 'checkbox');
             expect(screen.getByLabelText('Birth Date')).toBeInTheDocument();
             expect(screen.getByLabelText('Biography')).toBeInTheDocument();
-        }));
-        it('renders field array correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders field array correctly', async () => {
             const user = userEvent.setup();
             const fields = [
                 field()
@@ -315,18 +306,18 @@ describe('AkiformBuilder', () => {
                 ])
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            }));
+            });
             expect(screen.getByText('Add Addresses')).toBeInTheDocument();
-            yield user.click(screen.getByTestId('addresses-add-button'));
-            yield expandCollapsable();
+            await user.click(screen.getByTestId('addresses-add-button'));
+            await expandCollapsable();
             expect(screen.getAllByText('Street')).toHaveLength(1);
             expect(screen.getAllByText('City')).toHaveLength(1);
             expect(screen.getByText('Help text')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
-        }));
-        it('handles form with field array and nested validation', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with field array and nested validation', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -350,40 +341,40 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const onSubmitMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            }));
+            });
             // Add an item
-            yield user.click(screen.getByTestId('items-add-button'));
+            await user.click(screen.getByTestId('items-add-button'));
             // Try to submit without filling required fields
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(screen.getByText('An error occurred in here')).toBeInTheDocument();
                 expect(onSubmitMock).not.toHaveBeenCalled();
             });
-            yield expandCollapsable();
+            await expandCollapsable();
             // Fill in valid data
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 const nameInput = screen.getByRole('textbox', { name: /item name/i });
                 const quantityInput = screen.getByRole('spinbutton', {
                     name: /quantity/i
                 });
-                yield userEvent.type(nameInput, 'Test Item');
-                yield userEvent.type(quantityInput, '2');
-            }));
+                await userEvent.type(nameInput, 'Test Item');
+                await userEvent.type(quantityInput, '2');
+            });
             // Submit the form
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
                     items: [{ name: 'Test Item', quantity: 2 }]
                 }), expect.anything());
             });
-        }));
-        it('handles field array operations correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles field array operations correctly', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -404,25 +395,25 @@ describe('AkiformBuilder', () => {
                         } }),
                     React.createElement("div", { "data-testid": "form-values" }, JSON.stringify(formValues))));
             };
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(TestComponent, null));
-            }));
+            });
             // Add an item
-            yield user.click(screen.getByTestId('items-add-button'));
-            yield expandCollapsable();
+            await user.click(screen.getByTestId('items-add-button'));
+            await expandCollapsable();
             // Fill in the fields
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Item Name'), {
                     target: { value: 'Test Item' }
                 });
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Quantity'), {
                     target: { value: '5' }
                 });
-            }));
+            });
             // Wait for the form values to update
-            yield waitFor(() => {
+            await waitFor(() => {
                 const formValuesElement = screen.getByTestId('form-values');
                 const formValues = JSON.parse(formValuesElement.textContent || '{}');
                 expect(formValues).toEqual(expect.objectContaining({
@@ -430,24 +421,24 @@ describe('AkiformBuilder', () => {
                 }));
             });
             // Submit the form
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
+            });
             // Check the submitted values
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(mockOnSubmit).toHaveBeenCalledWith(expect.objectContaining({
                     items: [{ name: 'Test Item', quantity: 5 }]
                 }), expect.anything());
             });
-        }));
-        it('applies layout options correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('applies layout options correctly', async () => {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "horizontal", layoutOptions: { labelCol: { span: 8 }, wrapperCol: { span: 16 } } }));
-            }));
+            });
             const form = screen.getByTestId('akiform-builder');
             expect(form).toHaveClass('akinon-form-horizontal');
-        }));
-        it('conditionally renders and disables fields', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('conditionally renders and disables fields', async () => {
             const fields = [
                 { key: 'showField', label: 'Show Field', type: 'checkbox' },
                 {
@@ -464,21 +455,21 @@ describe('AkiformBuilder', () => {
                     config: { disabled: values => !values.enableField }
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            }));
+            });
             expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.click(screen.getByLabelText('Show Field'));
-            }));
+            });
             expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
             expect(screen.getByLabelText('Disableable Field')).toBeDisabled();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.click(screen.getByLabelText('Enable Field'));
-            }));
+            });
             expect(screen.getByLabelText('Disableable Field')).not.toBeDisabled();
-        }));
-        it('applies custom validation', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('applies custom validation', async () => {
             const fields = [
                 {
                     key: 'email',
@@ -487,40 +478,40 @@ describe('AkiformBuilder', () => {
                     validation: akival.string().email('Invalid email format')
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByRole('textbox', { name: /email/i }), {
                     target: { value: 'invalid-email' }
                 });
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(screen.getByText('Invalid email format')).toBeInTheDocument();
             });
-        }));
-        it('resets form using ref', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('resets form using ref', async () => {
             const ref = React.createRef();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { ref: ref, fields: defaultFields, onSubmit: mockOnSubmit }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
                 fireEvent.change(screen.getByLabelText('Age'), {
                     target: { value: '30' }
                 });
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 var _a;
                 (_a = ref.current) === null || _a === void 0 ? void 0 : _a.reset();
-            }));
+            });
             expect(screen.getByLabelText('Name')).toHaveValue('');
             expect(screen.getByLabelText('Age')).toHaveValue('');
-        }));
-        it('displays error states', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('displays error states', async () => {
             const fields = [
                 {
                     key: 'name',
@@ -529,22 +520,22 @@ describe('AkiformBuilder', () => {
                     validation: akival.string().required('Name is required')
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: mockOnSubmit }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(screen.getByText('Name is required')).toBeInTheDocument();
             });
-        }));
-        it('handles form submission', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form submission', async () => {
             const onSubmit = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: onSubmit }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
@@ -552,15 +543,15 @@ describe('AkiformBuilder', () => {
                     target: { value: '30' }
                 });
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
                     name: 'John Doe',
                     age: 30
                 }), expect.anything());
             });
-        }));
-        it('handles form submission with errors', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form submission with errors', async () => {
             const fields = [
                 {
                     key: 'name',
@@ -570,35 +561,35 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const onSubmit = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmit }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(screen.getByText('Name is required')).toBeInTheDocument();
                 expect(onSubmit).not.toHaveBeenCalled();
             });
-        }));
-        it('handles form with initial values', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with initial values', async () => {
             const initialValues = { name: 'John Doe', age: 30 };
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, initialValues: initialValues }));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(screen.getByLabelText('Name')).toHaveValue('John Doe');
                 expect(screen.getByLabelText('Age')).toHaveValue('30');
             });
-        }));
-        it('handles form with custom layout', () => __awaiter(void 0, void 0, void 0, function* () {
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with custom layout', async () => {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, layout: "vertical" }));
-            }));
+            });
             const form = screen.getByTestId('akiform-builder');
             expect(form).toHaveClass('akinon-form-vertical');
-        }));
-        it('renders custom field correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders custom field correctly', async () => {
             const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
             const fields = [
                 {
@@ -610,30 +601,30 @@ describe('AkiformBuilder', () => {
                     render: ({ field }) => (React.createElement(CustomComponent, { field: field }))
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
             expect(screen.getByText('Help text')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
-        }));
-        it('cleans up throttle timeout on unmount', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('cleans up throttle timeout on unmount', async () => {
             vi.useFakeTimers();
             const { unmount } = render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, onValueChange: mockOnValueChange }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'John Doe' }
                 });
-            }));
+            });
             unmount();
             // Advance timers and ensure onValueChange is not called
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 vi.advanceTimersByTime(THROTTLE_DELAY + 100);
-            }));
+            });
             expect(mockOnValueChange).not.toHaveBeenCalled();
             vi.useRealTimers();
-        }));
-        it('handles custom field with undefined render prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles custom field with undefined render prop', async () => {
             const fields = [
                 {
                     key: 'customField',
@@ -642,15 +633,15 @@ describe('AkiformBuilder', () => {
                     render: undefined
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             // The custom field should not be rendered, but the form should not crash
             expect(screen.queryByLabelText('Custom Field')).not.toBeInTheDocument();
             // The form should still be rendered
             expect(screen.getByTestId('akiform-builder')).toBeInTheDocument();
-        }));
-        it('renders custom submit and reset button props', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders custom submit and reset button props', async () => {
             const submitButtonProps = {
                 className: 'custom-submit-btn',
                 children: 'submit button'
@@ -659,9 +650,9 @@ describe('AkiformBuilder', () => {
                 className: 'custom-reset-btn',
                 children: 'reset button'
             };
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, showResetButton: true, onReset: mockOnReset, submitButtonProps: submitButtonProps, resetButtonProps: resetButtonProps }));
-            }));
+            });
             const submitButton = screen
                 .getByText(submitButtonProps.children)
                 .closest('button');
@@ -672,51 +663,51 @@ describe('AkiformBuilder', () => {
             expect(resetButton).toBeInTheDocument();
             expect(submitButton).toHaveClass(submitButtonProps.className);
             expect(resetButton).toHaveClass(resetButtonProps.className);
-            yield userEvent.click(resetButton);
+            await userEvent.click(resetButton);
             expect(mockOnReset).toHaveBeenCalled();
-            yield userEvent.click(submitButton);
+            await userEvent.click(submitButton);
             expect(mockOnSubmit).toHaveBeenCalled();
-        }));
+        });
     });
     describe('AkiformBuilder in controlled mode', () => {
-        it('uses provided values in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('uses provided values in controlled mode', async () => {
             const fields = [
                 { key: 'name', label: 'Name', type: 'text' },
                 { key: 'age', label: 'Age', type: 'number' }
             ];
             const controlledValues = { name: 'John Doe', age: 30 };
             const onChangeMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: controlledValues, onValueChange: onChangeMock }));
-            }));
+            });
             expect(screen.getByLabelText('Name')).toHaveValue('John Doe');
             expect(screen.getByLabelText('Age')).toHaveValue('30');
-        }));
-        it('calls onValueChange when form values change in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('calls onValueChange when form values change in controlled mode', async () => {
             const fields = [
                 { key: 'name', label: 'Name', type: 'text' }
             ];
             const onChangeMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { name: '' }, onValueChange: onChangeMock }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Name'), {
                     target: { value: 'Jane Doe' }
                 });
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'Jane Doe' }));
             });
-        }));
-        it('calls onValueChange immediately in controlled mode', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('calls onValueChange immediately in controlled mode', async () => {
             const onValueChangeMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: mockOnSubmit, controlled: true, values: { name: 'John Doe', age: 30 }, onValueChange: onValueChangeMock }));
-            }));
+            });
             expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({ name: 'John Doe', age: 30 }));
-        }));
-        it('handles conditional rendering and disabling of fields', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles conditional rendering and disabling of fields', async () => {
             const fields = [
                 { key: 'showField', label: 'Show Field', type: 'checkbox' },
                 {
@@ -734,25 +725,25 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const onValueChangeMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), controlled: true, values: { showField: false, enableField: false }, onValueChange: onValueChangeMock }));
-            }));
+            });
             expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
             expect(screen.getByLabelText('Disableable Field')).toBeDisabled();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.click(screen.getByLabelText('Show Field'));
                 fireEvent.click(screen.getByLabelText('Enable Field'));
-            }));
+            });
             expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
             expect(screen.getByLabelText('Disableable Field')).not.toBeDisabled();
             expect(onValueChangeMock).toHaveBeenCalledWith(expect.objectContaining({
                 showField: true,
                 enableField: true
             }));
-        }));
+        });
     });
     describe('FieldArrayComponent', () => {
-        it('renders field array with initial values', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders field array with initial values', async () => {
             const fields = [
                 {
                     key: 'items',
@@ -770,14 +761,14 @@ describe('AkiformBuilder', () => {
                     { name: 'Item 2', quantity: 2 }
                 ]
             };
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), initialValues: initialValues }));
-            }));
-            yield expandCollapsable();
+            });
+            await expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
             expect(screen.getAllByLabelText('Quantity')).toHaveLength(2);
-        }));
-        it('adds and removes field array items', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('adds and removes field array items', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -787,23 +778,23 @@ describe('AkiformBuilder', () => {
                     fields: [{ key: 'name', label: 'Item Name', type: 'text' }]
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             // Add an item
-            yield user.click(screen.getByTestId('items-add-button'));
-            yield expandCollapsable();
+            await user.click(screen.getByTestId('items-add-button'));
+            await expandCollapsable();
             expect(screen.getByLabelText('Item Name')).toBeInTheDocument();
             // Add another item
-            yield user.click(screen.getByLabelText('Add Items'));
-            yield expandCollapsable();
+            await user.click(screen.getByLabelText('Add Items'));
+            await expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(2);
             // Remove an item
-            yield user.click(screen.getAllByLabelText('Remove Items')[0]);
-            yield expandCollapsable();
+            await user.click(screen.getAllByLabelText('Remove Items')[0]);
+            await expandCollapsable();
             expect(screen.getAllByLabelText('Item Name')).toHaveLength(1);
-        }));
-        it('handles field array with conditional fields', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles field array with conditional fields', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -824,28 +815,28 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const { rerender } = render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            yield expandCollapsable();
+            await expandCollapsable();
             // Add an item
-            yield user.click(screen.getByLabelText('Add Items'));
-            yield expandCollapsable();
+            await user.click(screen.getByLabelText('Add Items'));
+            await expandCollapsable();
             // Description should not be visible initially
             expect(screen.queryByLabelText('Description')).not.toBeInTheDocument();
             // Enter a name longer than 5 characters
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByLabelText('Item Name'), {
                     target: { value: 'Long Name' }
                 });
-            }));
+            });
             // Force a re-render to trigger the conditional rendering
             rerender(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
             // Description should now be visible
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(screen.getByLabelText('Description')).toBeInTheDocument();
             });
-        }));
+        });
     });
     describe('Edge cases and uncovered scenarios', () => {
-        it('handles field array with no fields', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('handles field array with no fields', async () => {
             const fields = [
                 {
                     key: 'emptyFieldArray',
@@ -854,13 +845,13 @@ describe('AkiformBuilder', () => {
                     fields: []
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             // The field array should be rendered with an "Add" button
             expect(screen.getByTestId('emptyFieldArray-add-button')).toBeInTheDocument();
-        }));
-        it('handles form submission with field array', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form submission with field array', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -874,27 +865,27 @@ describe('AkiformBuilder', () => {
                 }
             ];
             const onSubmitMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            }));
+            });
             // Add two items
-            yield user.click(screen.getByTestId('items-add-button'));
-            yield user.click(screen.getByLabelText('Add Items'));
-            yield expandCollapsable();
+            await user.click(screen.getByTestId('items-add-button'));
+            await user.click(screen.getByLabelText('Add Items'));
+            await expandCollapsable();
             // Fill in the fields
             const itemNames = screen.getAllByLabelText('Item Name');
             const quantities = screen.getAllByLabelText('Quantity');
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(itemNames[0], { target: { value: 'Item 1' } });
                 fireEvent.change(quantities[0], { target: { value: '5' } });
                 fireEvent.change(itemNames[1], { target: { value: 'Item 2' } });
                 fireEvent.change(quantities[1], { target: { value: '10' } });
-            }));
+            });
             // Submit the form
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
                     items: [
                         { name: 'Item 1', quantity: 5 },
@@ -902,8 +893,8 @@ describe('AkiformBuilder', () => {
                     ]
                 }), expect.anything());
             });
-        }));
-        it('handles form with all field types', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with all field types', async () => {
             const fields = [
                 { key: 'text', label: 'Text', type: 'text' },
                 { key: 'number', label: 'Number', type: 'number' },
@@ -929,9 +920,9 @@ describe('AkiformBuilder', () => {
                     render: () => React.createElement("div", { "data-testid": "custom-field" }, "Custom Field")
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByLabelText('Text')).toBeInTheDocument();
             expect(screen.getByLabelText('Number')).toBeInTheDocument();
             expect(screen.getByLabelText('Select')).toBeInTheDocument();
@@ -940,27 +931,27 @@ describe('AkiformBuilder', () => {
             expect(screen.getByLabelText('Textarea')).toBeInTheDocument();
             expect(screen.getByTestId('fieldArray-add-button')).toBeInTheDocument(); // For field array
             expect(screen.getByTestId('custom-field')).toBeInTheDocument();
-        }));
-        it('handles form with inline layout', () => __awaiter(void 0, void 0, void 0, function* () {
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with inline layout', async () => {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), layout: "inline" }));
-            }));
+            });
             const form = screen.getByTestId('akiform-builder');
             expect(form).toHaveClass('akinon-form-inline');
-        }));
-        it('handles form reset with custom reset handler', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form reset with custom reset handler', async () => {
             const onResetMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: defaultFields, onSubmit: vi.fn(), onReset: onResetMock, showResetButton: true }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.click(screen.getByText('RESET'));
-            }));
+            });
             expect(onResetMock).toHaveBeenCalled();
-        }));
+        });
     });
     describe('AkiformBuilder with FieldBuilder', () => {
-        it('renders form fields created with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders form fields created with FieldBuilder', async () => {
             const fields = [
                 field()
                     .key('name')
@@ -993,9 +984,9 @@ describe('AkiformBuilder', () => {
                 field().key('birthdate').label('Birth Date').type('date').build(),
                 field().key('description').label('Description').type('textarea').build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByText('Name')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
             expect(screen.getByText('Help text')).toBeInTheDocument();
@@ -1004,8 +995,8 @@ describe('AkiformBuilder', () => {
             expect(screen.getByLabelText('Subscribe to newsletter')).toBeInTheDocument();
             expect(screen.getByLabelText('Birth Date')).toBeInTheDocument();
             expect(screen.getByLabelText('Description')).toBeInTheDocument();
-        }));
-        it('handles form submission with fields created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form submission with fields created by FieldBuilder', async () => {
             const fields = [
                 field()
                     .key('name')
@@ -1021,10 +1012,10 @@ describe('AkiformBuilder', () => {
                     .build()
             ];
             const onSubmitMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            }));
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            });
+            await act(async () => {
                 fireEvent.change(screen.getByRole('textbox', { name: /name/i }), {
                     target: { value: 'John Doe' }
                 });
@@ -1032,15 +1023,15 @@ describe('AkiformBuilder', () => {
                     target: { value: '25' }
                 });
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
                     name: 'John Doe',
                     age: 25
                 }), expect.anything());
             });
-        }));
-        it('handles form with custom field created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with custom field created by FieldBuilder', async () => {
             const CustomComponent = ({ field }) => (React.createElement("div", { "data-testid": "custom-field" }, field.label));
             const fields = [
                 field()
@@ -1052,14 +1043,14 @@ describe('AkiformBuilder', () => {
                     .render(({ field }) => React.createElement(CustomComponent, { field: field }))
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByTestId('custom-field')).toHaveTextContent('Custom Field');
             expect(screen.getByText('Help text')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
-        }));
-        it('handles form with field array created by FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form with field array created by FieldBuilder', async () => {
             const user = userEvent.setup();
             const fields = [
                 field()
@@ -1080,37 +1071,37 @@ describe('AkiformBuilder', () => {
                     .build()
             ];
             const onSubmitMock = vi.fn();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            }));
+            });
             // Add an address
-            yield user.click(screen.getByTestId('addresses-add-button'));
-            yield expandCollapsable();
+            await user.click(screen.getByTestId('addresses-add-button'));
+            await expandCollapsable();
             //Check rendered fields
             expect(screen.getByText('Street')).toBeInTheDocument();
             expect(screen.getByText('Help text')).toBeInTheDocument();
             expect(screen.getByText('Label description text')).toBeInTheDocument();
             expect(screen.getByLabelText('City')).toBeInTheDocument();
             // Fill in the fields
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.change(screen.getByPlaceholderText('Enter your street'), {
                     target: { value: '123 Main St' }
                 });
                 fireEvent.change(screen.getByLabelText('City'), {
                     target: { value: 'Anytown' }
                 });
-            }));
+            });
             // Submit the form
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByTestId('akiform-builder'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(onSubmitMock).toHaveBeenCalledWith(expect.objectContaining({
                     addresses: [{ street: '123 Main St', city: 'Anytown' }]
                 }), expect.anything());
             });
-        }));
-        it('handles conditional rendering with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles conditional rendering with FieldBuilder', async () => {
             const fields = [
                 field().key('showField').label('Show Field').type('checkbox').build(),
                 field()
@@ -1120,16 +1111,16 @@ describe('AkiformBuilder', () => {
                     .config({ visible: (values) => values.showField })
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.queryByLabelText('Conditional Field')).not.toBeInTheDocument();
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.click(screen.getByLabelText('Show Field'));
-            }));
+            });
             expect(screen.getByLabelText('Conditional Field')).toBeInTheDocument();
-        }));
-        it('handles disabled fields with FieldBuilder', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles disabled fields with FieldBuilder', async () => {
             const fields = [
                 field()
                     .key('disabledField')
@@ -1138,14 +1129,14 @@ describe('AkiformBuilder', () => {
                     .config({ disabled: true })
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByLabelText('Disabled Field')).toBeDisabled();
-        }));
+        });
     });
     describe('Accessibility features', () => {
-        it('renders form with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders form with proper ARIA attributes', async () => {
             const fields = [
                 {
                     key: 'name',
@@ -1155,9 +1146,9 @@ describe('AkiformBuilder', () => {
                 },
                 { key: 'age', label: 'Age', type: 'number' }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             const form = screen.getByRole('form');
             expect(form).toHaveAttribute('aria-label', 'Form');
             const nameInput = screen.getByRole('textbox', { name: /name/i });
@@ -1166,8 +1157,8 @@ describe('AkiformBuilder', () => {
             const ageInput = screen.getByRole('spinbutton', { name: /age/i });
             expect(ageInput).toHaveAttribute('aria-required', 'false');
             expect(ageInput).toHaveAttribute('aria-invalid', 'false');
-        }));
-        it('updates aria-invalid attribute when form is submitted with errors', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('updates aria-invalid attribute when form is submitted with errors', async () => {
             const fields = [
                 {
                     key: 'name',
@@ -1176,20 +1167,20 @@ describe('AkiformBuilder', () => {
                     validation: akival.string().required('Name is required')
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             const nameInput = screen.getByRole('textbox', { name: /name/i });
             expect(nameInput).toHaveAttribute('aria-invalid', 'false');
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.submit(screen.getByRole('form'));
-            }));
-            yield waitFor(() => {
+            });
+            await waitFor(() => {
                 expect(nameInput).toHaveAttribute('aria-invalid', 'true');
                 expect(screen.getByText('Name is required')).toBeInTheDocument();
             });
-        }));
-        it('renders field array with proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders field array with proper ARIA attributes', async () => {
             const user = userEvent.setup();
             const fields = [
                 {
@@ -1202,45 +1193,45 @@ describe('AkiformBuilder', () => {
                     ]
                 }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
-            yield user.click(screen.getByTestId('addresses-add-button'));
-            yield expandCollapsable();
+            });
+            await user.click(screen.getByTestId('addresses-add-button'));
+            await expandCollapsable();
             const fieldArrayGroup = screen.getByRole('group', { name: 'Addresses' });
             expect(fieldArrayGroup).toBeInTheDocument();
             const addButton = screen.getByLabelText('Add Addresses');
             expect(addButton).toBeInTheDocument();
-            yield user.click(addButton);
-            yield expandCollapsable();
+            await user.click(addButton);
+            await expandCollapsable();
             const removeButton = screen.getAllByLabelText('Remove Addresses')[1];
             expect(removeButton).toBeInTheDocument();
-        }));
-        it('supports keyboard navigation', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('supports keyboard navigation', async () => {
             const user = userEvent.setup();
             const fields = [
                 { key: 'name', label: 'Name', type: 'text' },
                 { key: 'age', label: 'Age', type: 'number' }
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn(), showResetButton: true }));
-            }));
+            });
             const nameInput = screen.getByLabelText('Name');
             const ageInput = screen.getByLabelText('Age');
             const submitButton = screen.getByRole('button', { name: 'SUBMIT' });
             const resetButton = screen.getByRole('button', { name: 'RESET' });
-            yield user.tab();
+            await user.tab();
             expect(document.activeElement).toBe(nameInput);
-            yield user.tab();
+            await user.tab();
             expect(document.activeElement).toBe(ageInput);
-            yield user.tab();
+            await user.tab();
             expect(document.activeElement).toBe(submitButton);
-            yield user.tab();
+            await user.tab();
             expect(document.activeElement).toBe(resetButton);
-        }));
+        });
     });
     describe('AkiformBuilder with sections', () => {
-        it('renders form with sections', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders form with sections', async () => {
             const fields = [
                 field()
                     .key('personalInfo')
@@ -1271,9 +1262,9 @@ describe('AkiformBuilder', () => {
                 ])
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByText('Personal Information')).toBeInTheDocument();
             expect(screen.getByText('Contact Information')).toBeInTheDocument();
             expect(screen.getByText('Name')).toBeInTheDocument();
@@ -1286,9 +1277,9 @@ describe('AkiformBuilder', () => {
             expect(screen.queryByLabelText('Email')).not.toBeInTheDocument();
             // Expand the second section
             const contactInfoSection = screen.getByText('Contact Information');
-            yield userEvent.click(contactInfoSection);
+            await userEvent.click(contactInfoSection);
             // Wait for the section to expand
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(screen.getByLabelText('Email')).toBeInTheDocument();
             });
             // Check if the Email field is now visible
@@ -1302,8 +1293,8 @@ describe('AkiformBuilder', () => {
             //   'Email input visibility:',
             //   window.getComputedStyle(emailInput).display
             // );
-        }));
-        it('handles form submission with sections', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles form submission with sections', async () => {
             const onSubmitMock = vi.fn();
             const fields = [
                 field()
@@ -1322,35 +1313,35 @@ describe('AkiformBuilder', () => {
                     .fields([field().key('email').label('Email').type('text').build()])
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: onSubmitMock }));
-            }));
+            });
             // Expand both sections
-            yield userEvent.click(screen.getByText('Personal Information'));
-            yield userEvent.click(screen.getByText('Contact Information'));
+            await userEvent.click(screen.getByText('Personal Information'));
+            await userEvent.click(screen.getByText('Contact Information'));
             // Fill in the form
-            yield userEvent.type(screen.getByLabelText('Name'), 'John Doe', {
+            await userEvent.type(screen.getByLabelText('Name'), 'John Doe', {
                 delay: 1
             });
-            yield userEvent.type(screen.getByLabelText('Age'), '30', { delay: 1 });
-            yield userEvent.type(screen.getByLabelText('Email'), 'john@example.com', {
+            await userEvent.type(screen.getByLabelText('Age'), '30', { delay: 1 });
+            await userEvent.type(screen.getByLabelText('Email'), 'john@example.com', {
                 delay: 1
             });
             // Wait for submit button to become interactable
             const submitButton = screen.getByRole('button', { name: /submit/i });
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(submitButton).toBeEnabled();
             });
             // Submit the form
-            yield userEvent.click(submitButton);
+            await userEvent.click(submitButton);
             // Validate submission
             expect(onSubmitMock).toHaveBeenCalledWith({
                 name: 'John Doe',
                 age: 30,
                 email: 'john@example.com'
             }, expect.anything());
-        }));
-        it('handles conditional rendering within sections', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('handles conditional rendering within sections', async () => {
             const fields = [
                 field()
                     .key('personalInfo')
@@ -1369,18 +1360,18 @@ describe('AkiformBuilder', () => {
                     .defaultExpanded(true)
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             expect(screen.getByLabelText('Name')).toBeInTheDocument();
             expect(screen.getByLabelText('Show Age')).toBeInTheDocument();
             expect(screen.queryByLabelText('Age')).not.toBeInTheDocument();
-            yield userEvent.click(screen.getByLabelText('Show Age'));
-            expect(yield screen.findByLabelText('Age')).toBeInTheDocument();
-        }));
+            await userEvent.click(screen.getByLabelText('Show Age'));
+            expect(await screen.findByLabelText('Age')).toBeInTheDocument();
+        });
     });
     describe('AkiformBuilder with tooltip', () => {
-        it('renders form field with tooltip as TooltipProps', () => __awaiter(void 0, void 0, void 0, function* () {
+        it('renders form field with tooltip as TooltipProps', async () => {
             const fields = [
                 field()
                     .key('name')
@@ -1389,21 +1380,21 @@ describe('AkiformBuilder', () => {
                     .tooltip({ title: 'Enter your full name', defaultOpen: true })
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             const tooltipTrigger = screen.getByLabelText('Name');
             expect(tooltipTrigger).toBeInTheDocument();
             // Simulate hovering over the field to show the tooltip
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.mouseEnter(tooltipTrigger);
-            }));
+            });
             // Wait for the tooltip to appear
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(screen.getByText('Enter your full name')).toBeInTheDocument();
             });
-        }));
-        it('renders form field with tooltip as string', () => __awaiter(void 0, void 0, void 0, function* () {
+        });
+        it('renders form field with tooltip as string', async () => {
             const fields = [
                 field()
                     .key('email')
@@ -1412,19 +1403,19 @@ describe('AkiformBuilder', () => {
                     .tooltip({ title: 'Enter your full name', defaultOpen: true })
                     .build()
             ];
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 render(React.createElement(AkiformBuilder, { fields: fields, onSubmit: vi.fn() }));
-            }));
+            });
             const tooltipTrigger = screen.getByLabelText('Email');
             expect(tooltipTrigger).toBeInTheDocument();
             // Simulate hovering over the field to show the tooltip
-            yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            await act(async () => {
                 fireEvent.mouseEnter(tooltipTrigger);
-            }));
+            });
             // Wait for the tooltip to appear
-            yield waitFor(() => {
+            await waitFor(() => {
                 expect(screen.getByText('Enter your full name')).toBeInTheDocument();
             });
-        }));
+        });
     });
 });