[fix](docs): fix installation page in docs

apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.styles.js

@@ -7,28 +7,21 @@ export default createStyles((theme) => {
 			flexDirection: 'column',
 			alignItems: 'center',
 			maxHeight: '198px',
-			border: `1px solid ${theme.fn.themeColor('gray', 4)} !important`,
+			border: `1px solid ${theme.fn.themeColor('gray', 4)}`,
 			borderRadius: `${theme.radii.sm.value} !important`,
 			padding: `${theme.space.lgPX.value} !important`,
 			backgroundColor: 'white !important',
 			transition: 'box-shadow 200ms ease, transform 100ms ease',
 			'&:hover': {
 				transform: 'scale(1.01)',
 				boxShadow: '$md'
+			},
+			'&.active': {
+				borderColor: `$blue600 !important`
 			}
 		},
 		title: {
 			textAlign: 'uppercase'
-		},
-		variants: {
-			state: {
-				active: {
-					['.dark &']: {
-						borderColor: `$blue600`
-					},
-					borderColor: `$blue600 !important`
-				}
-			}
 		}
 	};
 });

apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.svelte

@@ -1,16 +1,16 @@
 <script>
-	import useStyles from './Guides.styles';
 	import { UnstyledButton } from '@svelteuidev/core';
+	import useStyles from './Guides.styles';
 
 	export let title = 'title';
 	export let icon = undefined;
 	export let className = '';
-	export let active = {};
+	export let active = false;
 
 	$: ({ cx, classes, getStyles } = useStyles());
 </script>
 
-<UnstyledButton on:click class={`${cx(className, getStyles(active))} guides`}>
+<UnstyledButton on:click class={`${cx(className, getStyles(), { active })} guides`}>
 	<svelte:component this={icon || null} />
 	<p class={classes.title}>{title}</p>
 </UnstyledButton>

apps/docs/src/lib/components/mainpages/GettingStarted/Guides/StartGuide.svelte

@@ -6,7 +6,6 @@
 	export let setId;
 
 	/** Variable for switching cards stitches variant*/
-	const active = { state: 'active' };
 	$: selected = 'kit';
 	$: setId(selected);
 </script>
@@ -20,12 +19,7 @@
 		]}
 	>
 		{#each STARTGUIDE_DATA as { title, id, icon } (id)}
-			<Guides
-				on:click={() => (selected = id)}
-				{title}
-				{icon}
-				active={selected === id ? active : {}}
-			/>
+			<Guides on:click={() => (selected = id)} {title} {icon} active={selected === id} />
 		{/each}
 	</SimpleGrid>
 </Box>

apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Installation.svelte

@@ -1,6 +1,6 @@
 <script>
+	import { SimpleGrid, Box } from '@svelteuidev/core';
 	import CheckboxCard from './Card.svelte';
-	import { Title, SimpleGrid, Box } from '@svelteuidev/core';
 	import { PACKAGE_DATA } from './data.js';
 
 	export let setDeps;