fix: replace temp design system components with design system package in surprises

apps/scandic-web/components/MyPages/Surprises/Client.tsx

@@ -6,6 +6,8 @@ import React, { useState } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { benefits } from "@/constants/routes/myPages"
 import {
   benefits as webviewBenefits,
@@ -15,7 +17,6 @@ import { customerService } from "@/constants/webHrefs"
 import { trpc } from "@/lib/trpc/client"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
@@ -186,17 +187,19 @@ export default function SurprisesNotification({
                       }}
                     >
                       {showSurprises && totalSurprises > 1 && (
-                        <Caption type="label" uppercase>
-                          {intl.formatMessage(
-                            {
-                              defaultMessage: "{amount} out of {total}",
-                            },
-                            {
-                              amount: selectedSurprise + 1,
-                              total: totalSurprises,
-                            }
-                          )}
-                        </Caption>
+                        <Typography variant="Tag/sm">
+                          <p>
+                            {intl.formatMessage(
+                              {
+                                defaultMessage: "{amount} out of {total}",
+                              },
+                              {
+                                amount: selectedSurprise + 1,
+                                total: totalSurprises,
+                              }
+                            )}
+                          </p>
+                        </Typography>
                       )}
                     </Header>