fix(Media): class is reactive including all child components

fix(Media.Avatar): include Avatar and its props

src/lib/components/media/Avatar.svelte

@@ -1,30 +1,41 @@
 <script lang="ts">
 	import { MEDIA_CONTEXT_ID } from './Media.svelte';
 	import { useContext } from '../../utils/useContext';
+	import Avatar from '../avatar';
 
 	import { current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	import { exclude } from '../../utils/exclude';
+	import { twMerge } from 'tailwind-merge';
 	export let use: ActionArray = [];
 	const forwardEvents = forwardEventsBuilder(current_component);
 
 	export let align: 'top' | 'center' | 'bottom' = 'top';
+	export let src: string;
+	export let alt = 'avatar';
+	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 
 	useContext({
 		context_id: MEDIA_CONTEXT_ID,
 		parent: 'Media',
 		component: 'Media.Avatar'
 	});
+
+	let defaultClass = 'first:mr-4 last:ml-4 flex-shrink-0';
+	$: if (align === 'center') {
+		defaultClass = defaultClass + ' self-center';
+	} else if (align === 'bottom') {
+		defaultClass = defaultClass + ' self-end';
+	}
+	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div
-	class="first:mr-4 last:ml-4 flex-shrink-0{$$props.class ? ` ${$$props.class}` : ''}"
-	class:self-center={align === 'center'}
-	class:self-end={align === 'bottom'}
+	class={finalClass}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	<slot />
+	<Avatar {src} {alt} {size} />
 </div>

src/lib/components/media/Content.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class={$$props.class ? $$props.class : ''}
+	class={$$props.class}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents

src/lib/components/media/Description.svelte

@@ -6,6 +6,7 @@
 	import { current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	import { exclude } from '../../utils/exclude';
+	import { twMerge } from 'tailwind-merge';
 	export let use: ActionArray = [];
 	const forwardEvents = forwardEventsBuilder(current_component);
 
@@ -19,12 +20,13 @@
 		parent: 'Media.Content',
 		component: 'Media.Content.Description'
 	});
+
+	const defaultClass = 'mt-1 text-light-secondary-content dark:text-dark-secondary-content';
+	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <p
-	class="mt-1 text-light-secondary-content dark:text-dark-secondary-content{$$props.class
-		? ` ${$$props.class}`
-		: ''}"
+	class={finalClass}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents

src/lib/components/media/Media.svelte

@@ -6,6 +6,7 @@
 	import { setContext } from 'svelte';
 
 	import { current_component } from 'svelte/internal';
+	import { twMerge } from 'tailwind-merge';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	import { exclude } from '../../utils/exclude';
 	export let use: ActionArray = [];
@@ -14,10 +15,13 @@
 	setContext(MEDIA_CONTEXT_ID, {
 		media: true
 	});
+
+	const defaultClass = 'flex';
+	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <div
-	class="flex{$$props.class ? ` ${$$props.class}` : ''}"
+	class={finalClass}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents

src/lib/components/media/Title.svelte

@@ -6,6 +6,7 @@
 	import { current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	import { exclude } from '../../utils/exclude';
+	import { twMerge } from 'tailwind-merge';
 	export let use: ActionArray = [];
 	const forwardEvents = forwardEventsBuilder(current_component);
 
@@ -19,12 +20,13 @@
 		parent: 'Media.Content',
 		component: 'Media.Content.Description'
 	});
+
+	const defaultClass = 'font-bold text-light-content dark:text-dark-content';
+	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
 <h4
-	class="font-bold text-light-content dark:text-dark-content{$$props.class
-		? ` ${$$props.class}`
-		: ''}"
+	class={finalClass}
 	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents