Added dynamic component rendering to Recipies

src/lib/components/examples/Recipies.svelte

@@ -6,6 +6,7 @@
 	import { writable, get } from 'svelte/store';
 	import { createUser } from './userService';
 	import { derived } from 'svelte/store';
+	import Composite from '$lib/core/Composite.svelte';
 
 	const initialFormData = { name: '', age: '' };
 
@@ -79,12 +80,26 @@
 					}),
 					on: {
 						NEXT: {
-							target: 'summary',
+							target: 'litStatus',
 							actions: ['setEmail']
 						},
 						BACK: 'name'
 					}
 				},
+				litStatus: {
+					meta: {
+						title: 'LitStatus',
+						buttonLabel: 'next',
+						composite: {
+							id: 'litStatus',
+							component: 'LitStatus'
+						}
+					},
+					on: {
+						NEXT: 'summary',
+						BACK: 'email'
+					}
+				},
 				summary: {
 					meta: {
 						title: 'Summary',
@@ -92,7 +107,8 @@
 						buttonLabel: 'test'
 					},
 					on: {
-						SUBMIT: 'submitting'
+						SUBMIT: 'submitting',
+						BACK: 'litStatus'
 					}
 				},
 				submitting: {
@@ -172,6 +188,10 @@
 				: ''}
 		</p>
 
+		{#if stateMachine.states[$state.value].meta.composite}
+			<Composite composite={stateMachine.states[$state.value].meta.composite} />
+		{/if}
+
 		{#if $state.value === 'start'}Welcome{:else if $state.value === 'name'}
 			<form on:submit|preventDefault={handleSubmit} class="w-full max-w-lg">
 				<div class="mb-4">