[stdf]Update Modal compoent, demo and documents.

demo/src/routes/en_US/modal/+page.svelte

@@ -3,52 +3,58 @@
 	import { Modal, Cell, Toast } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-
-	let toastVisible = false;
-
-	$: if (visible15) {
-		setTimeout(() => {
-			visible15 = false;
-		}, 3000);
-	}
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+
+	let toastVisible = $state(false);
+
+	$effect(() => {
+		if (visible15) {
+			setTimeout(() => {
+				visible15 = false;
+			}, 3000);
+		}
+	});
 </script>
 
 <div class="py-4">
-	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
+	<Cell title="Basic usage" onclick={() => (visible1 = true)} />
 	<Modal bind:visible={visible1} title="Do you understand?" content="Those who stay will suffer the most" btnText="I see" />
 
-	<Cell title="Content usage slot" on:click={() => (visible2 = true)} />
-	<Modal bind:visible={visible2} contentSlot>
-		<Aphorism num={1} compact />
+	<Cell title="Content usage Snippet" onclick={() => (visible2 = true)} />
+	<Modal bind:visible={visible2}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Modal>
 
-	<Cell title="Do not show the title" on:click={() => (visible3 = true)} />
+	<Cell title="Do not show the title" onclick={() => (visible3 = true)} />
 	<Modal bind:visible={visible3} title="" />
 
-	<Cell title="Do not show button" on:click={() => (visible4 = true)} />
-	<Modal bind:visible={visible4} showBtn={false} contentSlot>
-		<Aphorism num={1} compact />
+	<Cell title="Do not show button" onclick={() => (visible4 = true)} />
+	<Modal bind:visible={visible4} showBtn={false}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Modal>
 
-	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
+	<Cell title="Click the mask to close" onclick={() => (visible5 = true)} />
 	<Modal bind:visible={visible5} popup={{ maskClosable: true }} />
 
-	<Cell title="Custom icon" on:click={() => (visible6 = true)} />
+	<Cell title="Custom icon" onclick={() => (visible6 = true)} />
 	<Modal
 		bind:visible={visible6}
 		content="Please wear a mask!"
@@ -56,57 +62,67 @@
 		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
 	/>
 
-	<Cell title="Error status button" on:click={() => (visible8 = true)} />
+	<Cell title="Error status button" onclick={() => (visible8 = true)} />
 	<Modal bind:visible={visible8} btnText="I was wrong." button={{ state: 'error' }} />
 
-	<Cell title="Full rounded corner button" on:click={() => (visible9 = true)} />
+	<Cell title="Full rounded corner button" onclick={() => (visible9 = true)} />
 	<Modal bind:visible={visible9} button={{ radius: 'full' }} />
 
-	<Cell title="Theme color plain text button" on:click={() => (visible12 = true)} />
+	<Cell title="Theme color plain text button" onclick={() => (visible12 = true)} />
 	<Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
 
-	<Cell title="Content uses slots and scrolls" on:click={() => (visible10 = true)} />
-	<Modal bind:visible={visible10} contentSlot>
-		<div class="h-56 overflow-auto">
-			<Aphorism num={6} compact />
-		</div>
+	<Cell title="Content uses Snippet and scrolls" onclick={() => (visible10 = true)} />
+	<Modal bind:visible={visible10}>
+		{#snippet contentChild()}
+			<div class="h-56 overflow-auto">
+				<Aphorism num={6} compact />
+			</div>
+		{/snippet}
 	</Modal>
 
-	<Cell title="Show narrow" on:click={() => (visible7 = true)} />
+	<Cell title="Show narrow" onclick={() => (visible7 = true)} />
 	<Modal bind:visible={visible7} popup={{ px: '20' }} />
 
-	<Cell title="Another animation effect" on:click={() => (visible11 = true)} />
+	<Cell title="Another animation effect" onclick={() => (visible11 = true)} />
 	<Modal bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
 
-	<Cell title="Listening shutdown event" on:click={() => (visible13 = true)} />
-	<Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
+	<Cell title="Listening shutdown event" onclick={() => (visible13 = true)} />
+	<Modal bind:visible={visible13} onclose={() => (toastVisible = true)} />
 	<Toast bind:visible={toastVisible} message="Shut down Modal！" />
 
-	<Cell title="Heading left" on:click={() => (visible14 = true)} />
+	<Cell title="Heading left" onclick={() => (visible14 = true)} />
 	<Modal bind:visible={visible14} title="Heading left" titleAlign="left" />
 
-	<Cell title="Automatic shutdown" on:click={() => (visible15 = true)} />
+	<Cell title="Automatic shutdown" onclick={() => (visible15 = true)} />
 	<Modal bind:visible={visible15} content="Don't move! I'll be gone in three seconds!" />
 </div>
 
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //Incoming data
-
-    export let num = 0; //Display number
-    export let compact = false; //Compact or not mode
-
-    //num bars were randomly extracted from aphorisms
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
-<div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+<div class="{compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5">
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

demo/src/routes/zh_CN/modal/+page.svelte

@@ -3,52 +3,58 @@
 	import { Modal, Cell, Toast } from '../../../../../packages/stdf/components';
 	import Aphorism from '../../components/Aphorism.svelte';
 
-	let visible1 = false;
-	let visible2 = false;
-	let visible3 = false;
-	let visible4 = false;
-	let visible5 = false;
-	let visible6 = false;
-	let visible7 = false;
-	let visible8 = false;
-	let visible9 = false;
-	let visible10 = false;
-	let visible11 = false;
-	let visible12 = false;
-	let visible13 = false;
-	let visible14 = false;
-	let visible15 = false;
-
-	let toastVisible = false;
-
-	$: if (visible15) {
-		setTimeout(() => {
-			visible15 = false;
-		}, 3000);
-	}
+	let visible1 = $state(false);
+	let visible2 = $state(false);
+	let visible3 = $state(false);
+	let visible4 = $state(false);
+	let visible5 = $state(false);
+	let visible6 = $state(false);
+	let visible7 = $state(false);
+	let visible8 = $state(false);
+	let visible9 = $state(false);
+	let visible10 = $state(false);
+	let visible11 = $state(false);
+	let visible12 = $state(false);
+	let visible13 = $state(false);
+	let visible14 = $state(false);
+	let visible15 = $state(false);
+
+	let toastVisible = $state(false);
+
+	$effect(() => {
+		if (visible15) {
+			setTimeout(() => {
+				visible15 = false;
+			}, 3000);
+		}
+	});
 </script>
 
 <div class="py-4">
-	<Cell title="基础用法" on:click={() => (visible1 = true)} />
+	<Cell title="基础用法" onclick={() => (visible1 = true)} />
 	<Modal bind:visible={visible1} title="您明白吗？" content="留下来的人才是最痛苦的" btnText="我明白了" />
 
-	<Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
-	<Modal bind:visible={visible2} contentSlot>
-		<Aphorism num={1} compact />
+	<Cell title="内容使用 Snippet" onclick={() => (visible2 = true)} />
+	<Modal bind:visible={visible2}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Modal>
 
-	<Cell title="不显示标题" on:click={() => (visible3 = true)} />
+	<Cell title="不显示标题" onclick={() => (visible3 = true)} />
 	<Modal bind:visible={visible3} title="" />
 
-	<Cell title="不显示按钮" on:click={() => (visible4 = true)} />
-	<Modal bind:visible={visible4} showBtn={false} contentSlot>
-		<Aphorism num={1} compact />
+	<Cell title="不显示按钮" onclick={() => (visible4 = true)} />
+	<Modal bind:visible={visible4} showBtn={false}>
+		{#snippet contentChild()}
+			<Aphorism num={1} compact />
+		{/snippet}
 	</Modal>
 
-	<Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
+	<Cell title="点击遮罩关闭" onclick={() => (visible5 = true)} />
 	<Modal bind:visible={visible5} popup={{ maskClosable: true }} />
 
-	<Cell title="自定义图标" on:click={() => (visible6 = true)} />
+	<Cell title="自定义图标" onclick={() => (visible6 = true)} />
 	<Modal
 		bind:visible={visible6}
 		content="请佩戴口罩！"
@@ -56,57 +62,67 @@
 		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
 	/>
 
-	<Cell title="错误状态按钮" on:click={() => (visible8 = true)} />
+	<Cell title="错误状态按钮" onclick={() => (visible8 = true)} />
 	<Modal bind:visible={visible8} btnText="我错了" button={{ state: 'error' }} />
 
-	<Cell title="全圆角按钮" on:click={() => (visible9 = true)} />
+	<Cell title="全圆角按钮" onclick={() => (visible9 = true)} />
 	<Modal bind:visible={visible9} button={{ radius: 'full' }} />
 
-	<Cell title="主题色纯文本按钮" on:click={() => (visible12 = true)} />
+	<Cell title="主题色纯文本按钮" onclick={() => (visible12 = true)} />
 	<Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
 
-	<Cell title="内容使用插槽且滚动" on:click={() => (visible10 = true)} />
-	<Modal bind:visible={visible10} contentSlot>
-		<div class="h-56 overflow-auto">
-			<Aphorism num={6} compact />
-		</div>
+	<Cell title="内容使用 Snippet 且滚动" onclick={() => (visible10 = true)} />
+	<Modal bind:visible={visible10}>
+		{#snippet contentChild()}
+			<div class="h-56 overflow-auto">
+				<Aphorism num={6} compact />
+			</div>
+		{/snippet}
 	</Modal>
 
-	<Cell title="显示窄一点" on:click={() => (visible7 = true)} />
+	<Cell title="显示窄一点" onclick={() => (visible7 = true)} />
 	<Modal bind:visible={visible7} popup={{ px: '20' }} />
 
-	<Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
+	<Cell title="另一种动画效果" onclick={() => (visible11 = true)} />
 	<Modal bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
 
-	<Cell title="监听关闭事件" on:click={() => (visible13 = true)} />
-	<Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
+	<Cell title="监听关闭事件" onclick={() => (visible13 = true)} />
+	<Modal bind:visible={visible13} onclose={() => (toastVisible = true)} />
 	<Toast bind:visible={toastVisible} message="关闭了 Modal！" />
 
-	<Cell title="标题居左" on:click={() => (visible14 = true)} />
+	<Cell title="标题居左" onclick={() => (visible14 = true)} />
 	<Modal bind:visible={visible14} title="标题居左" titleAlign="left" />
 
-	<Cell title="自动关闭" on:click={() => (visible15 = true)} />
+	<Cell title="自动关闭" onclick={() => (visible15 = true)} />
 	<Modal bind:visible={visible15} content="别动！3 秒后我立即消失！" />
 </div>
 
 <!-- Aphorism.svelte -->
 <!-- 
 <script>
-    import aphorisms from '../data/aphorisms'; //引入数据
-
-    export let num = 0; //显示条数
-    export let compact = false; //是否紧凑模式
-
-    //从 aphorisms 随机取出 num 条数据
-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
+	// 引入数据
+	// import data
+	import aphorisms from '../../data/aphorisms';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [num] - number of items to display
+	 * @property {boolean} [compact] - whether to use compact mode
+	 */
+	/** @type {Props} */
+	let { num = 0, compact = false } = $props();
+
+	// 从 aphorisms 随机取出 num 条数据
+	// get num items from aphorisms randomly
+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
 </script>
 
-<div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
-    {#each aphorismsList as item}
-        <div class:py-6={num > 1}>
-            <div class="text-sm text-justify">{item.text}</div>
-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
-        </div>
-    {/each}
+<div class="{compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5">
+	{#each aphorismsList as item}
+		<div class:py-6={num > 1}>
+			<div class="text-sm text-justify">{item.text}</div>
+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
+		</div>
+	{/each}
 </div>
 -->

doc/components/modal/api.md

@@ -1,28 +1,26 @@
 ## Modal Props
 
-| 属性        | 类型    | 默认值                   | 可选值                  | 必传 | 说明                |
-| ----------- | ------- | ------------------------ | ----------------------- | ---- | ------------------- |
-| visible     | Boolean | false                    | true/false              | N    | 是否显示。          |
-| title       | String  | 当前语言的 modal.title   | -                       | N    | 标题。              |
-| titleAlign  | String  | 'center'                 | 'left'/'center'/'right' | N    | 标题对齐方式。      |
-| content     | String  | 当前语言的 modal.content | -                       | N    | 内容。              |
-| contentSlot | Boolean | false                    | true/false              | N    | 内容是否使用 slot。 |
-| showIcon    | Boolean | false                    | true/false              | N    | 是否显示图标。      |
-| icon        | Object  | {}                       | 参考 Icon Props         | N    | 图标参数。          |
-| showBtn     | Boolean | true                     | true/false              | N    | 是否显示按钮。      |
-| btnText     | String  | 当前语言的 modal.btnText | -                       | N    | 按钮文字。          |
-| button      | Object  | {}                       | 参考 Button Props       | N    | 按钮参数。          |
-| popup       | Object  | {}                       | 参考 Popup Props        | N    | 弹出层参数。        |
+| 名称       | 类型                                                          | 默认值                   | 必传 | 说明           |
+| ---------- | ------------------------------------------------------------- | ------------------------ | ---- | -------------- |
+| visible    | `boolean`                                                     | `false`                  | N    | 是否显示。     |
+| title      | `string`                                                      | 当前语言的 modal.title   | N    | 标题。         |
+| titleAlign | `'left'\|'center'\|'right'`                                   | `'center'`               | N    | 标题对齐方式。 |
+| content    | `string`                                                      | 当前语言的 modal.content | N    | 内容。         |
+| showIcon   | `boolean`                                                     | `false`                  | N    | 是否显示图标。 |
+| icon       | [`Icon`](https://stdf.design/#/components?nav=dialog&tab=1)   | `{}`                     | N    | 图标参数。     |
+| showBtn    | `boolean`                                                     | `true`                   | N    | 是否显示按钮。 |
+| btnText    | `string`                                                      | 当前语言的 modal.btnText | N    | 按钮文字。     |
+| button     | [`Button`](https://stdf.design/#/components?nav=dialog&tab=1) | `{}`                     | N    | 按钮参数。     |
+| popup      | [`Popup`](https://stdf.design/#/components?nav=dialog&tab=1)  | `{}`                     | N    | 弹出层参数。   |
 
 ## Modal Events
 
-| 名称  | 参数 | 描述             |
-| ----- | ---- | ---------------- |
-| open  | -    | 弹框打开时触发。 |
-| close | -    | 弹框关闭时触发。 |
+| 名称    | 类型         | 参数 | 描述             |
+| ------- | ------------ | ---- | ---------------- |
+| onclose | `() => void` | -    | 弹框关闭时触发。 |
 
-## Modal Slots
+## Modal Snippets
 
-| 名称 | 描述                                    |
-| ---- | --------------------------------------- |
-| -    | contentSlot 为 true 时的 content 内容。 |
+| 名称         | 类型                                                                | 参数 | 描述                      |
+| ------------ | ------------------------------------------------------------------- | ---- | ------------------------- |
+| contentChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染 content 内容。 |

doc/components/modal/api_en.md

@@ -1,28 +1,26 @@
 ## Modal Props
 
-| Property    | Type    | Default                           | Available Values            | Required | Description                     |
-| ----------- | ------- | --------------------------------- | --------------------------- | -------- | ------------------------------- |
-| visible     | Boolean | false                             | true / false                | N        | Whether the modal is visible    |
-| title       | String  | modal.title in current language   | -                           | N        | The title of the modal          |
-| titleAlign  | String  | 'center'                          | 'left' / 'center' / 'right' | N        | The alignment of the title      |
-| content     | String  | modal.content in current language | -                           | N        | The content of the modal        |
-| contentSlot | Boolean | false                             | true / false                | N        | Whether the content uses a slot |
-| showIcon    | Boolean | false                             | true / false                | N        | Whether to show the icon        |
-| icon        | Object  | {}                                | Refer to Icon Props         | N        | The param of the icon           |
-| showBtn     | Boolean | true                              | true / false                | N        | Whether to show the button      |
-| btnText     | String  | modal.btnText in current language | -                           | N        | The text on the button          |
-| button      | Object  | {}                                | Refer to Button Props       | N        | The param of the button         |
-| popup       | Object  | {}                                | Refer to Popup Props        | N        | The param of the popup          |
+| Name       | Type                                                          | Default                        | Required | Description                |
+| ---------- | ------------------------------------------------------------- | ------------------------------ | -------- | -------------------------- |
+| visible    | `boolean`                                                     | `false`                        | N        | Whether to show the modal. |
+| title      | `string`                                                      | Current language modal.title   | N        | Title text.                |
+| titleAlign | `'left'\|'center'\|'right'`                                   | `'center'`                     | N        | Title alignment.           |
+| content    | `string`                                                      | Current language modal.content | N        | Content text.              |
+| showIcon   | `boolean`                                                     | `false`                        | N        | Whether to show icon.      |
+| icon       | [`Icon`](https://stdf.design/#/components?nav=dialog&tab=1)   | `{}`                           | N        | Icon props.                |
+| showBtn    | `boolean`                                                     | `true`                         | N        | Whether to show button.    |
+| btnText    | `string`                                                      | Current language modal.btnText | N        | Button text.               |
+| button     | [`Button`](https://stdf.design/#/components?nav=dialog&tab=1) | `{}`                           | N        | Button props.              |
+| popup      | [`Popup`](https://stdf.design/#/components?nav=dialog&tab=1)  | `{}`                           | N        | Popup props.               |
 
 ## Modal Events
 
-| Event Name | Parameters | Description                     |
-| ---------- | ---------- | ------------------------------- |
-| open       | -          | Triggered when the modal opens  |
-| close      | -          | Triggered when the modal closes |
+| Name    | Type         | Parameters | Description                  |
+| ------- | ------------ | ---------- | ---------------------------- |
+| onclose | `() => void` | -          | Triggered when modal closes. |
 
-## Modal Slots
+## Modal Snippets
 
-| Slot Name | Description                                          |
-| --------- | ---------------------------------------------------- |
-| -         | The content of `content` when `contentSlot` is true. |
+| Name         | Type                                                                | Parameters | Description                              |
+| ------------ | ------------------------------------------------------------------- | ---------- | ---------------------------------------- |
+| contentChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Render the content when it is passed in. |

doc/components/modal/guide.md

@@ -8,9 +8,9 @@ Modal 弹框组件是在 Popup 基础上封装的，通过预先定义一些 Pop
 
 而 Modal 内部又使用了 Icon 和 Button 组件，可以通过传入 Icon 和 Button 的 Props 来实现不同的效果。比如示例中通过设置 Button 的 radius 自定义按钮的圆角风格。
 
-## content
+## contentChild
 
-Modal 的内容可以通过 content 属性传入，当需要显示复杂内容时，可以将 contentSlot 设置为 true，通过 slot 传入内容，此时 content 会失效。
+Modal 的内容可以通过 contentChild 传入，当需要显示复杂内容时，可以通过 contentChild 渲染，此时 content 会失效。
 
 ## 关闭
 

doc/components/modal/guide_en.md

@@ -8,9 +8,9 @@ The Modal dialog component is based on Popup and is implemented by defining some
 
 Modal also uses the Icon and Button components internally, and different effects can be achieved by passing in the Props of Icon and Button. For example, in the example, the radius of the Button is customized to achieve a custom button style.
 
-## Content
+## ContentChild
 
-The content of the Modal can be passed in through the content property. When complex content needs to be displayed, set contentSlot to true and pass in the content through the slot, at this time content will be invalid.
+The content of the Modal can be passed in through the contentChild property. When complex content needs to be displayed, it can be rendered through contentChild, at this time content will be invalid.
 
 ## Close
 

packages/stdf/components/modal/Modal.svelte

@@ -24,7 +24,6 @@
 		btnText = modalLang.btnText,
 		button = {},
 		contentChild,
-		onopen,
 		onclose,
 	} = $props();
 
@@ -38,16 +37,6 @@
 		visible = false;
 		onclose && onclose();
 	};
-
-	// 监听visible变化并派发事件
-	// Listen to the change of visible and dispatch events
-	$effect(() => {
-		if (visible) {
-			onopen && onopen();
-		} else {
-			onclose && onclose();
-		}
-	});
 </script>
 
 <Popup
@@ -62,12 +51,10 @@
 	px="8"
 	{...popup}
 >
-	<div class={`px-4 pt-4 ${showBtn ? 'pb-2' : 'pb-4'} text-center space-y-4`}>
-		<div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
+	<div class="px-4 pt-4 {showBtn ? 'pb-2' : 'pb-4'} text-center space-y-4">
+		<div class="font-bold{titleAlignClass[titleAlign] || titleAlignClass['center']}">{title}</div>
 		{#if showIcon}
-			<div>
-				<Icon {...icon} />
-			</div>
+			<div><Icon {...icon} /></div>
 		{/if}
 		<div>
 			{#if contentChild}
@@ -77,9 +64,7 @@
 			{/if}
 		</div>
 		{#if showBtn}
-			<div>
-				<Button size="full" {...button} onclick={closeModalFunc}>{btnText}</Button>
-			</div>
+			<div><Button size="full" {...button} onclick={closeModalFunc}>{btnText}</Button></div>
 		{/if}
 	</div>
 </Popup>