add eslint

client/ui/frontend/src/components/CopyToClipboard.tsx

@@ -68,13 +68,13 @@ export const CopyToClipboard = ({
 
     return (
         <button
-            type="button"
+            type={"button"}
             ref={wrapperRef}
             onClick={handleClick}
             onKeyDown={onKeyDown}
             tabIndex={tabIndex}
             aria-label={resolvedLabel}
-            aria-live="polite"
+            aria-live={"polite"}
             className={cn(
                 "inline-flex gap-2 items-center group/copy cursor-default wails-no-draggable text-left pointer-events-auto rounded-sm outline-none",
                 "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
@@ -90,14 +90,12 @@ export const CopyToClipboard = ({
             >
                 {children}
                 <span
-                    aria-hidden="true"
-                    className={
-                        "absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover/copy:border-nb-gray-500 pointer-events-none"
-                    }
+                    aria-hidden={"true"}
+                    className={"absolute bottom-0 left-0 right-0 border-b border-dashed border-transparent group-hover/copy:border-nb-gray-500 pointer-events-none"}
                 />
             </span>
             <span
-                aria-hidden="true"
+                aria-hidden={"true"}
                 className={cn(
                     "shrink-0 inline-flex relative top-[2px] right-[1px]",
                     iconAlignment === "left" ? "order-first" : "order-last",

client/ui/frontend/src/components/DropdownMenu.tsx

@@ -41,7 +41,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
         {...props}
     >
         {children}
-        <ChevronRight className="ml-auto h-4 w-4" />
+        <ChevronRight className={"ml-auto h-4 w-4"} />
     </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -117,7 +117,7 @@ const DropdownMenuItem = React.forwardRef<
         {...props}
     >
         {href ? (
-            <a href={href} target={target} rel={rel} className="flex w-full items-center gap-3">
+            <a href={href} target={target} rel={rel} className={"flex w-full items-center gap-3"}>
                 {children}
             </a>
         ) : (
@@ -142,9 +142,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         checked={checked}
         {...props}
     >
-        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span className={"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"}>
             <DropdownMenuPrimitive.ItemIndicator>
-                <Check className="h-4 w-4" />
+                <Check className={"h-4 w-4"} />
             </DropdownMenuPrimitive.ItemIndicator>
         </span>
         {children}
@@ -166,9 +166,9 @@ const DropdownMenuRadioItem = React.forwardRef<
         )}
         {...props}
     >
-        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span className={"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"}>
             <DropdownMenuPrimitive.ItemIndicator>
-                <Circle className="h-2 w-2 fill-current" />
+                <Circle className={"h-2 w-2 fill-current"} />
             </DropdownMenuPrimitive.ItemIndicator>
         </span>
         {children}

client/ui/frontend/src/components/LanguagePicker.tsx

@@ -5,7 +5,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Command } from "cmdk";
 import { CheckIcon, ChevronDown, LanguagesIcon, Search } from "lucide-react";
 import { Preferences } from "@bindings/services";
-import { LanguageCode, type Language } from "@bindings/i18n/models.js";
+import { type LanguageCode, type Language } from "@bindings/i18n/models.js";
 import { HelpText } from "@/components/typography/HelpText";
 import { Label } from "@/components/typography/Label";
 import { loadLanguages } from "@/lib/i18n";
@@ -88,7 +88,7 @@ export function LanguagePicker() {
                             disabled={busy || languages.length === 0}
                             onKeyDown={handleTriggerKeyDown}
                             aria-label={t("settings.general.language.label")}
-                            aria-haspopup="listbox"
+                            aria-haspopup={"listbox"}
                             aria-expanded={open}
                             className={cn(
                                 "inline-flex items-center gap-2 h-[40px] px-3 min-w-[240px]",
@@ -102,7 +102,7 @@ export function LanguagePicker() {
                         >
                             <LanguagesIcon
                                 size={16}
-                                aria-hidden="true"
+                                aria-hidden={"true"}
                                 className={"text-nb-gray-200 shrink-0"}
                             />
                             <span className={"truncate flex-1 text-left"}>
@@ -110,7 +110,7 @@ export function LanguagePicker() {
                             </span>
                             <ChevronDown
                                 size={12}
-                                aria-hidden="true"
+                                aria-hidden={"true"}
                                 className={"text-nb-gray-400 shrink-0"}
                             />
                         </button>
@@ -141,12 +141,12 @@ export function LanguagePicker() {
                             >
                                 <div className={"px-1 pb-1"}>
                                     <div
-                                        role="search"
+                                        role={"search"}
                                         className={"group flex items-center gap-2 px-1 h-8"}
                                     >
                                         <Search
                                             size={14}
-                                            aria-hidden="true"
+                                            aria-hidden={"true"}
                                             className={"text-nb-gray-200 shrink-0"}
                                         />
                                         <Command.Input
@@ -166,9 +166,7 @@ export function LanguagePicker() {
                                         <Command.List>
                                             <Command.Empty>
                                                 <div
-                                                    className={
-                                                        "px-3 py-4 text-center text-[0.7rem] text-nb-gray-400"
-                                                    }
+                                                    className={"px-3 py-4 text-center text-[0.7rem] text-nb-gray-400"}
                                                 >
                                                     {t("settings.general.language.empty")}
                                                 </div>
@@ -191,10 +189,8 @@ export function LanguagePicker() {
                                                             {labelFor(lang)}
                                                         </span>
                                                         <span
-                                                            aria-hidden="true"
-                                                            className={
-                                                                "w-4 shrink-0 flex items-center justify-center"
-                                                            }
+                                                            aria-hidden={"true"}
+                                                            className={"w-4 shrink-0 flex items-center justify-center"}
                                                         >
                                                             {checked && (
                                                                 <CheckIcon
@@ -216,9 +212,7 @@ export function LanguagePicker() {
                                         )}
                                     >
                                         <ScrollArea.Thumb
-                                            className={
-                                                "flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
-                                            }
+                                            className={"flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"}
                                         />
                                     </ScrollArea.Scrollbar>
                                 </ScrollArea.Root>

client/ui/frontend/src/components/ManagementServerSwitch.tsx

@@ -25,7 +25,7 @@ export const ManagementServerSwitch = ({ value, onChange, fullWidth = false }: P
                 <img
                     src={netbirdLogo}
                     alt={""}
-                    aria-hidden="true"
+                    aria-hidden={"true"}
                     className={"h-[0.8rem] aspect-[31/23] shrink-0"}
                 />
                 {t("settings.general.management.cloud")}

client/ui/frontend/src/components/SquareIcon.tsx

@@ -1,5 +1,5 @@
-import { ComponentType } from "react";
-import { LucideProps } from "lucide-react";
+import { type ComponentType } from "react";
+import { type LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 
 export type SquareIconVariant = "default" | "info" | "warning" | "danger";
@@ -25,7 +25,7 @@ export const SquareIcon = ({
     className,
 }: SquareIconProps) => (
     <div
-        aria-hidden="true"
+        aria-hidden={"true"}
         className={cn(
             "h-11 w-11 rounded-lg flex items-center justify-center border bg-nb-gray-920 border-nb-gray-900",
             variantClass[variant],

client/ui/frontend/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import * as RTooltip from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/cn";
 

client/ui/frontend/src/components/VerticalTabs.tsx

@@ -1,6 +1,6 @@
-import { ComponentType, ReactNode, forwardRef } from "react";
+import { type ComponentType, type ReactNode, forwardRef } from "react";
 import * as Tabs from "@radix-ui/react-tabs";
-import { LucideProps } from "lucide-react";
+import { type LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 
 const Root = forwardRef<HTMLDivElement, Omit<Tabs.TabsProps, "orientation">>(
@@ -55,7 +55,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
         >
             <Icon
                 size={iconSize}
-                aria-hidden="true"
+                aria-hidden={"true"}
                 className={cn(
                     "shrink-0 ml-2 transition-colors duration-150",
                     "text-nb-gray-400 group-data-[state=active]:text-nb-gray-100",
@@ -70,7 +70,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function VerticalTab
                 {title}
             </span>
             {adornment && (
-                <div aria-hidden="true" className={"ml-auto mr-2 shrink-0"}>
+                <div aria-hidden={"true"} className={"ml-auto mr-2 shrink-0"}>
                     {adornment}
                 </div>
             )}

client/ui/frontend/src/components/buttons/Button.tsx

@@ -1,6 +1,6 @@
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check, Copy, Loader2 } from "lucide-react";
-import { ButtonHTMLAttributes, forwardRef, useEffect, useRef, useState } from "react";
+import { type ButtonHTMLAttributes, forwardRef, useEffect, useRef, useState } from "react";
 
 import { cn } from "@/lib/cn";
 
@@ -173,7 +173,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         >
             {loading && (
                 <span
-                    aria-hidden="true"
+                    aria-hidden={"true"}
                     className={"absolute inset-0 flex items-center justify-center"}
                 >
                     <Loader2 size={iconSize} className={"animate-spin"} />
@@ -182,9 +182,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
             <span className={cn("contents", loading && "invisible")}>
                 {copy !== undefined &&
                     (copied ? (
-                        <Check size={iconSize} aria-hidden="true" />
+                        <Check size={iconSize} aria-hidden={"true"} />
                     ) : (
-                        <Copy size={iconSize} aria-hidden="true" />
+                        <Copy size={iconSize} aria-hidden={"true"} />
                     ))}
                 {children}
             </span>

client/ui/frontend/src/components/buttons/IconButton.tsx

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, ComponentType, forwardRef } from "react";
-import { LucideProps } from "lucide-react";
+import { type ButtonHTMLAttributes, type ComponentType, forwardRef } from "react";
+import { type LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & {

client/ui/frontend/src/components/dialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef } from "react";
+import { type ReactNode, forwardRef } from "react";
 import { cn } from "@/lib/cn.ts";
 import { isMacOS } from "@/lib/platform.ts";
 
@@ -17,9 +17,7 @@ export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(func
             open
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledBy}
-            className={
-                "wails-draggable select-none flex flex-col items-center static bg-transparent text-inherit p-0 m-0 max-w-none max-h-none border-0 w-full"
-            }
+            className={"wails-draggable select-none flex flex-col items-center static bg-transparent text-inherit p-0 m-0 max-w-none max-h-none border-0 w-full"}
         >
             <div
                 ref={ref}

client/ui/frontend/src/components/dialog/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import * as Dialog from "@/components/dialog/Dialog";
 import { Button } from "@/components/buttons/Button";
@@ -43,15 +43,15 @@ export const ConfirmModal = ({
             }}
         >
             <Dialog.Content
-                maxWidthClass="max-w-sm"
+                maxWidthClass={"max-w-sm"}
                 showClose={false}
-                className="py-5"
+                className={"py-5"}
                 srTitle={srTitle}
                 srDescription={srDescription}
                 onOpenAutoFocus={(e) => e.preventDefault()}
             >
-                <div className="flex flex-col gap-5 px-5">
-                    <div className="flex flex-col gap-1 pl-1">
+                <div className={"flex flex-col gap-5 px-5"}>
+                    <div className={"flex flex-col gap-1 pl-1"}>
                         <DialogHeading align={"left"}>{title}</DialogHeading>
                         <DialogDescription align={"left"} className={"whitespace-pre-line"}>
                             {description}

client/ui/frontend/src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from "react";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { X } from "lucide-react";
@@ -96,7 +96,7 @@ export const Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, Co
                                 )}
                                 aria-label={t("common.close")}
                             >
-                                <X className="h-4 w-4" aria-hidden="true" />
+                                <X className={"h-4 w-4"} aria-hidden={"true"} />
                             </DialogPrimitive.Close>
                         )}
                     </DialogPrimitive.Content>

client/ui/frontend/src/components/dialog/DialogActions.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 type DialogActionsProps = {

client/ui/frontend/src/components/dialog/DialogDescription.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 type DialogAlign = "left" | "center" | "right";

client/ui/frontend/src/components/dialog/DialogHeading.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 type DialogAlign = "left" | "center" | "right";

client/ui/frontend/src/components/empty-state/DaemonOutdatedOverlay.tsx

@@ -18,15 +18,11 @@ export const DaemonOutdatedOverlay = () => {
 
     return (
         <div
-            className={
-                "fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"
-            }
+            className={"fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"}
         >
             <div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
                 <div
-                    className={
-                        "h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-amber-500"
-                    }
+                    className={"h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-amber-500"}
                 >
                     <AlertTriangleIcon size={20} />
                 </div>

client/ui/frontend/src/components/empty-state/DaemonUnavailableOverlay.tsx

@@ -18,15 +18,11 @@ export const DaemonUnavailableOverlay = () => {
 
     return (
         <div
-            className={
-                "fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"
-            }
+            className={"fixed inset-0 z-[100] flex items-center justify-center bg-nb-gray-950 backdrop-blur-sm cursor-default select-none wails-draggable"}
         >
             <div className={"flex flex-col items-center gap-5 px-8 max-w-lg text-center"}>
                 <div
-                    className={
-                        "h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-red-500"
-                    }
+                    className={"h-11 w-11 rounded-xl flex items-center justify-center bg-nb-gray-920 border border-nb-gray-900 text-red-500"}
                 >
                     <AlertCircleIcon size={20} />
                 </div>

client/ui/frontend/src/components/empty-state/EmptyState.tsx

@@ -1,5 +1,5 @@
-import { ComponentType } from "react";
-import { LucideProps } from "lucide-react";
+import { type ComponentType } from "react";
+import { type LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 import { SquareIcon } from "@/components/SquareIcon";
 import { isMacOS } from "@/lib/platform";

client/ui/frontend/src/components/empty-state/NoResults.tsx

@@ -1,5 +1,5 @@
-import { ComponentType } from "react";
-import { FunnelXIcon, LucideProps } from "lucide-react";
+import { type ComponentType } from "react";
+import { FunnelXIcon, type LucideProps } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { EmptyState } from "./EmptyState";
 

client/ui/frontend/src/components/inputs/Input.tsx

@@ -1,9 +1,9 @@
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp, Copy, Eye, EyeOff } from "lucide-react";
 import {
     forwardRef,
-    InputHTMLAttributes,
-    ReactNode,
+    type InputHTMLAttributes,
+    type ReactNode,
     useEffect,
     useId,
     useRef,
@@ -164,16 +164,16 @@ function NumberStepper({
             )}
         >
             <button
-                type="button"
+                type={"button"}
                 tabIndex={-1}
                 aria-label={t("common.increase")}
                 onClick={() => onStep(1)}
-                className="flex-1 flex items-center justify-center w-9 hover:bg-nb-gray-800 transition-colors text-nb-gray-300 cursor-default"
+                className={"flex-1 flex items-center justify-center w-9 hover:bg-nb-gray-800 transition-colors text-nb-gray-300 cursor-default"}
             >
                 <ChevronUp size={12} />
             </button>
             <button
-                type="button"
+                type={"button"}
                 tabIndex={-1}
                 aria-label={t("common.decrease")}
                 onClick={() => onStep(-1)}
@@ -262,9 +262,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     const passwordToggle =
         isPasswordType && showPasswordToggle ? (
             <button
-                type="button"
+                type={"button"}
                 onClick={() => setShowPassword((s) => !s)}
-                className="hover:text-white transition-all pointer-events-auto"
+                className={"hover:text-white transition-all pointer-events-auto"}
                 aria-label={t("common.togglePasswordVisibility")}
             >
                 {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -286,9 +286,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 
     const copyToggle = copy ? (
         <button
-            type="button"
+            type={"button"}
             onClick={onCopy}
-            className="hover:text-white transition-all pointer-events-auto"
+            className={"hover:text-white transition-all pointer-events-auto"}
             aria-label={t("common.copy")}
         >
             {copied ? <Check size={16} /> : <Copy size={16} />}
@@ -311,7 +311,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     });
 
     return (
-        <div className="flex flex-col w-full min-w-0">
+        <div className={"flex flex-col w-full min-w-0"}>
             {label && <Label htmlFor={inputId}>{label}</Label>}
             <div className={cn("flex relative h-[40px] w-full", maxWidthClass)}>
                 {customPrefix && (
@@ -325,7 +325,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 
                 {icon && <InputIconSlot icon={icon} disabled={props.disabled} />}
 
-                <div className="relative flex flex-grow min-w-0">
+                <div className={"relative flex flex-grow min-w-0"}>
                     <input
                         id={inputId}
                         type={inputType}

client/ui/frontend/src/components/inputs/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { SearchIcon } from "lucide-react";
 import { cn } from "@/lib/cn";
@@ -15,12 +15,12 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(function SearchIn
     const { t } = useTranslation();
     return (
         <div
-            role="search"
+            role={"search"}
             className={cn("flex items-center gap-2 px-1 h-10", disabled && "opacity-50")}
         >
             <SearchIcon
                 size={iconSize}
-                aria-hidden="true"
+                aria-hidden={"true"}
                 className={"text-nb-gray-300 shrink-0"}
             />
             <input
@@ -38,7 +38,7 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(function SearchIn
             />
             {shortcut && (
                 <span
-                    aria-hidden="true"
+                    aria-hidden={"true"}
                     className={cn(
                         "shrink-0 select-none",
                         "inline-flex items-center justify-center",

client/ui/frontend/src/components/switches/FancyToggleSwitch.tsx

@@ -39,9 +39,9 @@ export default function FancyToggleSwitch({
             "text-transparent select-none rounded bg-[#25282d] box-decoration-clone animate-pulse";
         return (
             <div
-                role="status"
-                aria-busy="true"
-                aria-live="polite"
+                role={"status"}
+                aria-busy={"true"}
+                aria-live={"polite"}
                 className={cn("inline-block text-left w-full", className)}
             >
                 <div className={"flex justify-between gap-10"}>
@@ -57,7 +57,7 @@ export default function FancyToggleSwitch({
                     </div>
                     <div className={"mt-2 pr-1"}>
                         <div
-                            aria-hidden="true"
+                            aria-hidden={"true"}
                             className={"h-[24px] w-[44px] rounded-full bg-[#25282d] animate-pulse"}
                         />
                     </div>
@@ -95,7 +95,7 @@ export default function FancyToggleSwitch({
                     />
                 </div>
             </div>
-            {children && value ? <div className="mt-4">{children}</div> : null}
+            {children && value ? <div className={"mt-4"}>{children}</div> : null}
         </div>
     );
 }

client/ui/frontend/src/components/switches/SwitchItem.tsx

@@ -1,6 +1,6 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { motion } from "framer-motion";
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 import { useSwitchItemGroup } from "@/components/switches/SwitchItemGroup";
 

client/ui/frontend/src/components/switches/SwitchItemGroup.tsx

@@ -1,5 +1,5 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { createContext, ReactNode, useContext, useId, useMemo } from "react";
+import { createContext, type ReactNode, useContext, useId, useMemo } from "react";
 import { cn } from "@/lib/cn";
 
 type SwitchItemGroupContextValue = {

client/ui/frontend/src/components/switches/ToggleSwitch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { cva, VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "@/lib/cn";
 

client/ui/frontend/src/components/typography/HelpText.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/cn";
 
 type Props = {

client/ui/frontend/src/components/typography/Label.tsx

@@ -1,6 +1,6 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, forwardRef, Ref } from "react";
+import { type ComponentPropsWithoutRef, forwardRef, type Ref } from "react";
 import { cn } from "@/lib/cn";
 
 const labelVariants = cva(