diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx
index b70d6e0d6..e542a0c41 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx
@@ -1,9 +1,8 @@
import { useIntl } from "react-intl"
+import TextArea from "@scandic-hotels/design-system/Form/TextArea"
import { Typography } from "@scandic-hotels/design-system/Typography"
-import TextArea from "@/components/TempDesignSystem/Form/TextArea"
-
import styles from "./specialRequests.module.css"
import type { RegisterOptions } from "react-hook-form"
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx b/packages/design-system/lib/components/Form/TextArea/index.tsx
similarity index 63%
rename from apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
rename to packages/design-system/lib/components/Form/TextArea/index.tsx
index 79c12e912..7959fab5e 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
+++ b/packages/design-system/lib/components/Form/TextArea/index.tsx
@@ -1,30 +1,29 @@
-"use client"
+'use client'
import {
Label as AriaLabel,
Text,
TextArea as AriaTextArea,
TextField,
-} from "react-aria-components"
-import { Controller, useFormContext } from "react-hook-form"
+} from 'react-aria-components'
+import { Controller, useFormContext } from 'react-hook-form'
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Label } from "@scandic-hotels/design-system/Label"
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Label } from '../../Label'
+import { Typography } from '../../Typography'
-import styles from "./textarea.module.css"
+import styles from './textarea.module.css'
-import type { TextAreaProps } from "./input"
+import type { TextAreaProps } from './input'
export default function TextArea({
- "aria-label": ariaLabel,
- className = "",
+ 'aria-label': ariaLabel,
+ className = '',
disabled = false,
- helpText = "",
+ helpText = '',
label,
name,
- placeholder = "",
+ placeholder = '',
readOnly = false,
registerOptions = {},
}: TextAreaProps) {
@@ -48,7 +47,7 @@ export default function TextArea({
value={field.value}
>
-
+
-
+
{helpText && !fieldState.error ? (
-
+
{helpText}
-
+
) : null}
{fieldState.error ? (
-
-
- {fieldState.error.message}
-
+
+
+
+ {fieldState.error.message}
+
+
) : null}
)}
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/input.ts b/packages/design-system/lib/components/Form/TextArea/input.ts
similarity index 76%
rename from apps/scandic-web/components/TempDesignSystem/Form/TextArea/input.ts
rename to packages/design-system/lib/components/Form/TextArea/input.ts
index 08a8631d8..54ad94cdc 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/input.ts
+++ b/packages/design-system/lib/components/Form/TextArea/input.ts
@@ -1,4 +1,4 @@
-import type { RegisterOptions } from "react-hook-form"
+import type { RegisterOptions } from 'react-hook-form'
export interface TextAreaProps
extends React.InputHTMLAttributes {
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/textarea.module.css b/packages/design-system/lib/components/Form/TextArea/textarea.module.css
similarity index 94%
rename from apps/scandic-web/components/TempDesignSystem/Form/TextArea/textarea.module.css
rename to packages/design-system/lib/components/Form/TextArea/textarea.module.css
index a213cbf42..859d5ac56 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/TextArea/textarea.module.css
+++ b/packages/design-system/lib/components/Form/TextArea/textarea.module.css
@@ -36,7 +36,7 @@
color: var(--Main-Grey-40);
}
-.container:has(.textarea[data-invalid="true"], .textarea[aria-invalid="true"]) {
+.container:has(.textarea[data-invalid='true'], .textarea[aria-invalid='true']) {
border-color: var(--Scandic-Red-60);
}
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 737fae0f5..3926f00a7 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -32,6 +32,7 @@
"./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
"./Form/Phone": "./lib/components/Form/Phone/index.tsx",
"./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
+ "./Form/TextArea": "./lib/components/Form/TextArea/index.tsx",
"./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
"./HotelCard": "./lib/components/HotelCard/index.tsx",
"./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx",