refactor: update Textarea component styles and tests

eupthere · eupthere · commit 24f20b24483e · 2026-01-24T21:16:16.000+09:00
- Refactor error handling styles in Textarea component
- Update snapshot tests to reflect new styles
- Adjust error message positioning and styling
diff --git a/packages/components/src/components/Textarea/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Textarea/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Textarea should render with default props 1`] = `
 "<div>
   <div class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-_a_-255 box-sizing-0-border-box-_a__s__st_-255 width-0-100%--255">
-    <textarea aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px light-dark(#674DC726,#8163E140)-_a__c_focus-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 ">
+    <textarea aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))-_a__c_focus-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 ">
     </textarea>
   </div>
 </div>"
@@ -12,7 +12,7 @@ exports[`Textarea should render with default props 1`] = `
 exports[`Textarea should render with disabled prop 1`] = `
 "<div>
   <div class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-_a_-255 box-sizing-0-border-box-_a__s__st_-255 width-0-100%--255">
-    <textarea aria-label="textarea" disabled="" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px light-dark(#674DC726,#8163E140)-_a__c_focus-1  border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 ">
+    <textarea aria-label="textarea" disabled="" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))-_a__c_focus-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1  ">
     </textarea>
   </div>
 </div>"
@@ -21,7 +21,7 @@ exports[`Textarea should render with disabled prop 1`] = `
 exports[`Textarea should render error style when error is true 1`] = `
 "<div>
   <div class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-_a_-255 box-sizing-0-border-box-_a__s__st_-255 width-0-100%--255">
-    <textarea aria-invalid="true" aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__c_focus-1 box-shadow-0-0 0 0 3px light-dark(#D52B2E33,#FF5B5E66)-_a__c_focus-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 ">
+    <textarea aria-invalid="true" aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))-_a__c_focus-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 ">
     </textarea>
   </div>
 </div>"
@@ -30,9 +30,9 @@ exports[`Textarea should render error style when error is true 1`] = `
 exports[`Textarea should render with error message 1`] = `
 "<div>
   <div class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-_a_-255 box-sizing-0-border-box-_a__s__st_-255 width-0-100%--255">
-    <textarea aria-invalid="true" aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__c_focus-1 box-shadow-0-0 0 0 3px light-dark(#D52B2E33,#FF5B5E66)-_a__c_focus-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 ">
+    <textarea aria-invalid="true" aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))-_a__c_focus-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 ">
     </textarea>
-    <span aria-label="error-message" class=" color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 font-size-0-12px--1 margin-top-0-4px--1">
+    <span aria-label="error-message" class=" bottom-0--8px--1 color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 font-size-0-12px--1 left-0-0--1 position-0-absolute--1 transform-0-translateY(100%)--1">
       Error message
     </span>
   </div>
@@ -42,7 +42,7 @@ exports[`Textarea should render with error message 1`] = `
 exports[`Textarea should have typography when typography is provided 1`] = `
 "<div>
   <div class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-_a_-255 box-sizing-0-border-box-_a__s__st_-255 width-0-100%--255">
-    <textarea aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px light-dark(#674DC726,#8163E140)-_a__c_focus-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 typo-inlineLabelS">
+    <textarea aria-label="textarea" rows="3" class=" color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled_c__c_placeholder-1 background-0-var(--disabledBg,light-dark(#F0F0F3,#414244))-_a__c_disabled-1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))-_a__c_disabled-1 color-0-var(--disabledText,light-dark(#D6D7DE,#373737))-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 opacity-0-.5-_a__c_disabled-1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#674DC726,#8163E140))-_a__c_focus-1 outline-0-none-_a__c_focus-1 color-0-var(--placeholder,light-dark(#A9A8AB,#CBCBCB))-_a__c__c_placeholder-1 background-0-var(--background,light-dark(#FFF,#2E2E2E))--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 color-0-var(--text,light-dark(#272727,#F6F6F6))--1 font-size-0-16px--1 font-size-4-14px--1 line-height-0-1.5--1 min-height-0-80px--1 padding-0-12px--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 box-shadow-0-0 0 0 3px var(--focusRing,light-dark(#D52B2E33,#FF5B5E66))-_a__lb_aria-invalid_eq__dq_true_dq__rb__c_focus-1 transition-0-border-color .15s ease-in-out,box-shadow .15s ease-in-out--1 width-0-100%--1 border-color-0-var(--primary,light-dark(#674DC7,#8163E1))-_a__c_hover-1 typo-inlineLabelS">
     </textarea>
   </div>
 </div>"
diff --git a/packages/components/src/components/Textarea/__tests__/index.browser.test.tsx b/packages/components/src/components/Textarea/__tests__/index.browser.test.tsx
@@ -33,7 +33,7 @@ describe('Textarea', () => {
     const { container } = render(<Textarea error />)
     expect(container).toMatchSnapshot()
     expect(container.querySelector('[aria-label="textarea"]')).toHaveClass(
-      'border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1',
+      'border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1',
     )
   })
 
diff --git a/packages/components/src/components/Textarea/index.tsx b/packages/components/src/components/Textarea/index.tsx
@@ -54,12 +54,9 @@ export function Textarea({
           opacity: 0.5,
         }}
         _focus={{
-          borderColor: error
-            ? 'var(--error, light-dark(#D52B2E, #FF5B5E))'
-            : 'var(--primary, light-dark(#674DC7, #8163E1))',
-          boxShadow: error
-            ? '0 0 0 3px light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4))'
-            : '0 0 0 3px light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25))',
+          borderColor: 'var(--primary, light-dark(#674DC7, #8163E1))',
+          boxShadow:
+            '0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))',
           outline: 'none',
         }}
         _hover={
@@ -74,11 +71,7 @@ export function Textarea({
         aria-label="textarea"
         as="textarea"
         bg="var(--background, light-dark(#FFFFFF, #2E2E2E))"
-        borderColor={
-          error
-            ? 'var(--error, light-dark(#D52B2E, #FF5B5E))'
-            : 'var(--border, light-dark(#E4E4E4, #434343))'
-        }
+        borderColor="var(--border, light-dark(#E4E4E4, #434343))"
         borderRadius="8px"
         borderStyle="solid"
         borderWidth="1px"
@@ -90,6 +83,16 @@ export function Textarea({
         minH="80px"
         p="12px"
         rows={rows}
+        selectors={{
+          '&[aria-invalid="true"]': {
+            borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
+          },
+          '&[aria-invalid="true"]:focus': {
+            borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
+            boxShadow:
+              '0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))',
+          },
+        }}
         styleOrder={1}
         styleVars={{
           primary: colors?.primary,
@@ -108,11 +111,14 @@ export function Textarea({
       {error && errorMessage && (
         <Text
           aria-label="error-message"
+          bottom="-8px"
           className={classNames?.errorMessage}
           color="var(--error, light-dark(#D52B2E, #FF5B5E))"
           fontSize="12px"
-          mt="4px"
+          left="0"
+          pos="absolute"
           styleOrder={1}
+          transform="translateY(100%)"
         >
           {errorMessage}
         </Text>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ describe('Textarea', () => {`
`33`	`33`	`const { container } = render(<Textarea error />)`
`34`	`34`	`expect(container).toMatchSnapshot()`
`35`	`35`	`expect(container.querySelector('[aria-label="textarea"]')).toHaveClass(`
`36`		`- 'border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1',`
	`36`	`+ 'border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))-_a__lb_aria-invalid_eq__dq_true_dq__rb_-1',`
`37`	`37`	`)`
`38`	`38`	`})`
`39`	`39`