From d20601dc475034d51a7617ba9ceedb84fdbacabf Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 13:53:28 +0000
Subject: [PATCH 1/7] feat: Add custom Collapsible component for collapsible
 content

---
 src/lib/components/common/Collapsible.svelte | 37 ++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/lib/components/common/Collapsible.svelte

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
new file mode 100644
index 000000000..c87ffe8ba
--- /dev/null
+++ b/src/lib/components/common/Collapsible.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { afterUpdate } from 'svelte';
+
+	export let open = false;
+
+
+	// Manage the max-height of the collapsible content for snappy transitions
+	let contentElement: HTMLElement;
+  	let maxHeight = '0px'; // Initial max-height
+	// After any state update, adjust the max-height for the transition
+	afterUpdate(() => {
+		if (open) {
+			// Ensure the element is visible before measuring
+			maxHeight = `${contentElement.scrollHeight}px`;
+		} else {
+			maxHeight = '0px';
+		}
+  	});
+
+</script>
+
+<style>
+	.collapsible-content {
+	  overflow: hidden;
+	  transition: max-height 0.3s ease-out;
+	  max-height: 0;
+	}
+</style>
+
+<div>
+	<button on:click={() => open = !open}>
+		<slot name="head"></slot>
+	</button>
+	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
+		<slot name="content"></slot>
+	</div>
+</div>
\ No newline at end of file

From 2389c36a70d55ee6da4164b9e085a322e488a194 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 13:55:37 +0000
Subject: [PATCH 2/7] refactor: Update WebSearchResults.svelte to use new
 CollapsibleComponent

---
 .../ResponseMessage/WebSearchResults.svelte   | 146 +++++++++---------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
index 528108036..25001730e 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
@@ -2,17 +2,18 @@
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
-	import { Collapsible } from 'bits-ui';
-	import { slide } from 'svelte/transition';
+	import Collapsible from '$lib/components/common/Collapsible.svelte';
+
 
 	export let status = { urls: [], query: '' };
 	let state = false;
 </script>
 
-<Collapsible.Root class="w-full space-y-1" bind:open={state}>
-	<Collapsible.Trigger>
+<div class="w-full space-y-1">
+	<Collapsible bind:open={state}>
 		<div
 			class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+			slot="head"
 		>
 			<slot />
 
@@ -22,76 +23,75 @@
 				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
 			{/if}
 		</div>
-	</Collapsible.Trigger>
-
-	<Collapsible.Content
-		class=" text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
-		transition={slide}
-	>
-		{#if status?.query}
-			<a
-				href="https://www.google.com/search?q={status.query}"
-				target="_blank"
-				class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
-			>
-				<div class="flex gap-2 items-center">
-					<MagnifyingGlass />
-
-					<div class=" line-clamp-1">
-						{status.query}
+		<div
+			class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
+			slot="content"
+		>
+			{#if status?.query}
+				<a
+					href="https://www.google.com/search?q={status.query}"
+					target="_blank"
+					class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
+				>
+					<div class="flex gap-2 items-center">
+						<MagnifyingGlass />
+		
+						<div class=" line-clamp-1">
+							{status.query}
+						</div>
 					</div>
-				</div>
-
-				<div
-					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
-				>
-					<!--  -->
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						class="size-4"
+		
+					<div
+						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
 					>
-						<path
-							fill-rule="evenodd"
-							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</a>
-		{/if}
-
-		{#each status.urls as url, urlIdx}
-			<a
-				href={url}
-				target="_blank"
-				class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
-					? ''
-					: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
-			>
-				<div class=" line-clamp-1">
-					{url}
-				</div>
-
-				<div
-					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+						<!--  -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="size-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+				</a>
+			{/if}
+		
+			{#each status.urls as url, urlIdx}
+				<a
+					href={url}
+					target="_blank"
+					class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
+						? ''
+						: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
 				>
-					<!--  -->
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						class="size-4"
+					<div class=" line-clamp-1">
+						{url}
+					</div>
+		
+					<div
+						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
 					>
-						<path
-							fill-rule="evenodd"
-							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-			</a>
-		{/each}
-	</Collapsible.Content>
-</Collapsible.Root>
+						<!--  -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 16 16"
+							fill="currentColor"
+							class="size-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+				</a>
+			{/each}
+		</div>
+	</Collapsible>	
+</div>
\ No newline at end of file

From d5c0876a0b180cfc413a7dfb55ae4fe34f2f5d52 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 14:02:26 +0000
Subject: [PATCH 3/7] refactor: fixed new Collapsible Component to allow passed
 in classes chore: format

---
 .../ResponseMessage/WebSearchResults.svelte   | 160 +++++++++---------
 src/lib/components/common/Collapsible.svelte  |  31 ++--
 2 files changed, 92 insertions(+), 99 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
index 25001730e..4523c8482 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
@@ -4,94 +4,88 @@
 	import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
 	import Collapsible from '$lib/components/common/Collapsible.svelte';
 
-
 	export let status = { urls: [], query: '' };
 	let state = false;
 </script>
 
-<div class="w-full space-y-1">
-	<Collapsible bind:open={state}>
-		<div
-			class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-			slot="head"
-		>
-			<slot />
+<Collapsible bind:open={state} className="w-full space-y-1">
+	<div
+		class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+		slot="head"
+	>
+		<slot />
+
+		{#if state}
+			<ChevronUp strokeWidth="3.5" className="size-3.5 " />
+		{:else}
+			<ChevronDown strokeWidth="3.5" className="size-3.5 " />
+		{/if}
+	</div>
+	<div class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl" slot="content">
+		{#if status?.query}
+			<a
+				href="https://www.google.com/search?q={status.query}"
+				target="_blank"
+				class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
+			>
+				<div class="flex gap-2 items-center">
+					<MagnifyingGlass />
 
-			{#if state}
-				<ChevronUp strokeWidth="3.5" className="size-3.5 " />
-			{:else}
-				<ChevronDown strokeWidth="3.5" className="size-3.5 " />
-			{/if}
-		</div>
-		<div
-			class="text-sm border border-gray-300/30 dark:border-gray-700/50 rounded-xl"
-			slot="content"
-		>
-			{#if status?.query}
-				<a
-					href="https://www.google.com/search?q={status.query}"
-					target="_blank"
-					class="flex w-full items-center p-3 px-4 border-b border-gray-300/30 dark:border-gray-700/50 group/item justify-between font-normal text-gray-800 dark:text-gray-300 no-underline"
-				>
-					<div class="flex gap-2 items-center">
-						<MagnifyingGlass />
-		
-						<div class=" line-clamp-1">
-							{status.query}
-						</div>
-					</div>
-		
-					<div
-						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
-					>
-						<!--  -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="size-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-				</a>
-			{/if}
-		
-			{#each status.urls as url, urlIdx}
-				<a
-					href={url}
-					target="_blank"
-					class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
-						? ''
-						: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
-				>
 					<div class=" line-clamp-1">
-						{url}
+						{status.query}
 					</div>
-		
-					<div
-						class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				</div>
+
+				<div
+					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				>
+					<!--  -->
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="size-4"
 					>
-						<!--  -->
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="size-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-				</a>
-			{/each}
-		</div>
-	</Collapsible>	
-</div>
\ No newline at end of file
+						<path
+							fill-rule="evenodd"
+							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/if}
+
+		{#each status.urls as url, urlIdx}
+			<a
+				href={url}
+				target="_blank"
+				class="flex w-full items-center p-3 px-4 {urlIdx === status.urls.length - 1
+					? ''
+					: 'border-b border-gray-300/30 dark:border-gray-700/50'} group/item justify-between font-normal text-gray-800 dark:text-gray-300"
+			>
+				<div class=" line-clamp-1">
+					{url}
+				</div>
+
+				<div
+					class=" ml-1 text-white dark:text-gray-900 group-hover/item:text-gray-600 dark:group-hover/item:text-white transition"
+				>
+					<!--  -->
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="size-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+			</a>
+		{/each}
+	</div>
+</Collapsible>
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index c87ffe8ba..b681143a6 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -2,11 +2,11 @@
 	import { afterUpdate } from 'svelte';
 
 	export let open = false;
-
+	export let className = '';
 
 	// Manage the max-height of the collapsible content for snappy transitions
 	let contentElement: HTMLElement;
-  	let maxHeight = '0px'; // Initial max-height
+	let maxHeight = '0px'; // Initial max-height
 	// After any state update, adjust the max-height for the transition
 	afterUpdate(() => {
 		if (open) {
@@ -15,23 +15,22 @@
 		} else {
 			maxHeight = '0px';
 		}
-  	});
-
+	});
 </script>
 
+<div class={className}>
+	<button on:click={() => (open = !open)}>
+		<slot name="head" />
+	</button>
+	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
+		<slot name="content" />
+	</div>
+</div>
+
 <style>
 	.collapsible-content {
-	  overflow: hidden;
-	  transition: max-height 0.3s ease-out;
-	  max-height: 0;
+		overflow: hidden;
+		transition: max-height 0.3s ease-out;
+		max-height: 0;
 	}
 </style>
-
-<div>
-	<button on:click={() => open = !open}>
-		<slot name="head"></slot>
-	</button>
-	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
-		<slot name="content"></slot>
-	</div>
-</div>
\ No newline at end of file

From db58bb5f0f51521fa5c52e1b4e8107e6275904ad Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 14:15:16 +0000
Subject: [PATCH 4/7] refactor: Removed dependency

---
 src/lib/components/common/Collapsible.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index b681143a6..0a140d9dd 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -1,21 +1,19 @@
 <script lang="ts">
-	import { afterUpdate } from 'svelte';
-
 	export let open = false;
 	export let className = '';
 
 	// Manage the max-height of the collapsible content for snappy transitions
 	let contentElement: HTMLElement;
 	let maxHeight = '0px'; // Initial max-height
-	// After any state update, adjust the max-height for the transition
-	afterUpdate(() => {
+
+	$: if (contentElement?.scrollHeight) {
 		if (open) {
 			// Ensure the element is visible before measuring
 			maxHeight = `${contentElement.scrollHeight}px`;
 		} else {
 			maxHeight = '0px';
 		}
-	});
+	}
 </script>
 
 <div class={className}>

From 78ba18a680f9cce4c895279282ecf60fc581f382 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 14:55:48 +0000
Subject: [PATCH 5/7] refactor: Update Collapsible component to include dynamic
 margin for open state

---
 src/lib/components/common/Collapsible.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 0a140d9dd..14e5785a4 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -20,7 +20,7 @@
 	<button on:click={() => (open = !open)}>
 		<slot name="head" />
 	</button>
-	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
+	<div bind:this={contentElement} class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`} style="max-height: {maxHeight};">
 		<slot name="content" />
 	</div>
 </div>
@@ -28,7 +28,7 @@
 <style>
 	.collapsible-content {
 		overflow: hidden;
-		transition: max-height 0.3s ease-out;
+		transition: all 0.3s ease-out;
 		max-height: 0;
 	}
 </style>

From ca3f8e6cb52231a21f7c157fd1e38504665b1793 Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 15:18:21 +0000
Subject: [PATCH 6/7] chore: format

---
 src/lib/components/common/Collapsible.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 14e5785a4..8a3ef9690 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -20,7 +20,11 @@
 	<button on:click={() => (open = !open)}>
 		<slot name="head" />
 	</button>
-	<div bind:this={contentElement} class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`} style="max-height: {maxHeight};">
+	<div
+		bind:this={contentElement}
+		class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`}
+		style="max-height: {maxHeight};"
+	>
 		<slot name="content" />
 	</div>
 </div>

From 73899e1c0d09981d6897ec2e321c5fa0aa535b77 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 5 Jul 2024 21:37:29 -0700
Subject: [PATCH 7/7] refac

---
 .../ResponseMessage/WebSearchResults.svelte   |  1 -
 src/lib/components/common/Collapsible.svelte  | 38 +++++--------------
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
index 4523c8482..d4416014a 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
@@ -11,7 +11,6 @@
 <Collapsible bind:open={state} className="w-full space-y-1">
 	<div
 		class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-		slot="head"
 	>
 		<slot />
 
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 8a3ef9690..c7497d835 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -1,38 +1,18 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	export let open = false;
 	export let className = '';
-
-	// Manage the max-height of the collapsible content for snappy transitions
-	let contentElement: HTMLElement;
-	let maxHeight = '0px'; // Initial max-height
-
-	$: if (contentElement?.scrollHeight) {
-		if (open) {
-			// Ensure the element is visible before measuring
-			maxHeight = `${contentElement.scrollHeight}px`;
-		} else {
-			maxHeight = '0px';
-		}
-	}
 </script>
 
 <div class={className}>
 	<button on:click={() => (open = !open)}>
-		<slot name="head" />
+		<slot />
 	</button>
-	<div
-		bind:this={contentElement}
-		class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`}
-		style="max-height: {maxHeight};"
-	>
-		<slot name="content" />
-	</div>
-</div>
 
-<style>
-	.collapsible-content {
-		overflow: hidden;
-		transition: all 0.3s ease-out;
-		max-height: 0;
-	}
-</style>
+	{#if open}
+		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+			<slot name="content" />
+		</div>
+	{/if}
+</div>