From 8e540a946f59bc24da0099c0a087e53e387c5671 Mon Sep 17 00:00:00 2001
From: Natalio Silveira Jr <ext.natalio.junior@gympass.com>
Date: Mon, 23 Dec 2024 14:31:01 -0300
Subject: [PATCH 1/3] feat: create aria label new field

---
 packages/yoga/src/Input/web/Input.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
index 8c8cf7b2ac..5bbc81abf7 100644
--- a/packages/yoga/src/Input/web/Input.jsx
+++ b/packages/yoga/src/Input/web/Input.jsx
@@ -101,6 +101,7 @@ const Input = React.forwardRef(
       full,
       helper,
       label,
+      ariaLabel,
       maxLength,
       readOnly,
       style,
@@ -135,6 +136,8 @@ const Input = React.forwardRef(
     const labelA11yId = includeAriaAttributes && a11yId && `${a11yId}-label`;
     let a11yFieldProps;
 
+    const labelAria = ariaLabel || label;
+
     if (includeAriaAttributes) {
       a11yFieldProps = a11yId
         ? {
@@ -142,7 +145,7 @@ const Input = React.forwardRef(
             ...(label && { 'aria-labelledby': labelA11yId }),
           }
         : {
-            ...(label && { 'aria-label': label }),
+            ...(labelAria && { 'aria-label': labelAria }),
           };
       a11yFieldProps['aria-invalid'] = !!error;
     } else {
@@ -186,6 +189,7 @@ const Input = React.forwardRef(
                 maxLength,
               }}
               ref={inputRef}
+              data-testid="input"
               value={value}
               onChange={onChange}
               {...a11yFieldProps}
@@ -259,6 +263,7 @@ Input.propTypes = {
   /** a helper text to be displayed below field */
   helper: string,
   label: string,
+  ariaLabel: string,
   /** maximum length (number of characters) of value */
   maxLength: number,
   readOnly: bool,
@@ -290,7 +295,8 @@ Input.defaultProps = {
   error: undefined,
   full: false,
   helper: undefined,
-  label: 'Label',
+  label: undefined,
+  ariaLabel: undefined,
   maxLength: undefined,
   readOnly: false,
   style: undefined,

From 57fb2bc403c6aa3084e58eded2cf6d4a13ffeb52 Mon Sep 17 00:00:00 2001
From: Natalio Silveira Jr <ext.natalio.junior@gympass.com>
Date: Mon, 23 Dec 2024 14:31:18 -0300
Subject: [PATCH 2/3] feat: update snapshots

---
 .../__snapshots__/AutoComplete.test.jsx.snap  | 264 ++++--------------
 .../web/__snapshots__/Dropdown.test.jsx.snap  |   5 +
 packages/yoga/src/Input/web/Input.test.jsx    |  39 ++-
 .../web/__snapshots__/Email.test.jsx.snap     |  43 +--
 .../web/__snapshots__/Input.test.jsx.snap     | 246 ++--------------
 .../web/__snapshots__/Number.test.jsx.snap    |  43 +--
 .../web/__snapshots__/Password.test.jsx.snap  | 107 +------
 .../web/__snapshots__/Phone.test.jsx.snap     | 105 +------
 .../Input/web/__snapshots__/Tel.test.jsx.snap |  43 +--
 9 files changed, 161 insertions(+), 734 deletions(-)

diff --git a/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap b/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap
index 5702cb5766..8ac59791fc 100644
--- a/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap
+++ b/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
   border-color: #231B22;
 }
 
-.c5 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c6 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c4 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -180,7 +154,7 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
   width: 100%;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   top: 0;
   right: 0px;
@@ -191,12 +165,12 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
   outline: none;
 }
 
-.c7:hover svg,
-.c7:focus svg {
+.c5:hover svg,
+.c5:focus svg {
   fill: #231B22;
 }
 
-.c7 svg {
+.c5 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -220,7 +194,6 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
     >
       <fieldset
         class="c2"
-        label="Label"
         value=""
       >
         <input
@@ -228,26 +201,15 @@ exports[`<AutoComplete /> Snapshots should match with a full width component 1`]
           aria-labelledby="downshift-1-label"
           autocomplete="off"
           class="c3"
+          data-testid="input"
           id="downshift-1-input"
-          label="Label"
           value=""
         />
         <label
           class="c4"
-        >
-          Label
-        </label>
-        <legend
-          class="c5"
-        >
-          <span
-            class="c6"
-          >
-            Label
-          </span>
-        </legend>
+        />
         <div
-          class="c7"
+          class="c5"
           height="20"
           role="button"
           tabindex="0"
@@ -385,32 +347,6 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
   border-color: #231B22;
 }
 
-.c5 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c6 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c4 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -443,7 +379,7 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
   width: 320px;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   top: 0;
   right: 0px;
@@ -454,12 +390,12 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
   outline: none;
 }
 
-.c7:hover svg,
-.c7:focus svg {
+.c5:hover svg,
+.c5:focus svg {
   fill: #231B22;
 }
 
-.c7 svg {
+.c5 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -483,7 +419,6 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
     >
       <fieldset
         class="c2"
-        label="Label"
         value=""
       >
         <input
@@ -491,26 +426,15 @@ exports[`<AutoComplete /> Snapshots should match with default component 1`] = `
           aria-labelledby="downshift-0-label"
           autocomplete="off"
           class="c3"
+          data-testid="input"
           id="downshift-0-input"
-          label="Label"
           value=""
         />
         <label
           class="c4"
-        >
-          Label
-        </label>
-        <legend
-          class="c5"
-        >
-          <span
-            class="c6"
-          >
-            Label
-          </span>
-        </legend>
+        />
         <div
-          class="c7"
+          class="c5"
           height="20"
           role="button"
           tabindex="0"
@@ -670,32 +594,6 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   border-color: #231B22;
 }
 
-.c5 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c6 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c4 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -728,7 +626,7 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   width: 100%;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   top: 0;
   right: 0px;
@@ -739,18 +637,18 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   outline: none;
 }
 
-.c8:hover svg,
-.c8:focus svg {
+.c6:hover svg,
+.c6:focus svg {
   fill: #231B22;
 }
 
-.c8 svg {
+.c6 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   top: 0;
   right: 24px;
@@ -761,12 +659,12 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   outline: none;
 }
 
-.c7:hover svg,
-.c7:focus svg {
+.c5:hover svg,
+.c5:focus svg {
   fill: #231B22;
 }
 
-.c7 svg {
+.c5 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -800,7 +698,7 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   font-weight: 400;
 }
 
-.c9 {
+.c7 {
   position: absolute;
   margin: 0;
   padding: 0;
@@ -820,7 +718,7 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   border-bottom-right-radius: 8px;
 }
 
-.c10 {
+.c8 {
   box-sizing: border-box;
   list-style: none;
   cursor: pointer;
@@ -832,11 +730,11 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
   line-height: 20px;
 }
 
-.c10:hover {
+.c8:hover {
   background-color: #F5F5FA;
 }
 
-.c11 {
+.c9 {
   background: transparent;
   color: inherit;
   font-weight: 700;
@@ -856,7 +754,6 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
     >
       <fieldset
         class="c2"
-        label="Label"
         value="s"
       >
         <input
@@ -865,26 +762,15 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
           aria-labelledby="downshift-3-label"
           autocomplete="off"
           class="c3"
+          data-testid="input"
           id="downshift-3-input"
-          label="Label"
           value="s"
         />
         <label
           class="c4"
-        >
-          Label
-        </label>
-        <legend
-          class="c5"
-        >
-          <span
-            class="c6"
-          >
-            Label
-          </span>
-        </legend>
+        />
         <div
-          class="c7"
+          class="c5"
           height="20"
           role="button"
           tabindex="0"
@@ -895,7 +781,7 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
           />
         </div>
         <div
-          class="c8"
+          class="c6"
           height="20"
           role="button"
           tabindex="0"
@@ -909,18 +795,18 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
     </div>
     <ul
       aria-labelledby="downshift-3-label"
-      class="c9"
+      class="c7"
       id="downshift-3-menu"
       role="listbox"
     >
       <li
         aria-selected="false"
-        class="c10"
+        class="c8"
         id="downshift-3-item-0"
         role="option"
       >
         <mark
-          class="c11"
+          class="c9"
         >
           s
         </mark>
@@ -928,13 +814,13 @@ exports[`<AutoComplete /> Snapshots should match with full width options list 1`
       </li>
       <li
         aria-selected="false"
-        class="c10"
+        class="c8"
         id="downshift-3-item-1"
         role="option"
       >
         fir
         <mark
-          class="c11"
+          class="c9"
         >
           s
         </mark>
@@ -1089,32 +975,6 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   border-color: #231B22;
 }
 
-.c5 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c6 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c4 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -1147,7 +1007,7 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   width: 320px;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   top: 0;
   right: 0px;
@@ -1158,18 +1018,18 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   outline: none;
 }
 
-.c8:hover svg,
-.c8:focus svg {
+.c6:hover svg,
+.c6:focus svg {
   fill: #231B22;
 }
 
-.c8 svg {
+.c6 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
 }
 
-.c7 {
+.c5 {
   position: absolute;
   top: 0;
   right: 24px;
@@ -1180,12 +1040,12 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   outline: none;
 }
 
-.c7:hover svg,
-.c7:focus svg {
+.c5:hover svg,
+.c5:focus svg {
   fill: #231B22;
 }
 
-.c7 svg {
+.c5 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -1219,7 +1079,7 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   font-weight: 400;
 }
 
-.c9 {
+.c7 {
   position: absolute;
   margin: 0;
   padding: 0;
@@ -1239,7 +1099,7 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   border-bottom-right-radius: 8px;
 }
 
-.c10 {
+.c8 {
   box-sizing: border-box;
   list-style: none;
   cursor: pointer;
@@ -1251,11 +1111,11 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
   line-height: 20px;
 }
 
-.c10:hover {
+.c8:hover {
   background-color: #F5F5FA;
 }
 
-.c11 {
+.c9 {
   background: transparent;
   color: inherit;
   font-weight: 700;
@@ -1275,7 +1135,6 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
     >
       <fieldset
         class="c2"
-        label="Label"
         value="s"
       >
         <input
@@ -1284,26 +1143,15 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
           aria-labelledby="downshift-2-label"
           autocomplete="off"
           class="c3"
+          data-testid="input"
           id="downshift-2-input"
-          label="Label"
           value="s"
         />
         <label
           class="c4"
-        >
-          Label
-        </label>
-        <legend
-          class="c5"
-        >
-          <span
-            class="c6"
-          >
-            Label
-          </span>
-        </legend>
+        />
         <div
-          class="c7"
+          class="c5"
           height="20"
           role="button"
           tabindex="0"
@@ -1314,7 +1162,7 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
           />
         </div>
         <div
-          class="c8"
+          class="c6"
           height="20"
           role="button"
           tabindex="0"
@@ -1328,18 +1176,18 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
     </div>
     <ul
       aria-labelledby="downshift-2-label"
-      class="c9"
+      class="c7"
       id="downshift-2-menu"
       role="listbox"
     >
       <li
         aria-selected="false"
-        class="c10"
+        class="c8"
         id="downshift-2-item-0"
         role="option"
       >
         <mark
-          class="c11"
+          class="c9"
         >
           s
         </mark>
@@ -1347,13 +1195,13 @@ exports[`<AutoComplete /> Snapshots should match with options list 1`] = `
       </li>
       <li
         aria-selected="false"
-        class="c10"
+        class="c8"
         id="downshift-2-item-1"
         role="option"
       >
         fir
         <mark
-          class="c11"
+          class="c9"
         >
           s
         </mark>
diff --git a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
index bfc4eb9b32..7713720c4f 100644
--- a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
+++ b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
@@ -255,6 +255,7 @@ exports[`<Dropdown /> should match snapshot 1`] = `
             aria-labelledby="downshift-0-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-0-input"
             label="Find an activity to love"
             readonly=""
@@ -551,6 +552,7 @@ exports[`<Dropdown /> should match snapshot when disabled 1`] = `
             aria-labelledby="downshift-1-label"
             autocomplete="off"
             class="c3 c4"
+            data-testid="input"
             disabled=""
             id="downshift-1-input"
             label="Find an activity to love"
@@ -850,6 +852,7 @@ exports[`<Dropdown /> should match snapshot when full 1`] = `
             aria-labelledby="downshift-2-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-2-input"
             label="Find an activity to love"
             readonly=""
@@ -1168,6 +1171,7 @@ exports[`<Dropdown /> should match snapshot when has a selected value 1`] = `
             aria-labelledby="downshift-3-label"
             autocomplete="off"
             class="c3 c4"
+            data-testid="input"
             disabled=""
             id="downshift-3-input"
             label="Find an activity to love"
@@ -1535,6 +1539,7 @@ exports[`<Dropdown /> should match snapshot with error 1`] = `
             aria-labelledby="downshift-4-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-4-input"
             label="Find an activity to love"
             readonly=""
diff --git a/packages/yoga/src/Input/web/Input.test.jsx b/packages/yoga/src/Input/web/Input.test.jsx
index de4bc8a8e6..8cefb834d2 100644
--- a/packages/yoga/src/Input/web/Input.test.jsx
+++ b/packages/yoga/src/Input/web/Input.test.jsx
@@ -189,9 +189,9 @@ describe('<Input />', () => {
     });
 
     it('should test if clean button is present', () => {
-      const { rerender } = render(
+      const { rerender, debug } = render(
         <ThemeProvider>
-          <Input label="Input" />
+          <Input label="Input" ariaLabel="valor aria label" />
         </ThemeProvider>,
       );
 
@@ -204,7 +204,42 @@ describe('<Input />', () => {
         </ThemeProvider>,
       );
 
+      debug();
+
       expect(screen.queryByRole('button')).not.toBeNull();
     });
+
+    it('should have aria-label', () => {
+      const value = 'aria label value';
+      const { debug, getByTestId } = render(
+        <ThemeProvider>
+          <Input label="Input" value="foo" ariaLabel={value} />
+        </ThemeProvider>,
+      );
+
+      debug();
+
+      const inputElement = getByTestId('input');
+
+      expect(inputElement).toBeInTheDocument();
+
+      expect(inputElement).toHaveAttribute('aria-label', value);
+    });
+    it('should have label value', () => {
+      const value = 'label value';
+      const { debug, getByTestId } = render(
+        <ThemeProvider>
+          <Input label={value} value="foo" />
+        </ThemeProvider>,
+      );
+
+      debug();
+
+      const inputElement = getByTestId('input');
+
+      expect(inputElement).toBeInTheDocument();
+
+      expect(inputElement).toHaveAttribute('aria-label', value);
+    });
   });
 });
diff --git a/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
index ed684e078c..7a4a03431f 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -186,31 +160,18 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         type="email"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>
diff --git a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
index 9decdd0404..d1ef07105c 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Input.test.jsx.snap
@@ -193,6 +193,7 @@ exports[`<Input /> Snapshots should match with a11yId 1`] = `
         aria-invalid="false"
         aria-labelledby="id-label"
         class="c2"
+        data-testid="input"
         label="Label"
         value=""
       />
@@ -435,6 +436,7 @@ exports[`<Input /> Snapshots should match with a11yId and error 1`] = `
         aria-invalid="true"
         aria-labelledby="id-label"
         class="c2"
+        data-testid="input"
         label="Label"
         value=""
       />
@@ -591,32 +593,6 @@ exports[`<Input /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -655,30 +631,17 @@ exports[`<Input /> Snapshots should match with default input 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>
@@ -807,32 +770,6 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -873,32 +810,19 @@ exports[`<Input /> Snapshots should match with disabled input 1`] = `
     <fieldset
       class="c1"
       disabled=""
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
+        data-testid="input"
         disabled=""
-        label="Label"
         value=""
       />
       <label
         class="c3"
         disabled=""
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>
@@ -1007,7 +931,7 @@ exports[`<Input /> Snapshots should match with error 1`] = `
   box-shadow: none;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1020,7 +944,7 @@ exports[`<Input /> Snapshots should match with error 1`] = `
   color: #CA4808;
 }
 
-.c7 {
+.c5 {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -1051,32 +975,6 @@ exports[`<Input /> Snapshots should match with error 1`] = `
   border-color: #CA4808;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -1115,37 +1013,24 @@ exports[`<Input /> Snapshots should match with error 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="true"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
     <div
-      class="c6"
+      class="c4"
     >
       <span
         aria-live="polite"
-        class="c7"
+        class="c5"
       >
         Error message
       </span>
@@ -1347,6 +1232,7 @@ exports[`<Input /> Snapshots should match with full width 1`] = `
         aria-invalid="false"
         aria-label="Label"
         class="c2"
+        data-testid="input"
         label="Label"
         value=""
       />
@@ -1472,7 +1358,7 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
   box-shadow: none;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1485,7 +1371,7 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
   color: #6B6B78;
 }
 
-.c7 {
+.c5 {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -1516,32 +1402,6 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -1580,44 +1440,31 @@ exports[`<Input /> Snapshots should match with helper text and max length 1`] =
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         maxlength="20"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
     <div
-      class="c6"
+      class="c4"
     >
       <span
         aria-live="polite"
-        class="c7"
+        class="c5"
       >
         Helper text
       </span>
       <span
         aria-hidden="true"
-        class="c7"
+        class="c5"
       >
         0
         /
@@ -1731,7 +1578,7 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
   box-shadow: none;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1744,7 +1591,7 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
   color: #6B6B78;
 }
 
-.c7 {
+.c5 {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -1775,32 +1622,6 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -1839,38 +1660,25 @@ exports[`<Input /> Snapshots should match with helper text, max length and hideM
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         maxlength="20"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
     <div
-      class="c6"
+      class="c4"
     >
       <span
         aria-live="polite"
-        class="c7"
+        class="c5"
       >
         Helper text
       </span>
@@ -2070,6 +1878,7 @@ exports[`<Input /> Snapshots should match with includeAriaAttributes set to fals
     >
       <input
         class="c2"
+        data-testid="input"
         label="Label"
         value=""
       />
@@ -2285,6 +2094,7 @@ exports[`<Input /> Snapshots should match with label 1`] = `
         aria-invalid="false"
         aria-label="Input"
         class="c2"
+        data-testid="input"
         label="Input"
         value=""
       />
diff --git a/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
index 1b92e3644e..f4db961d58 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Number.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<Input.Number /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -186,31 +160,18 @@ exports[`<Input.Number /> Snapshots should match with default input 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         type="number"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>
diff --git a/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
index 71419160c6..79edd64eca 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Password.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c6 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c7 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c5 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -189,7 +163,7 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
   display: inline-block;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   top: 0;
   right: 0;
@@ -200,12 +174,12 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
   outline: none;
 }
 
-.c8:hover svg,
-.c8:focus svg {
+.c6:hover svg,
+.c6:focus svg {
   fill: #231B22;
 }
 
-.c8 svg {
+.c6 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -220,35 +194,22 @@ exports[`<Input.Password /> Snapshots should match with default input 1`] = `
     >
       <fieldset
         class="c2"
-        label="Label"
         value=""
       >
         <input
           aria-invalid="false"
-          aria-label="Label"
           class="c3 c4"
-          label="Label"
+          data-testid="input"
           type="password"
           value=""
         />
         <label
           class="c5"
-        >
-          Label
-        </label>
-        <legend
-          class="c6"
-        >
-          <span
-            class="c7"
-          >
-            Label
-          </span>
-        </legend>
+        />
       </fieldset>
     </div>
     <div
-      class="c8"
+      class="c6"
       role="button"
       tabindex="0"
     >
@@ -384,32 +345,6 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
   border-color: #231B22;
 }
 
-.c6 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c7 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c5 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -452,7 +387,7 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
   display: inline-block;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   top: 0;
   right: 0;
@@ -465,12 +400,12 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
   pointer-events: none;
 }
 
-.c8:hover svg,
-.c8:focus svg {
+.c6:hover svg,
+.c6:focus svg {
   fill: #231B22;
 }
 
-.c8 svg {
+.c6 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -488,37 +423,24 @@ exports[`<Input.Password /> Snapshots should match with disabled input 1`] = `
       <fieldset
         class="c2"
         disabled=""
-        label="Label"
         value=""
       >
         <input
           aria-invalid="false"
-          aria-label="Label"
           class="c3 c4"
+          data-testid="input"
           disabled=""
-          label="Label"
           type="password"
           value=""
         />
         <label
           class="c5"
           disabled=""
-        >
-          Label
-        </label>
-        <legend
-          class="c6"
-        >
-          <span
-            class="c7"
-          >
-            Label
-          </span>
-        </legend>
+        />
       </fieldset>
     </div>
     <div
-      class="c8"
+      class="c6"
       disabled=""
       role="button"
     >
@@ -759,6 +681,7 @@ exports[`<Input.Password /> Snapshots should match with full width 1`] = `
           aria-invalid="false"
           aria-label="Label"
           class="c3 c4"
+          data-testid="input"
           label="Label"
           type="password"
           value=""
diff --git a/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
index 66da4c7530..c0464962ac 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Phone.test.jsx.snap
@@ -531,32 +531,6 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
   border-color: #231B22;
 }
 
-.c6 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c7 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c5 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -599,7 +573,7 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
   display: inline-block;
 }
 
-.c8 {
+.c6 {
   position: absolute;
   top: 0;
   right: 0;
@@ -612,12 +586,12 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
   pointer-events: none;
 }
 
-.c8:hover svg,
-.c8:focus svg {
+.c6:hover svg,
+.c6:focus svg {
   fill: #231B22;
 }
 
-.c8 svg {
+.c6 svg {
   height: 52px;
   width: 20px;
   fill: #6B6B78;
@@ -635,37 +609,24 @@ exports[`<Input.Phone /> Snapshots should match with disabled input 1`] = `
       <fieldset
         class="c2"
         disabled=""
-        label="Label"
         value=""
       >
         <input
           aria-invalid="false"
-          aria-label="Label"
           class="c3 c4"
+          data-testid="input"
           disabled=""
-          label="Label"
           type="password"
           value=""
         />
         <label
           class="c5"
           disabled=""
-        >
-          Label
-        </label>
-        <legend
-          class="c6"
-        >
-          <span
-            class="c7"
-          >
-            Label
-          </span>
-        </legend>
+        />
       </fieldset>
     </div>
     <div
-      class="c8"
+      class="c6"
       disabled=""
       role="button"
     >
@@ -781,7 +742,7 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
   box-shadow: none;
 }
 
-.c6 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -794,7 +755,7 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
   color: #CA4808;
 }
 
-.c7 {
+.c5 {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -825,32 +786,6 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
   border-color: #CA4808;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -889,37 +824,24 @@ exports[`<Input.Phone /> Snapshots should match with error 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="true"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
     <div
-      class="c6"
+      class="c4"
     >
       <span
         aria-live="polite"
-        class="c7"
+        class="c5"
       >
         Error message
       </span>
@@ -1156,6 +1078,7 @@ exports[`<Input.Phone /> Snapshots should match with full width 1`] = `
           aria-invalid="false"
           aria-label="Label"
           class="c3 c4"
+          data-testid="input"
           label="Label"
           type="password"
           value=""
diff --git a/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
index 361c11fed1..ecedf5ffcb 100644
--- a/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
+++ b/packages/yoga/src/Input/web/__snapshots__/Tel.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<Input.Tel /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -186,31 +160,18 @@ exports[`<Input.Tel /> Snapshots should match with default input 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         type="tel"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>

From 1e32e8362fb4862c6bb00f5929763de15446c02a Mon Sep 17 00:00:00 2001
From: Natalio Silveira Jr <ext.natalio.junior@gympass.com>
Date: Mon, 23 Dec 2024 16:37:33 -0300
Subject: [PATCH 3/3] feat: remove debug

---
 packages/yoga/src/Input/web/Input.test.jsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/yoga/src/Input/web/Input.test.jsx b/packages/yoga/src/Input/web/Input.test.jsx
index 8cefb834d2..14c960dfb6 100644
--- a/packages/yoga/src/Input/web/Input.test.jsx
+++ b/packages/yoga/src/Input/web/Input.test.jsx
@@ -189,7 +189,7 @@ describe('<Input />', () => {
     });
 
     it('should test if clean button is present', () => {
-      const { rerender, debug } = render(
+      const { rerender } = render(
         <ThemeProvider>
           <Input label="Input" ariaLabel="valor aria label" />
         </ThemeProvider>,
@@ -204,21 +204,17 @@ describe('<Input />', () => {
         </ThemeProvider>,
       );
 
-      debug();
-
       expect(screen.queryByRole('button')).not.toBeNull();
     });
 
     it('should have aria-label', () => {
       const value = 'aria label value';
-      const { debug, getByTestId } = render(
+      const { getByTestId } = render(
         <ThemeProvider>
           <Input label="Input" value="foo" ariaLabel={value} />
         </ThemeProvider>,
       );
 
-      debug();
-
       const inputElement = getByTestId('input');
 
       expect(inputElement).toBeInTheDocument();
@@ -227,14 +223,12 @@ describe('<Input />', () => {
     });
     it('should have label value', () => {
       const value = 'label value';
-      const { debug, getByTestId } = render(
+      const { getByTestId } = render(
         <ThemeProvider>
           <Input label={value} value="foo" />
         </ThemeProvider>,
       );
 
-      debug();
-
       const inputElement = getByTestId('input');
 
       expect(inputElement).toBeInTheDocument();