Merged in feat/use-new-input-component (pull request #3324)

feat(SW-3659): Use new input component

* Use new input component

* Update error formatter

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Update Input stories

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Update Storybook logo

* Add some new demo icon input story

* Fix the clear content button position

* Fix broken password input icon

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Add aria-hidden to required asterisk

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component


Approved-by: Bianca Widstam
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx

@@ -7,10 +7,10 @@ import {
   getDefaultCountryFromLang,
 } from "@scandic-hotels/common/utils/phone"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import { FormInput } from "@scandic-hotels/design-system/Form/FormInput"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Input from "@/components/TempDesignSystem/Form/Input"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
 import { getErrorMessage } from "@/utils/getErrorMessage"
@@ -45,7 +45,7 @@ export default function ModifyContact({
       {isFirstStep ? (
         <div className={styles.container}>
           <div className={`${styles.row} ${styles.gridEqual}`}>
-            <Input
+            <FormInput
               label={intl.formatMessage({
                 id: "common.firstName",
                 defaultMessage: "First name",
@@ -54,7 +54,7 @@ export default function ModifyContact({
               name="firstName"
               disabled={!!guest.firstName}
             />
-            <Input
+            <FormInput
               label={intl.formatMessage({
                 id: "common.lastName",
                 defaultMessage: "Last name",
@@ -80,7 +80,7 @@ export default function ModifyContact({
             />
           </div>
           <div className={styles.row}>
-            <Input
+            <FormInput
               label={intl.formatMessage({
                 id: "common.email",
                 defaultMessage: "Email",