feat: replace clsx with cn util

src/features/GetFonts/ui/FiltersControl/FilterControls.svelte

@@ -6,10 +6,10 @@
 <script lang="ts">
 import { fontStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/lib';
 import { Button } from '$shared/ui';
 import { Label } from '$shared/ui';
 import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
-import clsx from 'clsx';
 import {
     getContext,
     untrack,
@@ -45,7 +45,7 @@ function handleReset() {
 </script>
 
 <div
-    class={clsx(
+    class={cn(
         'flex flex-col md:flex-row justify-between items-start md:items-center',
         'gap-1 md:gap-6',
         'pt-6 mt-6 md:pt-8 md:mt-8',
@@ -77,7 +77,7 @@ function handleReset() {
         variant="ghost"
         size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
         onclick={handleReset}
-        class={clsx('group font-mono tracking-widest text-neutral-400', isMobileOrTabletPortrait && 'px-0')}
+        class={cn('group font-mono tracking-widest text-neutral-400', isMobileOrTabletPortrait && 'px-0')}
         iconPosition="left"
     >
         {#snippet icon()}

src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte

@@ -11,6 +11,7 @@ import {
     MULTIPLIER_S,
 } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
+import { cn } from '$shared/lib';
 import {
     Button,
     ComboControl,
@@ -20,7 +21,6 @@ import {
 import Settings2Icon from '@lucide/svelte/icons/settings-2';
 import XIcon from '@lucide/svelte/icons/x';
 import { Popover } from 'bits-ui';
-import clsx from 'clsx';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
@@ -88,7 +88,7 @@ $effect(() => {
                     side="top"
                     align="end"
                     sideOffset={8}
-                    class={clsx(
+                    class={cn(
                         'z-50 w-72',
                         'bg-surface dark:bg-dark-card',
                         'border border-subtle',
@@ -142,11 +142,11 @@ $effect(() => {
         </Popover.Root>
     {:else}
         <div
-            class={clsx('w-full md:w-auto', className)}
+            class={cn('w-full md:w-auto', className)}
             transition:fly={{ y: 100, duration: 200, easing: cubicOut }}
         >
             <div
-                class={clsx(
+                class={cn(
                     'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
                     'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
                     'border border-subtle',