Add callout icons and fix some CSS

components/prose/ProseCallout.vue

@@ -1,14 +1,14 @@
 <template>
-	<CollapsibleRoot :disabled="fold === undefined" :defaultOpen="fold === true || fold === undefined" class="overflow-hidden my-4 p-3 ps-6 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
+	<CollapsibleRoot :disabled="fold === undefined" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
 		<CollapsibleTrigger asChild>
-			<div :class="{ 'cursor-pointer': fold !== undefined }">
-				<Icon icon="caret-left" v-if="fold !== undefined" :class="{ '-rotate-90': fold }" class="transition-transform" />
+			<div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2">
 				<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" class="w-6 h-6 stroke-2 float-start me-2" />
-				<span v-if="title" class="block font-bold ps-8">{{ title }}</span>
+				<span v-if="title" class="block font-bold">{{ title }}</span>
+				<Icon icon="radix-icons:caret-right" v-if="fold !== undefined" class="transition-transform group-data-[state=open]:rotate-90 w-6 h-6 mx-6" />
 			</div>
 		</CollapsibleTrigger>
-        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
-			<div class="mt-2 font-semibold">
+        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out] data-[state=closed]:h-0">
+			<div class="px-2">
 				<slot />
 			</div>
         </CollapsibleContent>
@@ -17,21 +17,21 @@
 
 <script lang="ts">
 const calloutIconByType: Record<string, string> = {
-	note: '',
-	abstract: '',
-	info: '',
-	todo: '',
-	tip: '',
-	success: '',
-	question: '',
-	warning: '',
-	failure: '',
-	danger: '',
-	bug: '',
-	example: '',
-	quote: '',
+	note: 'radix-icons:pencil-1',
+	abstract: 'radix-icons:file-text',
+	info: 'radix-icons:info-circled',
+	todo: 'radix-icons:check-circled',
+	tip: 'radix-icons:star',
+	success: 'radix-icons:check',
+	question: 'radix-icons:question-mark-circled',
+	warning: 'radix-icons:exclamation-triangle',
+	failure: 'radix-icons:cross-circled',
+	danger: 'radix-icons:circle-backslash',
+	bug: 'solar:bug-linear',
+	example: 'radix-icons:list-bullet',
+	quote: 'radix-icons:quote',
 };
-const defaultCalloutIcon = '';
+const defaultCalloutIcon = 'radix-icons:info-circled';
 </script>
 
 <script setup lang="ts">