Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00
parent 932413412b
commit d0546926a9
500 changed files with 18367 additions and 18419 deletions
--- a/packages/design-system/lib/components/Form/Checkbox/index.tsx
+++ b/packages/design-system/lib/components/Form/Checkbox/index.tsx
@@ -1,16 +1,16 @@
-'use client'
+"use client"

-import { forwardRef } from 'react'
-import { Checkbox as AriaCheckbox } from 'react-aria-components'
+import { forwardRef } from "react"
+import { Checkbox as AriaCheckbox } from "react-aria-components"
 import {
  type RegisterOptions,
  useController,
  useFormContext,
-} from 'react-hook-form'
+} from "react-hook-form"

-import styles from './checkbox.module.css'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { ErrorMessage } from '../ErrorMessage'
+import styles from "./checkbox.module.css"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { ErrorMessage } from "../ErrorMessage"

 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
  name: string
@@ -25,7 +25,7 @@ const CheckboxComponent = forwardRef<
  React.PropsWithChildren<CheckboxProps>
 >(function Checkbox(
  {
-    className = '',
+    className = "",
    name,
    children,
    registerOptions,
@@ -55,7 +55,7 @@ const CheckboxComponent = forwardRef<
      {({ isSelected }) => (
        <>
          <span
-            className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ''}`}
+            className={`${styles.checkboxContainer} ${topAlign ? styles.topAlign : ""}`}
          >
            <span
              className={styles.checkbox}
--- a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client"

-import { type SyntheticEvent, useMemo, useState } from 'react'
+import { type SyntheticEvent, useMemo, useState } from "react"
 import {
  Button,
  ComboBox,
@@ -10,33 +10,33 @@ import {
  ListBoxItem,
  Popover,
  useFilter,
-} from 'react-aria-components'
-import { useController } from 'react-hook-form'
+} from "react-aria-components"
+import { useController } from "react-hook-form"

-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
-import { ErrorMessage } from '../ErrorMessage'
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+import { ErrorMessage } from "../ErrorMessage"

-import styles from './country.module.css'
+import styles from "./country.module.css"

-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"

-const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]

 export default function CountryCombobox({
  // hack used since chrome does not respect autocomplete="off"
-  autoComplete = 'nope',
-  className = '',
+  autoComplete = "nope",
+  className = "",
  errorMessage,
  label,
-  lang = 'en',
+  lang = "en",
  countries,
-  name = 'country',
+  name = "country",
  disabled = false,
  registerOptions = {},
 }: CountryProps) {
-  const { startsWith } = useFilter({ sensitivity: 'base' })
-  const [filterValue, setFilterValue] = useState('')
+  const { startsWith } = useFilter({ sensitivity: "base" })
+  const [filterValue, setFilterValue] = useState("")
  const { field, formState, fieldState } = useController({
    name,
    rules: registerOptions,
@@ -68,7 +68,7 @@ export default function CountryCombobox({

  function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
    setFilterValue(evt.currentTarget.value)
-    const isAutoCompleteEvent = !('inputType' in evt.nativeEvent)
+    const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
    if (isAutoCompleteEvent) {
      const { value } = evt.currentTarget
      const cc = countries.find((c) => c.name === value || c.code === value)
@@ -89,7 +89,7 @@ export default function CountryCombobox({
        isInvalid={fieldState.invalid}
        name={name}
        onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? '')}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
        selectedKey={field.value}
        menuTrigger="focus"
      >
@@ -142,8 +142,8 @@ export default function CountryCombobox({
                  <Typography
                    variant={
                      isSelected
-                        ? 'Body/Paragraph/mdBold'
-                        : 'Body/Paragraph/mdRegular'
+                        ? "Body/Paragraph/mdBold"
+                        : "Body/Paragraph/mdRegular"
                    }
                  >
                    <span>{item.label}</span>
--- a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
@@ -1,23 +1,23 @@
-'use client'
+"use client"

-import { useMemo } from 'react'
-import { useController } from 'react-hook-form'
+import { useMemo } from "react"
+import { useController } from "react-hook-form"

-import { Select } from '../../Select'
+import { Select } from "../../Select"

-import { ErrorMessage } from '../ErrorMessage'
+import { ErrorMessage } from "../ErrorMessage"

-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"

-const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]

 export default function CountrySelect({
-  className = '',
+  className = "",
  errorMessage,
  label,
  countries,
-  lang = 'en',
-  name = 'country',
+  lang = "en",
+  name = "country",
  disabled = false,
  registerOptions = {},
 }: CountryProps) {
@@ -58,7 +58,7 @@ export default function CountrySelect({
        isInvalid={fieldState.invalid}
        name={name}
        onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? '')}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
        selectedKey={field.value}
        data-testid={name}
      />
--- a/packages/design-system/lib/components/Form/Country/country.module.css
+++ b/packages/design-system/lib/components/Form/Country/country.module.css
@@ -6,7 +6,7 @@
  height: 56px;

  &[data-required] .label::after {
-    content: ' *';
+    content: " *";
  }

  &[data-open] {
@@ -92,12 +92,12 @@
  }
 }

-.inner:has(input:placeholder-shown, input[data-focused='true'], input:valid)
+.inner:has(input:placeholder-shown, input[data-focused="true"], input:valid)
  .labelValue {
  display: initial;
 }

-.inner:has(input[value='']:not([data-focused='true'])) .labelEmpty {
+.inner:has(input[value=""]:not([data-focused="true"])) .labelEmpty {
  display: initial;
 }

@@ -110,7 +110,7 @@
  transition: min-height 150ms ease;
  width: 100%;

-  &[value]:not([value='']) {
+  &[value]:not([value=""]) {
    min-height: 18px;
  }
 }
--- a/packages/design-system/lib/components/Form/Country/country.ts
+++ b/packages/design-system/lib/components/Form/Country/country.ts
@@ -1,4 +1,4 @@
-import type { RegisterOptions } from 'react-hook-form'
+import type { RegisterOptions } from "react-hook-form"

 export type CountryProps = {
  autoComplete?: string
--- a/packages/design-system/lib/components/Form/Country/index.tsx
+++ b/packages/design-system/lib/components/Form/Country/index.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client"

-import { useMediaQuery } from 'usehooks-ts'
+import { useMediaQuery } from "usehooks-ts"

-import CountryCombobox from './CountryCombobox'
-import CountrySelect from './CountrySelect'
+import CountryCombobox from "./CountryCombobox"
+import CountrySelect from "./CountrySelect"

-import type { CountryProps } from './country'
+import type { CountryProps } from "./country"

 export default function Country(props: CountryProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)', {
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
    initializeWithValue: false,
  })

--- a/packages/design-system/lib/components/Form/Date/date.ts
+++ b/packages/design-system/lib/components/Form/Date/date.ts
@@ -1,14 +1,13 @@
-import { Lang } from '@scandic-hotels/common/constants/language'
-import type { RegisterOptions } from 'react-hook-form'
+import { Lang } from "@scandic-hotels/common/constants/language"
+import type { RegisterOptions } from "react-hook-form"

 export const enum DateName {
-  date = 'date',
-  day = 'day',
-  month = 'month',
-  year = 'year',
+  date = "date",
+  day = "day",
+  month = "month",
+  year = "year",
 }
-export interface DateProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
+export interface DateProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  labels: {
    day: string
    month: string
--- a/packages/design-system/lib/components/Form/Date/index.tsx
+++ b/packages/design-system/lib/components/Form/Date/index.tsx
@@ -1,19 +1,19 @@
-'use client'
-import { parseDate } from '@internationalized/date'
-import { useEffect } from 'react'
-import { useController, useFormContext, useWatch } from 'react-hook-form'
-import { useMediaQuery } from 'usehooks-ts'
+"use client"
+import { parseDate } from "@internationalized/date"
+import { useEffect } from "react"
+import { useController, useFormContext, useWatch } from "react-hook-form"
+import { useMediaQuery } from "usehooks-ts"

-import { dt } from '@scandic-hotels/common/dt'
-import { logger } from '@scandic-hotels/common/logger'
-import { getLocalizedMonthName } from '@scandic-hotels/common/utils/dateFormatting'
-import { rangeArray } from '@scandic-hotels/common/utils/rangeArray'
-import { ErrorMessage } from '../../Form/ErrorMessage'
-import { Select } from '../../Select'
+import { dt } from "@scandic-hotels/common/dt"
+import { logger } from "@scandic-hotels/common/logger"
+import { getLocalizedMonthName } from "@scandic-hotels/common/utils/dateFormatting"
+import { rangeArray } from "@scandic-hotels/common/utils/rangeArray"
+import { ErrorMessage } from "../../Form/ErrorMessage"
+import { Select } from "../../Select"

-import { DateName, type DateProps } from './date'
+import { DateName, type DateProps } from "./date"

-import styles from './date.module.css'
+import styles from "./date.module.css"

 export default function DateSelect({
  labels,
@@ -21,7 +21,7 @@ export default function DateSelect({
  name,
  registerOptions = {},
 }: DateProps) {
-  const isDesktop = useMediaQuery('(min-width: 768px)', {
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
    initializeWithValue: false,
  })

@@ -37,7 +37,7 @@ export default function DateSelect({
  const month = watch(DateName.month)
  const day = watch(DateName.day)

-  const minAgeDate = dt().subtract(18, 'year').toDate() // age 18
+  const minAgeDate = dt().subtract(18, "year").toDate() // age 18
  const minAgeYear = minAgeDate.getFullYear()
  const minAgeMonth = year === minAgeYear ? minAgeDate.getMonth() + 1 : null
  const minAgeDay =
@@ -86,7 +86,7 @@ export default function DateSelect({
      .date(Number(day))

    if (newDate.isValid()) {
-      setValue(name, newDate.format('YYYY-MM-DD'), {
+      setValue(name, newDate.format("YYYY-MM-DD"), {
        shouldDirty: true,
        shouldTouch: true,
        shouldValidate: true,
@@ -105,7 +105,7 @@ export default function DateSelect({
      ? parseDate(currentDateValue)
      : null
  } catch (error) {
-    logger.warn('Known error for parse date in DateSelect: ', error)
+    logger.warn("Known error for parse date in DateSelect: ", error)
  }

  useEffect(() => {
--- a/packages/design-system/lib/components/Form/ErrorMessage/Error.tsx
+++ b/packages/design-system/lib/components/Form/ErrorMessage/Error.tsx
@@ -1,7 +1,7 @@
-import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { MaterialIcon } from "../../Icons/MaterialIcon"

-import styles from './error.module.css'
-import { Typography } from '../../Typography'
+import styles from "./error.module.css"
+import { Typography } from "../../Typography"

 export function Error({ children }: React.PropsWithChildren) {
  return (
--- a/packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts
+++ b/packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts
@@ -1,11 +1,11 @@
-import type { FieldValuesFromFieldErrors } from '@hookform/error-message'
+import type { FieldValuesFromFieldErrors } from "@hookform/error-message"
 import type {
  FieldErrors,
  FieldName,
  FieldValues,
  Message,
  MultipleFieldErrors,
-} from 'react-hook-form'
+} from "react-hook-form"

 export type ErrorMessageProps<TFieldErrors> = {
  errors?: FieldErrors<FieldValues>
--- a/packages/design-system/lib/components/Form/ErrorMessage/index.tsx
+++ b/packages/design-system/lib/components/Form/ErrorMessage/index.tsx
@@ -1,8 +1,8 @@
-import { ErrorMessage as RHFErrorMessage } from '@hookform/error-message'
+import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"

-import { Error } from './Error'
+import { Error } from "./Error"

-import type { ErrorMessageProps } from './errorMessage'
+import type { ErrorMessageProps } from "./errorMessage"

 export function ErrorMessage<T>({
  errors,
--- a/packages/design-system/lib/components/Form/FormInput/index.tsx
+++ b/packages/design-system/lib/components/Form/FormInput/index.tsx
@@ -1,45 +1,45 @@
-'use client'
+"use client"

-import { forwardRef, type HTMLAttributes, type WheelEvent } from 'react'
-import { Text, TextField } from 'react-aria-components'
-import { Controller, useFormContext } from 'react-hook-form'
-import { useIntl, type IntlShape } from 'react-intl'
-import { cx } from 'class-variance-authority'
+import { forwardRef, type HTMLAttributes, type WheelEvent } from "react"
+import { Text, TextField } from "react-aria-components"
+import { Controller, useFormContext } from "react-hook-form"
+import { useIntl, type IntlShape } from "react-intl"
+import { cx } from "class-variance-authority"

-import { Error } from '../ErrorMessage/Error'
-import { mergeRefs } from '../utils/mergeRefs'
-import { MaterialIcon, MaterialIconProps } from '../../Icons/MaterialIcon'
-import { Input } from '../../Input'
+import { Error } from "../ErrorMessage/Error"
+import { mergeRefs } from "../utils/mergeRefs"
+import { MaterialIcon, MaterialIconProps } from "../../Icons/MaterialIcon"
+import { Input } from "../../Input"

-import styles from './input.module.css'
+import styles from "./input.module.css"

-import type { FormInputProps } from './input'
+import type { FormInputProps } from "./input"

 const defaultErrorFormatter = (
  _intl: IntlShape,
  errorMessage?: string
-): string => errorMessage ?? ''
+): string => errorMessage ?? ""

 export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
  function FormInput(
    {
      autoComplete,
-      className = '',
-      description = '',
-      descriptionIcon = 'info' as MaterialIconProps['icon'],
+      className = "",
+      description = "",
+      descriptionIcon = "info" as MaterialIconProps["icon"],
      disabled = false,
      errorFormatter,
      hideError,
      inputMode,
      label,
-      labelPosition = 'floating',
+      labelPosition = "floating",
      maxLength,
      name,
      id,
      placeholder,
      readOnly = false,
      registerOptions = {},
-      type = 'text',
+      type = "text",
      validationState,
      ...props
    },
@@ -52,7 +52,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(

    // Number input: prevent scroll from changing value
    const numberAttributes: HTMLAttributes<HTMLInputElement> =
-      type === 'number'
+      type === "number"
        ? {
            onWheel: (evt: WheelEvent<HTMLInputElement>) => {
              evt.currentTarget.blur()
@@ -87,7 +87,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
                name={field.name}
                onBlur={field.onBlur}
                onChange={field.onChange}
-                value={field.value ?? ''}
+                value={field.value ?? ""}
                autoComplete={autoComplete}
                id={id ?? field.name}
                label={label}
@@ -123,4 +123,4 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
  }
 )

-FormInput.displayName = 'FormInput'
+FormInput.displayName = "FormInput"
--- a/packages/design-system/lib/components/Form/FormInput/input.module.css
+++ b/packages/design-system/lib/components/Form/FormInput/input.module.css
@@ -8,7 +8,7 @@
  gap: var(--Space-x05);
  margin-top: var(--Space-x1);
  font-size: var(--Body-Supporting-text-Size);
-  font-family: var(--Body-Supporting-text-Font-family, 'Fira Sans');
+  font-family: var(--Body-Supporting-text-Font-family, "Fira Sans");
  font-style: normal;
  font-weight: var(--Body-Supporting-text-Font-weight);
  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
--- a/packages/design-system/lib/components/Form/FormInput/input.ts
+++ b/packages/design-system/lib/components/Form/FormInput/input.ts
@@ -1,14 +1,14 @@
-import type { RegisterOptions } from 'react-hook-form'
-import type { IntlShape } from 'react-intl'
+import type { RegisterOptions } from "react-hook-form"
+import type { IntlShape } from "react-intl"

-import type { MaterialIconProps } from '../../Icons/MaterialIcon'
-import type { InputProps } from '../../Input/types'
+import type { MaterialIconProps } from "../../Icons/MaterialIcon"
+import type { InputProps } from "../../Input/types"

 export interface FormInputProps extends InputProps {
  /** Helper text displayed below the input (hidden when there's an error) */
  description?: string
  /** Icon to display with the description text. Defaults to 'info' */
-  descriptionIcon?: MaterialIconProps['icon']
+  descriptionIcon?: MaterialIconProps["icon"]
  /** Field id for react-hook-form registration */
  id?: string
  /** Field name for react-hook-form registration */
@@ -24,5 +24,5 @@ export interface FormInputProps extends InputProps {
   * - 'warning': Shows warning styling (yellow background, focus ring)
   * - Note: Error state is automatically derived from form validation
   */
-  validationState?: 'warning'
+  validationState?: "warning"
 }
--- a/packages/design-system/lib/components/Form/FormSelect/index.tsx
+++ b/packages/design-system/lib/components/Form/FormSelect/index.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"

-import { useController } from 'react-hook-form'
+import { useController } from "react-hook-form"

-import { Select } from '../../Select'
+import { Select } from "../../Select"

-import { SelectProps } from '../../Select/types'
+import { SelectProps } from "../../Select/types"

 export function FormSelect({ label, items, name }: SelectProps) {
  const { field, fieldState } = useController({
@@ -17,7 +17,7 @@ export function FormSelect({ label, items, name }: SelectProps) {
      isInvalid={fieldState.invalid}
      name={name}
      onBlur={field.onBlur}
-      onSelectionChange={(c) => field.onChange(c ?? '')}
+      onSelectionChange={(c) => field.onChange(c ?? "")}
      selectedKey={field.value}
      data-testid={name}
    />
--- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
@@ -1,12 +1,12 @@
-import { cx } from 'class-variance-authority'
-import { Label, Radio } from 'react-aria-components'
+import { cx } from "class-variance-authority"
+import { Label, Radio } from "react-aria-components"

-import styles from './paymentOption.module.css'
+import styles from "./paymentOption.module.css"

-import type { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"

-import { PaymentMethodIcon } from '../../Payment/PaymentMethodIcon'
-import { Typography } from '../../Typography'
+import { PaymentMethodIcon } from "../../Payment/PaymentMethodIcon"
+import { Typography } from "../../Typography"

 export type PaymentOptionProps = {
  value: string
--- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx
@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { expect, fn } from 'storybook/test'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import { expect, fn } from "storybook/test"

-import { PaymentOptionsGroup } from './PaymentOptionsGroup'
-import { PaymentOption } from './PaymentOption'
-import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
-import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+import { PaymentOptionsGroup } from "./PaymentOptionsGroup"
+import { PaymentOption } from "./PaymentOption"
+import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import { FormDecorator } from "../../../../.storybook/decorators/FormDecorator"

 const meta: Meta<typeof PaymentOptionsGroup> = {
-  title: 'Patterns/Form/Payment/PaymentOptionsGroup',
+  title: "Patterns/Form/Payment/PaymentOptionsGroup",
  component: PaymentOptionsGroup,
  decorators: [FormDecorator],
 }
@@ -17,8 +17,8 @@ type Story = StoryObj<typeof PaymentOptionsGroup>

 export const Default: Story = {
  args: {
-    label: 'Select Payment Method',
-    name: 'paymentMethod',
+    label: "Select Payment Method",
+    name: "paymentMethod",
    onChange: fn(),
    children: (
      <>
@@ -42,11 +42,11 @@ export const Default: Story = {
    ),
  },
  play: async ({ canvas, userEvent, args }) => {
-    const visaOption = await canvas.findByRole('radio', { name: 'Visa' })
+    const visaOption = await canvas.findByRole("radio", { name: "Visa" })
    expect(visaOption).toBeInTheDocument()

    expect(args.onChange).not.toHaveBeenCalled()
    await userEvent.click(visaOption)
-    expect(args.onChange).toHaveBeenCalledWith('visa')
+    expect(args.onChange).toHaveBeenCalledWith("visa")
  },
 }
--- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client"

-import { Label, RadioGroup } from 'react-aria-components'
-import { useController, useFormContext } from 'react-hook-form'
-import type { ReactNode } from 'react'
-import { Typography } from '../../../components/Typography'
+import { Label, RadioGroup } from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"
+import type { ReactNode } from "react"
+import { Typography } from "../../../components/Typography"

 interface PaymentOptionsGroupProps {
  name: string
--- a/packages/design-system/lib/components/Form/Phone/index.tsx
+++ b/packages/design-system/lib/components/Form/Phone/index.tsx
@@ -1,9 +1,9 @@
-'use client'
-import 'react-international-phone/style.css'
+"use client"
+import "react-international-phone/style.css"

-import { useEffect, useMemo } from 'react'
-import { TextField } from 'react-aria-components'
-import { useFormContext, useWatch } from 'react-hook-form'
+import { useEffect, useMemo } from "react"
+import { TextField } from "react-aria-components"
+import { useFormContext, useWatch } from "react-hook-form"
 import {
  buildCountryData,
  CountrySelector,
@@ -12,29 +12,29 @@ import {
  parseCountry,
  type ParsedCountry,
  usePhoneInput,
-} from 'react-international-phone'
+} from "react-international-phone"

-import { ErrorMessage } from '../ErrorMessage'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Input } from '../../Input'
-import { InputLabel } from '../../InputLabel'
+import { ErrorMessage } from "../ErrorMessage"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Input } from "../../Input"
+import { InputLabel } from "../../InputLabel"

-import styles from './phone.module.css'
+import styles from "./phone.module.css"

-import type { PhoneProps } from './phone'
-import { Typography } from '../../Typography'
+import type { PhoneProps } from "./phone"
+import { Typography } from "../../Typography"

 export default function Phone({
-  ariaLabel = 'Phone number input',
-  className = '',
-  countryLabel = 'Country code',
-  countrySelectorName = 'phoneNumberCC',
+  ariaLabel = "Phone number input",
+  className = "",
+  countryLabel = "Country code",
+  countrySelectorName = "phoneNumberCC",
  countriesWithTranslatedName,
  defaultCountryCode,
  disabled = false,
  errorMessage,
  label,
-  name = 'phoneNumber',
+  name = "phoneNumber",
  placeholder,
  registerOptions = {
    required: true,
@@ -90,7 +90,7 @@ export default function Phone({
        dropdownArrowClassName={styles.arrow}
        flagClassName={styles.flag}
        onSelect={handleSelectCountry}
-        preferredCountries={['de', 'dk', 'fi', 'no', 'se', 'gb']}
+        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
        selectedCountry={country.iso2}
        renderButtonWrapper={(props) => (
          <button
--- a/packages/design-system/lib/components/Form/Phone/phone.module.css
+++ b/packages/design-system/lib/components/Form/Phone/phone.module.css
@@ -90,7 +90,7 @@
  }
 }

-.select[aria-expanded='true'] .chevron {
+.select[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
 }

--- a/packages/design-system/lib/components/Form/Phone/phone.ts
+++ b/packages/design-system/lib/components/Form/Phone/phone.ts
@@ -1,4 +1,4 @@
-import type { RegisterOptions } from 'react-hook-form'
+import type { RegisterOptions } from "react-hook-form"

 export interface PhoneProps {
  ariaLabel?: string
--- a/packages/design-system/lib/components/Form/RadioButtonsGroup/index.tsx
+++ b/packages/design-system/lib/components/Form/RadioButtonsGroup/index.tsx
@@ -1,12 +1,12 @@
-'use client'
+"use client"

-import { cx } from 'class-variance-authority'
-import { Label, Radio, RadioGroup, Text } from 'react-aria-components'
+import { cx } from "class-variance-authority"
+import { Label, Radio, RadioGroup, Text } from "react-aria-components"

-import { Divider } from '../../Divider'
-import { Typography } from '../../Typography'
+import { Divider } from "../../Divider"
+import { Typography } from "../../Typography"

-import styles from './radioButtonsGroup.module.css'
+import styles from "./radioButtonsGroup.module.css"
 interface Option {
  value: string
  title: string
--- a/packages/design-system/lib/components/Form/RadioCard/index.tsx
+++ b/packages/design-system/lib/components/Form/RadioCard/index.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client"

-import { cx } from 'class-variance-authority'
-import { useFormContext } from 'react-hook-form'
+import { cx } from "class-variance-authority"
+import { useFormContext } from "react-hook-form"

-import { Divider } from '../../Divider'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
+import { Divider } from "../../Divider"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"

-import styles from './radioCard.module.css'
+import styles from "./radioCard.module.css"

-import type { RadioCardProps } from './types'
+import type { RadioCardProps } from "./types"

 export default function RadioCard({
  Icon,
@@ -37,7 +37,7 @@ export default function RadioCard({
  function onKeyDown(event: React.KeyboardEvent) {
    if (disabled) return

-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
      setValue(name, value)
    }
  }
--- a/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
+++ b/packages/design-system/lib/components/Form/RadioCard/radioCard.module.css
@@ -5,8 +5,8 @@
  grid-template-columns: 1fr auto;
  grid-auto-rows: min-content;
  grid-template-areas:
-    'icon subtitleSecondary'
-    'title subtitle';
+    "icon subtitleSecondary"
+    "title subtitle";
  border-radius: var(--Corner-radius-md);
  border: 1px solid var(--Border-Strong);
  background: var(--Surface-Primary-Default);
--- a/packages/design-system/lib/components/Form/RadioCard/types.ts
+++ b/packages/design-system/lib/components/Form/RadioCard/types.ts
@@ -1,8 +1,10 @@
-import type { IconProps } from '../../Icons'
-import type { JSX } from 'react'
+import type { IconProps } from "../../Icons"
+import type { JSX } from "react"

-export interface RadioCardProps
-  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'title'> {
+export interface RadioCardProps extends Omit<
+  React.LabelHTMLAttributes<HTMLLabelElement>,
+  "title"
+> {
  Icon?: (props: IconProps) => JSX.Element
  iconHeight?: number
  name: string
--- a/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx
+++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx
@@ -1,12 +1,12 @@
-import type { ComponentProps } from 'react'
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { fn, expect } from 'storybook/test'
-import { SelectPaymentMethod } from './index'
-import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
-import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+import type { ComponentProps } from "react"
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import { fn, expect } from "storybook/test"
+import { SelectPaymentMethod } from "./index"
+import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import { FormDecorator } from "../../../../.storybook/decorators/FormDecorator"

 const meta: Meta<typeof SelectPaymentMethod> = {
-  title: 'Patterns/Form/Payment/SelectCreditCard',
+  title: "Patterns/Form/Payment/SelectCreditCard",
  component: SelectPaymentMethod,
  argTypes: {},
  decorators: [FormDecorator],
@@ -18,30 +18,30 @@ type Story = StoryObj<typeof SelectPaymentMethod>

 export const PrimaryDefault: Story = {
  args: {
-    formName: 'paymentMethod',
+    formName: "paymentMethod",
    onChange: fn(),
    paymentMethods: [
      {
-        id: 'klarna',
-        alias: 'Card 1',
+        id: "klarna",
+        alias: "Card 1",
        cardType: PaymentMethodEnum.klarna,
-        truncatedNumber: '1234',
+        truncatedNumber: "1234",
      },
      {
-        id: 'applePay',
-        alias: 'Card 2',
+        id: "applePay",
+        alias: "Card 2",
        cardType: PaymentMethodEnum.applePay,
-        truncatedNumber: '1234',
+        truncatedNumber: "1234",
      },
    ],
  } satisfies ComponentProps<typeof SelectPaymentMethod>,

  play: async ({ canvas, userEvent, args }) => {
-    const options = await canvas.findAllByRole('radio')
+    const options = await canvas.findAllByRole("radio")
    expect(options[0]).toBeInTheDocument()

    expect(args.onChange).not.toHaveBeenCalled()
    await userEvent.click(options[0])
-    expect(args.onChange).toHaveBeenCalledWith('klarna')
+    expect(args.onChange).toHaveBeenCalledWith("klarna")
  },
 }
--- a/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
+++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
@@ -1,16 +1,16 @@
-import { useIntl } from 'react-intl'
-import { Label } from 'react-aria-components'
+import { useIntl } from "react-intl"
+import { Label } from "react-aria-components"

-import { PaymentOptionsGroup } from '../PaymentOption/PaymentOptionsGroup'
-import { PaymentOption } from '../PaymentOption/PaymentOption'
-import { Typography } from '../../../components/Typography'
+import { PaymentOptionsGroup } from "../PaymentOption/PaymentOptionsGroup"
+import { PaymentOption } from "../PaymentOption/PaymentOption"
+import { Typography } from "../../../components/Typography"

-import styles from './selectPaymentMethod.module.css'
+import styles from "./selectPaymentMethod.module.css"

 import {
  PAYMENT_METHOD_TITLES,
  PaymentMethodEnum,
-} from '@scandic-hotels/common/constants/paymentMethod'
+} from "@scandic-hotels/common/constants/paymentMethod"

 type PaymentMethod = {
  id: string
@@ -39,15 +39,15 @@ export function SelectPaymentMethod({

  const mySavedCardsLabel = paymentMethods.length
    ? intl.formatMessage({
-        id: 'payment.mySavedCards',
-        defaultMessage: 'My saved cards',
+        id: "payment.mySavedCards",
+        defaultMessage: "My saved cards",
      })
    : undefined

  const otherCardLabel = paymentMethods.length
    ? intl.formatMessage({
-        id: 'common.other',
-        defaultMessage: 'Other',
+        id: "common.other",
+        defaultMessage: "Other",
      })
    : undefined

@@ -64,8 +64,8 @@ export function SelectPaymentMethod({
      >
        <Label className="sr-only">
          {intl.formatMessage({
-            id: 'enterDetails.guarantee.cardOptions',
-            defaultMessage: 'Card options',
+            id: "enterDetails.guarantee.cardOptions",
+            defaultMessage: "Card options",
          })}
        </Label>
        <Typography variant="Title/Overline/sm">
@@ -94,8 +94,8 @@ export function SelectPaymentMethod({
          value={PaymentMethodEnum.card}
          type={PaymentMethodEnum.card}
          label={intl.formatMessage({
-            id: 'common.creditCard',
-            defaultMessage: 'Credit card',
+            id: "common.creditCard",
+            defaultMessage: "Credit card",
          })}
        />
      </PaymentOptionsGroup>
--- a/packages/design-system/lib/components/Form/utils/index.ts
+++ b/packages/design-system/lib/components/Form/utils/index.ts
@@ -1 +1 @@
-export { mergeRefs } from './mergeRefs'
+export { mergeRefs } from "./mergeRefs"
--- a/packages/design-system/lib/components/Form/utils/mergeRefs.ts
+++ b/packages/design-system/lib/components/Form/utils/mergeRefs.ts
@@ -1,4 +1,4 @@
-import type { Ref, RefCallback } from 'react'
+import type { Ref, RefCallback } from "react"

 /**
 * Merges multiple refs into a single ref callback.
@@ -14,7 +14,7 @@ export function mergeRefs<T>(
 ): RefCallback<T> {
  return (node: T | null) => {
    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
+      if (typeof ref === "function") {
        ref(node)
      } else if (ref) {
        ref.current = node