@coffic/cosy-ui 0.7.4 → 0.8.6

package/dist/confirm-dialog-vue/Basic.vue

@@ -1,57 +0,0 @@
-<!--
-@component ConfirmDialog.Basic
-
-@description
-ConfirmDialog 组件的基础示例，展示最基本的确认对话框用法。
-
-@usage
-```vue
-<ConfirmDialogExamples.Basic />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import ConfirmDialog from './ConfirmDialog.vue'
-
-export default defineComponent({
-    name: 'ConfirmDialogBasicExample',
-    components: {
-        ConfirmDialog
-    },
-    setup() {
-        const isShow = ref(false)
-        const result = ref('')
-
-        const handleConfirm = () => {
-            result.value = '用户已确认操作'
-
-            // 3秒后清除结果
-            setTimeout(() => {
-                result.value = ''
-            }, 3000)
-        }
-
-        return {
-            isShow,
-            result,
-            handleConfirm
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="cosy:flex cosy:flex-col cosy:gap-4">
-        <button @click="isShow = true" class="cosy:btn cosy:btn-primary">
-            显示确认对话框
-        </button>
-
-        <div v-if="result" class="cosy:alert cosy:alert-success cosy:shadow-lg">
-            <span>{{ result }}</span>
-        </div>
-    </div>
-
-    <ConfirmDialog v-model="isShow" title="确认操作" message="您确定要执行此操作吗？此操作无法撤销。" @confirm="handleConfirm" />
-</template>

package/dist/confirm-dialog-vue/ConfirmDialog.vue

@@ -1,134 +0,0 @@
-<!--
-@component ConfirmDialog
-
-@description
-ConfirmDialog 组件用于显示确认对话框，带有标题、消息内容和两个按钮（确认和取消），支持自定义按钮文本，并带有淡入淡出动画效果。
-
-@usage
-基本用法：
-```vue
-<ConfirmDialog v-model="showDialog" title="确认操作" message="您确定要执行此操作吗？" @confirm="handleConfirm" />
-```
-
-自定义按钮文本：
-```vue
-<ConfirmDialog 
-  v-model="showDialog" 
-  title="删除确认" 
-  message="您确定要删除此项目吗？此操作无法撤销。" 
-  cancel-text="取消" 
-  confirm-text="删除" 
-  @confirm="handleDelete" 
-/>
-```
-
-组合使用：
-```vue
-<template>
-  <button @click="showDialog = true">删除项目</button>
-  <ConfirmDialog v-model="showDialog" title="删除确认" message="此操作无法撤销" @confirm="handleDelete" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ConfirmDialog } from 'cosy-ui';
-
-const showDialog = ref(false);
-const handleDelete = () => {
-  // 处理确认删除逻辑
-};
-</script>
-```
-
-@props
-@prop {boolean} modelValue - 控制对话框显示状态，支持v-model双向绑定
-@prop {string} [title='Confirm'] - 对话框标题
-@prop {string} [message='Are you sure you want to confirm this action?'] - 对话框显示的消息内容
-@prop {string} [cancel-text='取消'] - 取消按钮的文本
-@prop {string} [confirm-text='确认'] - 确认按钮的文本
-
-@emits
-@emit {update:modelValue} - 当对话框关闭时触发，用于更新v-model绑定值
-@emit {confirm} - 当用户点击确认按钮时触发
--->
-
-<template>
-    <Transition name="fade" class="cosy:transition-opacity cosy:duration-200 cosy:ease-in-out">
-        <div v-if="modelValue"
-            class="cosy:fixed cosy:inset-0 cosy:z-50 cosy:flex cosy:items-center cosy:justify-center">
-            <!-- 背景遮罩 -->
-            <div class="cosy:absolute cosy:inset-0 cosy:bg-base-200/80 cosy:backdrop-blur-sm"
-                @click="$emit('update:modelValue', false)" />
-
-            <!-- 对话框 -->
-            <div
-                class="cosy:relative cosy:bg-base-100 cosy:rounded-xl cosy:shadow-xl cosy:w-[400px] cosy:transform cosy:transition-all">
-                <!-- 内容区域 -->
-                <div class="cosy:p-6">
-                    <h3 class="cosy:text-lg cosy:font-medium cosy:text-base-content cosy:mb-2">
-                        {{ title }}
-                    </h3>
-                    <p class="cosy:text-base-content/80">
-                        {{ message }}
-                    </p>
-                </div>
-
-                <!-- 按钮区域 -->
-                <div class="cosy:flex cosy:border-t cosy:border-base-300">
-                    <button class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:rounded-none cosy:rounded-bl-xl"
-                        @click="$emit('update:modelValue', false)">
-                        {{ cancelText }}
-                    </button>
-                    <button
-                        class="cosy:flex-1 cosy:btn cosy:btn-ghost cosy:text-primary cosy:rounded-none cosy:rounded-br-xl cosy:border-l cosy:border-base-300"
-                        @click="handleConfirm">
-                        {{ confirmText }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Transition>
-</template>
-
-<script setup lang="ts">
-import '../../style'
-
-defineProps({
-    modelValue: Boolean,
-    title: {
-        type: String,
-        default: 'Confirm'
-    },
-    message: {
-        type: String,
-        default: 'Are you sure you want to confirm this action?'
-    },
-    cancelText: {
-        type: String,
-        default: '取消'
-    },
-    confirmText: {
-        type: String,
-        default: '确认'
-    }
-})
-
-const emit = defineEmits(['update:modelValue', 'confirm'])
-
-const handleConfirm = () => {
-    emit('update:modelValue', false)
-    emit('confirm')
-}
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>

package/dist/confirm-dialog-vue/CustomButtons.vue

@@ -1,69 +0,0 @@
-<!--
-@component ConfirmDialog.CustomButtons
-
-@description
-展示如何自定义 ConfirmDialog 组件的按钮文本。
-
-@usage
-```vue
-<ConfirmDialogExamples.CustomButtons />
-```
--->
-
-<script lang="ts">
-import '../../app.css'
-import { ref, defineComponent } from 'vue'
-import ConfirmDialog from './ConfirmDialog.vue'
-
-export default defineComponent({
-    name: 'ConfirmDialogCustomButtonsExample',
-    components: {
-        ConfirmDialog
-    },
-    setup() {
-        const isShowDelete = ref(false)
-        const isShowSave = ref(false)
-        const result = ref('')
-
-        const handleConfirm = (action: string) => {
-            result.value = `用户已${action}`
-
-            // 3秒后清除结果
-            setTimeout(() => {
-                result.value = ''
-            }, 3000)
-        }
-
-        return {
-            isShowDelete,
-            isShowSave,
-            result,
-            handleConfirm
-        }
-    }
-})
-</script>
-
-<template>
-    <div class="cosy:flex cosy:flex-col cosy:gap-4">
-        <div class="cosy:flex cosy:gap-4">
-            <button @click="isShowDelete = true" class="cosy:btn cosy:btn-error">
-                删除文件
-            </button>
-
-            <button @click="isShowSave = true" class="cosy:btn cosy:btn-success">
-                保存更改
-            </button>
-        </div>
-
-        <div v-if="result" class="cosy:alert cosy:alert-info cosy:shadow-lg">
-            <span>{{ result }}</span>
-        </div>
-    </div>
-
-    <ConfirmDialog v-model="isShowDelete" title="警告" message="您确定要删除这个文件吗？此操作无法撤销。" cancel-text="取消" confirm-text="删除"
-        @confirm="handleConfirm('删除了文件')" />
-
-    <ConfirmDialog v-model="isShowSave" title="保存更改" message="您的更改尚未保存，确定要保存吗？" cancel-text="稍后再说" confirm-text="保存"
-        @confirm="handleConfirm('保存了更改')" />
-</template>

package/dist/confirm-dialog-vue/index.ts

@@ -1,20 +0,0 @@
-import Basic from './Basic.vue';
-import CustomButtons from './CustomButtons.vue';
-import BasicSource from './Basic.vue?raw';
-import CustomButtonsSource from './CustomButtons.vue?raw';
-import { extractSimpleExample } from '../../utils/component';
-
-// 导出主组件
-export { default as ConfirmDialog } from './ConfirmDialog.vue';
-
-// 导出示例组件
-export const ConfirmDialogExamples = {
-	Basic,
-	CustomButtons,
-};
-
-// 导出示例源代码
-export const ConfirmDialogExampleCodes = {
-	Basic: extractSimpleExample(BasicSource, 'ConfirmDialog'),
-	CustomButtons: extractSimpleExample(CustomButtonsSource, 'ConfirmDialog'),
-};

package/dist/contact/Contact.astro

@@ -1,279 +0,0 @@
----
-/**
- * @component Contact
- *
- * @description
- * Contact 组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。
- * 组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
- *
- * @usage
- * 基本用法：
- * ```astro
- * <Contact
- *   email="contact@company.com"
- *   phone="+1 (555) 123-4567"
- *   address="123 Business St, City, State 12345"
- * />
- * ```
- *
- * 带社交媒体链接：
- * ```astro
- * <Contact
- *   email="contact@company.com"
- *   phone="+1 (555) 123-4567"
- *   address="123 Business St, City, State 12345"
- *   github="https://github.com/company"
- *   twitter="https://twitter.com/company"
- *   facebook="https://facebook.com/company"
- * />
- * ```
- *
- * 带标题和描述：
- * ```astro
- * <Contact
- *   title="联系我们"
- *   description="欢迎随时与我们取得联系"
- *   email="contact@company.com"
- *   phone="+1 (555) 123-4567"
- * />
- * ```
- *
- * 紧凑模式：
- * ```astro
- * <Contact
- *   email="contact@company.com"
- *   phone="+1 (555) 123-4567"
- *   compact
- * />
- * ```
- *
- * @props
- * @prop {string} [title] - 联系信息标题
- * @prop {string} [description] - 联系信息描述
- * @prop {string} [email] - 电子邮件地址
- * @prop {string} [phone] - 电话号码
- * @prop {string} [address] - 地址信息
- * @prop {string} [website] - 网站链接
- * @prop {string} [github] - GitHub链接
- * @prop {string} [twitter] - Twitter链接
- * @prop {string} [facebook] - Facebook链接
- * @prop {string} [linkedin] - LinkedIn链接
- * @prop {boolean} [compact] - 是否使用紧凑模式
- * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
- *
- * @slots
- * @slot default - 额外的联系信息内容
- */
-
-import '../style.ts';
-
-interface Props {
-	title?: string;
-	description?: string;
-	email?: string;
-	phone?: string;
-	address?: string;
-	website?: string;
-	github?: string;
-	twitter?: string;
-	facebook?: string;
-	linkedin?: string;
-	compact?: boolean;
-	class?: string;
-}
-
-const {
-	title,
-	description,
-	email,
-	phone,
-	address,
-	website,
-	github,
-	twitter,
-	facebook,
-	linkedin,
-	compact,
-	class: className = '',
-} = Astro.props;
-
-// 构建联系信息容器样式
-const contactClasses = [
-	'cosy:card',
-	'cosy:w-full',
-	'cosy:bg-base-100',
-	'cosy:shadow-lg',
-	compact ? 'cosy:card-compact' : '',
-	className,
-]
-	.filter(Boolean)
-	.join(' ');
-
-// 内容区域的padding
-const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
-
-// 联系信息项的样式
-const contactItemClass = 'cosy:flex cosy:items-center cosy:gap-3 cosy:mb-4 last:cosy:mb-0';
-const iconClass = 'cosy:w-5 cosy:h-5 cosy:text-primary cosy:flex-shrink-0';
-const linkClass =
-	'cosy:link cosy:link-hover cosy:text-base-content cosy:no-underline hover:cosy:text-primary cosy:transition-colors';
-
-// 社交媒体链接样式
-const socialLinksClass =
-	'cosy:flex cosy:gap-4 cosy:mt-6 cosy:pt-4 cosy:border-t cosy:border-base-300';
-const socialLinkClass =
-	'cosy:btn cosy:btn-ghost cosy:btn-circle cosy:btn-sm cosy:text-base-content hover:cosy:text-primary hover:cosy:bg-primary/10';
----
-
-<div class={contactClasses}>
-	<div class={`cosy:card-body ${contentPadding}`}>
-		{title && <h2 class="cosy:card-title cosy:text-2xl cosy:font-bold cosy:mb-2">{title}</h2>}
-
-		{description && <p class="cosy:text-base-content/70 cosy:mb-6">{description}</p>}
-
-		<div class="cosy:space-y-0">
-			{
-				email && (
-					<div class={contactItemClass}>
-						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-							/>
-						</svg>
-						<a href={`mailto:${email}`} class={linkClass}>
-							{email}
-						</a>
-					</div>
-				)
-			}
-
-			{
-				phone && (
-					<div class={contactItemClass}>
-						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
-							/>
-						</svg>
-						<a href={`tel:${phone}`} class={linkClass}>
-							{phone}
-						</a>
-					</div>
-				)
-			}
-
-			{
-				address && (
-					<div class={contactItemClass}>
-						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-							/>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-							/>
-						</svg>
-						<span class="cosy:text-base-content">{address}</span>
-					</div>
-				)
-			}
-
-			{
-				website && (
-					<div class={contactItemClass}>
-						<svg class={iconClass} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-							/>
-						</svg>
-						<a href={website} target="_blank" rel="noopener noreferrer" class={linkClass}>
-							{website.replace(/^https?:\/\//, '')}
-						</a>
-					</div>
-				)
-			}
-		</div>
-
-		{
-			Astro.slots.has('default') && (
-				<div class="cosy:mt-4">
-					<slot />
-				</div>
-			)
-		}
-
-		{
-			(github || twitter || facebook || linkedin) && (
-				<div class={socialLinksClass}>
-					{github && (
-						<a
-							href={github}
-							target="_blank"
-							rel="noopener noreferrer"
-							class={socialLinkClass}
-							title="GitHub">
-							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-							</svg>
-						</a>
-					)}
-
-					{twitter && (
-						<a
-							href={twitter}
-							target="_blank"
-							rel="noopener noreferrer"
-							class={socialLinkClass}
-							title="Twitter">
-							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
-							</svg>
-						</a>
-					)}
-
-					{facebook && (
-						<a
-							href={facebook}
-							target="_blank"
-							rel="noopener noreferrer"
-							class={socialLinkClass}
-							title="Facebook">
-							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
-							</svg>
-						</a>
-					)}
-
-					{linkedin && (
-						<a
-							href={linkedin}
-							target="_blank"
-							rel="noopener noreferrer"
-							class={socialLinkClass}
-							title="LinkedIn">
-							<svg class="cosy:w-5 cosy:h-5" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
-							</svg>
-						</a>
-					)}
-				</div>
-			)
-		}
-	</div>
-</div>
-

package/dist/contact/EContactBasic.astro

@@ -1,15 +0,0 @@
----
-/**
- * @component Contact.Basic
- *
- * @description
- * 基础Contact组件示例，展示最简单的联系信息用法。
- */
-import Contact from './Contact.astro';
----
-
-<Contact
-	email="contact@company.com"
-	phone="+1 (555) 123-4567"
-	address="123 Business St, City, State 12345"
-/>

package/dist/contact/EContactBasicContainer.astro

@@ -1,12 +0,0 @@
----
-import { CodeContainer } from '../index';
-import ContactBasic from './EContactBasic.astro';
-import ContactBasicSourceCode from './EContactBasic.astro?raw';
----
-
-<CodeContainer codes={[ContactBasicSourceCode]}>
-	<div id="tab-1">
-		<ContactBasic />
-	</div>
-</CodeContainer>
-

package/dist/contact/EContactCompact.astro

@@ -1,12 +0,0 @@
----
-/**
- * @component Contact.Compact
- *
- * @description
- * 紧凑模式的Contact组件示例。
- */
-import Contact from './Contact.astro';
----
-
-<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />
-

package/dist/contact/EContactCompactContainer.astro

@@ -1,12 +0,0 @@
----
-import { CodeContainer } from '../index';
-import ContactCompact from './EContactCompact.astro';
-import ContactCompactSourceCode from './EContactCompact.astro?raw';
----
-
-<CodeContainer codes={[ContactCompactSourceCode]}>
-	<div id="tab-1">
-		<ContactCompact />
-	</div>
-</CodeContainer>
-

package/dist/contact/EContactCustomStyle.astro

@@ -1,22 +0,0 @@
----
-/**
- * @component Contact.CustomStyle
- *
- * @description
- * 展示如何使用class属性自定义Contact组件的样式。
- */
-import '../style.ts';
-import Contact from './Contact.astro';
----
-
-<Contact
-	title="联系我们"
-	description="自定义样式的联系信息卡片"
-	email="contact@company.com"
-	phone="+1 (555) 123-4567"
-	address="123 Business St, City, State 12345"
-	github="https://github.com/company"
-	twitter="https://twitter.com/company"
-	class="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50 cosy:border-2 cosy:border-blue-200 cosy:shadow-2xl"
-/>
-

package/dist/contact/EContactCustomStyleContainer.astro

@@ -1,12 +0,0 @@
----
-import { CodeContainer } from '../index';
-import ContactCustomStyle from './EContactCustomStyle.astro';
-import ContactCustomStyleSourceCode from './EContactCustomStyle.astro?raw';
----
-
-<CodeContainer codes={[ContactCustomStyleSourceCode]}>
-	<div id="tab-1">
-		<ContactCustomStyle />
-	</div>
-</CodeContainer>
-

package/dist/contact/EContactSocial.astro

@@ -1,21 +0,0 @@
----
-/**
- * @component Contact.Social
- *
- * @description
- * 带社交媒体链接的Contact组件示例。
- */
-import Contact from './Contact.astro';
----
-
-<Contact
-	title="联系我们"
-	email="contact@company.com"
-	phone="+1 (555) 123-4567"
-	website="https://www.company.com"
-	github="https://github.com/company"
-	twitter="https://twitter.com/company"
-	facebook="https://facebook.com/company"
-	linkedin="https://linkedin.com/company/company"
-/>
-

package/dist/contact/EContactSocialContainer.astro

@@ -1,12 +0,0 @@
----
-import { CodeContainer } from '../index';
-import ContactSocial from './EContactSocial.astro';
-import ContactSocialSourceCode from './EContactSocial.astro?raw';
----
-
-<CodeContainer codes={[ContactSocialSourceCode]}>
-	<div id="tab-1">
-		<ContactSocial />
-	</div>
-</CodeContainer>
-