From 6f6df00673b7929f10439696ed2ada5b1fc6aed8 Mon Sep 17 00:00:00 2001
From: eupthere <eupthere@gmail.com>
Date: Sat, 24 Jan 2026 20:51:44 +0900
Subject: [PATCH 1/2] feat: add Textarea component and tests

- Implement Textarea component with customizable props
- Add stories for Textarea showcasing various states
- Create tests for Textarea to ensure proper rendering and functionality
- Update index files to export the new Textarea component
---
 .../src/__tests__/index.browser.test.ts       |   1 +
 .../components/Textarea/Textarea.stories.tsx  |  79 +++++++++
 .../__snapshots__/index.browser.test.tsx.snap |  49 ++++++
 .../Textarea/__tests__/index.browser.test.tsx | 153 ++++++++++++++++++
 .../src/components/Textarea/index.tsx         | 122 ++++++++++++++
 packages/components/src/index.ts              |   1 +
 6 files changed, 405 insertions(+)
 create mode 100644 packages/components/src/components/Textarea/Textarea.stories.tsx
 create mode 100644 packages/components/src/components/Textarea/__tests__/__snapshots__/index.browser.test.tsx.snap
 create mode 100644 packages/components/src/components/Textarea/__tests__/index.browser.test.tsx
 create mode 100644 packages/components/src/components/Textarea/index.tsx

diff --git a/packages/components/src/__tests__/index.browser.test.ts b/packages/components/src/__tests__/index.browser.test.ts
index 36a2cc3e..fbd6e483 100644
--- a/packages/components/src/__tests__/index.browser.test.ts
+++ b/packages/components/src/__tests__/index.browser.test.ts
@@ -6,6 +6,7 @@ describe('export', () => {
     expect({ ...index }).toEqual({
       Button: expect.any(Function),
       Input: expect.any(Function),
+      Textarea: expect.any(Function),
       Stepper: expect.any(Function),
       Select: expect.any(Function),
       Radio: expect.any(Function),
diff --git a/packages/components/src/components/Textarea/Textarea.stories.tsx b/packages/components/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 00000000..be58f664
--- /dev/null
+++ b/packages/components/src/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,79 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Textarea } from './index'
+
+type Story = StoryObj<typeof meta>
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Devfive/Textarea',
+  component: Textarea,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '10px', maxWidth: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter your message...',
+  },
+}
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 'This is some default text in the textarea.',
+    placeholder: 'Enter your message...',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled textarea',
+    disabled: true,
+  },
+}
+
+export const DisabledWithValue: Story = {
+  args: {
+    defaultValue: 'This textarea is disabled',
+    disabled: true,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Enter your message...',
+    error: true,
+  },
+}
+
+export const ErrorWithMessage: Story = {
+  args: {
+    placeholder: 'Enter your message...',
+    error: true,
+    errorMessage: 'Please enter a valid message.',
+  },
+}
+
+export const CustomRows: Story = {
+  args: {
+    placeholder: 'This textarea has 6 rows',
+    rows: 6,
+  },
+}
+
+export const CustomColors: Story = {
+  args: {
+    placeholder: 'Custom themed textarea',
+    colors: {
+      primary: '#8B5CF6',
+      border: '#E5E7EB',
+      background: '#F9FAFB',
+    },
+  },
+}
+
+export default meta
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
new file mode 100644
index 00000000..7a376e1c
--- /dev/null
+++ b/packages/components/src/components/Textarea/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -0,0 +1,49 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+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>
+  </div>
+</div>"
+`;
+
+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>
+  </div>
+</div>"
+`;
+
+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>
+  </div>
+</div>"
+`;
+
+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>
+    <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">
+      Error message
+    </span>
+  </div>
+</div>"
+`;
+
+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>
+  </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
new file mode 100644
index 00000000..2f463d07
--- /dev/null
+++ b/packages/components/src/components/Textarea/__tests__/index.browser.test.tsx
@@ -0,0 +1,153 @@
+import { DevupThemeTypography } from '@devup-ui/react'
+import { describe, expect, it } from 'bun:test'
+import { render, userEvent } from 'bun-test-env-dom'
+
+import { Textarea } from '..'
+
+describe('Textarea', () => {
+  it('should render with default props', () => {
+    const { container } = render(<Textarea />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render with placeholder', () => {
+    const { container } = render(<Textarea placeholder="Enter text..." />)
+    expect(container.querySelector('textarea')).toHaveAttribute(
+      'placeholder',
+      'Enter text...',
+    )
+  })
+
+  it('should render with default value', () => {
+    const { container } = render(<Textarea defaultValue="Default text" />)
+    expect(container.querySelector('textarea')?.value).toBe('Default text')
+  })
+
+  it('should render with disabled prop', () => {
+    const { container } = render(<Textarea disabled />)
+    expect(container).toMatchSnapshot()
+    expect(container.querySelector('textarea')).toHaveAttribute('disabled')
+  })
+
+  it('should render error style when error is true', () => {
+    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',
+    )
+  })
+
+  it('should render with error message', () => {
+    const { container } = render(
+      <Textarea error errorMessage="Error message" />,
+    )
+    expect(container).toMatchSnapshot()
+    expect(
+      container.querySelector('[aria-label="error-message"]'),
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[aria-label="error-message"]')?.textContent,
+    ).toBe('Error message')
+  })
+
+  it('should not render error message when error is false', () => {
+    const { container } = render(<Textarea errorMessage="Error message" />)
+    expect(
+      container.querySelector('[aria-label="error-message"]'),
+    ).not.toBeInTheDocument()
+  })
+
+  it('should render with aria-invalid when error is true', () => {
+    const { container } = render(<Textarea error />)
+    expect(container.querySelector('textarea')).toHaveAttribute(
+      'aria-invalid',
+      'true',
+    )
+  })
+
+  it('should not have aria-invalid when error is false', () => {
+    const { container } = render(<Textarea />)
+    expect(
+      container.querySelector('textarea')?.hasAttribute('aria-invalid'),
+    ).toBe(false)
+  })
+
+  it('should render with custom rows', () => {
+    const { container } = render(<Textarea rows={6} />)
+    expect(container.querySelector('textarea')).toHaveAttribute('rows', '6')
+  })
+
+  it('should pass colors prop', () => {
+    const { container } = render(
+      <Textarea
+        colors={{
+          primary: 'red',
+          error: 'blue',
+          text: 'green',
+        }}
+      />,
+    )
+    const textarea = container.querySelector('[aria-label="textarea"]')
+    expect(textarea).toHaveStyle({
+      '--primary': 'red',
+      '--error': 'blue',
+      '--text': 'green',
+    })
+  })
+
+  it('should have typography when typography is provided', () => {
+    const { container } = render(
+      <Textarea typography={'inlineLabelS' as keyof DevupThemeTypography} />,
+    )
+    expect(container).toMatchSnapshot()
+    expect(container.querySelector('textarea')).toHaveClass('typo-inlineLabelS')
+  })
+
+  it('should pass className prop', () => {
+    const { container } = render(<Textarea className="custom-class" />)
+    expect(container.querySelector('textarea')).toHaveClass('custom-class')
+  })
+
+  it('should pass classNames.container prop', () => {
+    const { container } = render(
+      <Textarea classNames={{ container: 'container-class' }} />,
+    )
+    expect(container.firstChild).toHaveClass('container-class')
+  })
+
+  it('should pass classNames.textarea prop', () => {
+    const { container } = render(
+      <Textarea classNames={{ textarea: 'textarea-class' }} />,
+    )
+    expect(container.querySelector('textarea')).toHaveClass('textarea-class')
+  })
+
+  it('should pass classNames.errorMessage prop', () => {
+    const { container } = render(
+      <Textarea
+        classNames={{ errorMessage: 'error-class' }}
+        error
+        errorMessage="Error"
+      />,
+    )
+    expect(container.querySelector('[aria-label="error-message"]')).toHaveClass(
+      'error-class',
+    )
+  })
+
+  it('should handle onChange event', async () => {
+    let value = ''
+    const { container } = render(
+      <Textarea onChange={(e) => (value = e.target.value)} />,
+    )
+    await userEvent.type(container.querySelector('textarea')!, 'new value')
+    expect(value).toBe('new value')
+  })
+
+  it('should render full width by default', () => {
+    const { container } = render(<Textarea />)
+    expect(container.querySelector('[aria-label="textarea"]')).toHaveClass(
+      'width-0-100%--1',
+    )
+  })
+})
diff --git a/packages/components/src/components/Textarea/index.tsx b/packages/components/src/components/Textarea/index.tsx
new file mode 100644
index 00000000..f3e93aeb
--- /dev/null
+++ b/packages/components/src/components/Textarea/index.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { Box, type DevupThemeTypography, Text } from '@devup-ui/react'
+import { type ComponentProps } from 'react'
+
+interface TextareaProps extends ComponentProps<'textarea'> {
+  typography?: keyof DevupThemeTypography
+  error?: boolean
+  errorMessage?: string
+  classNames?: {
+    container?: string
+    textarea?: string
+    errorMessage?: string
+  }
+  colors?: {
+    primary?: string
+    error?: string
+    text?: string
+    border?: string
+    background?: string
+    placeholder?: string
+    focusRing?: string
+  }
+}
+
+export function Textarea({
+  typography,
+  error = false,
+  errorMessage,
+  colors,
+  disabled,
+  className,
+  classNames,
+  rows = 3,
+  ...props
+}: TextareaProps) {
+  return (
+    <Box
+      className={classNames?.container}
+      display="inline-block"
+      pos="relative"
+      selectors={{ '&, & *': { boxSizing: 'border-box' } }}
+      w="100%"
+    >
+      <Box
+        _disabled={{
+          _placeholder: {
+            color: 'var(--disabledText, light-dark(#D6D7DE, #373737))',
+          },
+          bg: 'var(--disabledBg, light-dark(#F0F0F3, #414244))',
+          borderColor: 'var(--border, light-dark(#E4E4E4, #434343))',
+          color: 'var(--disabledText, light-dark(#D6D7DE, #373737))',
+          cursor: 'not-allowed',
+          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))',
+          outline: 'none',
+        }}
+        _hover={
+          !disabled && {
+            borderColor: 'var(--primary, light-dark(#674DC7, #8163E1))',
+          }
+        }
+        _placeholder={{
+          color: 'var(--placeholder, light-dark(#A9A8AB, #CBCBCB))',
+        }}
+        aria-invalid={error || undefined}
+        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))'
+        }
+        borderRadius="8px"
+        borderStyle="solid"
+        borderWidth="1px"
+        className={`${className || ''} ${classNames?.textarea || ''}`.trim()}
+        color="var(--text, light-dark(#272727, #F6F6F6))"
+        disabled={disabled}
+        fontSize={['16px', null, null, null, '14px']}
+        lineHeight="1.5"
+        minH="80px"
+        p="12px"
+        rows={rows}
+        styleOrder={1}
+        styleVars={{
+          primary: colors?.primary,
+          error: colors?.error,
+          text: colors?.text,
+          border: colors?.border,
+          background: colors?.background,
+          placeholder: colors?.placeholder,
+          focusRing: colors?.focusRing,
+        }}
+        transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+        typography={typography}
+        w="100%"
+        {...props}
+      />
+      {error && errorMessage && (
+        <Text
+          aria-label="error-message"
+          className={classNames?.errorMessage}
+          color="var(--error, light-dark(#D52B2E, #FF5B5E))"
+          fontSize="12px"
+          mt="4px"
+          styleOrder={1}
+        >
+          {errorMessage}
+        </Text>
+      )}
+    </Box>
+  )
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 26c083da..49c8ae2e 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -18,6 +18,7 @@ export {
   StepperInput,
   useStepper,
 } from './components/Stepper'
+export { Textarea } from './components/Textarea'
 export { Toggle } from './components/Toggle'
 export { SelectContext, useSelect } from './contexts/useSelect'
 export type { SelectType, SelectValue } from './types/select'

From 24f20b24483ea366ae1825fe7669c7c5cde68cdd Mon Sep 17 00:00:00 2001
From: eupthere <eupthere@gmail.com>
Date: Sat, 24 Jan 2026 21:16:16 +0900
Subject: [PATCH 2/2] refactor: update Textarea component styles and tests

- Refactor error handling styles in Textarea component
- Update snapshot tests to reflect new styles
- Adjust error message positioning and styling
---
 .../__snapshots__/index.browser.test.tsx.snap | 12 ++++----
 .../Textarea/__tests__/index.browser.test.tsx |  2 +-
 .../src/components/Textarea/index.tsx         | 30 +++++++++++--------
 3 files changed, 25 insertions(+), 19 deletions(-)

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
index 7a376e1c..92bef3de 100644
--- 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
index 2f463d07..6571c898 100644
--- 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
index f3e93aeb..dd0dded2 100644
--- 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>