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/RateCard/Campaign/Campaign.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx
@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import CampaignRateCard from '.'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import CampaignRateCard from "."

 const meta: Meta<typeof CampaignRateCard> = {
-  title: 'Product Components/RateCard/Campaign',
+  title: "Product Components/RateCard/Campaign",
  component: CampaignRateCard,
  decorators: [
    (Story) => (
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: "400px" }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
-    rateTitle: { control: 'text' },
-    paymentTerm: { control: 'text' },
-    bannerText: { control: 'text' },
-    rate: { control: 'object' },
-    memberRate: { control: 'object' },
-    omnibusRate: { control: 'object' },
-    comparisonRate: { control: 'object' },
-    approximateRate: { control: 'object' },
-    rateTermDetails: { control: 'object' },
+    rateTitle: { control: "text" },
+    paymentTerm: { control: "text" },
+    bannerText: { control: "text" },
+    rate: { control: "object" },
+    memberRate: { control: "object" },
+    omnibusRate: { control: "object" },
+    comparisonRate: { control: "object" },
+    approximateRate: { control: "object" },
+    rateTermDetails: { control: "object" },
  },
 }

@@ -30,28 +30,28 @@ type Story = StoryObj<typeof CampaignRateCard>

 export const Default: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'Campaign ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "Campaign ∙ Breakfast included",
    rate: {
      label: "Valentine's Special",
-      price: '198',
-      unit: 'EUR/NIGHT',
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '198',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "198",
+      label: "Approx.",
+      unit: "EUR",
    },
    omnibusRate: {
-      price: '249',
-      label: 'Lowest past price (last 30 days)',
-      unit: 'EUR',
+      price: "249",
+      label: "Lowest past price (last 30 days)",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -59,23 +59,23 @@ export const Default: Story = {

 export const Package: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'WDCPHG ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "WDCPHG ∙ Breakfast included",
    rate: {
-      label: 'Luxurious wine & dine in Copenhagen',
-      price: '1989',
-      unit: 'EUR/NIGHT',
+      label: "Luxurious wine & dine in Copenhagen",
+      price: "1989",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '1989',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "1989",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -83,28 +83,28 @@ export const Package: Story = {

 export const CampaignLoggedIn: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'SUM2025 ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "SUM2025 ∙ Breakfast included",
    rate: {
-      label: 'Luxurious wine & dine in Copenhagen',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      label: "Luxurious wine & dine in Copenhagen",
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '198',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "198",
+      label: "Approx.",
+      unit: "EUR",
    },
    comparisonRate: {
-      price: '249',
-      unit: 'EUR/NIGHT',
+      price: "249",
+      unit: "EUR/NIGHT",
    },
    isHighlightedRate: true,
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -112,33 +112,33 @@ export const CampaignLoggedIn: Story = {

 export const CampaignOmnibus: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'WDCPHG ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "WDCPHG ∙ Breakfast included",
    rate: {
-      label: 'Luxurious wine & dine in Copenhagen',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      label: "Luxurious wine & dine in Copenhagen",
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    memberRate: {
-      label: 'Member price',
-      price: '150',
-      unit: 'EUR/NIGHT',
+      label: "Member price",
+      price: "150",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '198',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "198",
+      label: "Approx.",
+      unit: "EUR",
    },
    omnibusRate: {
-      price: '101',
-      label: 'Lowest past price (last 30 days)',
-      unit: 'EUR',
+      price: "101",
+      label: "Lowest past price (last 30 days)",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
--- a/packages/design-system/lib/components/RateCard/Campaign/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/index.tsx
@@ -1,15 +1,15 @@
-import { cx } from 'class-variance-authority'
+import { cx } from "class-variance-authority"

-import { Typography } from '../../Typography'
-import { Rate, RateTermDetails } from '../types'
+import { Typography } from "../../Typography"
+import { Rate, RateTermDetails } from "../types"

-import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from 'react-intl'
-import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import Modal from '../Modal'
-import styles from '../rate-card.module.css'
-import { variants } from '../variants'
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import Modal from "../Modal"
+import styles from "../rate-card.module.css"
+import { variants } from "../variants"

 interface CampaignRateCardProps {
  id: string
@@ -20,7 +20,7 @@ interface CampaignRateCardProps {
  rate: Rate
  memberRate?: Rate
  omnibusRate?: Rate
-  comparisonRate?: Omit<Rate, 'label'>
+  comparisonRate?: Omit<Rate, "label">
  isHighlightedRate?: boolean
  isHighlightedRateLabel?: boolean
  approximateRate?: Rate
@@ -48,7 +48,7 @@ export default function CampaignRateCard({
  rateTermDetails,
 }: CampaignRateCardProps) {
  const classNames = variants({
-    variant: 'Campaign',
+    variant: "Campaign",
  })

  const intl = useIntl()
@@ -84,8 +84,8 @@ export default function CampaignRateCard({
                  size="sm"
                  className={styles.triggerButton}
                  aria-label={intl.formatMessage({
-                    id: 'selectRate.rateCard.openReservationPolicy',
-                    defaultMessage: 'Open reservation policy',
+                    id: "selectRate.rateCard.openReservationPolicy",
+                    defaultMessage: "Open reservation policy",
                  })}
                  iconName="info"
                />
@@ -167,7 +167,7 @@ export default function CampaignRateCard({
                  <span className={styles.strikethrough}>
                    {comparisonRate.price}
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  </span>{' '}
+                  </span>{" "}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span className={styles.strikethrough}>
                      {comparisonRate.unit}
--- a/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx
@@ -1,22 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import CodeRateCard from '.'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import CodeRateCard from "."

 const meta: Meta<typeof CodeRateCard> = {
-  title: 'Product Components/RateCard/Code',
+  title: "Product Components/RateCard/Code",
  component: CodeRateCard,
  decorators: [
    (Story) => (
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: "400px" }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
-    rateTitle: { control: 'text' },
-    paymentTerm: { control: 'text' },
-    rate: { control: 'object' },
-    approximateRate: { control: 'object' },
-    rateTermDetails: { contorlr: 'object' },
+    rateTitle: { control: "text" },
+    paymentTerm: { control: "text" },
+    rate: { control: "object" },
+    approximateRate: { control: "object" },
+    rateTermDetails: { contorlr: "object" },
  },
 }

@@ -26,23 +26,23 @@ type Story = StoryObj<typeof CodeRateCard>

 export const Default: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'Campaign ∙ Breakfast excluded',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "Campaign ∙ Breakfast excluded",
    rate: {
      label: "Valentine's Special",
-      price: '1989',
-      unit: 'EUR/night',
+      price: "1989",
+      unit: "EUR/night",
    },
    approximateRate: {
-      price: '1989',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "1989",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -50,18 +50,18 @@ export const Default: Story = {

 export const Voucher: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'VOG ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "VOG ∙ Breakfast included",
    rate: {
-      label: 'Promotional name here',
-      price: '1',
-      unit: 'VOUCHER',
+      label: "Promotional name here",
+      price: "1",
+      unit: "VOUCHER",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -69,23 +69,23 @@ export const Voucher: Story = {

 export const CorporateCheck: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'VOG ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "VOG ∙ Breakfast included",
    rate: {
-      label: 'Promotional name here',
-      price: '2cc + 800',
-      unit: 'SEK',
+      label: "Promotional name here",
+      price: "2cc + 800",
+      unit: "SEK",
    },
    approximateRate: {
-      price: '76',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "76",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -93,23 +93,23 @@ export const CorporateCheck: Story = {

 export const DNumberDefault: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'D0043148 ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "D0043148 ∙ Breakfast included",
    rate: {
-      label: 'Helsinki Partners Oy',
-      price: '1989',
-      unit: 'EUR/NIGHT',
+      label: "Helsinki Partners Oy",
+      price: "1989",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '76',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "76",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -117,24 +117,24 @@ export const DNumberDefault: Story = {

 export const DNumberHighlightedRate: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'D0043148 ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "D0043148 ∙ Breakfast included",
    rate: {
-      label: 'Helsinki Partners Oy',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      label: "Helsinki Partners Oy",
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '76',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "76",
+      label: "Approx.",
+      unit: "EUR",
    },
    isHighlightedRate: true,
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -142,23 +142,23 @@ export const DNumberHighlightedRate: Story = {

 export const LNumberDefault: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'L0043148 ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "L0043148 ∙ Breakfast included",
    rate: {
-      label: 'Nordic Team Travel',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      label: "Nordic Team Travel",
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '76',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "76",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -166,27 +166,27 @@ export const LNumberDefault: Story = {

 export const LNumberStrikethrough: Story = {
  args: {
-    rateTitle: 'NON-REFUNDABLE',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'L0043148 ∙ Breakfast included',
+    rateTitle: "NON-REFUNDABLE",
+    paymentTerm: "PAY NOW",
+    bannerText: "L0043148 ∙ Breakfast included",
    rate: {
-      label: 'Nordic Team Travel',
-      price: '198',
-      unit: 'EUR/NIGHT',
+      label: "Nordic Team Travel",
+      price: "198",
+      unit: "EUR/NIGHT",
    },
    comparisonRate: {
-      price: '249',
-      unit: 'EUR/NIGHT',
+      price: "249",
+      unit: "EUR/NIGHT",
    },
    approximateRate: {
-      price: '230/218',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "230/218",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
--- a/packages/design-system/lib/components/RateCard/Code/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/index.tsx
@@ -1,14 +1,14 @@
-import { Rate, RateTermDetails } from '../types'
+import { Rate, RateTermDetails } from "../types"

-import { cx } from 'class-variance-authority'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from 'react-intl'
-import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
-import Modal from '../Modal'
-import styles from '../rate-card.module.css'
-import { variants } from '../variants'
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+import Modal from "../Modal"
+import styles from "../rate-card.module.css"
+import { variants } from "../variants"

 interface CodeRateCardProps {
  id: string
@@ -17,7 +17,7 @@ interface CodeRateCardProps {
  paymentTerm: string
  rate: Rate
  bannerText: string
-  comparisonRate?: Omit<Rate, 'label'>
+  comparisonRate?: Omit<Rate, "label">
  approximateRate?: Rate
  roomTypeCode: string
  isHighlightedRate?: boolean
@@ -41,7 +41,7 @@ export default function CodeRateCard({
  rateTermDetails,
 }: CodeRateCardProps) {
  const classNames = variants({
-    variant: 'Code',
+    variant: "Code",
  })
  const intl = useIntl()

@@ -74,8 +74,8 @@ export default function CodeRateCard({
                  size="sm"
                  className={styles.triggerButton}
                  aria-label={intl.formatMessage({
-                    id: 'selectRate.rateCard.openReservationPolicy',
-                    defaultMessage: 'Open reservation policy',
+                    id: "selectRate.rateCard.openReservationPolicy",
+                    defaultMessage: "Open reservation policy",
                  })}
                  iconName="info"
                />
@@ -113,7 +113,7 @@ export default function CodeRateCard({
        </Typography>
        <div className={styles.content} id={`${id}-details`}>
          <div
-            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
+            className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ""}`}
          >
            <Typography variant="Body/Supporting text (caption)/smBold">
              <p>{rate.label}</p>
@@ -135,7 +135,7 @@ export default function CodeRateCard({
                  <span className={styles.strikethrough}>
                    {comparisonRate.price}
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  </span>{' '}
+                  </span>{" "}
                  <Typography variant="Body/Supporting text (caption)/smBold">
                    <span className={styles.strikethrough}>
                      {comparisonRate.unit}
--- a/packages/design-system/lib/components/RateCard/Modal/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Modal/index.tsx
@@ -1,26 +1,26 @@
-'use client'
+"use client"

-import { AnimatePresence, motion } from 'motion/react'
-import { type PropsWithChildren, useEffect, useState } from 'react'
+import { AnimatePresence, motion } from "motion/react"
+import { type PropsWithChildren, useEffect, useState } from "react"
 import {
  Modal as AriaModal,
  Dialog,
  DialogTrigger,
  ModalOverlay,
-} from 'react-aria-components'
+} from "react-aria-components"

 import {
  type AnimationState,
  AnimationStateEnum,
  type InnerModalProps,
  type ModalProps,
-} from './modal'
-import { fade, slideInOut } from './motionVariants'
+} from "./modal"
+import { fade, slideInOut } from "./motionVariants"

-import { useIntl } from 'react-intl'
-import { IconButton } from '../../IconButton'
-import { Typography } from '../../Typography'
-import styles from './modal.module.css'
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import { Typography } from "../../Typography"
+import styles from "./modal.module.css"

 const MotionOverlay = motion.create(ModalOverlay)
 const MotionModal = motion.create(AriaModal)
@@ -94,8 +94,8 @@ function InnerModal({
                    emphasis
                    onPress={close}
                    aria-label={intl.formatMessage({
-                      id: 'common.close',
-                      defaultMessage: 'Close',
+                      id: "common.close",
+                      defaultMessage: "Close",
                    })}
                    iconName="close"
                  />
@@ -127,7 +127,7 @@ export default function Modal({
  )

  useEffect(() => {
-    if (typeof isOpen === 'boolean') {
+    if (typeof isOpen === "boolean") {
      setAnimation(
        isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
      )
--- a/packages/design-system/lib/components/RateCard/Modal/modal.ts
+++ b/packages/design-system/lib/components/RateCard/Modal/modal.ts
@@ -1,9 +1,9 @@
-import type { Dispatch, JSX, SetStateAction } from 'react'
+import type { Dispatch, JSX, SetStateAction } from "react"

 export enum AnimationStateEnum {
-  unmounted = 'unmounted',
-  hidden = 'hidden',
-  visible = 'visible',
+  unmounted = "unmounted",
+  hidden = "hidden",
+  visible = "visible",
 }

 export type AnimationState = keyof typeof AnimationStateEnum
@@ -23,7 +23,7 @@ export type ModalProps = {
    }
 )

-export type InnerModalProps = Omit<ModalProps, 'trigger'> & {
+export type InnerModalProps = Omit<ModalProps, "trigger"> & {
  animation: AnimationState
  setAnimation: Dispatch<SetStateAction<AnimationState>>
 }
--- a/packages/design-system/lib/components/RateCard/Modal/motionVariants.ts
+++ b/packages/design-system/lib/components/RateCard/Modal/motionVariants.ts
@@ -1,11 +1,11 @@
 export const fade = {
  hidden: {
    opacity: 0,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
  visible: {
    opacity: 1,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
 } as const

@@ -13,12 +13,12 @@ export const slideInOut = {
  hidden: {
    opacity: 0,
    y: 32,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
  visible: {
    opacity: 1,
    y: 0,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
 } as const

@@ -26,11 +26,11 @@ export const slideFromTop = {
  hidden: {
    opacity: 0,
    y: -32,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
  visible: {
    opacity: 1,
    y: 0,
-    transition: { duration: 0.4, ease: 'easeInOut' },
+    transition: { duration: 0.4, ease: "easeInOut" },
  },
 } as const
--- a/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx
@@ -1,20 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import NoRateAvailableCard from '.'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import NoRateAvailableCard from "."

 const meta: Meta<typeof NoRateAvailableCard> = {
-  title: 'Product Components/RateCard/NoRateAvailable',
+  title: "Product Components/RateCard/NoRateAvailable",
  component: NoRateAvailableCard,
  decorators: [
    (Story) => (
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: "400px" }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
-    rateTitle: { control: 'text' },
-    paymentTerm: { control: 'text' },
-    noPricesAvailableText: { control: 'text' },
+    rateTitle: { control: "text" },
+    paymentTerm: { control: "text" },
+    noPricesAvailableText: { control: "text" },
  },
 }

@@ -24,39 +24,39 @@ type Story = StoryObj<typeof NoRateAvailableCard>

 export const NoRateAvailable: Story = {
  args: {
-    variant: 'Regular',
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
-    noPricesAvailableText: 'No prices available',
+    variant: "Regular",
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
+    noPricesAvailableText: "No prices available",
  },
 }

 export const NoRateAvailableCampaign: Story = {
  args: {
-    variant: 'Campaign',
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'Campaign ∙ Breakfast included',
-    noPricesAvailableText: 'No prices available',
+    variant: "Campaign",
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
+    bannerText: "Campaign ∙ Breakfast included",
+    noPricesAvailableText: "No prices available",
  },
 }

 export const NoRateAvailableCode: Story = {
  args: {
-    variant: 'Code',
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'WDCPHG ∙ Breakfast included',
-    noPricesAvailableText: 'No prices available',
+    variant: "Code",
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
+    bannerText: "WDCPHG ∙ Breakfast included",
+    noPricesAvailableText: "No prices available",
  },
 }

 export const NoRateAvailablePoints: Story = {
  args: {
-    variant: 'Points',
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
-    bannerText: 'WDCPHG ∙ Breakfast included',
-    noPricesAvailableText: 'No prices available',
+    variant: "Points",
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
+    bannerText: "WDCPHG ∙ Breakfast included",
+    noPricesAvailableText: "No prices available",
  },
 }
--- a/packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx
+++ b/packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx
@@ -1,10 +1,10 @@
-import { IconButton } from '../../IconButton'
-import { Typography } from '../../Typography'
-import styles from '../rate-card.module.css'
-import { variants } from '../variants'
+import { IconButton } from "../../IconButton"
+import { Typography } from "../../Typography"
+import styles from "../rate-card.module.css"
+import { variants } from "../variants"

 interface NoRateAvailableCardProps {
-  variant: 'Regular' | 'Campaign' | 'Code' | 'Points'
+  variant: "Regular" | "Campaign" | "Code" | "Points"
  rateTitle: string
  paymentTerm: string
  bannerText?: string
--- a/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx
@@ -1,27 +1,27 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"

-import PointsRateCard from '.'
+import PointsRateCard from "."

 const meta: Meta<typeof PointsRateCard> = {
-  title: 'Product Components/RateCard/Points',
+  title: "Product Components/RateCard/Points",
  component: PointsRateCard,
  decorators: [
    (Story) => (
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: "400px" }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
-    rateTitle: { control: 'text' },
-    paymentTerm: { control: 'text' },
-    bannerText: { control: 'text' },
-    rates: { control: 'object' },
-    selectedRate: { control: 'text' },
-    onRateSelect: { action: 'onRateSelect' },
-    isNotEnoughPoints: { control: 'boolean' },
-    notEnoughPointsText: { control: 'text' },
-    rateTermDetails: { control: 'object' },
+    rateTitle: { control: "text" },
+    paymentTerm: { control: "text" },
+    bannerText: { control: "text" },
+    rates: { control: "object" },
+    selectedRate: { control: "text" },
+    onRateSelect: { action: "onRateSelect" },
+    isNotEnoughPoints: { control: "boolean" },
+    notEnoughPointsText: { control: "text" },
+    rateTermDetails: { control: "object" },
  },
 }

@@ -31,40 +31,40 @@ type Story = StoryObj<typeof PointsRateCard>

 export const Default: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'Reward night ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "Reward night ∙ Breakfast included",
    rates: [
      {
-        points: '20000',
-        currency: 'PTS',
-        rateCode: 'REDNIGHT7',
+        points: "20000",
+        currency: "PTS",
+        rateCode: "REDNIGHT7",
      },
      {
-        points: '15000',
-        currency: 'PTS',
+        points: "15000",
+        currency: "PTS",
        additionalPrice: {
-          price: '250',
-          currency: 'EUR',
+          price: "250",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7A',
+        rateCode: "REDNIGHT7A",
      },
      {
-        points: '10000',
-        currency: 'PTS',
+        points: "10000",
+        currency: "PTS",
        additionalPrice: {
-          price: '500',
-          currency: 'EUR',
+          price: "500",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7B',
+        rateCode: "REDNIGHT7B",
      },
    ],
    selectedRate: undefined,
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -72,42 +72,42 @@ export const Default: Story = {

 export const WithDisabledRates: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'Reward night ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "Reward night ∙ Breakfast included",
    rates: [
      {
-        points: '20000',
-        currency: 'PTS',
+        points: "20000",
+        currency: "PTS",
        isDisabled: true,
-        rateCode: 'REDNIGHT7',
+        rateCode: "REDNIGHT7",
      },
      {
-        points: '15000',
-        currency: 'PTS',
+        points: "15000",
+        currency: "PTS",
        isDisabled: true,
        additionalPrice: {
-          price: '250',
-          currency: 'EUR',
+          price: "250",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7A',
+        rateCode: "REDNIGHT7A",
      },
      {
-        points: '10000',
-        currency: 'PTS',
+        points: "10000",
+        currency: "PTS",
        additionalPrice: {
-          price: '500',
-          currency: 'EUR',
+          price: "500",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7B',
+        rateCode: "REDNIGHT7B",
      },
    ],
-    selectedRate: '2',
+    selectedRate: "2",
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -115,42 +115,42 @@ export const WithDisabledRates: Story = {

 export const NotEnoughPoints: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY LATER',
-    bannerText: 'Reward night ∙ Breakfast included',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY LATER",
+    bannerText: "Reward night ∙ Breakfast included",
    rates: [
      {
-        points: '20000',
-        currency: 'PTS',
-        rateCode: 'REDNIGHT7',
+        points: "20000",
+        currency: "PTS",
+        rateCode: "REDNIGHT7",
      },
      {
-        points: '15000',
-        currency: 'PTS',
+        points: "15000",
+        currency: "PTS",
        additionalPrice: {
-          price: '250',
-          currency: 'EUR',
+          price: "250",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7A',
+        rateCode: "REDNIGHT7A",
      },
      {
-        points: '10000',
-        currency: 'PTS',
+        points: "10000",
+        currency: "PTS",
        additionalPrice: {
-          price: '500',
-          currency: 'EUR',
+          price: "500",
+          currency: "EUR",
        },
-        rateCode: 'REDNIGHT7B',
+        rateCode: "REDNIGHT7B",
      },
    ],
    selectedRate: undefined,
    isNotEnoughPoints: true,
-    notEnoughPointsText: 'Not enough points',
+    notEnoughPointsText: "Not enough points",
    onRateSelect: (value) => console.log(value),
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
--- a/packages/design-system/lib/components/RateCard/Points/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Points/index.tsx
@@ -1,14 +1,14 @@
-import { Typography } from '../../Typography'
-import { RatePointsOption, RateTermDetails } from '../types'
+import { Typography } from "../../Typography"
+import { RatePointsOption, RateTermDetails } from "../types"

-import { RadioGroup } from 'react-aria-components'
-import { useIntl } from 'react-intl'
-import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Radio } from '../../Radio'
-import Modal from '../Modal'
-import styles from '../rate-card.module.css'
-import { variants } from '../variants'
+import { RadioGroup } from "react-aria-components"
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Radio } from "../../Radio"
+import Modal from "../Modal"
+import styles from "../rate-card.module.css"
+import { variants } from "../variants"

 interface PointsRateCardProps {
  rateTitle: string
@@ -38,7 +38,7 @@ export default function PointsRateCard({
  rateTermDetails,
 }: PointsRateCardProps) {
  const classNames = variants({
-    variant: 'Points',
+    variant: "Points",
  })
  const intl = useIntl()

@@ -60,8 +60,8 @@ export default function PointsRateCard({
                    emphasis
                    size="sm"
                    aria-label={intl.formatMessage({
-                      id: 'selectRate.rateCard.openReservationPolicy',
-                      defaultMessage: 'Open reservation policy',
+                      id: "selectRate.rateCard.openReservationPolicy",
+                      defaultMessage: "Open reservation policy",
                    })}
                    iconName="info"
                  />
@@ -119,7 +119,7 @@ export default function PointsRateCard({
                        <Typography variant="Body/Supporting text (caption)/smBold">
                          <span>
                            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                            {`${rate.currency} ${rate.additionalPrice ? ' + ' : ''}`}
+                            {`${rate.currency} ${rate.additionalPrice ? " + " : ""}`}
                          </span>
                        </Typography>
                      </p>
--- a/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
@@ -1,24 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import RegularRateCard from '.'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+import RegularRateCard from "."

 const meta: Meta<typeof RegularRateCard> = {
-  title: 'Product Components/RateCard/Regular',
+  title: "Product Components/RateCard/Regular",
  component: RegularRateCard,
  decorators: [
    (Story) => (
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: "400px" }}>
        <Story />
      </div>
    ),
  ],
  argTypes: {
-    rateTitle: { control: 'text' },
-    paymentTerm: { control: 'text' },
-    rate: { control: 'object' },
-    memberRate: { control: 'object' },
-    omnibusRate: { control: 'object' },
-    approximateRate: { control: 'object' },
-    rateTermDetails: { control: 'object' },
+    rateTitle: { control: "text" },
+    paymentTerm: { control: "text" },
+    rate: { control: "object" },
+    memberRate: { control: "object" },
+    omnibusRate: { control: "object" },
+    approximateRate: { control: "object" },
+    rateTermDetails: { control: "object" },
  },
 }

@@ -28,32 +28,32 @@ type Story = StoryObj<typeof RegularRateCard>

 export const Default: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
    rate: {
-      label: 'Standard Price',
-      price: '1980',
-      unit: 'SEK/NIGHT',
+      label: "Standard Price",
+      price: "1980",
+      unit: "SEK/NIGHT",
    },
    memberRate: {
-      label: 'Member Price',
-      price: '1900',
-      unit: 'SEK/NIGHT',
+      label: "Member Price",
+      price: "1900",
+      unit: "SEK/NIGHT",
    },
    approximateRate: {
-      price: '198',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "198",
+      label: "Approx.",
+      unit: "EUR",
    },
    omnibusRate: {
-      label: 'Lowest past price (last 30 days)',
-      price: '1690',
-      unit: 'SEK/NIGHT',
+      label: "Lowest past price (last 30 days)",
+      price: "1690",
+      unit: "SEK/NIGHT",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -62,27 +62,27 @@ export const Default: Story = {
 export const Selected: Story = {
  args: {
    isSelected: true,
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
    rate: {
-      label: 'Standard Price',
-      price: '1980',
-      unit: 'SEK/NIGHT',
+      label: "Standard Price",
+      price: "1980",
+      unit: "SEK/NIGHT",
    },
    memberRate: {
-      label: 'Member Price',
-      price: '1900',
-      unit: 'SEK/NIGHT',
+      label: "Member Price",
+      price: "1900",
+      unit: "SEK/NIGHT",
    },
    approximateRate: {
-      price: '198',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "198",
+      label: "Approx.",
+      unit: "EUR",
    },
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
@@ -90,28 +90,28 @@ export const Selected: Story = {

 export const MemberRateActive: Story = {
  args: {
-    rateTitle: 'FREE CANCELLATION',
-    paymentTerm: 'PAY NOW',
+    rateTitle: "FREE CANCELLATION",
+    paymentTerm: "PAY NOW",
    rate: {
-      label: 'Standard Price',
-      price: '1980',
-      unit: 'SEK',
+      label: "Standard Price",
+      price: "1980",
+      unit: "SEK",
    },
    memberRate: {
-      label: 'Member Price',
-      price: '1900',
-      unit: 'SEK/NIGHT',
+      label: "Member Price",
+      price: "1900",
+      unit: "SEK/NIGHT",
    },
    approximateRate: {
-      price: '190',
-      label: 'Approx.',
-      unit: 'EUR',
+      price: "190",
+      label: "Approx.",
+      unit: "EUR",
    },
    isMemberRateActive: true,
    rateTermDetails: [
      {
-        title: 'Rate definition 1',
-        terms: ['term 1', 'term 2', 'term 3'],
+        title: "Rate definition 1",
+        terms: ["term 1", "term 2", "term 3"],
      },
    ],
  },
--- a/packages/design-system/lib/components/RateCard/Regular/index.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/index.tsx
@@ -1,14 +1,14 @@
-import { Rate, RateTermDetails } from '../types'
+import { Rate, RateTermDetails } from "../types"

-import { cx } from 'class-variance-authority'
-import { Button as ButtonRAC } from 'react-aria-components'
-import { useIntl } from 'react-intl'
-import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
-import { Typography } from '../../Typography'
-import Modal from '../Modal'
-import styles from '../rate-card.module.css'
-import { variants } from '../variants'
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+import { IconButton } from "../../IconButton"
+import { MaterialIcon } from "../../Icons/MaterialIcon"
+import { Typography } from "../../Typography"
+import Modal from "../Modal"
+import styles from "../rate-card.module.css"
+import { variants } from "../variants"

 interface RegularRateCardProps {
  id: string
@@ -39,7 +39,7 @@ export default function RegularRateCard({
  handleChange,
  rateTermDetails,
 }: RegularRateCardProps) {
-  const classNames = variants({ variant: 'Regular' })
+  const classNames = variants({ variant: "Regular" })

  const intl = useIntl()

@@ -69,8 +69,8 @@ export default function RegularRateCard({
                  size="sm"
                  className={styles.triggerButton}
                  aria-label={intl.formatMessage({
-                    id: 'selectRate.rateCard.openReservationPolicy',
-                    defaultMessage: 'Open reservation policy',
+                    id: "selectRate.rateCard.openReservationPolicy",
+                    defaultMessage: "Open reservation policy",
                  })}
                  iconName="info"
                />
--- a/packages/design-system/lib/components/RateCard/variants.ts
+++ b/packages/design-system/lib/components/RateCard/variants.ts
@@ -1,18 +1,18 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"

-import styles from './rate-card.module.css'
+import styles from "./rate-card.module.css"

 export const config = {
  variants: {
    variant: {
-      Regular: styles['variant-regular'],
-      Campaign: styles['variant-campaign'],
-      Code: styles['variant-code'],
-      Points: styles['variant-points'],
+      Regular: styles["variant-regular"],
+      Campaign: styles["variant-campaign"],
+      Code: styles["variant-code"],
+      Points: styles["variant-points"],
    },
  },
  defaultVariants: {
-    variant: 'Regular',
+    variant: "Regular",
  },
 } as const