Merge remote-tracking branch 'origin' into feature/tracking

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -1,8 +1,7 @@
-import { VariantProps } from "class-variance-authority"
-
-import { accordionItemVariants } from "./variants"
+import type { VariantProps } from "class-variance-authority"
 
 import type { IconName } from "@/types/components/icon"
+import type { accordionItemVariants } from "./variants"
 
 export interface AccordionItemProps
   extends React.HtmlHTMLAttributes<HTMLDetailsElement>,

components/TempDesignSystem/Accordion/accordion.ts

@@ -1,6 +1,6 @@
-import { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
 
-import { accordionVariants } from "./variants"
+import type { accordionVariants } from "./variants"
 
 export interface AccordionProps
   extends React.HtmlHTMLAttributes<HTMLUListElement>,

components/TempDesignSystem/Accordion/index.tsx

@@ -1,9 +1,9 @@
 import { Children, cloneElement, isValidElement } from "react"
 
-import { AccordionItemProps } from "./AccordionItem/accordionItem"
 import { accordionVariants } from "./variants"
 
 import type { AccordionProps } from "./accordion"
+import type { AccordionItemProps } from "./AccordionItem/accordionItem"
 
 export default function Accordion({
   children,

components/TempDesignSystem/Alert/alert.ts

@@ -1,9 +1,8 @@
-import { alertVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
-import { AlertTypeEnum } from "@/types/enums/alert"
+import type { AlertTypeEnum } from "@/types/enums/alert"
 import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConfig"
+import type { alertVariants } from "./variants"
 
 export interface AlertProps extends VariantProps<typeof alertVariants> {
   className?: string

components/TempDesignSystem/BackToTopButton/backToTopButton.module.css

@@ -5,7 +5,6 @@
   align-items: flex-end;
   position: fixed;
   bottom: 20px;
-  right: 20px;
   z-index: 1000;
   background-color: var(--Base-Surface-Primary-light-Normal);
   color: var(--Base-Button-Secondary-On-Fill-Normal);
@@ -28,6 +27,14 @@
   display: none;
 }
 
+.left {
+  left: 32px;
+}
+
+.right {
+  right: 32px;
+}
+
 @media (min-width: 768px) {
   .backToTopButtonText {
     display: initial;

components/TempDesignSystem/BackToTopButton/index.tsx

@@ -5,12 +5,23 @@ import { useIntl } from "react-intl"
 
 import { ArrowUpIcon } from "@/components/Icons"
 
+import { backToTopButtonVariants } from "./variants"
+
 import styles from "./backToTopButton.module.css"
 
-export function BackToTopButton({ onClick }: { onClick: () => void }) {
+export function BackToTopButton({
+  onClick,
+  position,
+}: {
+  onClick: () => void
+  position: "left" | "right"
+}) {
   const intl = useIntl()
   return (
-    <ButtonRAC className={styles.backToTopButton} onPress={onClick}>
+    <ButtonRAC
+      className={backToTopButtonVariants({ position })}
+      onPress={onClick}
+    >
       <ArrowUpIcon color="burgundy" />
       <span className={styles.backToTopButtonText}>
         {intl.formatMessage({ id: "Back to top" })}

components/TempDesignSystem/BackToTopButton/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./backToTopButton.module.css"
+
+export const backToTopButtonVariants = cva(styles.backToTopButton, {
+  variants: {
+    position: {
+      left: styles.left,
+      right: styles.right,
+    },
+  },
+  defaultVariants: {
+    position: "right",
+  },
+})

components/TempDesignSystem/Button/button.ts

@@ -1,8 +1,8 @@
-import { buttonVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 import type { ButtonProps as ReactAriaButtonProps } from "react-aria-components"
 
+import type { buttonVariants } from "./variants"
+
 export interface ButtonPropsRAC
   extends Omit<ReactAriaButtonProps, "isDisabled">,
     VariantProps<typeof buttonVariants> {

components/TempDesignSystem/Card/card.ts

@@ -1,9 +1,8 @@
-import { cardVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
 import type { ApiImage } from "@/types/components/image"
 import type { ImageVaultAsset } from "@/types/components/imageVault"
+import type { cardVariants } from "./variants"
 
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -13,12 +12,14 @@ export interface CardProps
     title: string
     openInNewTab?: boolean
     isExternal?: boolean
+    scrollOnClick?: boolean
   } | null
   secondaryButton?: {
     href: string
     title: string
     openInNewTab?: boolean
     isExternal?: boolean
+    scrollOnClick?: boolean
   } | null
   scriptedTopTitle?: string | null
   heading?: string | null

components/TempDesignSystem/Card/index.tsx

@@ -79,7 +79,7 @@ export default function Card({
           </section>
         ) : null}
         <Title
-          as="h4"
+          as="h3"
           level="h3"
           textAlign="center"
           textTransform="regular"
@@ -99,6 +99,7 @@ export default function Card({
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
                 onClick={onPrimaryButtonClick}
+                scroll={primaryButton.scrollOnClick ?? true}
               >
                 {primaryButton.title}
               </Link>
@@ -116,6 +117,7 @@ export default function Card({
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}
                 onClick={onSecondaryButtonClick}
+                scroll={secondaryButton.scrollOnClick ?? true}
               >
                 {secondaryButton.title}
               </Link>

components/TempDesignSystem/Card/utils.ts

@@ -1,11 +1,10 @@
-import { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
-import { bodyVariants } from "@/components/TempDesignSystem/Text/Body/variants"
-import { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
-
 import type { VariantProps } from "class-variance-authority"
 
 import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
+import type { bodyVariants } from "@/components/TempDesignSystem/Text/Body/variants"
+import type { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
 
 export function getTitleFontColor(
   theme: CardProps["theme"]

components/TempDesignSystem/Chip/chip.ts

@@ -1,7 +1,7 @@
-import { chipVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { chipVariants } from "./variants"
+
 export interface ChipProps
   extends React.HtmlHTMLAttributes<HTMLDivElement>,
     VariantProps<typeof chipVariants> {}

components/TempDesignSystem/Divider/divider.ts

@@ -1,7 +1,7 @@
-import { dividerVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { dividerVariants } from "./variants"
+
 export interface DividerProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
     VariantProps<typeof dividerVariants> {}

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -9,7 +9,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./checkbox.module.css"
 
-import { CheckboxProps } from "@/types/components/checkbox"
+import type { CheckboxProps } from "@/types/components/checkbox"
 
 export default function Checkbox({
   className,

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -12,7 +12,6 @@ interface BaseCardProps
   title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
-  handleSelectedOnClick?: () => void
 }
 
 interface ListCardProps extends BaseCardProps {

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -24,21 +24,20 @@ export default function Card({
   title,
   type,
   value,
-  handleSelectedOnClick,
 }: CardProps) {
-  const { register } = useFormContext()
+  const { register, setValue } = useFormContext()
 
   function onLabelClick(event: React.MouseEvent) {
     // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
     event.preventDefault()
-    handleSelectedOnClick?.()
+    setValue(name, value)
   }
   return (
     <label
       className={styles.label}
       data-declined={declined}
+      onClick={onLabelClick}
       tabIndex={0}
-      onClick={handleSelectedOnClick ? onLabelClick : undefined}
     >
       <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}

components/TempDesignSystem/Form/Country/country.module.css

@@ -3,39 +3,31 @@
 }
 
 .comboBoxContainer {
+  position: relative;
+  height: 60px;
+}
+
+.label {
+  position: absolute;
+  left: var(--Spacing-x2);
+  top: var(--Spacing-x-one-and-half);
+  pointer-events: none;
+}
+
+.input {
   background-color: var(--Main-Grey-White);
   border-color: var(--Scandic-Beige-40);
   border-radius: var(--Corner-radius-Medium);
   border-style: solid;
   border-width: 1px;
-  display: grid;
-  gap: var(--Spacing-x-half);
-  grid-template-areas:
-    "label chevron"
-    "input chevron";
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-}
+  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x1);
+  width: 100%;
+  height: 100%;
 
-.comboBoxContainer:has(
-    .input[data-invalid="true"],
-    .input[aria-invalid="true"]
-  ) {
-  border-color: var(--Scandic-Red-60);
-}
-
-.label {
-  grid-area: label;
-}
-
-.input {
-  background-color: var(--Main-Grey-White);
-  border: none;
-  grid-area: input;
-  height: 18px;
-  padding: 0;
+  &[aria-invalid="true"],
+  &[data-invalid="true"] {
+    border-color: var(--Scandic-Red-60);
+  }
 }
 
 .input,
@@ -50,8 +42,12 @@
   grid-area: chevron;
   height: 100%;
   justify-self: flex-end;
-  padding-left: 0;
+  padding-left: var(--Spacing-x2);
   padding-right: var(--Spacing-x2);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  outline: none;
 }
 
 .popover {

components/TempDesignSystem/Form/Country/index.tsx

@@ -43,14 +43,14 @@ export default function CountrySelect({
     }
   }
   const { control, setValue } = useFormContext()
-  const { field, fieldState, formState } = useController({
+  const { field, formState } = useController({
     control,
     name,
     rules: registerOptions,
   })
 
   function handleChange(country: Key) {
-    setValue(name, country)
+    setValue(name, country ?? "")
   }
 
   const selectCountryLabel = intl.formatMessage({ id: "Select a country" })
@@ -59,7 +59,6 @@ export default function CountrySelect({
     <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
         aria-label={intl.formatMessage({ id: "Select country of residence" })}
-        isInvalid={fieldState.invalid}
         isReadOnly={readOnly}
         isRequired={!!registerOptions?.required}
         name={field.name}

components/TempDesignSystem/Form/Date/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { parseDate } from "@internationalized/date"
 import { useEffect } from "react"
-import { DateInput, DatePicker, Group } from "react-aria-components"
+import { DateInput, DatePicker, Group, type Key } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -13,14 +13,10 @@ import { getLocalizedMonthName } from "@/utils/dateFormatting"
 import { rangeArray } from "@/utils/rangeArray"
 
 import ErrorMessage from "../ErrorMessage"
-import { DateName } from "./date"
+import { DateName, type DateProps } from "./date"
 
 import styles from "./date.module.css"
 
-import type { Key } from "react-aria-components"
-
-import type { DateProps } from "./date"
-
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
   const { control, setValue, formState, watch } = useFormContext()

components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx

@@ -6,7 +6,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./chip.module.css"
 
-import { FilterChipProps } from "@/types/components/form/filterChip"
+import type { FilterChipProps } from "@/types/components/form/filterChip"
 
 export default function FilterChip({
   Icon = HeartIcon,

components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css

@@ -6,6 +6,7 @@
   border-width: 1px;
   border-radius: var(--Corner-radius-Medium);
   display: grid;
+  min-width: 0; /* allow shrinkage */
   height: 60px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
   transition: border-color 200ms ease;

components/TempDesignSystem/Form/Input/index.tsx

@@ -18,6 +18,7 @@ export default function Input({
   disabled = false,
   helpText = "",
   label,
+  maxLength,
   name,
   placeholder = "",
   readOnly = false,
@@ -55,6 +56,7 @@ export default function Input({
             aria-labelledby={field.name}
             id={field.name}
             label={label}
+            maxLength={maxLength}
             placeholder={placeholder}
             readOnly={readOnly}
             required={!!registerOptions.required}

components/TempDesignSystem/Form/Label/label.ts

@@ -1,7 +1,7 @@
-import { labelVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { labelVariants } from "./variants"
+
 export interface LabelProps
   extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,
     VariantProps<typeof labelVariants> {

components/TempDesignSystem/Form/NewPassword/index.tsx

@@ -17,11 +17,11 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { passwordValidators } from "@/utils/passwordValidator"
 
 import Button from "../../Button"
-import { IconProps, type NewPasswordProps } from "./newPassword"
+import { type IconProps, type NewPasswordProps } from "./newPassword"
 
 import styles from "./newPassword.module.css"
 
-import { PasswordValidatorKey } from "@/types/components/form/newPassword"
+import type { PasswordValidatorKey } from "@/types/components/form/newPassword"
 
 export default function NewPassword({
   name = "newPassword",

components/TempDesignSystem/Form/Phone/index.tsx

@@ -7,13 +7,11 @@ import { useController, useFormContext, useWatch } from "react-hook-form"
 import {
   CountrySelector,
   DialCodePreview,
-  ParsedCountry,
+  type ParsedCountry,
   usePhoneInput,
 } from "react-international-phone"
 import { useIntl } from "react-intl"
 
-import { Lang } from "@/constants/languages"
-
 import { ChevronDownIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
@@ -29,6 +27,7 @@ import type {
   LowerCaseCountryCode,
   PhoneProps,
 } from "@/types/components/form/phone"
+import type { Lang } from "@/constants/languages"
 
 export default function Phone({
   ariaLabel = "Phone number input",

components/TempDesignSystem/Grids/Dynamic/Item/item.ts

@@ -1,7 +1,7 @@
-import { itemVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { itemVariants } from "./variants"
+
 export interface ItemProps
   extends React.HTMLAttributes<HTMLElement>,
     VariantProps<typeof itemVariants> {}

components/TempDesignSystem/Grids/Stackable/index.tsx

@@ -1,6 +1,7 @@
-import { StackableGridProps } from "./stackable"
 import { stackableGridVariants } from "./variants"
 
+import type { StackableGridProps } from "./stackable"
+
 export default function Stackable({
   children,
   className,

components/TempDesignSystem/Grids/Stackable/stackable.ts

@@ -1,7 +1,7 @@
-import { stackableGridVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { stackableGridVariants } from "./variants"
+
 export interface StackableGridProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof stackableGridVariants> {}

components/TempDesignSystem/Link/link.ts

@@ -1,7 +1,7 @@
-import { linkVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { linkVariants } from "./variants"
+
 export interface LinkProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">,
     VariantProps<typeof linkVariants> {

components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts

@@ -1,8 +1,7 @@
-import { loyaltyCardVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
-import { ImageVaultAsset } from "@/types/components/imageVault"
+import type { ImageVaultAsset } from "@/types/components/imageVault"
+import type { loyaltyCardVariants } from "./variants"
 
 export interface LoyaltyCardProps
   extends React.HTMLAttributes<HTMLDivElement>,

components/TempDesignSystem/Popover/index.tsx

@@ -10,10 +10,11 @@ import { CloseLargeIcon } from "@/components/Icons"
 import useSetOverFlowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"
 
 import { Arrow } from "./Arrow"
-import { PopoverProps } from "./popover"
 
 import styles from "./popover.module.css"
 
+import type { PopoverProps } from "./popover"
+
 export default function Popover({
   triggerContent,
   children,

components/TempDesignSystem/Select/index.tsx

@@ -96,7 +96,7 @@ export default function Select({
             <ListBox className={styles.listBox}>
               {items.map((item) => (
                 <ListBoxItem
-                  aria-label={String(item)}
+                  aria-label={item.label}
                   className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
                   id={item.value}
                   key={item.label}

components/TempDesignSystem/Select/select.module.css

@@ -10,12 +10,19 @@
   gap: var(--Spacing-x-half);
 }
 
-.select[data-focused="true"],
-.select[data-focused="true"].discreet {
+.select[data-focused="true"] {
   border: 1px solid var(--Scandic-Blue-90);
   outline: none;
 }
 
+.select[data-focused="true"].discreet {
+  border: 1px solid transparent;
+  outline: none;
+}
+.select[data-focus-visible="true"].discreet {
+  border: 1px solid var(--Scandic-Blue-90);
+}
+
 .select.discreet {
   border: 1px solid transparent;
 }

components/TempDesignSystem/ShowMoreButton/showMoreButton.ts

@@ -1,7 +1,7 @@
-import { showMoreButtonVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { showMoreButtonVariants } from "./variants"
+
 export interface ShowMoreButtonProps
   extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
     VariantProps<typeof showMoreButtonVariants> {

components/TempDesignSystem/Table/table.ts

@@ -1,7 +1,7 @@
-import { tableVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { tableVariants } from "./variants"
+
 export interface TableProps
   extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,
     VariantProps<typeof tableVariants> {

components/TempDesignSystem/Text/BiroScript/biroScript.ts

@@ -1,7 +1,7 @@
-import { biroScriptVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { biroScriptVariants } from "./variants"
+
 export interface BiroScriptProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
     VariantProps<typeof biroScriptVariants> {

components/TempDesignSystem/Text/Body/body.ts

@@ -1,10 +1,10 @@
-import { bodyVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { bodyVariants } from "./variants"
+
 export interface BodyProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-  VariantProps<typeof bodyVariants> {
+    VariantProps<typeof bodyVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Caption/caption.ts

@@ -1,10 +1,10 @@
-import { captionVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { captionVariants } from "./variants"
+
 export interface CaptionProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-  VariantProps<typeof captionVariants> {
+    VariantProps<typeof captionVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Footnote/footnote.ts

@@ -1,10 +1,10 @@
-import { footnoteVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { footnoteVariants } from "./variants"
+
 export interface FootnoteProps
   extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
-  VariantProps<typeof footnoteVariants> {
+    VariantProps<typeof footnoteVariants> {
   asChild?: boolean
   fontOnly?: boolean
 }

components/TempDesignSystem/Text/Preamble/preamble.ts

@@ -1,7 +1,7 @@
-import { preambleVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { preambleVariants } from "./variants"
+
 export interface CaptionProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof preambleVariants> {

components/TempDesignSystem/Text/Subtitle/subtitle.ts

@@ -1,7 +1,7 @@
-import { subtitleVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { subtitleVariants } from "./variants"
+
 export interface SubtitleProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
     VariantProps<typeof subtitleVariants> {

components/TempDesignSystem/Text/Title/title.ts

@@ -1,7 +1,7 @@
-import { headingVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { headingVariants } from "./variants"
+
 type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
 
 export interface HeadingProps

components/TempDesignSystem/Toasts/index.tsx

@@ -1,4 +1,4 @@
-import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
+import { type ExternalToast, toast as sonnerToast, Toaster } from "sonner"
 
 import {
   CheckCircleIcon,
@@ -10,11 +10,12 @@ import {
 
 import Button from "../Button"
 import Body from "../Text/Body"
-import { ToastsProps } from "./toasts"
 import { toastVariants } from "./variants"
 
 import styles from "./toasts.module.css"
 
+import type { ToastsProps } from "./toasts"
+
 export function ToastHandler() {
   return <Toaster position="bottom-right" duration={5000} />
 }

components/TempDesignSystem/Toasts/toasts.ts

@@ -1,7 +1,7 @@
-import { toastVariants } from "./variants"
-
 import type { VariantProps } from "class-variance-authority"
 
+import type { toastVariants } from "./variants"
+
 export type ToastsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> &
   VariantProps<typeof toastVariants> & {
     onClose?: () => void

components/TempDesignSystem/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from "react"
+import { type PropsWithChildren, useState } from "react"
 
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -6,7 +6,7 @@ import { tooltipVariants } from "./variants"
 
 import styles from "./tooltip.module.css"
 
-import { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
+import type { TooltipPosition, TooltipProps } from "@/types/components/tooltip"
 
 export function Tooltip<P extends TooltipPosition>({
   heading,